UI基础 - UIAppearance

前言

1 - 在一些 app 中会涉及到更改外观设置的功能，最普遍的就是夜间模式和白天模式的切换，而对于外观的更改必定是一个全局的东西。这在 iOS5 以前想要实现这样的效果是比较困难的，但是 iOS5 时 Apple 推出了 UIAppearance，使得外观的自定义更加容易实现

2 - 通常某个 app 都有自己的主题外观，而在自定义导航栏的时候或许是使用到如下面的代码

[UINavigationBar appearance].barTintColor = [UIColor  redColor];

注：appearance 是一个全局的效果，实际上它的作用就是统一外观设置

3 - 是否是所有的控件或者属性都可以这样设置？实际上能使用 appearance 的地方是在方法或者属性后面都带有一个 UI_APPEARANCE_SELECTOR 的宏，如下

// 属性
@property(nonatomic,assign) UIBarStyle barStyle UI_APPEARANCE_SELECTOR
// 方法
- (void)setTitleTextAttributes:(nullable NSDictionary<NSString *,id> *)attributes forState:(UIControlState)state NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;

如何使用

1 - 如果我们自定义的视图也想要一个全局的外观设置，那么使用 UIAppearancel 来实现非常方便

① 分别在 ViewController 和 SecondViewController 中的 touchesBegan 方法中初始化已经配置好的视图 DemoView

// - DemoView.h

#import <UIKit/UIKit.h>
@interface DemoView : UIView

// 配置两个子视图：高同父视图；宽各占父视图的一半
@property (nonatomic, strong)UIView *leftView;
@property (nonatomic, strong)UIView *rightView;

// 视图背景颜色
// 修改两个子视图颜色：添加 UI_APPEARANCE_SELECTOR 宏
@property (nonatomic, strong)UIColor *leftColor  UI_APPEARANCE_SELECTOR;
@property (nonatomic, strong)UIColor *rightColor UI_APPEARANCE_SELECTOR;

@end

// - DemoView.m

#import "DemoView.h"
@implementation DemoView

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        
        // 创建视图
        self.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width/2.0, frame.size.height)];
        [self addSubview:self.leftView];
        
        self.rightView = [[UIView alloc] initWithFrame:CGRectMake(frame.size.width/2.0, 0,frame.size.width/2.0, frame.size.height)];
        [self addSubview:self.rightView];
    }
    return self;
}

// 在 setter 方法中配置两个子视图的颜色
- (void)setLeftColor:(UIColor *)leftColor {
    _leftColor = leftColor;
    self.leftView.backgroundColor = _leftColor;
}

- (void)setRightColor:(UIColor *)rightColor {
    _rightColor = rightColor;
    self.rightView.backgroundColor = _rightColor;
}

@end

// - ViewController.m

#import "ViewController.h"
#import "SecondViewController.h"
#import "DemoView.h"
@interface ViewController()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];
    
    // 全局配置
    // 修改某一类型控件的全部实例 + (instancetype)appearance;
    [DemoView appearance].leftColor = [UIColor redColor];
    [DemoView appearance].rightColor = [UIColor blueColor];

    // 下一页
    [self createNextPageBtn];
    
}
-(void)createNextPageBtn{
    
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setTitle:@"下一页" forState:UIControlStateNormal];
    btn.backgroundColor = [UIColor darkGrayColor];
    btn.frame = CGRectMake(40, 50, SCREEN_WIDTH-80, 50);
    [btn addTarget:self action:@selector(nextPage) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

-(void)nextPage{
    
    SecondViewController *secVC = [[SecondViewController alloc] init];
    secVC.view.backgroundColor = [UIColor brownColor];
    [self.navigationController pushViewController:secVC animated:YES];
    
}

// 在 touchesBegan 创建视图，注意查看效果（全局配置）
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    DemoView *cardView = [[DemoView alloc] initWithFrame:CGRectMake(40, 120, 200, 100)];
    [self.view addSubview:cardView];
}

@end

// - SecondViewController.m

#import "SecondViewController.h"
#import "DemoView.h"
@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
}
// 在 touchesBegan 创建视图，注意查看效果（全局配置）
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    DemoView * cardView = [[DemoView alloc] initWithFrame:CGRectMake(40, 120, 200, 100)];
    [self.view addSubview:cardView];
}

@end

运行效果：两个视图控制器中 DemoView 的背景颜色均在全局配置实现

     

② 当然 UIAppearance 不仅可以修改某一类型控件的全部实例，也可以修改部分实例，开发者只需要使用正确的 API 即可，比如我们修改 ViewController 中的方法

