选项卡栏上的两个颜色项目,Swift

Two color items on Tab Bar, Swift

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

(我是swift的初学者)

我想达到的目标:

我想为处于活动状态和非活动状态的每个项目设置类似白色背景的东西。

-> 我想要的示例


目前我尝试过的:

我一直在尝试使用具有透明度、白色和黑色的 png,但似乎任何不是透明像素的东西都被视为相同的颜色。 (我使用的资产呈现为整个彩色图像,而不是区分黑白)

-> 我认为有用的资源


我认为是这样,但不知道如何:

(这是一个假设)

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

-> Layer 1 和 Layer 2 的两个资产


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

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

欢迎提出以更优雅的方式实现此目的的建议。

谢谢 :)

子类化 TabbarviewController,并设置颜色:

tabBar.tintColor = .red

我可能只会用石英画这个。这是一个非常简单的向量,只需几行代码就可以轻松完成。它还会对状态的变化做出反应并相应地更新。请参阅下面的示例 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()
    }
}

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

当然,微调我使用的值以完全匹配您的设计。另请注意,我对值进行了硬编码,您可以根据整体尺寸的比例来确定框架,以获得更好的可重用性。

希望对您有所帮助!

谢谢大家的帮助。

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

渲染为模板:

默认情况下,将图像呈现为模板。 (您可以拍摄任何图像并以编程方式为其着色,但它无法识别是否有超过 1 种颜色)

渲染为原始:

另一种模式,按原样呈现图像。所以它实际上可以识别它是否有超过一种颜色并保留它们。这允许您拥有多种颜色的标签栏项目。


这个属性怎么修改?

程序化:

(作为属性)

tabBarItem.image = tabBarImage.withRenderingMode(.alwaysOriginal)

//or

tabBarItem.image = tabBarImage.withRenderingMode(.alwaysTemplate)

通过界面生成器:

1.资产文件夹,2.Select一个资产,3.属性检查器

渲染为:默认、原始图像、模板图像。