ios 使用自动布局约束使图像和文本垂直对齐的按钮

pxiryf3j  于 2023-05-19  发布在  iOS
关注(0)|答案(8)|浏览(171)

我对IOS开发和AutoLayout非常陌生。我面临的问题,以调整图像和文字内的UI按钮使用情节串联板。我曾经尝试过用TitleEdgeinset和ImageEdge insets来实现它,从而将标题(文本)垂直居中放置在图像下方。但问题是我有3个类似的按钮,它们是垂直堆叠的(StackView),文本是动态设置的,因为我们有本地化的字符串(包括阿拉伯语rtl)。图像和文本根据文本长度移动。有没有什么方法,我可以实现使所有的按钮与图像和文字垂直aligned。此外,不同的屏幕分辨率目前不工作,如果使用边缘插入。感谢你的帮助。先谢谢你了。

5ktev3wc

5ktev3wc1#

前几天,我解决了类似的问题,试试这个

private func adjustImageAndTitleOffsetsForButton (button: UIButton) {

    let spacing: CGFloat = 6.0

    let imageSize = button.imageView!.frame.size

    button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width, -(imageSize.height + spacing), 0)

    let titleSize = button.titleLabel!.frame.size

    button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0, 0, -titleSize.width)
}

为每个按钮调用此方法,如

self.adjustImageAndTitleOffsetsForButton(yourButton)
jyztefdp

jyztefdp2#

结合Ajay和Matej的回答:

import Foundation
import UIKit
class VerticalButton: UIButton {
override func awakeFromNib() {
    super.awakeFromNib()
    self.contentHorizontalAlignment = .left
}

override func layoutSubviews() {
    super.layoutSubviews()
    centerButtonImageAndTitle()
}

private func centerButtonImageAndTitle() {
    let titleSize = self.titleLabel?.frame.size ?? .zero
    let imageSize = self.imageView?.frame.size  ?? .zero
    let spacing: CGFloat = 6.0
    self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing),left: 0, bottom: 0, right:  -titleSize.width)
    self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageSize.width, bottom: -(imageSize.height + spacing), right: 0)
 }
}
6psbrbz9

6psbrbz93#

我修改了Ajay's answer,因为我的图像没有居中:

func centerButtonImageAndTitle(button: UIButton) {
  let spacing: CGFloat = 5
  let titleSize = button.titleLabel!.frame.size
  let imageSize = button.imageView!.frame.size

  button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageSize.width, bottom: -(imageSize.height + spacing), right: 0)
  button.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -imageSize.width/2, bottom: 0, right: -titleSize.width)
}
4dbbbstv

4dbbbstv4#

这是一个对我有效的解决方案。只需在storyboard中将button类设置为HorizontallyCenteredButton,并根据您的需要设置标题和图像的顶部和底部insets(将图像放置在高于标题的位置),按钮将自动调整水平insets,以便图像在标题上方居中。

class HorizontallyCenteredButton: LocalizedButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.contentHorizontalAlignment = .left
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.centerButtonImageAndTitle()
    }

    func centerButtonImageAndTitle() {
        let size = self.bounds.size
        let titleSize = self.titleLabel!.frame.size
        let imageSize = self.imageView!.frame.size

        self.imageEdgeInsets = UIEdgeInsets(top: self.imageEdgeInsets.top, left: size.width/2 - imageSize.width/2, bottom: self.imageEdgeInsets.bottom, right: 0)
        self.titleEdgeInsets = UIEdgeInsets(top: self.titleEdgeInsets.top, left: -imageSize.width + size.width/2 - titleSize.width/2, bottom: self.titleEdgeInsets.bottom, right: 0)
    }
}
pod7payv

pod7payv5#

要垂直对齐所有按钮,请首先选择按钮,然后单击脚本右下角标题为“对齐”的按钮,最后在出现的菜单中选择“垂直居中”。应该可以了。

yftpprvb

yftpprvb6#

我创建了一个视图,然后把一个VStack与图像和文本,以及按钮。确保VStack约束在所有4个侧面上都为0,以便覆盖按钮:)

vpfxa7rd

vpfxa7rd7#

如果您使用的是iOS 15.0,则可以用途:

// Create a button
let button = UIButton(type: .custom)
        
// Configure the button using UIButton.Configuration
var config = UIButton.Configuration.filled()
config.titlePadding = 10
config.imagePlacement = .top // this is whats makes the magic
config.imagePadding = 10
button.configuration = config
i7uaboj4

i7uaboj48#

这是一个简单的,所以道歉,如果你已经尝试过了!
你不需要为insets设置任何东西,只要确保3个按钮与水平中心对齐即可。

选择你想要对齐的控件,点击下面高亮显示的按钮(xCode屏幕右下角),选择垂直中心选项将三个控件相互对齐,或者选择容器中的水平将它们放在视图的中间。

相关问题