iOS开发之主题皮肤

简介: iOS开发之主题皮肤 分类: 【iOS】  最近在开发一款【公交应用】,里面有个模块涉及到主题设置,这篇文章主要谈一下个人的做法。 大概的步骤如下: (1):整个应用依赖于一个主题管理器,主题管理器根据当前的主题配置,加载不同主题文件夹下的主题 ...

iOS开发之主题皮肤

分类: 【iOS】 

最近在开发一款【公交应用】,里面有个模块涉及到主题设置,这篇文章主要谈一下个人的做法。

大概的步骤如下:

(1):整个应用依赖于一个主题管理器,主题管理器根据当前的主题配置,加载不同主题文件夹下的主题

(2):在应用的各个Controller中,涉及到需要更换主题图片或颜色的地方,由原来的硬编码方式改为从主题管理器获取(此处可以看到,虽然.xib配置UI会比编码渲染UI效率来得高,但在灵活性以及协同开发方面还是有些弱了)

(3):在主题设置Controller中,一旦切换主题,则需要像系统的通知中心发送消息(这一步的目的,主要是为了让那些已经存在的并且UI已构建完成的对象修改他们的主题)


最终的效果图见:

https://github.com/yanghua/iBus#version-102preview


首先来看看主题文件夹的目录结构:


可以看到,通常情况下主题都是预先做好的,当然了,这里因为我没有后端server,如果你的应用是拥有后端server的,那么可以做得更加强大,比如不将主题文件存储在Bundle中,而是存储在应用sandBox的Document中。这样你在应用启动的时候就可以check server 是否有新的主题包,如果有就download下来,释放到Document,这样会方便许多,而不需要在升级之后才能够使用新主题。扯远了,这里可以看到这些文件夹是蓝颜色的,而非黄颜色,可见它不是xcode project的Group,它们都是真实存储的文件夹(它们也是app的bundle的一部分,只是获取的方式有些不同罢了,这样做的目的就是为了方便组织各个主题的文件、目录结构)。


看看获取主题文件夹路径的方式:

  1. #define Bundle_Of_ThemeResource                                @"ThemeResource"  
  2.   
  3. //the path in the bundle  
  4. #define Bundle_Path_Of_ThemeResource                                        \  
  5. [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:Bundle_Of_ThemeResource]  


ThemeManager:

  1. @interface ThemeManager : NSObject  
  2.   
  3. @property (nonatomic,copy) NSString                 *themeName;  
  4. @property (nonatomic,copy) NSString                 *themePath;  
  5. @property (nonatomic,retain) UIColor                *themeColor;  
  6.   
  7. + (ThemeManager*)sharedInstance;  
  8.   
  9. - (NSString *)changeTheme:(NSString*)themeName;  
  10.   
  11. - (UIImage*)themedImageWithName:(NSString*)imgName;  
  12.   
  13. @end  

可以看到,ThemeManager对外开放了三个属性以及两个实例方法,并且ThemeManager被构建为是单例的(Single)
在实例初始化的时候,同时实例化主题的相关配置:
  1. - (id)init{  
  2.     if (self=[super init]) {  
  3.         [self initCurrentTheme];  
  4.     }  
  5.       
  6.     return self;  
  7. }  

initCurrentTheme定义:
  1. - (void)initCurrentTheme{  
  2.     self.themeName=[ConfigItemDao get:@"主题设置"];  
  3.     NSString *themeColorStr=[ConfigItemDao get:self.themeName];  
  4.     self.themeColor=[UIColor parseColorFromStr:themeColorStr];  
  5.     self.themePath=[Bundle_Path_Of_ThemeResource stringByAppendingPathComponent:self.themeName];  
  6.       
  7.     //init UI  
  8.     UIImage *navBarBackgroundImg=[[self themedImageWithName:@"themeColor.png"]  
  9.                                   resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 0.0f, 1.0f, 1.0f)  
  10.                                                 resizingMode:UIImageResizingModeTile];  
  11.       
  12.     [[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImg  
  13.                                        forBarMetrics:UIBarMetricsDefault];  
  14. }  

这里从sqlite中获取了主题类型、主题颜色,然后配置了主题属性,同时初始化了一致的UINavigationBar。

在其他Controller中,获取图片的方式不再是:
  1. UIImage *img=[UIImage imageNamed:@"img.png"];  

取而代之的是:
  1. UIImage *img=[[ThemeManager sharedInstance] themedImageWithName@"img.png"];  
来确保img.png是来自当前主题文件夹下的img.png

