iOS 项目中的多主题颜色设计与实现

news2024/9/29 0:28:33

引言

在现代iOS应用中,用户对个性化体验的需求越来越高,除了功能上的满足,多样的视觉风格也是提升用户体验的重要手段之一。提供多主题颜色的切换功能不仅能满足用户的审美偏好,还可以让应用更具活力,适应不同场景下的使用需求。列好的主题切换设计能提升应用的整体品质。

在这篇博客中,我将分享一个简单而灵活的多主题颜色管理方案,我们将通过使用工厂模式和协议的组合,实现不同主题颜色的管理与切换功能。无论是为应用提供个性化的主题颜色,还是为了后续的主题扩展,这种设计都能为项目带来更好的可维护性和扩展性。

主题颜色切换架构概述

为了实现多主题颜色管理,我们采用了工厂模式与协议模式的组合。通过定义个通用的颜色协议(ZMColorFactory),我们可以为不同的主题提供一致的接口,同时保证代码的灵活性和可扩展性。每个主题的颜色实现由独立的工厂类负责,根据用户选择或应用内的设置来动态切换主题。这种设计不仅能有效地管理不同的主题颜色,还可以轻松扩展未来的新主题。

项目额整体架构可以分为以下几部分:

颜色工厂协议

颜色工厂协议定义了不同主题颜色所需的接口,例如主题颜色,文字颜色等。所有的颜色工厂都应该遵循该协议,确保各个主体能够提供一致的颜色属性。

颜色工厂

每个主题的颜色工厂类实现了颜色工厂的协议,提供具体的颜色值。例如,红色主题工厂提供红色的主题颜色,而蓝色的主题工厂则提供蓝色的主题和文字颜色。

主题管理器

主题管理器是整个架构的核心,负责根据用户选择或系统设置来切换主题。通过主题管理器,我们可以动态地从不同的颜色工厂中获取当前主题的颜色。

主题切换功能

主题管理器能够根据用户偏好或者其它逻辑比如启动时的默认主题,在不同的颜色工厂之间切换。当主题切换时,应用的颜色会即时更新,提升用户体验。

主题颜色切换文件介绍

主题枚举

在我们实现多主题管理的过程中,首先需要定义一个枚举来表示不同的主题类型。在ZMTheme文件中,我们定义了一个ZMTheme枚举,用于列举所有可用的主题。为了简化示例代码,我们只定义了两个主题:红色和蓝色。当然实际项目中可以根据需求添加更多主题。

enum ZMTheme {
    /// 红色主题
    case red
    /// 蓝色主题
    case blue
}

这个枚举将用于在应用中表示用户所选择的主题,并通过主题管理器根据该枚举值来切换不同的主题工厂,从而实现主题颜色的动态更新。

颜色工厂协议

为了确保每个主题能够提供一致的颜色方案,我们定义了一个颜色工厂协议ZMColorFactory。这个协议为每个主题提供了统一的接口,规定了所有主题都必须包含的颜色属性。通过这种方式,不同主题可以根据各自的风格实现自己的颜色,但依然遵循同样的接口,从而保证在应用中不同主题的颜色切换能够无缝衔接。

ZMColorFactory协议的定义如下:

protocol ZMColorFactory {
    /// 主题的主色调
    var themeColor: UIColor { get }
    /// 标题文字颜色
    var titleColor: UIColor { get }
    ....
}

同样为了简洁我们在协议中定义了两个基本的颜色属性:

  1. themeColor:每个主题的主色调,通常用于页面的导航栏,按钮颜色等等。
  2. titleColor:用于显示大标题文字的颜色。

通过这个协议,我们可以确保每个主题工厂都能提供这些颜色属性。这样,在后续的主题工厂实现中,不同的主题只需要实现这个协议即可提供自己的特定的颜色方案,而主题管理器则可以通过这个统一接口轻松地访问这些颜色。

颜色工厂

