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

Question

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

（我是swift的初学者）

我想要实现的目标：

我希望在活动和非活动状态下为每个项目提供一些白色背景。

- ＆GT;我想要的例子

到目前为止我尝试了什么：

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

- ＆GT;资产我认为它会起作用

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

（这是一个假设）

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

- ＆GT;第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。属性检查器

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