实现如下:
  1. - (UIImage*)themedImageWithName:(NSString*)imgName{  
  2.     if (!imgName || [imgName isEqualToString:@""]) {  
  3.         return nil;  
  4.     }  
  5.       
  6.     NSString *imgPath=[self.themePath stringByAppendingPathComponent:imgName];  
  7.       
  8.     return [UIImage imageWithContentsOfFile:imgPath];  
  9. }  

到主题设置界面,选择一个新主题,会调用changeTheme方法:
  1. - (NSString *)changeTheme:(NSString*)themeName{  
  2.     if (!themeName || [themeName isEqualToString:@""]) {  
  3.         return nil;  
  4.     }  
  5.       
  6.     NSString *themePath=[Bundle_Path_Of_ThemeResource stringByAppendingPathComponent:themeName];  
  7.     if (dirExistsAtPath(themePath)) {  
  8.         self.themePath=themePath;  
  9.           
  10.         //update to db  
  11.         [ConfigItemDao set:[NSMutableDictionary dictionaryWithObjects:@[@"主题设置",themeName]  
  12.                                                               forKeys:@[@"itemKey",@"itemValue"]]];  
  13.           
  14.         //init again  
  15.         [self initCurrentTheme];  
  16.     }  
  17.       
  18.     return themeName;  
  19. }  

这是一个简单的ThemeManager,通常有可能会有更多的配置,比如: themedFontWithName:(NSString *)fontName 等,当然方式都是一样的。
上面这些都只是定义,看看它是怎么运转的,怎么跟Controller组合的。

BaseController中:
注:BaseController是所有其他Controller的super class,任何时候,你去写一个应用程序也好,一个app也罢,你一开始总是应该规划好类型的继承关系,这是非常重要的,就个人经验而言,我总是会在创建一个应用程序之后,就立即构建一个super class,这会为你省去很多麻烦事。又废话了,进入正题。
在BaseController中,我们开放一个public method:
  1. - (void)configUIAppearance{  
  2.     NSLog(@"base config ui ");  
  3. }  

该类默认没有实现,主要用于供sub class去 override。
比如其中一个子controller的实现如下:
  1. - (void)configUIAppearance{  
  2.     self.appNameLbl.strokeColor=[[ThemeManager sharedInstance] themeColor];  
  3.     [self.commentBtn setBackgroundImage:[[ThemeManager sharedInstance] themedImageWithName:@"aboutBtnBG.png"]  
  4.                                forState:UIControlStateNormal];  
  5.       
  6.     [self.shareBtn setBackgroundImage:[[ThemeManager sharedInstance] themedImageWithName:@"aboutBtnBG.png"]  
  7.                              forState:UIControlStateNormal];  
  8.       
  9.     [self.developerBtn setBackgroundImage:[[ThemeManager sharedInstance] themedImageWithName:@"aboutBtnBG.png"] forState:UIControlStateNormal];  
  10.       
  11.     [super configUIAppearance];  
  12. }  

可以看到,所有需要使用主题的UI控件的相关设置,都抽取出来放到了configUIAppearance中。
该方法,在所有子controller中都不会显式调用,因为在BaseController的viewDidLoad方法中以及调用了。这样,如果子类override了它,就会调用子类的,如果没有override,则调用BaseController的默认实现。

可以看到,上面的方法中配置了一些UI的外观,在一个view show出来的时候会被调用,还有一个调用点当然是主题改变的时候!
主题改变的时候,所有应用的controller无非是两种状态:
(1)未被实例化
(2)已经被实例化,而且view已经构建完成并且可见
对于第一种状态,我们不需要太多的担心,因为根据选择新主题的时候,会调用ThemeManager的changeTheme方法,该方法会update数据库的主题配置,同时init并config新的主题,所以未被实例化的controller在后面被实例化的时候,肯定会应用新的主题。
但对于已经可见的主题就不是第一种情况那样了,除非你重新show他们,否则是不会主动应用新的主题的,但将其他controller都distory之后再重新构建,根本不可能。所以,这里应用了ios的Notification,并再次展示了需要一个BaseController的好处,因为我们不需要为已存在的每一个controller注册消息通知并实现处理收到通知的方法,我们在BaseController中做,就等于在所有继承它的sub controller中做了,不是吗?
那么我们首先要在BaseController中像Notification center注册我们关注的Notification_For_ThemeChanged Notification:(在BaseController的ViewDidLoad中调用该注册方法)
  1. - (void)registerThemeChangedNotification{  
  2.     [Default_Notification_Center addObserver:self  
  3.                                     selector:@selector(handleThemeChangedNotification:)  
  4.                                         name:Notification_For_ThemeChanged  
  5.                                       object:nil];  
  6. }  