// 在 touchesBegan 创建视图，注意查看效果（全局配置）
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    DemoView *cardView = [[DemoView alloc] initWithFrame:CGRectMake(40, 120, 200, 100)];
    [self.view addSubview:cardView];

    // 添加的代码：修改某一控件的部分实例
    // 添加以下代码后：第一个界面的 DemoView 背景颜色由原来的 左红右蓝 变成 左黄右蓝；而第二个界面保持原样
    // + (instancetype)appearanceWhenContainedInInstancesOfClasses:(NSArray<Class <UIAppearanceContainer>> *)containerTypes NS_AVAILABLE_IOS(9_0);
    [DemoView appearanceWhenContainedInInstancesOfClasses:@[[self class]]].leftColor = [UIColor yellowColor];
}

UIAppearance 实现原理

1 - 查看 API 发现 iOS5.0 之后提供的不仅是 UIAppearance，还有另外一个叫做 UIAppearanceContainer 的类。注：实际上它们都是 protocol

// UIAppearanceContainer 协议并没有任何约定方法，因为它只是作为一个容器
// 比如 UIView 实现了 UIAppearance 中的协议，既可以获取外观代理，也可以作为外观容器
// 而 UIViewController 则是仅实现了 UIAppearanceContainer 协议，它本身是控制器，并不是 view。但是它作为容器，就可以为 UIView 等服务

// 事实 UIView 的容器也基本上是 UIView 或 UIViewController，基本不需要自己去实现这两个协议
// 对于需要支持使用 appearance 来设置的属性，在属性后增加 UI_APPEARANCE_SELECTOR 宏声明即可
@protocol UIAppearanceContainer <NSObject> @end


@protocol UIAppearance <NSObject>
// 返回接受外观设置的代理
+ (instancetype)appearance;

// 当出现在某个类的出现时候才会改变
+ (instancetype)appearanceWhenContainedIn:(nullable Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION API_DEPRECATED_WITH_REPLACEMENT("appearanceWhenContainedInInstancesOfClasses:", ios(5.0, 9.0)) API_UNAVAILABLE(tvos);

// 针对不同 trait 下的应用的 apperance 进行简单设定
// 这两个 appearanceForTraitCollection方法是用于解决 Size Classes 的问题而诞生的，通过这两个 API 我们可以控制在不同屏幕尺寸下的样式
+ (instancetype)appearanceForTraitCollection:(UITraitCollection *)trait API_AVAILABLE(ios(8.0));
+ (instancetype)appearanceForTraitCollection:(UITraitCollection *)trait whenContainedInInstancesOfClasses:(NSArray<Class <UIAppearanceContainer>> *)containerTypes  API_AVAILABLE(ios(9.0));
// 已经废弃的方法
+ (instancetype)appearanceWhenContainedInInstancesOfClasses:(NSArray<Class <UIAppearanceContainer>> *)containerTypes API_AVAILABLE(ios(9.0));
+ (instancetype)appearanceForTraitCollection:(UITraitCollection *)trait whenContainedIn:(nullable Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION API_DEPRECATED_WITH_REPLACEMENT("appearanceForTraitCollection:whenContainedInInstancesOfClasses:", ios(8.0, 9.0)) API_UNAVAILABLE(tvos);

@end

显然苹果的思路是让 UIAppearance 成为一个可以返回代理的协议，通过它可以把任何配置转发给特定类的实例。这样做的好处就是 UIAppearance 可以处理所有类型的 UI 控件：无论它是 UIView 的子类、还是包含了视图实例的非 UIView 控件

2 - UI_APPEARANCE_SELECTOR

① 前面说到使用的时候需要在属性后增加 UI_APPEARANCE_SELECTOR 宏声明支持使用 UIAppearance 来配置属性，但是会发现它其实什么也没干

#define UI_APPEARANCE_SELECTOR __attribute__((annotate("ui_appearance_selector")))

② 既然它什么多没做，将 DemoView 中的代码将属性后的 UI_APPEARANCE_SELECTOR 去掉，运行程序发现效果是一样一样的！但是苹果官方说了这个是 must be

To support appearance customization, a class must conform to the UIAppearanceContainer protocol and relevant accessor methods must be marked with UI_APPEARANCE_SELECTOR.

3 - UIAppearance 工作原理

① DemoView 中在两个 setter 上打上断点

② 运行程序，发现 viewDidLoad 方法里面的这两句代码并没有调用 setter 方法，而当 DemoView 被加到主视图时才走了 setter 方法

③ 在通过 appearance 设置属性的时并不会生成实例，也不会不进行赋值操作，而需要视图被加到视图树中的时才会创建实例

不难看出 appearance 设置的属性，都以 Invocation 的形式存储到 _UIApperance 类中，等到视图树 performUpdates 时会去检查有没有相关的属性设置，有则 invoke

就是说使用 UIAppearance 时只有在视图添加到 window 时才会生效

小结

1 - 每一个实现 UIAppearance 协议的类，都会有一个 _UIApperance 实例，保存着这个类通过 appearance 设置属性的 invocations，在该类被添加或应用到视图树上的时候，它会检查并调用这些属性设置，这样就实现了让所有该类的实例都自动统一属性

2 - appearance 只是起到一个代理作用，在特定的时机让代理替所有实例做同样的事