在定义了ZMColorFactory协议之后,我们通过不同的工厂类来实现各个主题的具体颜色方案。每个工厂类复杂提供一套完整的颜色配置,这样可以确保在应用中不同主题的颜色实现能够根据用户的选择动态切换。同样为了简洁,我们定义两个颜色工厂ZMBaseColorFactory和ZMBlueColorFactory。

基础主题工厂

ZMBaseColorFactory是我们项目中的基本主题工厂,它实现了ZMColorFactory协议,并默认的红色主题提供颜色配置:

class ZMBaseColorFactory: NSObject, ZMColorFactory {
    
    /// 主题色
    var themeColor: UIColor {
        return UIColor.zm_hex("#FB233B")
    }
    
    /// 标题文字颜色
    var titleColor: UIColor {
        return UIColor.zm_hex("#333333")
    }
}

在这个工厂中,我们通过返回固定的颜色值实现了红色主题的主色调和标题文字颜色。主色调是红色(#FB233B),标题文字使用深灰色(#333333)

蓝色主题工厂

ZMBlueColorFactory是另一个实现了ZMColorFactory协议的工厂类,为蓝色主题提供颜色方案:

class ZMBlueColorFactory: NSObject, ZMColorFactory {

    /// 主题色
    var themeColor: UIColor {
        return UIColor.blue
    }
    
    /// 标题文字颜色
    var titleColor: UIColor {
        return UIColor.blue
    }
}

在这个工厂中,我们为蓝色主题提供了主色调和标题文字颜色,简洁起见二者都是用了系统的UIColor.blue。

扩展性

通过这种工厂类的设计,每当我们需要新增一个主题时,只需实现ZMColorFactory协议,并在新的工厂类中定义该主题的颜色属性。这样不仅代码结构清晰,还能保证新旧主题的无缝切换。

主题颜色管理器

为了实现高效的主题管理,我们还需要引入ZMColorHelper类作为主题管理器。该管理器负责整个应用的主题初始化、更新和颜色获取,确保用户的主题选择能够即时反映在应用界面中。

class ZMColorHelper: NSObject {
    
    /// 当前颜色工厂
    static private var colorFactory: ZMColorFactory = ZMBaseColorFactory()
    
    /// 启动主题管理器
    static func startUp() {
        // 从用户默认设置中读取当前主题
        if let theme = UserDefaults.standard.object(forKey: "theme") as? ZMTheme {
            updateTheme(theme: theme)
        }
    }
    
    /// 更新主题
    /// - Parameter theme: 主题
    /// - Returns: Void
    static func updateTheme(theme: ZMTheme) {
        switch theme {
        case .red:
            colorFactory = ZMBaseColorFactory()
        case .blue:
            colorFactory = ZMBlueColorFactory()
        }
        // 将当前主题存储到用户默认设置中
        UserDefaults.standard.set(theme, forKey: "theme")
    }
    
    /// 获取当前主题色
    static var themeColor: UIColor {
        return colorFactory.themeColor
    }
    /// 标题文字颜色
    static var titleColor: UIColor {
        return colorFactory.titleColor
    }
    
}
启动主题管理器

在startUp()方法中,管理器会从用户的默认设置中读取存储的主题值。如果用户之前选择过主题,管理器会响应地更新当前主题。

更新主题

通过updateTheme(theme:)方法,管理器可以根据传入的主题枚举值来选择不同的颜色工厂。当用户更改主题时,需要对用这个方法。从而更新colorFactory为相应的主题工厂。同时,当前选择的主题也会被存储到用户的默认设置中,以便下次启动应用时能够恢复到上次使用的主题。

获取主题颜色

themeColor和titleColor静态属性返回当前需要获取的颜色,任何需要使用主题颜色的地方都可以通过这些属性来获取。这样,整个应用的颜色管理变得更加集中和简洁。

ZMColorHepler类作为主题管理器,为多主题功能提供了清晰的接口和逻辑,使得主题额管理、更新和颜色获取变得简便而高效。通过集中管理,我们可以确保应用的外观在不同主题间切换时能够无缝衔接,提升用户体验。

颜色扩展

为了简化颜色创建的和管理,我们使用UIColor类扩展了两个使用的方法:zm_rgba和zm_hex。这使得在项目中使用颜色变得更加方便和直观。

extension UIColor {
    
    /// RGBA颜色
    /// - Parameters:
    ///   - r: red
    ///   - g: green
    ///   - b: blue
    ///   - a: alpha
    /// - Returns: 生成的颜色
    class func zm_rgba(_ r: CGFloat, _ g: CGFloat, _ b: CGFloat, _ a: CGFloat = 1.0) -> UIColor {
        return UIColor(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: a)
    }
    
    /// 通过16进制字符串生成颜色
    /// - Parameters:
    ///   - hex: 16进制字符串
    ///   - alpha: 透明度
    /// - Returns: 生成的颜色
    class func zm_hex(_ hex: String, _ alpha: CGFloat = 1.0) -> UIColor {
        var cString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
        if cString.hasPrefix("#") {
            cString.removeFirst()
        }
        if cString.count != 6 {
            return UIColor.clear
        }
        let rString = String(cString.prefix(2))
        let gString = String(cString[cString.index(cString.startIndex, offsetBy: 2)..<cString.index(cString.startIndex, offsetBy: 4)])
        let bString = String(cString.suffix(2))
        var r: UInt64 = 0, g: UInt64 = 0, b: UInt64 = 0
        Scanner(string: rString).scanHexInt64(&r)
        Scanner(string: gString).scanHexInt64(&g)
        Scanner(string: bString).scanHexInt64(&b)
        return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha)
    }
}
使用zm_rgba