同时给出消息处理的逻辑:
  1. - (void)handleThemeChangedNotification:(NSNotification*)notification{  
  2.     UIImage *navBarBackgroundImg=[[[ThemeManager sharedInstance] themedImageWithName:@"themeColor.png"]  
  3.                                   resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 0.0f, 1.0f, 1.0f)  
  4.                                     
  5.                                   resizingMode:UIImageResizingModeTile];  
  6.       
  7.     [self.navigationController.navigationBar setBackgroundImage:navBarBackgroundImg  
  8.                                                   forBarMetrics:UIBarMetricsDefault];  
  9.     <pre name="code" class="cpp">    [self configUIAppearance];</pre>}  

可以看到这里又调用了configUIAppearance,由于继承关系,这里的self指针指向的并非BaseController实例(而是sub controller的实例),所以调用的也是sub controller的方法。所以,虽然可能还停留在“主题设置的界面”,但其他已存活的controller已经接受到了切换主题的Notification,并悄悄完成了切换。

最后再看看切换主题的大致逻辑:
  1. - (void)themeButton_touchUpIndise:(id)sender{  
  2.     //unselect  
  3.     UIButton *lastSelectedBtn=(UIButton*)[self.view viewWithTag:(Tag_Start_Index  + self.currentSelectedIndex)];  
  4.     lastSelectedBtn.selected=NO;  
  5.       
  6.     //select  
  7.     UIButton *selectedBtn=(UIButton*)sender;  
  8.     self.currentSelectedIndex=selectedBtn.tag - Tag_Start_Index;  
  9.     selectedBtn.selected=YES;  
  10.       
  11.     [[ThemeManager sharedInstance] changeTheme:((NSDictionary*)self.themeArr[self.currentSelectedIndex]).allKeys[0]];  
  12.       
  13.     //post themechanged notification  
  14.     [Default_Notification_Center postNotificationName:Notification_For_ThemeChanged  
  15.                                                object:nil];  
  16. }  

大致的流程就是这样~

如果你觉得代码片段过于零散,没有关系,所有的实现代码都放到了github上。
并且整个应用都是 开源的!

相关文章
|
6天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
1月前
|
Java Android开发 Swift
安卓与iOS开发对比:平台选择对项目成功的影响
【10月更文挑战第4天】在移动应用开发的世界中,选择合适的平台是至关重要的。本文将深入探讨安卓和iOS两大主流平台的开发环境、用户基础、市场份额和开发成本等方面的差异,并分析这些差异如何影响项目的最终成果。通过比较这两个平台的优势与挑战,开发者可以更好地决定哪个平台更适合他们的项目需求。
114 1
|
1月前
|
设计模式 安全 Swift
探索iOS开发:打造你的第一个天气应用
【9月更文挑战第36天】在这篇文章中,我们将一起踏上iOS开发的旅程,从零开始构建一个简单的天气应用。文章将通过通俗易懂的语言,引导你理解iOS开发的基本概念,掌握Swift语言的核心语法,并逐步实现一个具有实际功能的天气应用。我们将遵循“学中做,做中学”的原则,让理论知识和实践操作紧密结合,确保学习过程既高效又有趣。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你打开一扇通往iOS开发世界的大门。
|
1月前
|
搜索推荐 IDE API
打造个性化天气应用:iOS开发之旅
【9月更文挑战第35天】在这篇文章中,我们将一起踏上iOS开发的旅程,通过创建一个个性化的天气应用来探索Swift编程语言的魅力和iOS平台的强大功能。无论你是编程新手还是希望扩展你的技能集,这个项目都将为你提供实战经验,帮助你理解从构思到实现一个应用的全过程。让我们开始吧,构建你自己的天气应用,探索更多可能!
66 1
|
2月前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中,Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点,并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析,我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
|
13天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
35 9
|
10天前
|
设计模式 Swift iOS开发
探索iOS开发:从基础到高级,打造你的第一款App
【10月更文挑战第40天】在这个数字时代,掌握移动应用开发已成为许多技术爱好者的梦想。本文将带你走进iOS开发的世界,从最基础的概念出发,逐步深入到高级功能实现,最终指导你完成自己的第一款App。无论你是编程新手还是有志于扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。让我们一起开始这段旅程吧!
|
13天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
11天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
14天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
下一篇
无影云桌面