标签栏上的两个颜色项目，Swift

Question

是否可以在标签栏上设置两种颜色的项目？

（我是swift的初学者）

我想要实现的目标：

我希望在活动和非活动状态下为每个项目提供类似白色背景的东西。

- >我想要的例子

---

到目前为止我尝试过的：

我一直在尝试使用透明度，白色和黑色的png，但似乎不是透明像素的任何颜色被视为相同的颜色。 （我正在处理的资产被渲染为整个彩色图像，而不是区分黑白）

- >资产我认为它会起作用

---

我认为它的方式但不知道如何：

（这是假设）

我认为这可以通过在背景中设置非活动项目（第一层，白色）和活动项目（第二层，黑色）在相同的坐标中设置我想要更改的颜色：

- >第1层和第2层的两个资产

---

我正在使用带有故事板引用的故事板来为活动和非活动状态的资产设置初始配置。

我正在以编程方式设置活动状态颜色。

欢迎以更优雅的方式实现这一目标的建议。

谢谢 ：）

Answer 1

对TabbarviewController进行子类化，并设置颜色：

tabBar.tintColor = .red

Answer 2

我可能只是用石英画出来的。这是一个非常简单的向量，很容易用几行代码完成。它还会对状态的变化作出反应并相应地更新。请参阅下面的示例UIView，它正是这样做的：

class TabIcon: UIView {

    var enabled: Bool = false {
        didSet {
            setNeedsDisplay()
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .clear
        self.isOpaque = false
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {

        super.draw(rect)

        let ctx = UIGraphicsGetCurrentContext()

        ctx?.setFillColor(UIColor.white.cgColor)
        ctx?.addEllipse(in: rect)
        ctx?.fillPath()

        ctx?.setFillColor(enabled ? UIColor.purple.cgColor : UIColor.lightGray.cgColor)
        ctx?.addEllipse(in: CGRect(x: rect.minX + 5, y: rect.minY + 5, width: rect.width - 10, height: rect.height - 10))
        ctx?.fillPath()

        ctx?.setFillColor(UIColor.white.cgColor)
        ctx?.addEllipse(in: CGRect(x: rect.minX + 15, y: rect.minY + 15, width: rect.width - 30, height: rect.height - 30))
        ctx?.fillPath()
    }
}

您所要做的就是使用此视图作为选项卡图标，在选中启用属性时更改启用的属性将自动触发重绘。结果如下：

当然，微调我用来完全匹配你的设计的值。另请注意，我有硬编码的值，您可以根据整体大小的比例确定您的帧，以获得更好的可重用性。

希望这可以帮助！

Answer 3

感谢大家的帮助。

受@Jake link的启发，我一直在搜索，发现Xcode有不同的模式来渲染图像资源。

渲染为模板：

默认的一个，将图像呈现为模板。 （您可以采用任何图像并以编程方式对其进行着色，但它无法识别是否有多于1种颜色）

渲染为原始：

另一种模式，按原样呈现图像。所以它实际上识别它是否有超过1种颜色并让它们保持这种状态。这允许您使用多种颜色的标签栏项目。

---

如何修改此属性？

编程方式：

（作为财产）

tabBarItem.image = tabBarImage.withRenderingMode(.alwaysOriginal)

//or

tabBarItem.image = tabBarImage.withRenderingMode(.alwaysTemplate)

通过Interface Builder：

1.资产文件夹，2。选择资产，3。属性检查器

渲染为：默认，原始图像，模板图像。