iOS 实现快速切换主题详细教程
cjsyr1
8年前
<h2>前言</h2> <p>iOS 实现主题切换，相信在未来的app里也是会频繁出现的，尽管现在只是出现在主流的APP，如（QQ、新浪微博、酷狗音乐、网易云音乐等），但是现在是看颜值、追求个性的年代，所以根据用户喜好自定义/切换主题也是未来app的必备功能了。</p> <h2>实现思路</h2> <p>为了降低耦合度，决定采用的方案是使用NSObject的分类来实现主题设置，有些读者可能会想为何不使用UIView的分类而是使用NSObject的分类？建议这部分读者看一下 <strong>UIBarItem</strong> 父类，然后仔细思考一下，就会理解了。</p> <p>设置主题色</p> <p><img src="https://simg.open-open.com/show/2736f692798844f28b0691096643fad2.png"></p> <p>PYThemeColor.png</p> <ol> <li>创建 <strong>主题色池</strong></li> <li>将需要设置主题色的控件及其对应 <strong>属性/方法</strong> 添加到主题色池中</li> <li>调用设置主题色方法时，遍历主题色池中的控件，使用 <strong>KVC</strong> 设置对应属性或调用对应的 <strong>方法</strong> 来实现主题色的设置</li> </ol> <p>代码实现</p> <p>建议读者在理解思路以后先下载源码大概看一下（纵观全局）再阅读以下内容：</p> <p>1. 创建主题色池</p> <p>由于是在NSObject的分类里面创建，为了方便管理，设置全局变量 <strong>_themeColorPool</strong> ，并通过懒加载完成 <strong>_themeColorPool</strong> 的实例化。数组中的对象采用为 <strong>NSDictionary</strong> 的原因见下一步就会理解了</p> <pre> <code class="language-objectivec">/** 主题颜色池 */ static NSMutableArray<NSDictionary *> *_themeColorPool; #pragma mark - 懒加载 - (NSMutableArray *)themeColorPool { if (!_themeColorPool) { _themeColorPool = [NSMutableArray array]; } return _themeColorPool; }</code></pre> <p>2. 添加控件到主题色池中</p> <p>由于颜色设置有的可以直接通过属性设置也有的需要通过调用方法才可设置。以 <strong>UIButton</strong> 为例，设置背景色可通过属性 <strong>button.backgroundColor</strong> 设置，设置选中状态时的字体颜色则要调用 <strong>setTitleColor:forState:</strong> 方法才可设置，于是，就得提供两个方法供使用者调用，如下</p> <pre> <code class="language-objectivec">/** * 添加到主题色池 * selector : 执行方法 * objects : 方法参数数组 * 注意：方法参数必须按顺序一一对应，如果涉及到的主题色设置使用 PYTHEME_THEME_COLOR 宏定义代替 * 如果数组中某个参数为nil，需包装为 [NSNull null] 对象再添加到数组中 */ - (void)py_addToThemeColorPoolWithSelector:(SEL)selector objects:(NSArray<id> *)objects; /** * 添加到主题色池 * propertyName : 属性名 */ - (void)py_addToThemeColorPool:(NSString *)propertyName;</code></pre> <p>实现如下：</p> <pre> <code class="language-objectivec">#pragma mark - Theme Color /** * 添加到主题色池 * selector : 执行方法 * objects : 方法参数数组 * 注意：方法参数必须按顺序一一对应，如果涉及到的主题色设置使用 PYTHEME_THEME_COLOR 宏定义代替 * 如果数组中某个参数为nil，需包装为 [NSNull null] 对象再添加到数组中 */ - (void)py_addToThemeColorPoolWithSelector:(SEL)selector objects:(NSArray *)objects { // 判断参数是否为空 if (!objects) return; Class appearanceClass = NSClassFromString(@"_UIAppearance"); // 如果对象为_UIAppearance，直接返回 if ([self isMemberOfClass:appearanceClass]) return; // 键：对象地址+方法名 值：对象 NSString *pointSelectorString = [NSString stringWithFormat:@"%p%@", self, NSStringFromSelector(selector)]; NSDictionary *dic = @{ pointSelectorString : self, PYTHEME_COLOR_ARGS_KEY : objects }; // 判断是否已经在主题色池中 if (![[self themeColorPool] containsObject:dic]) { // 不在主题色池中 [[self themeColorPool] addObject:dic]; if (_currentThemeColor) { // 已经设置主题色，直接设置 [self py_performSelector:selector withObjects:objects]; } } } /** * 添加到主题色池 * propertyName : 属性名 */ - (void)py_addToThemeColorPool:(NSString *)propertyName { // 如果对象为_UIAppearance，直接返回 Class appearanceClass = NSClassFromString(@"_UIAppearance"); if ([self isMemberOfClass:appearanceClass]) return; // 键：对象地址+属性名 值：对象 NSString *pointString = [NSString stringWithFormat:@"%p%@", self, propertyName]; NSDictionary *dic = @{ pointString : self }; // 判断是否已经在主题色中 if (![[self themeColorPool] containsObject:dic]) { // 不在主题色池中 [[self themeColorPool] addObject:dic]; if (_currentThemeColor) { // 已经设置主题色，直接设置 [self setValue:_currentThemeColor forKey:propertyName]; } } // 遍历主题色池(移除应该被回收的对象) for (NSDictionary *dict in [[self themeColorPool] copy]) { // 取出key NSString *objectKey = nil; for (NSString *key in [dict allKeys]) { if (![key isEqualToString:PYTHEME_COLOR_ARGS_KEY]) { objectKey = key; break; } } // 取出对象 id object = [dict valueForKey:objectKey]; // 取出对象的引用计数 NSInteger retainCount = [[object valueForKey:@"retainCount"] integerValue]; if (retainCount == 2) { // 对象应该被回收了 [[self themeColorPool] removeObject:dict]; } } }</code></pre> <p>为了满足个别需求，所以还是提供一下从主题色池中移除控件的方法</p> <pre> <code class="language-objectivec">/** * 从主题色池移除 * propertyName : 属性名 */ - (void)py_removeFromThemeColorPool:(NSString *)propertyName; /** * 从主题色池移除 * selector : 方法选择器 */ - (void)py_removeFromThemeColorPoolWithSelector:(SEL)selector;</code></pre> <p>实现如下：</p> <pre> <code class="language-objectivec">/** * 从主题色池移除 * propertyName : 属性名 */ - (void)py_removeFromThemeColorPool:(NSString *)propertyName { // 如果对象为_UIAppearance，直接返回 Class appearanceClass = NSClassFromString(@"_UIAppearance"); if ([self isMemberOfClass:appearanceClass]) return; // 键：对象地址+属性名 值：对象 NSString *pointString = [NSString stringWithFormat:@"%p%@", self, propertyName]; NSDictionary *dic = @{ pointString : self }; // 判断是否已经在主题色池中 if ([[self themeColorPool] containsObject:dic]) { // 在主题色池中 [[self themeColorPool] removeObject:dic]; } } /** * 从主题色池移除 * selector : 方法选择器 */ - (void)py_removeFromThemeColorPoolWithSelector:(SEL)selector { // 如果对象为_UIAppearance，直接返回 Class appearanceClass = NSClassFromString(@"_UIAppearance"); if ([self isMemberOfClass:appearanceClass]) return; // 键：对象地址+方法名 NSString *pointSelectorString = [NSString stringWithFormat:@"%p%@", self, NSStringFromSelector(selector)]; // 遍历主题色池(移除应该被回收的对象) for (NSDictionary *dict in [[self themeColorPool] copy]) { for (NSString *key in [dict allKeys]) { if ([key isEqualToString:pointSelectorString]) { // 存在，移除 [[self themeColorPool] removeObject:dict]; return; } } } }</code></pre> <p>3. 设置主题色</p> <pre> <code class="language-objectivec">/** * 设置主题色 * color : 主题色 */ - (void)py_setThemeColor:(UIColor *)color;</code></pre> <p>实现如下：</p> <pre> <code class="language-objectivec">/** * 设置主题色 * color : 主题色 */ - (void)py_setThemeColor:(UIColor *)color { _currentThemeColor = color; // 遍历缓主题池，设置统一主题色 for (NSDictionary *dict in [_themeColorPool copy]) { // 取出key NSString *objectKey = nil; for (NSString *key in [dict allKeys]) { if (![key isEqualToString:PYTHEME_COLOR_ARGS_KEY]) { objectKey = key; break; } } // 取出对象 id object = [dict valueForKey:objectKey]; if ([objectKey containsString:@":"]) { // 方法 // 取出参数 NSArray *args = dict[PYTHEME_COLOR_ARGS_KEY]; // 取出方法 NSString *selectorName = [objectKey substringFromIndex:[[NSString stringWithFormat:@"%p", object] length]]; SEL selector = NSSelectorFromString(selectorName); // 调用方法，设置属性 [object py_performSelector:selector withObjects:args]; } else { // 成员属性 // 取出属性值 NSString *propertyName = [objectKey substringFromIndex:[[NSString stringWithFormat:@"%p", object] length]]; // 给对象的对应属性赋值（使用KVC） [object setValue:color forKeyPath:propertyName]; } } }</code></pre> <p>使用</p> <p>假设有个需求： <strong>UINavigationBar</strong> 的 <strong>背景颜色</strong> 和 <strong>UIButton选中</strong> 时的 <strong>字体颜色</strong> 会随着主题颜色的变化而变化，实现如下：</p> <p>将 <strong>navigationBar</strong> 的 <strong>background</strong> 和 <strong>UIButton</strong> 的 <strong>setTitleColor:forState:</strong> 方法添加到主题池中，方法参数中如果是设置为主题色的参数则用 <strong>PYTHEME_THEME_COLOR</strong> 占位，如果参数为 <strong>nil</strong> ，则使用 <strong>[NSNull null]</strong> 代替</p> <pre> <code class="language-objectivec">// 创建导航栏 UINavigationBar *navigationBar = [[UINavigationBar alloc] init]; // 添加到主题色池中 [navigationBar py_addToThemeColorPool:@"barTintColor"]; // 创建按钮 UIButton *button = [[UIButton alloc] init]; // 添加到主题色中 [button py_addToThemeColorPoolWithSelector:@selector(setTitleColor:forState:) objects:@[PYTHEME_THEME_COLOR, @(UIControlStateSelected)]];</code></pre> <p>设置主题色</p> <pre> <code class="language-objectivec">// 设置主题色为红色 [self py_setThemeColor:[UIColor redColor]];</code></pre> <p>这里有一点注意的是 [object py_performSelector:selector withObjects:args]; 这是自己实现的 <strong>performSelector 多参调用</strong> 关于这方面的网上已经有很多教程了，这里就不多介绍了。直接附上的我实现(内部方法，主要考虑到自己的使用)：</p> <pre> <code class="language-objectivec">#pragma mark - performSelector 多参调用 - (id)py_performSelector:(SEL)selector withObjects:(const NSArray<id> *)objects { // 1. 创建方法签名 // 根据方法来初始化NSMethodSignature NSMethodSignature *methodSignate = [[self class] instanceMethodSignatureForSelector:selector]; if (!methodSignate) { // 没有该方法 return self; } // 2. 创建invocation对象（包装方法） NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:methodSignate]; // 3. 设置相关属性 // 调用者 invocation.target = self; // 调用方法 invocation.selector = selector; // 获取除self、_cmd的参数个数 NSInteger paramsCount = methodSignate.numberOfArguments - 2; // 取最少的，防止越界 NSInteger count = MIN(paramsCount, objects.count); // 用于dictionary的拷贝(用于保住objCopy，避免非法内存访问) NSMutableDictionary *objCopy = nil; // 设置参数 for (int i = 0; i < count; i++) { // 取出参数对象 id obj = objects[i]; // 如果是主题颜色参数颜色，则设置 if ([obj isKindOfClass:[NSString class]] && [obj isEqualToString:PYTHEME_THEME_COLOR]) { obj = _currentThemeColor; } // 判断需要设置的参数是否是NSNull, 如果是就设置为nil if ([obj isKindOfClass:[NSNull class]]) { obj = nil; } // 获取参数类型 const char *argumentType = [methodSignate getArgumentTypeAtIndex:i + 2]; // 判断参数类型 根据类型转化数据类型（如果有必要） NSString *argumentTypeString = [NSString stringWithUTF8String:argumentType]; if ([argumentTypeString isEqualToString:@"@"]) { // id // 如果是dictionary，可能存在 PYTHEME_THEME_COLOR if ([obj isKindOfClass:[NSDictionary class]]) { // NSDictionary objCopy = [obj mutableCopy]; // 取出所有键 NSArray *keys = [objCopy allKeys]; for (NSString *key in keys) { // 取出值 id value = objCopy[key]; if ([value isKindOfClass:[NSString class]] && [value isEqualToString:PYTHEME_THEME_COLOR]) { // 替换成颜色 [objCopy setValue:_currentThemeColor forKey:key]; } } [invocation setArgument:&objCopy atIndex:i + 2]; } else { // 其他 [invocation setArgument:&obj atIndex:i + 2]; } } else if ([argumentTypeString isEqualToString:@"B"]) { // bool bool objVaule = [obj boolValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"f"]) { // float float objVaule = [obj floatValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"d"]) { // double double objVaule = [obj doubleValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"c"]) { // char char objVaule = [obj charValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"i"]) { // int int objVaule = [obj intValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"I"]) { // unsigned int unsigned int objVaule = [obj unsignedIntValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"S"]) { // unsigned short unsigned short objVaule = [obj unsignedShortValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"L"]) { // unsigned long unsigned long objVaule = [obj unsignedLongValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"s"]) { // shrot short objVaule = [obj shortValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"l"]) { // long long objVaule = [obj longValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"q"]) { // long long long long objVaule = [obj longLongValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"C"]) { // unsigned char unsigned char objVaule = [obj unsignedCharValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"Q"]) { // unsigned long long unsigned long long objVaule = [obj unsignedLongLongValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"{CGRect={CGPoint=dd}{CGSize=dd}}"]) { // CGRect CGRect objVaule = [obj CGRectValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } else if ([argumentTypeString isEqualToString:@"{UIEdgeInsets=dddd}"]) { // UIEdgeInsets UIEdgeInsets objVaule = [obj UIEdgeInsetsValue]; [invocation setArgument:&objVaule atIndex:i + 2]; } } // 4.调用方法 [invocation invoke]; // 5. 设置返回值 id returnValue = nil; if (methodSignate.methodReturnLength != 0) { // 有返回值 // 将返回值赋值给returnValue [invocation getReturnValue:&returnValue]; } return returnValue; }</code></pre> <h3>细节处理</h3> <p>1. 设置主题色的方式</p> <ul> <li>通过 <strong>属性</strong> 直接设置主题色</li> <li>通过调用 <strong>方法</strong> 并以主题色为参数来设置主题色</li> <li>通过调用 <strong>方法</strong> 但主题色被 <strong>封装</strong> 后(如：NSDictionary)作为参数设置主题色</li> </ul> <p>2. 自动管理内存管理</p> <p>当对象 <strong>应该</strong> 被释放后，下一次当主题色池有新元素添加时，会遍历主题色池，根据对象的引用计数来决定是否移除对象(实现自动管理内存)，因此：主题色池中最多 <strong>可能</strong> 会残留一个对象，这对内存几乎没有任何影响，如果要及时释放对象本人认为可以采用 <strong>KVO</strong> 监听对象的引用计数（未尝试），但是耗能高，不建议这么做！</p> <p>3. 当对象为_UIAppearance类时，不添加到主题色池</p> <p>了解 <strong>UIAppearance</strong> 的读者应该可以理解，而且使用 <strong>UIAppearance</strong> 的目的也为为了设置全局色，所以为了避免冲突，如果使用了该 <strong>“技术”</strong> 就不添加到主题色池</p> <h3>设置主题图片</h3> <p>观察了 <strong>新浪微博、酷狗音乐</strong> 等app，发现设置主题图片还是很有必要的，而且发现每套主题皮肤/图片都有对应的主题色，所以在设计接口的时候都考虑了这方面的需求。先看一下设置主题图片的基本原理，如下：</p> <ol> <li>创建一个 <strong>主题图片池</strong> （使用懒加载）</li> <li>将相关 <strong>控件对象</strong> 直接添加到主题图片池中</li> <li>设置主题图片时，通过 <strong>block</strong> 把主题图片池中的 <strong>所有对象</strong> 传递给用户，用户实现 <strong>block</strong> ，在 <strong>block</strong> 中获得对象，并根据需求设置相关属性完成主题图片的设置</li> </ol> <p>代码实现：</p> <p>1. 创建一个主题图片池（使用懒加载）</p> <pre> <code class="language-objectivec">/** 主题图片池 */ static NSMutableArray<id> *_themeImagePool; - (NSMutableArray *)themeImagePool { if (!_themeImagePool) { _themeImagePool = [NSMutableArray array]; } return _themeImagePool; }</code></pre> <p>2. 添加相关控件到主题图片池中</p> <p>因为在设置图片是，比较复杂，如UITabBar上面的UIBarItem的图片、字体颜色等，所以为了满足大部分用户的需求，决定采用的是 <strong>直接存储控件对象</strong></p> <pre> <code class="language-objectivec">/** 添加到主题图片池 */ - (void)py_addToThemeImagePool; /** 从主题图片池中移除 */ - (void)py_removeFromThemeImagePoo</code></pre> <p>实现如下：</p> <pre> <code class="language-objectivec">#pragma mark - Theme Image /** 添加到主题图片池 */ - (void)py_addToThemeImagePool { // 如果对象为_UIAppearance，直接返回 Class appearanceClass = NSClassFromString(@"_UIAppearance"); if ([self isMemberOfClass:appearanceClass]) return; if ([self isKindOfClass:[UITabBarItem class]]) { // 如果是UITabBarItem，判断是否有设置图片 UITabBarItem *item = (UITabBarItem *)self; if (!item.image) { // 没有设置图片 item.image = [[UIImage alloc] init]; } if (!item.selectedImage) { // 没有设置图片 item.selectedImage = [[UIImage alloc] init]; } } // 判断是否已经在主题图片池中 if (![[self themeImagePool] containsObject:self]) { // 不在主题图片池中 [[self themeImagePool] addObject:self]; } // 遍历主题图片池(移除应该被回收的对象) for (id object in [self themeImagePool]) { NSInteger retainCount = [[object valueForKey:@"retainCount"] integerValue]; if (retainCount == 2) { // 对象应该被回收了 [[self themeImagePool] removeObject:self]; } } } /** 从主题图片池中移除 */ - (void)py_removeFromThemeImagePool { // 如果对象为_UIAppearance，直接返回 Class appearanceClass = NSClassFromString(@"_UIAppearance"); if ([self isMemberOfClass:appearanceClass]) return; // 判断是否已经在图片池中 if ([[self themeImagePool] containsObject:self]) { // 在主题图片池中 [[self themeImagePool] removeObject:self]; } }</code></pre> <p>3. 设置主题图片和相关配色</p> <p>当设置图片时，会通过 <strong>block</strong> 将主题图片池里面的所有控件传递给用户，用户根据需求进行相关设置，如果提供了配色，就会采用上面设置主题色功能来设置主题色</p> <pre> <code class="language-objectivec">/** * 重新加载主题图片 * themeColor : 主题色 * block : 设置主题图片时调用的block */ - (void)py_reloadThemeImageWithThemeColor:(UIColor *)themeColor setting:(PYThemeImageSettingBlock)block;</code></pre> <p>实现如下：</p> <pre> <code class="language-objectivec">/** 重新加载主题图片 */ - (void)py_reloadThemeImageWithThemeColor:(UIColor *)themeColor setting:(PYThemeImageSettingBlock)block { if (themeColor) { // 有主题色，设置主题色 [self py_setThemeColor:themeColor]; } if (block) { // 存在block，直接调用 block([self themeImagePool]); } }</code></pre> <p>使用</p> <p>假设现在有这么一个需求：更换主题图片时，更换UITabBarItem的图片</p> <ol> <li>将UITabBarItem添加到图片池 <pre> <code class="language-objectivec">// UITabBarItem [childController.tabBarItem py_addToThemeImagePool];</code></pre> </li> <li>切换主题图片并设置配色为红色 <pre> <code class="language-objectivec">// 重新加载主题图片，并设置主题色为红色 [self py_reloadThemeImageWithThemeColor:[UIColor redColor] setting:^(const NSArray<id> *objects) { // 根据控件类型完成相关设置 }</code></pre> </li> </ol> <h3>总结</h3> <p>篇幅可能有点大，能耐心读到这里的读者相信会有不少收获的，希望读者在阅读此教程的时候，千万不要学习代码实现，而是要多思考：为什么要这样实现？那样实现有什么不好？多学学接口为什么要这样设计，那样设计是不是更合理？当你带着这些问题再回过头来去看看源码时，希望你会有更多的收货！当然，这里只是提供了一种思路，你也可以在此基础上实现 <strong>夜间模式</strong> 的切换等。期待你们的实现！</p> <h3>期望</h3> <p>当然如果您有更多的想法想表达或者交流的话，欢迎到留言/评论！因为本人比较喜欢活跃在 <a href="/misc/goto?guid=4958339615791362549" rel="nofollow,noindex">GitHub</a> 社区，所以，如果您有什么想反馈的也可以 issuse me ，在这也鼓励大家去多多发现优秀源码，并且共享给大家。毕竟分享是双方获利的，何乐而不为？</p> <p> </p> <p>来自：http://www.jianshu.com/p/26abfb7ce5b2</p> <p> </p>