iOS适配深色模式

作者: BoxJing | 来源:发表于2019-10-22 18:29 被阅读0次

iOS13出来已经挺久了,今天才认真的看了看深色模式的魅力,老工程适配深色模式的确会是个庞大的工程,这篇文章记录一下,今天下午简单做了些适配深色模式的功课。

1. 颜色适配

在iOS13中系统提供了动态颜色的方法:

+ (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);

我们可以直接封装一个UIColor的类别来获取不同模式下的颜色:

+(UIColor *)colorWithDarkModeColor:(UIColor *)darkColor normalColor:(UIColor *)color
{
    if (@available(iOS 13.0,*)) {
        UIColor *dyColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trainCollection) {
            if ([trainCollection userInterfaceStyle] == UIUserInterfaceStyleDark) {
                return darkColor;
            }
            else {
                return color;
            }
        }];
        return dyColor;
    }
    return color;
}

这样,我们在使用的时候就可以方便的调用,当模式改变后,系统会自己根据是否是深色模式更改不同的颜色:

UIColor *color = [UIColor colorWithDarkModeColor:[UIColor blackColor] normalColor:[UIColor whiteColor]];
[self.view setBackgroundColor:color];

如果遇到一些比较特殊的情况,比如隐藏一些空间或者改变渐变颜色之类的需求,那我们就需要监听用户模式的改变,这个方法在UIViewController和UIView中都可以直接调用:

- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));

///Example
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
     [super traitCollectionDidChange:previousTraitCollection];
    NSLog(@"-----current-%ld\n=====previous=%ld",self.traitCollection.userInterfaceStyle,previousTraitCollection.userInterfaceStyle);
     // trait发生了改变
     if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
         
     }
}
2. 图片适配

在Asset里面,Xcode在Appearance里可以选择不同的模式,一般情况下我们只用适配深色模式和非深色模式,如图:



然后代码里就直接写:

imgView.image=[UIImage imageNamed:@"iconImage"];

这点,很符合苹果的个性,就是这么随意,改变模式后自动更改图片,开发者不用再做其他的事情。

也许很多开发者会发现,大厂的应用,所有的图标都很简单,线性,单色等特点,有抖音的可以看下抖音的图标(点赞、评论、分享、查找...),看过后相信有人会直接想到iconfont这个东西,没错,如果你们的应用之前考虑过瘦身,应该看到过使用iconfont来瘦身的文章。举个例子下面这些图标:

iconfont.png
如果是png格式的话,最起码需要50kb空间,再加上适配深色模式double一下就是100kb!那么如果用iconfont的话,大小之后2kb,而且可以随便改尺寸。整整50倍,什么概念。用了iconfont的话在适配深色模式的时候也会比较简单,就像颜色适配一样的容易,最后动图中的下面3个图标都是用的iconfont。
label.font = [UIFont imageFontWithSize:34.0];
label.text = @"\U0000e668";
label.textColor=[UIColor colorWithDarkModeColor:[UIColor lightGrayColor] normalColor:[UIColor redColor]];

里面用到了一个UIFont的类别方便加载iconfont:

+(UIFont *)imageFontWithSize:(CGFloat)fontSize
{
   return [UIFont fontWithName:@"iconFont" size: fontSize];
}

简单做了个小小Demo放在了GitHub-iOS深色模式
上,效果图如下:

darkmode.gif

相关文章

  • iOS13-适配夜间模式/深色外观(Dark Mode)

    iOS13-适配夜间模式/深色外观(Dark Mode) iOS13-适配夜间模式/深色外观(Dark Mode)

  • uni-app做iOS的夜间模式

    iOS13适配暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)问题:1.监听Android深色或浅色模式...

  • iOS适配深色模式

    iOS13出来已经挺久了,今天才认真的看了看深色模式的魅力,老工程适配深色模式的确会是个庞大的工程,这篇文章记录一...

  • iOS适配深色模式

    1.如果你的项目之前禁用了深色模式,在plist中请删除这一项 UIColoriOS13中系统提供了动态颜色的方法...

  • iOS深色模式适配

    不适配深色模式 直接在info新加一个字段 User Interface Style 设置值为 Light 适配深...

  • iOS适配深色模式

    我们所熟悉的 UIView 、UIViewController 、UIScreen、UIWindow 都已经遵从了...

  • iOS 深色模式的适配

    你可以这样玩 也可这样玩 如果是在ViewController 里面 还可以这样玩 颜色适配 还可以这么玩 ,用A...

  • iOS适配深色DarkMode模式

    iOS在13的版本加入了对深色模式的支持,深色模式下App整体上呈现黑色UI界面,现在许多App都完成了深色模式的...

  • Sign In with Apple

    原文博客地址: Sign In With Apple 在之前的文章iOS13适配深色模式(Dark Mode)中只...

  • ios 不想适配ios13暗黑模式怎么办? Xcode10打包适

    前言:ios13可以设置暗黑模式,即浅色和深色,但是app如果适配的话需要做很多工作,比如暗黑图片等,如果不想适配...

网友评论

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

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