Question

我正在尝试在UIButton的左侧和右侧添加图像。我已经进行了研究，尽管有很多解决方案，但我仍然无法为我工作。

我需要能够：

显示或隐藏一个或两个图标
根据其他逻辑自定义图标的颜色
以内容为中心

布局为：外部填充+左侧图标+内部填充+标签+填充+右侧图标+右侧填充

这是我最近来的，但不要在所有方框中打勾。我将以下代码作为UIButton的扩展：

func leftImage(image: UIImage, padding: CGFloat, renderMode: UIImage.RenderingMode) {
    self.setImage(image.withRenderingMode(renderMode), for: .normal)
    contentHorizontalAlignment = .center
    let availableSpace = bounds.inset(by: contentEdgeInsets)
    let availableWidth = availableSpace.width - imageEdgeInsets.right - (imageView?.frame.width ?? 0) - (titleLabel?.frame.width ?? 0)
    titleEdgeInsets = UIEdgeInsets(top: 0, left: availableWidth / 2, bottom: 0, right: 0)
    imageEdgeInsets = UIEdgeInsets(top: 0, left: padding, bottom: 0, right: 0)
}

func rightImage(image: UIImage, padding: CGFloat, renderMode: UIImage.RenderingMode){
    self.setImage(image.withRenderingMode(renderMode), for: .normal)
    semanticContentAttribute = .forceRightToLeft
    contentHorizontalAlignment = .center
    let availableSpace = bounds.inset(by: contentEdgeInsets)
    let availableWidth = availableSpace.width - imageEdgeInsets.left - (imageView?.frame.width ?? 0) - (titleLabel?.frame.width ?? 0)
    titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: availableWidth / 2)
    imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: padding)
}

当前，此代码存在的问题是： 1.不能在色调样式之外更改图标颜色 2.渲染的布局不正确 3.我只能显示左侧或右侧图标，但不能同时显示

如果我调用leftImage方法，则会得到以下结果：

如果我调用rightImage方法，则会得到以下结果：

如果我两个都叫，我会得到：

如果不清楚，我事先表示歉意，我对这一切还是陌生的。

Answer 1

无法更改色调样式之外的图标颜色2.渲染布局不正确3.我只能显示左侧或右侧图标，但不能同时显示

好吧，1是因为您没有指定要将此图像的渲染模式设置为.alwaysOriginal。 3是因为一个按钮只有一个图像。

2是因为您要执行的操作很困难，因为您要使框架执行它不希望执行的操作。

如果我是您，我会放弃尝试使按钮的图标 part 成为一个单独的图标按钮图标，作为三个单独的视图。如果您真的要把这全部设为一个按钮，则必须使用该按钮的背景图像，将其实时绘制为正确的大小以包含所需的图标。

Answer 2

@matt的建议，并具有以下代码：

        // LEFT IMAGE
        let newLeftItemToAdd = UIImageView(image: #imageLiteral(resourceName: "star"))
        myButton.addSubview(newLeftItemToAdd)

        //Sizing
        newLeftItemToAdd.width(20)
        newLeftItemToAdd.height(20)

        //Vertical positioning
        newLeftItemToAdd.centerYToSuperview()

        //Horizontal positioning
        let padding = 10.0
        newLeftItemToAdd.rightToLeft(of: myButton.titleLabel!, offset: CGFloat(-padding), isActive: true)

        //Change color
        newLeftItemToAdd.setImageColor(color: .green)

        // RIGHT IMAGE
        let newRightItemToAdd = UIImageView(image: #imageLiteral(resourceName: "star"))
        myButton.addSubview(newRightItemToAdd)

        //Sizing
        newRightItemToAdd.width(20)
        newRightItemToAdd.height(20)

        //Vertical positioning
        newRightItemToAdd.centerYToSuperview()

        //Horizontal positioning
        newRightItemToAdd.leftToRight(of: myButton.titleLabel!, offset: CGFloat(padding), isActive: true)

        //Change color
        newRightItemToAdd.setImageColor(color: .orange)

这现在可以完美运行，并且可以根据需要灵活地更改每个图标的颜色。

我还创建了UIImageview的扩展以提供更大的灵活性：

extension UIImageView {
    func setImageColor(color: UIColor) {
        let templateImage = self.image?.withRenderingMode(.alwaysTemplate)
        self.image = templateImage
        self.tintColor = color
    }
}

这是最终结果：

以编程方式将左右图像添加到UIButton

2 个答案: