【问题标题】:Align button image to right edge of UIButton将按钮图像与 UIButton 的右边缘对齐
【发布时间】:2015-11-28 16:36:05
【问题描述】:

有很多关于根据标题文本对齐按钮图像的线程,但我找不到任何关于将图像与按钮右侧对齐的信息。

这没有效果:

button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 50);

如何右对齐按钮的图像?可以在 Storyboard 中完成吗?

【问题讨论】:

  • 如果你的目标是 iOS 9,你可以do it like this
  • 不是重复的。我不在乎标题文本。我只希望图像与按钮的框架正确对齐。
  • @Fonix 我需要支持 iOS 8。

标签: ios xcode uibutton uiimage uiedgeinsets


【解决方案1】:

将 UIButton 扩展用于右侧图像

extension UIButton {
    func imageToRight() {
        transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    }
}

如何使用

yourButton.imageToRight()

【讨论】:

    【解决方案2】:

    SWIFT 5

    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: (bounds.width - 16), bottom: 0, right: 0)
    

    【讨论】:

      【解决方案3】:

      这对我有用

      btn.imageView?.translatesAutoresizingMaskIntoConstraints = false
      btn.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
      btn.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
      

      【讨论】:

        【解决方案4】:

        通过设置这对我有用:

        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
        

        然后对于内部图像,我将右插图设置为 0。

        button.imageEdgeInsets = UIEdgeInsetsMake(10.0, 10.0, 10.0, 0);
        

        【讨论】:

          【解决方案5】:

          它对我有用:

          self.acceptButton.setImage(UIImage(named: image), for: UIControl.State.normal)
          self.acceptButton.semanticContentAttribute = .forceRightToLeft
          self.acceptButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 9, bottom: 0, right: 0)
          

          【讨论】:

            【解决方案6】:

            要将图像右对齐,“语义”选项似乎是最好的,“强制从右到左”。 此外,我还想补充一件事。您可以通过此选项保持按钮图像的形状。

            【讨论】:

              【解决方案7】:

              就像这样:

              btn.imageView?.translatesAutoresizingMaskIntoConstraints = false
              btn.imageView?.centerYAnchor.constraint(equalTo: btn.centerYAnchor, constant: 0.0).isActive = true
              btn.imageView?.trailingAnchor.constraint(equalTo: btn.trailingAnchor, constant: 0.0).isActive = true
              btn.imageView?.contentMode = .right
              

              【讨论】:

                【解决方案8】:

                简单的方法

                使用扩展在右侧使用自定义偏移设置图像

                   extension UIButton {
                    func addRightImage(image: UIImage, offset: CGFloat) {
                        self.setImage(image, for: .normal)
                        self.imageView?.translatesAutoresizingMaskIntoConstraints = false
                        self.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
                        self.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -offset).isActive = true
                    }
                }
                

                【讨论】:

                  【解决方案9】:

                  试试下面的代码:

                  btn.contentHorizontalAlignment = .right
                  

                  【讨论】:

                  • 它被否决了,因为 OP 正在询问如何让图像出现在文本之后,这就是将图像与按钮的右边缘对齐的意思。这只会使图像和文本向右对齐,但它没有 OP 想要的效果。如果您查看其他答案,您就会明白他们在做什么
                  • @derickito 如果您看到这个答案已经帮助了这里的许多用户。虽然它不是 100% 相关的,但也不是 100% 没用的。请建议更改而不是投反对票!
                  • 虽然它很有帮助并且您可以使用,但它不合适。仅仅因为是一个有用的答案并不意味着它属于这个问题的答案。正在寻找实际问题答案的人会被误导,认为这会解决问题,但实际上并不能解决问题。不知道你是否理解。除了删除这个答案之外,我没有什么可以建议的。
                  • 我们有时可能不清楚我们的确切要求,或者可能会寻求相关帮助,但根据经验我可以清楚地说新用户可能无法提出问题对于明确的要求,这个答案会对他们有所帮助。否则,没有人会赞成这个答案,并会评论以获得更好的答案或报告误导。
                  • 我认为您不了解 StackOverflow 的工作原理。离题答案永远无效。如果您认为这是一个可以帮助人们的答案,您应该创建自己的问题,然后将这个答案放在那里。你的回答并不能帮助我解决原来的问题。这就是你被否决的原因。
                  【解决方案10】:

                  有几种不同的选择。

                  使用semanticContentAttribute

                  button.semanticContentAttribute = .forceRightToLeft
                  

                  您也可以从界面(故事板)布局中设置语义属性。


                  使用包含 UIButton 和 UIImage 的 UIView,如此快照所示。

                  • 在 UIView 中设置图像右侧并禁用用户交互,因此用户操作/点击将传递给按钮。
                  • 在UIView中添加与UIView大小相同的按钮,背景色透明,覆盖Image。
                  • 设置按钮的内容偏移量,如此快照所示。

                  这将使处理按钮操作、属性和根据您的要求自定义图像位置和大小变得容易。试试这个。

                  【讨论】:

                  • 有没有办法定义一个填充来补充semanticContentAttribute 属性?根据我按钮中的文本,图像可能正在触摸文本,也可能远离文本。
                  【解决方案11】:

                  在 Swift 中做到这一点的简洁方式

                  button.semanticContentAttribute = .forceRightToLeft
                  

                  希望对你有帮助

                  【讨论】:

                    【解决方案12】:

                    将其设为默认语义,即未指定或强制从左到右

                    并在 button.imageEdgeInsets 中将其设置为

                    UIEdgeInsets(top: 0, left: self.view.frame.size.width - (图片尺寸+对齐空间), bottom: 0, right: 0)

                    这将确保无论视图大小如何,它都会始终从按钮右侧对齐图像

                    【讨论】:

                    • *强制从右到左,对齐空间我的意思是一些常数,比如 10.0,所以它不会紧贴视图的左角
                    • 美观又简单。
                    【解决方案13】:

                    我发现了一个棘手的方法 更新 Button 的 UIImageView 的约束

                    试试这个

                    button.imageView?.trailingAnchor.constraint(equalTo: button.trailingAnchor, constant: -8.0).isActive = true
                    button.imageView?.centerYAnchor.constraint(equalTo: button.centerYAnchor, constant: 0.0).isActive = true
                    

                    但不要忘记添加它以使约束生效

                    button.translatesAutoresizingMaskIntoConstraints = false
                    button.imageView?.translatesAutoresizingMaskIntoConstraints = false
                    

                    【讨论】:

                    • EZ。谢谢。尝试检查 UIButton 的 imageView 是否已经有约束但没有找到。这是最后一个选项,如果您希望 imageView 粘贴在按钮的某一侧而不依赖于标题。
                    • 好主意西蒙
                    【解决方案14】:

                    语义:在视图中强制从右到左对我有用

                    【讨论】:

                    • 谢谢哥们!!工作对我来说就像一个魅力!
                    【解决方案15】:

                    故事板

                    属性选项卡 > 确保为“图像”选择了内容边缘选项卡:

                    然后你改变了'Left'属性不正确,这就是你以编程方式做的事情。所以换句话说,你从左边填充它 n

                    UIEdgeInsetsMake = TOP |左 |底部 |对

                    以编程方式:

                    button.imageEdgeInsets = UIEdgeInsetsMake(0, 100, 0, 0);
                    

                    注意:您可能还需要更改标题插图,具体取决于它与您的图片相关的位置

                    【讨论】:

                    • 感谢您的建议。这会使图像从左侧缩进。换句话说,当所有 4 个值都为 0 时,图像是左对齐的。如果我增加“左”插图值,图像会从左边缘移开。这无济于事,因为我需要将图像固定在右边缘,这样无论按钮伸展多宽,它都会保持右对齐。
                    • @soleil 对。据我所知,不能用系统按钮关闭,但我真的知道什么。我只是使用它,因为这是您作为示例提供的,作为您尝试过的东西。你是对的,对于各种宽度来说不是一个好的解决方法,但对于静态宽度来说很好。
                    • 其实。 @soleil 只需将左侧插入 self.button.frame.size.width - widthOfImage 或其他内容。
                    • @soleil 不。漠视。妄想。这可能只适用于左对齐的内容。你的很可能和其他人一样居中。
                    • @soleil。是的,试试吧。我要上床睡觉了,但尝试在故事板中将内容对齐到左侧,然后将左侧插图设置为上面提到的那个。听起来不错
                    猜你喜欢
                    • 1970-01-01
                    • 2014-10-18
                    • 2017-10-07
                    • 2014-07-18
                    • 1970-01-01
                    • 2020-04-02
                    • 1970-01-01
                    • 2011-02-05
                    • 2022-01-16
                    相关资源
                    最近更新 更多