美文网首页初见
iOS 13 黑暗模式(Dark Mode)的适配

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

作者: PersonChen_QJ | 来源:发表于2020-05-18 15:39 被阅读0次

    正文

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

    目录

      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。然后放入对应的图片

    结尾

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

    相关文章

      网友评论

        本文标题:iOS 13 黑暗模式(Dark Mode)的适配

        本文链接:https://www.haomeiwen.com/subject/hamnnhtx.html