zm_rgba允许开发者使用红、绿、蓝和透明度值轻松创建颜色。

let customColor = UIColor.zm_rgba(255, 50, 50, 1.0) // 创建一个不透明的红色
使用zm_hex

zm_hex方法使得通过16进制字符快速创建颜色成为可能,特别对于设计师提供的颜色值。

let hexColor = UIColor.zm_hex("#FB233B") // 创建对应的颜色

使用主题颜色切换功

在实际项目中,使用ZMColorHelper进行主题管理就非常简单。一下是一些基本的使用步骤。

启动主题管理

在应用启动时,首选需要调用startUp()方法来初始化主题管理器。这个方法会检测用户的默认设置并加载之前选择的主题。

// 在应用启动时调用
ZMColorHelper.startUp()

切换主题

要切换主题,只需要调用updateTheme(theme:)方法并传入所需的主题枚举值。管理器会根据传入的主题更新相应的颜色工厂,并保持选择的主题到用户默认设置中。

// 切换到红色主题
ZMColorHelper.updateTheme(theme: .red)

// 切换到蓝色主题
ZMColorHelper.updateTheme(theme: .blue)

获取当前主题颜色

在需要使用当前主题颜色的地方,可以通过themeColor属性轻松获取主题的颜色。无论实在设置背景色、文字颜色都可以直接使用。

// 设置视图的背景颜色为当前主题色
view.backgroundColor = ZMColorHelper.themeColor

// 设置标题的文字颜色为当前主题的标题色
label.textColor = ZMColorHelper.titleColor

结语

在本文中,我们探讨了如何在iOS项目中实现多主题颜色管理。通过引入ZMColorHelper主题管理器和相关的颜色工厂协议,我们构建了一个灵活且易于扩展的主题系统。无论是通过简单的枚举定义主题,还是通过工厂模式实现颜色的具体化,我们的设计都旨在提供清晰的接口和无缝的用户体验。

随着用户对应用个性化需求的不断增加,支持多主题功能不仅提升了用户体验,还增强了应用的吸引力。希望通过本篇文章,能够帮助开发者更好地理解和实现多主题管理的最佳实现,使我们的应用在视觉效果上更具吸引力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2175246.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在LLMs模型中发现人类的记忆特征

