ios的框架设计系列——让App丰富起来 iOS App主题皮肤切换的实现

发送到手机
使用"扫一扫"即可发送至手机


第一篇 基本思路及实现原理

当我们进行App开发的时候,有没有考虑过这样一个问题?当用户长时间使用浏览这款App的时候,是否会产生审美疲劳?每天面对着一成不变的配色,会不会觉得单调?每天面对着千篇一律的UI界面,会不会觉得无趣?

如何吸引用户的眼球,抓住用户的胃口,让用户和App始终处于”蜜月期“呢?在产品设计的时候就应该考虑到,那么今天,我就来讲一下关于iOS App主题皮肤切换功能的实现。让你的App丰富起来!

一、基本原理

所谓App主题皮肤切换功能,就是用户可以根据自己的口味,手动切换App整体色调风格,以及具体控件的类型(如按钮图片,文字字体等)。

图片2.png          图片1.png

就iOS App而言,Controller的色调,以及各个控件的类型,实在Controller创建之初,即在Controller的生命周期 ViewDideLoad 中就已经确定了,并且在控制器的整个生命周期中是不会改变的。那么如何在App的运行过程中,动态的改变Controller的色调,以及各控件的类型呢?

我们需要在用户点击切换皮肤的时候,把这个事件告知每个需要改变风格的控制器。在iOS中最常用到的事件告知方法就是通知和KVO。在稻壳互联以往的案例中得到启发,由于作为一个完整的大型App项目,可能需要改变风格的控制器非常多,所以这里推荐使用通知的方法。

二、App结构搭建

上面提到,用通知可以使控制器监听并接受到更改主题皮肤这个事件并加以响应。但是在iOS中,只有注册了通知的Controller才能够监听具体的事件。如果一个App有上百个页面需要做到动态换肤,那么在上百个Controller中分别添加注册通知的代码就足够程序员崩溃的了。

所以在App开发工程创建之初,我们需要创建一个Controller的父类,暂且成为BaseController。在这个父类中,我们注册了监听通知的方法。并且在BaseController中添加了一个公用方法,用来在接收到通知后加以响应。


// 接收到通知后响应方法

- (void)configUIAppearance:(NSNotification *)notification

{

    NSLog(@"base config ui ");

}

 

// 注册监听通知

#pragma mark - theme changed notification -

- (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:notification];

}



在创建好父类之后,那么在App之后的开发过程中,但凡遇到需要动态换肤的Controller,我们就继承与这个父类。自然地,这个子类Controller也就注册了监听通知的方法。我们只需要在子类里面重写父类的-(void)configUIAppearace:(NSNotification *)notification这个方法,就可以对Controller里的控件进行动态改变。


// 继承于父类 BaseController

@interface XYUserCenterController : BKBaseController

 

// 重写父类方法改变控制器背景颜色

- (void)configUIAppearance:(NSNotification *)notification

{

    self.headBgV.backgroundColor = [BKTool transformColorToUIColor:MAINCOLOR];

}



三、发送换肤通知

在App中,当用户点击了更换主题皮肤的按钮之后,需要通过消息中心对所有注册了该通知的控制器发送通知。是其监听到更换主题皮肤这个通知,并调用响应方法做出对应的改变。


// 发送通知

 [[NSNotificationCenter defaultCenter] postNotificationName:Notification_For_ThemeChanged object:siteDic];


四、Controller对通知进行响应

当控制器接收到换肤的通知后,即可在重写的父类方法中对Controller中的控件进行需要的改变啦。

不论是按钮的背景图片,文字的颜色,还是Navigation或者TabBar的风格。甚至可以改变整个Controller的风格。在这个方法里你可以随心所欲,天马行空。


- (void)configUIAppearance:(NSNotification *)notification

{

    // 修改按钮字体颜色

    [_mainSiteButton setTitleColor:[BKTool transformColorToUIColor:MAINCOLOR] forState:UIControlStateSelected];

    [_myConcernButton setTitleColor:[BKTool transformColorToUIColor:MAINCOLOR] forState:UIControlStateSelected];

    [_allActivityButton setTitleColor:[BKTool transformColorToUIColor:MAINCOLOR] forState:UIControlStateSelected];

    [_allDataButton setTitleColor:[BKTool transformColorToUIColor:MAINCOLOR] forState:UIControlStateSelected];

    _bottomLineView.backgroundColor = [BKTool transformColorToUIColor:MAINCOLOR];

    

    // 修改顶部轮播图指示器颜色

    self.bannerSV.currentPageDotColor = [BKTool transformColorToUIColor:MAINCOLOR];

    self.mainSitebannerSV.currentPageDotColor = [BKTool transformColorToUIColor:MAINCOLOR];

    

    // 修改导航栏球队Logo

    NSString *teamLogo = [[BKTool convertJsonStringToDict:SITELOGO][0] valueForKey:@"file"];

    [self.teamIV setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@%@",APIPrefix,teamLogo]] forState:UIControlStateNormal placeholderImage:[UIImage imageNamed:@"placeholder"]];

    

    //修改导航栏球队名称

    _titleLabel.text = SITETITLE;

}


至此,你的App就可以实现更换主题皮肤的功能啦!

然而,怎么样才能从服务器获取更多丰富多彩的主题资源并加以使用呢?稻壳洞察将会在下篇文章中为大家介绍如何从服务器下载皮肤压缩包,解压并存储资源,以及沙盒路径图片使用的方法!


阅读相关主题
ios的框架设计系列——让App丰富起来 iOS App主题皮肤切换的实现

ios的框架设计系列——让App丰富起来 iOS App主题皮肤切换的实现

分享:

标签: