美文网首页
iOS适配深色模式

iOS适配深色模式

作者: tongyuling | 来源:发表于2021-09-13 17:05 被阅读0次

    我们所熟悉的 UIView 、UIViewController 、UIScreen、UIWindow 都已经遵从了一个叫UITraitEnvironment的协议。

    这些类都拥有一个叫做 traitCollection 的属性,traitCollection里面有一个userInterfaceStyle属性,而颜色模式就是存在 userInterfaceStyle 中。

    我们就可以通过traitCollection的userInterfaceStyle来判断当前系统的颜色模式。

    if (self.window.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
        <#statements#>
    }
    
    typedef NS_ENUM(NSInteger, UIUserInterfaceStyle) {
        UIUserInterfaceStyleUnspecified,
        UIUserInterfaceStyleLight,
        UIUserInterfaceStyleDark,
    } API_AVAILABLE(tvos(10.0)) API_AVAILABLE(ios(12.0)) API_UNAVAILABLE(watchos);
    

    颜色

    在iOS13以后,UIKit给我们提供了很多的动态颜色,以system开头的都是动态颜色,当我们给 UI 控件设置了动态颜色以后。

    UI 控件就会自动的根据当前是否是黑暗模式展现出来对应的颜色。比如这样写:

    self.view.backgroundColor = [UIColor systemRedColor];
    

    当然,系统提供的这些动态颜色肯定是无法满足我们的实际开发需求,因此在实际开发中,我们可以创建我们自定义的动态颜色。

    在 iOS 13 中, UIKit 为 UIColor 所提供的 新 API 来创建我们自己的动态颜色。

    UIColor *color = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) 
    {
            if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                //深色模式下的颜色
                return [UIColor blueColor];
            }else {
                //浅色模式下的颜色
                return [UIColor purpleColor];
            }
    }];
    self.view.backgroundColor = color;
    

    除了这个API,我们还可以通过Xcode11的一个新功能,给xcassets中的颜色设置深色和浅色俩种表现形式。


    颜色

    使用方法:

    self.view.backgroundColor = [UIColor colorNamed:@"testColor"];
    

    图片

    图片的设置与颜色的设置相似(名称则为图片的名称、appearances选择为any、dark)


    模糊效果

    模糊效果也就是我们常说的毛玻璃效果。那么在iOS7之前一般使用UIToolBar来做。在iOS8之后,苹果新增了一个类UIVisualEffectView来专门实现这种模糊效果。

    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemMaterial];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = self.view.bounds;
    [self.view addSubview:effectView];
    

    在iOS13之后,UIKit也为我们提供了四种动态模糊样式:

    /*
         * Blur styles available in iOS 13.
         *
         * Styles which automatically adapt to the user interface style:
         */
        UIBlurEffectStyleSystemUltraThinMaterial        API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
        UIBlurEffectStyleSystemThinMaterial             API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
        UIBlurEffectStyleSystemMaterial                 API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
        UIBlurEffectStyleSystemThickMaterial            API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
        UIBlurEffectStyleSystemChromeMaterial           API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(tvos, watchos),
    

    UIBlurEffectStyleSystemChromeMaterial这种样式是用来指定运行在 macOS 上的 iPad 应用的边框颜色的。
    所以想要模糊效果适配深色模式直接以上四种动态模糊样式就可以了。


    如果我们希望某个单独的视图以一种固定的显示模式来显示的话,
    我们可以通过setOverrideUserInterfaceStyle这个方法来设置视图的显示模式。

    [self.view setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];
    

    如果说我们希望某个界面以一种固定的的模式来显示的话,可以重写
    overrideUserInterfaceStyle方法,返回一个固定的显示模式。

    -(UIUserInterfaceStyle)overrideUserInterfaceStyle {
        return UIUserInterfaceStyleDark;
    }
    

    如果想让 App 都以一种固定的模式显示,只要在 Info.plist 文件中将UIUserInterfaceStyle 设置为 Light 或 Dark 就可以了。

    相关文章

      网友评论

          本文标题:iOS适配深色模式

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