论文地址&#xff1a;https://arxiv.org/abs/2311.03839 介绍 大型语言模型&#xff08;LLM&#xff09;&#xff0c;如 ChatGPT&#xff0c;为语言建模和生成人类水平的文本输出带来了质的飞跃。 这些模型在庞大的文本库中进行训练&#xff0c;有效地建立了高度复杂和准确的…

队列——单调队列

题目描述 有一个大小为 k 的滑动窗口&#xff0c;它从数组的最左边移动到最右边。 你只能在窗口中看到 k 个数字。 每次滑动窗口向右移动一个位置。 例如&#xff1a;[1, 3, −1, −3, 5, 3, 6, 7] k3。 有一个长为 n 的序列 a&#xff0c;以及一个大小为 k 的窗口。现在这个从…

哈希表(HashMap、HashSet)

文章目录 一、 什么是哈希表二、 哈希冲突2.1 为什么会出现冲突2.2 如何避免出现冲突2.3 出现冲突如何解决 三、模拟实现哈希桶/开散列&#xff08;整型数据&#xff09;3.1 结构3.2 插入元素3.3 获取元素 四、模拟实现哈希桶/开散列&#xff08;泛型&#xff09;4.1 结构4.2 插…

javaweb之会话管理

Cookie&#xff1a; 1. Cookie 的定义 Cookie 是存储在用户浏览器中的小块数据&#xff0c;通常由服务器发送并存储&#xff0c;以便在用户浏览器和服务器之间保持会话状态。每次用户发送请求时&#xff0c;浏览器都会自动附带相应的 Cookie&#xff0c;允许服务器辨识用户。…

58 深层循环神经网络_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录深度循环神经网络1. 模型复杂性增加2. 训练数据不足3. 梯度消失和爆炸4. 正则化不足5. 特征冗余总结 函数依赖关系简洁实现训练与预测小结练习 深度循环神经网络 &#x1f3f7;sec_deep_rnn 到目前为止&#xff0c;我们只讨论了具有一个单…

基于大数据的亚健康人群数据分析及可视化系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

在vsCode中将某个字符替换成换行符并且换行展示

将下面一行字符串中的“,”替换成换行符并且换行展示。 CTRLF键检索&#xff0c;查找和替换内容根据如下图输入即可。 点击全部替换后得到如下结果&#xff1a;

图文深入理解Oracle Network配置管理(二)

本篇图文深入介绍Oracle Network配置管理。 Oracle网络配置的目的 为了方便对Oracle 数据库进行管理&#xff0c;一般以下情况应该对Oracle进行网络配置。 • 在客户端对服务器端数据库进行管理&#xff08;网络客户端管理&#xff09; • 在一台服务器上管理多个数据库&…

性能测试学习1:性能测试的理论与目的,与功能测试的区别

一.什么是性能&#xff1f; 1&#xff09;性能&#xff1a;就是软件质量属性中的“效率”特性 2&#xff09;效率特性: ①时间特性&#xff1a;表示系统处理用户请求的响应时间【通俗来说&#xff0c;就是使用系统是否流畅】 ②资源特性&#xff1a;表示系统运行过程中&…

青动CRM-仓储云V1.1.2

多平台(微信公众号(高级授权)、微信小程序(高级授权)、H5网页(高级授权)、Android-App(高级授权)、iOS-App(高级授权))仓库管理系统&#xff0c;拥有强大的表单设计、多角色员工权限、出入库管理、仓库管理、送货管理、自定义审批流、绩效管理、客户管理、合同管理等功能。提供…

抖音支付回调验签 go 版本

