初见

iOS 13 黑暗模式(Dark Mode)的适配

2020-05-18  本文已影响0人  PersonChen_QJ

正文

记录适配黑暗模式中的注意点,若有不足和错误请指导,谢谢

目录

    1. 什么是黑暗模式,是否需要强制适配
    1. 如何获取当前模式,如何监听模式的切换
    1. 如何适配颜色
    1. 如何适配图片
    1. 如何适配状态栏
    1. 总结

1. 什么是黑暗模式,是否需要强制适配

  • 1.1 黑暗模式是iOS 13 推出的一种新的视觉效果,方便用户在夜里使用应用。再黑暗模式下,耗电量更低(拒说)。
  • 1.2 目前不需要强制适配。
  • 1.3 如果不需要适配,又不想影响我们的应用,可以禁止使用深色模式,或者指定我们的界面为某个固定模式
1. 全局设置指定模式 
   在App内禁用深色模式: 可以在Info.plist(全局) 中,设置 User Interface Style 为 Light。
2. 单界面指定某一固定模式
if (@available(iOS 13.0, *)) {
        //在单个页面内禁用深色模式使用overrideUserInterfaceStyle:
        self.view.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
        //在单个页面内禁用浅色模式使用overrideUserInterfaceStyle:
        self.view.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
    }

2. 如何获取当前模式,如何监听模式的切换

  • 2.1 获取当前模式
//获取当前模式
    if (@available(iOS 13.0, *)) {
        UIUserInterfaceStyle mode = self.traitCollection.userInterfaceStyle;
        if (mode == UIUserInterfaceStyleDark) {
            NSLog(@"深色模式");
        } else if (mode == UIUserInterfaceStyleLight) {
            NSLog(@"浅色模式");
        } else {
            NSLog(@"未知模式");
        }
    }
  • 2.2 获取模式切换监听
  • 监听系统模式的变化,需要我们在需要监听的Conttoller中,重写- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection方法
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection{
    NSLog(@"traitCollectionDidChange");
    [super traitCollectionDidChange:previousTraitCollection];
    // 注意:参数为变化前的traitCollection
    // 判断模式是否一样
    if (@available(iOS 13.0, *)) {
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {//模式发生了变化
        }
    }
}
  • 2.3 当再一个UIViewController监听变化时,会调用
-(void)viewWillLayoutSubviews{
    
}
-(void)viewDidLayoutSubviews{
    
}

-(void)updateViewConstraints{
    
}
  • 2.4 当再UIView中时
-(void)drawRect:(CGRect)rect{
    
}
-(void)layoutSubviews{
    
}
-(void)updateConstraints{
    
}
-(void)tintColorDidChange{
    
}

3. 颜色适配

  • 3.1 再UIColor类,新增了2个方法。用来定义一个可供切换的动态颜色,当模式发生变化时,使用该颜色的控件会发生颜色变化。
/* Create a dynamic color with a provider.
 * When methods are called on this color that need color component values,
 * the provider is called with UITraitCollection.currentTraitCollection.
 * The provider should use that trait collection to decide a more fundamental UIColor to return.
 * As much as possible, use the given trait collection to make that decision, not other state.
 */

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
  • 例如,我设置界面的背景颜色,当模式发生变化时,页面颜色会跟着变
//颜色适配
    if (@available(iOS 13.0, *)) {
         UIColor *viewColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
                return [UIColor redColor];
            }else if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark){
                return [UIColor greenColor];
            }else{
                return [UIColor orangeColor];
            }
        }];
        self.view.backgroundColor = viewColor;
    }

4. 图片适配

4.1 打开Assets.xcassets,点击已存在的一张图片(如果没有新建一个Image Set),打开右侧的工具栏,找到Appearances,按照自己的需求选择场景
4.2 选择后,再对应的模式放上对应的图片即可
4.3 调用

[UIImage imageNamed:@"xxxx"]

5. 状态栏适配

  • 5.1 iOS 12 状态栏只有2种状态
UIStatusBarStyleDefault  文字黑色
UIStatusBarStyleLightContent  文字白色
  • 5.2 iOS 13 状态栏新增一种状态
UIStatusBarStyleDefault 自动选择黑色或白色
UIStatusBarStyleDarkContent 文字黑色
UIStatusBarStyleLightContent 文字白色

5.3 使用

  • 当模式为Light 时,状态栏为: UIStatusBarStyleDarkContent
  • 当模式为Dark 时,状态栏为: UIStatusBarStyleDarkContent
  • 当为指定时,状态栏为: UIStatusBarStyleDefault

6. 总结

  • 6.1 需要监听模式之间的切换,来实现不同模式下的不同场景
  • 6.2 颜色适配需要使用动态颜色来定义,这样开发者就不用再模式切换时再去重新设置控件对应的颜色,颜色需要对应2种色值,我自己项目中使用plist文件来管理。
  • 6.3 图片适配需要编辑 Image Set 的 Appearances。然后放入对应的图片

结尾

可能也没什么了。写的不是很好,大家凑合着看,有问题欢迎指出,谢谢!

上一篇下一篇

猜你喜欢

热点阅读