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的一部分,只是获取的方式有些不同罢了,这样做的目的就是为了方便组织各个主题的文件、目录结构)。


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

#define Bundle_Of_ThemeResource                                @"ThemeResource"

//the path in the bundle
#define Bundle_Path_Of_ThemeResource                                        \
[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:Bundle_Of_ThemeResource]


ThemeManager:

@interface ThemeManager : NSObject

@property (nonatomic,copy) NSString                 *themeName;
@property (nonatomic,copy) NSString                 *themePath;
@property (nonatomic,retain) UIColor                *themeColor;

+ (ThemeManager*)sharedInstance;

- (NSString *)changeTheme:(NSString*)themeName;

- (UIImage*)themedImageWithName:(NSString*)imgName;

@end

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

initCurrentTheme定义:
- (void)initCurrentTheme{
    self.themeName=[ConfigItemDao get:@"主题设置"];
    NSString *themeColorStr=[ConfigItemDao get:self.themeName];
    self.themeColor=[UIColor parseColorFromStr:themeColorStr];
    self.themePath=[Bundle_Path_Of_ThemeResource stringByAppendingPathComponent:self.themeName];
    
    //init UI
    UIImage *navBarBackgroundImg=[[self themedImageWithName:@"themeColor.png"]
                                  resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 0.0f, 1.0f, 1.0f)
                                                resizingMode:UIImageResizingModeTile];
    
    [[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImg
                                       forBarMetrics:UIBarMetricsDefault];
}

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

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

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

实现如下:
- (UIImage*)themedImageWithName:(NSString*)imgName{
    if (!imgName || [imgName isEqualToString:@""]) {
        return nil;
    }
    
    NSString *imgPath=[self.themePath stringByAppendingPathComponent:imgName];
    
    return [UIImage imageWithContentsOfFile:imgPath];
}

到主题设置界面,选择一个新主题,会调用changeTheme方法:
- (NSString *)changeTheme:(NSString*)themeName{
    if (!themeName || [themeName isEqualToString:@""]) {
        return nil;
    }
    
    NSString *themePath=[Bundle_Path_Of_ThemeResource stringByAppendingPathComponent:themeName];
    if (dirExistsAtPath(themePath)) {
        self.themePath=themePath;
        
        //update to db
        [ConfigItemDao set:[NSMutableDictionary dictionaryWithObjects:@[@"主题设置",themeName]
                                                              forKeys:@[@"itemKey",@"itemValue"]]];
        
        //init again
        [self initCurrentTheme];
    }
    
    return themeName;
}

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

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

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

可以看到,所有需要使用主题的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中调用该注册方法)
- (void)registerThemeChangedNotification{
    [Default_Notification_Center addObserver:self
                                    selector:@selector(handleThemeChangedNotification:)
                                        name:Notification_For_ThemeChanged
                                      object:nil];
}

同时给出消息处理的逻辑:
- (void)handleThemeChangedNotification:(NSNotification*)notification{
    UIImage *navBarBackgroundImg=[[[ThemeManager sharedInstance] themedImageWithName:@"themeColor.png"]
                                  resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 0.0f, 1.0f, 1.0f)
                                  
                                  resizingMode:UIImageResizingModeTile];
    
    [self.navigationController.navigationBar setBackgroundImage:navBarBackgroundImg
                                                  forBarMetrics:UIBarMetricsDefault];
    
    [self configUIAppearance];
}
可以看到这里又调用了configUIAppearance,由于继承关系,这里的self指针指向的并非BaseController实例(而是sub controller的实例),所以调用的也是sub controller的方法。所以,虽然可能还停留在“主题设置的界面”,但其他已存活的controller已经接受到了切换主题的Notification,并悄悄完成了切换。

最后再看看切换主题的大致逻辑:
- (void)themeButton_touchUpIndise:(id)sender{
    //unselect
    UIButton *lastSelectedBtn=(UIButton*)[self.view viewWithTag:(Tag_Start_Index  + self.currentSelectedIndex)];
    lastSelectedBtn.selected=NO;
    
    //select
    UIButton *selectedBtn=(UIButton*)sender;
    self.currentSelectedIndex=selectedBtn.tag - Tag_Start_Index;
    selectedBtn.selected=YES;
    
    [[ThemeManager sharedInstance] changeTheme:((NSDictionary*)self.themeArr[self.currentSelectedIndex]).allKeys[0]];
    
    //post themechanged notification
    [Default_Notification_Center postNotificationName:Notification_For_ThemeChanged
                                               object:nil];
}

大致的流程就是这样~

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



原文发布时间为:2013-07-28

本文作者:vinoYang

本文来自云栖社区合作伙伴 CSDN博客,了解相关信息可以关注CSDN博客。
目录
相关文章
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
106 3
|
4月前
|
存储 iOS开发
iOS 开发,如何进行应用的本地化(Localization)?
iOS 开发,如何进行应用的本地化(Localization)?
123 2
|
4月前
|
存储 数据建模 数据库
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
43 0
|
4月前
|
安全 编译器 Swift
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
106 2
|
2月前
|
API 开发工具 Android开发
iOS 和 Android 平台的开发有哪些主要区别?
iOS与Android开发区别:iOS用Objective-C/Swift,App Store唯一下载渠道;Android用Java/Kotlin,多商店发布(如Google Play、华为市场)。设计上,iOS简洁一致,Android灵活可定制。开发工具,iOS用Xcode,Android用Android Studio。硬件和系统多样性,iOS统一,Android复杂。权限管理、审核流程及API各有特点,开发者需依据目标平台特性进行选择。
38 3
|
12天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
12天前
|
存储 Swift iOS开发
使用Swift开发一个简单的iOS应用的详细步骤。
使用Swift开发iOS应用的步骤包括:创建Xcode项目,设计界面(Storyboard或代码),定义数据模型,实现业务逻辑,连接界面和逻辑,处理数据存储(如Core Data),添加网络请求(必要时),调试与测试,根据测试结果优化改进,最后提交至App Store或其它平台发布。
32 0
|
12天前
|
安全 Swift iOS开发
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
|
12天前
|
存储 安全 Swift
【Swift 开发专栏】使用 Swift 开发一个简单的 iOS 应用
【4月更文挑战第30天】本文介绍了使用 Swift 开发简单 iOS 待办事项应用的步骤。首先,阐述了 iOS 开发的吸引力及 Swift 语言的优势。接着,详细说明了应用的需求和设计,包括添加、查看和删除待办事项的功能。开发步骤包括创建项目、界面搭建、数据存储、功能实现,并提供了相关代码示例。最后,强调了实际开发中需注意的细节和优化,旨在帮助初学者掌握 Swift 和 iOS 开发基础。
|
20天前
|
iOS开发 开发者 UED
利用SwiftUI构建动态列表:iOS开发的新范式
【4月更文挑战第22天】在本文中,我们将深入探讨如何使用SwiftUI来创建动态列表。SwiftUI是苹果最新推出的用户界面工具集,它允许开发者以声明式的方式描述用户界面,从而简化了代码的复杂性。我们将通过具体的代码实例,展示如何利用SwiftUI的List和ForEach视图来创建动态列表,并讨论其在实际开发中的应用。
20 2