序言 最近在做抖音小程序支付&#xff0c;由于抖音开放平台的文档写的较为简陋&#xff0c;让人踩了不少坑&#xff0c;在这里整理一下做小程序支付的整个过程&#xff0c;以通用交易系统为例子。 准备条件 1&#xff09;申请小程序&#xff0c;开通支付功能 这里需要明确你小…

Linux--基本指令

目录 1.ls指令 ​2.pwd指令 3.cd指令 4.tree指令 5.touch/mkdir/rmdir(rm)指令 6.cp/mv/cat/tac指令 7.head/tail/管道 8.date 9.find/which/grep 10.其它小知识 1.ls指令 补充知识&#xff1a; 2.pwd指令 补充知识&#xff1a; 3.cd指令 补充知识&#xff1a; 4.tree指令 …

Java语法-类和对象之抽象类和接口

1.抽象类 1.1 抽象类的概念 一个类中没有足够的信息来描述一个具体的对象,这样的类就是抽象类 比如: 从图中我们可以看出,只有继承了的类,我们产生的实例,调用的draw方法都是他们本身重写的draw方法,不会调用父类Shape的draw()方法,因此我们可以不管父类里面的draw()方法里面的…

MySQL 之多表设计详解

在实际应用场景中&#xff0c;我们经常需要处理包含多种数据实体及其之间复杂关系的业务逻辑&#xff0c;例如电商平台的用户、商品、订单&#xff0c;社交网络的用户、帖子、评论等等。如果将所有数据都堆砌在一张表中&#xff0c;不仅会造成数据冗余、难以维护&#xff0c;还…

MySQL 8.0.34 从C盘迁移到D盘

因为开始C盘够用&#xff0c;没注意mysql安装位置&#xff0c;如今C盘爆满&#xff0c;只能把mysql转移到D盘&#xff0c;以腾出更多的空间让我折腾。 一、关闭mysql服务 二、找到C盘MySQL安装文件和Data文件 1.找到C盘mysql bin文件目录安装文件路径&#xff1a; C:\Progra…

行为设计模式 -模板方法模式- JAVA

模板方法模式 一 .简介二. 案例2.1 抽象类&#xff08;Abstract Class&#xff09;2.2 具体子类&#xff08;Concrete Class&#xff09;2.3 测试 三. 结论3.1 优缺点3.2 适用场景3.3 要点 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接…

linux从入门到精通--从基础学起,逐步提升,探索linux奥秘(六)

linux从入门到精通–从基础学起&#xff0c;逐步提升&#xff0c;探索linux奥秘&#xff08;六&#xff09; 一、linux高级指令&#xff08;1&#xff09; 1、hostname指令 1&#xff09;作用&#xff1a;操作服务器的主机名&#xff08;读取、设置&#xff09; 2&#xff0…

huggingface的transformers与datatsets的安装与使用

目录 1.安装 2.分词 2.1tokenizer.encode&#xff08;&#xff09; 2.2tokenizer.encode_plus &#xff08;&#xff09; 2.3tokenizer.batch_encode_plus&#xff08;&#xff09; 3.添加新词或特殊字符 3.1tokenizer.add_tokens&#xff08;&#xff09; 3.2 token…

Python自动收发邮件的详细步骤与使用方法?

Python自动收发邮件教程&#xff1f;Python怎么实现收发邮件&#xff1f; Python作为一种强大的编程语言&#xff0c;提供了丰富的库和工具&#xff0c;使得自动收发邮件变得简单而高效。AokSend将详细介绍如何使用Python自动收发邮件&#xff0c;帮助读者掌握这一实用技能。 …

【ASE】第四课_护盾效果(有碰撞效果)

今天我们一起来学习ASE插件&#xff0c;希望各位点个关注&#xff0c;一起跟随我的步伐 今天我们来学习护盾的效果。 思路&#xff1a; 1.添加纹理贴图和法线贴图&#xff08;这里省略&#xff09; 2.添加护盾边缘顶点扰动效果&#xff0c;也可以理解成变形效果 3.添加碰撞…