xcode 情节提要将文本定位在按钮内的图像下方

4urapxun  于 2022-11-26  发布在  其他
关注(0)|答案(9)|浏览(235)

我可以设置按钮的图像和文本。但它是水平对齐的。我希望图像和文本在按钮内部垂直对齐。即,文本在图像下方
如何使用故事板进行这些更改?
我想要的是:

我现在得到的是:

7rtdyuoh

7rtdyuoh1#

如果您正在寻找类似这样的输出

1)选择按钮并转到故事板中的属性检查器,以获得按钮大小为50*50的结果

2)现在设置按钮的标题插入

e4yzc0pl

e4yzc0pl2#

我已经写了一个扩展,为您做的工作,Swift 4兼容。

public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}

其中spacing是图像和文本之间的距离。

aiazj4mn

aiazj4mn3#

是的,你也可以从故事板上做,而不需要写任何逻辑。
1)选择按钮并转到情节提要中的Attribute Inspector
2)为按钮指定图像。(不使用背景图像)
3)将“标题文本”设置为该按钮。
4)现在你需要设置edgeInset,所以首先从边缘选择图像,并根据需要设置插图,然后从边缘选择标题,并根据需要设置插图。
希望这对你有帮助。

hjzp0vay

hjzp0vay4#

您可以使用Button的Edge属性,从**属性窗口(属性检查器)**轻松直观地实现对齐。您可以根据需要更改TitleImageinset值,请参见下图

希望能有所帮助。
干杯干杯干杯

jdg4fx2g

jdg4fx2g5#

Swift 4.2兼容代码就在这里,你只需要调用这个函数

public extension UIButton
  {

    func alignTextUnderImage(spacing: CGFloat = 6.0)
    {
        if let image = self.imageView?.image
        {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsets(top: spacing, left: -imageSize.width, bottom: -(imageSize.height), right: 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }
    }
}
laawzig2

laawzig26#

高雅的

func alignTextUnderImage(spacing: CGFloat = 6.0) {
    guard let image = imageView?.image, let label = titleLabel,
      let string = label.text else { return }

      titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
      let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
      imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
  }
hl0ma9xz

hl0ma9xz7#

在故事板中设置Attribute Inspector
1.设置按钮大小
1.设置图像顶部
1.设置标题的左上角

x6h2sr28

x6h2sr288#

Thank you @rbiard。当您开发多语言移动的应用程序并使用UISemanticContentAttribute(从右到左和从左到右)时的另一种解决方案。这应该可以工作:

func alignTextBelow(spacing: CGFloat = 10.0) {
    guard
        let image = imageView?.image,
        let label = titleLabel,
        let string = label.text
    else { return }

    let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
    
    //when the selected language is English
    if L102Language.currentAppleLanguage() == "en" {      
        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0)
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    } else {
        //When selecting a right to left language. For example, Arabic            
        titleEdgeInsets = UIEdgeInsets(top: spacing, left: 0, bottom: -image.size.height, right: -image.size.width)
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -titleSize.width, bottom: 0, right: 0)
    }
}
l3zydbqr

l3zydbqr9#

您不能直接在UIButton中更改布局,但可以尝试在UIButton上使用以下属性:

UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);

如果这没有帮助,我建议从UIResponder创建子类,并根据需要创建自己的组件和布局。

相关问题