android知乎和简书的夜间模式实现套路

分手后的思念是犯贱 2024-04-18 08:59 62阅读 0赞

这篇记录太实用了，推荐一下。今天要写的这篇文章主题是关于夜间模式的实现套路。本来这篇文章是上周要写的，结果因为上周末有其他事情，所以拖到这个周末才完成。曾经和薇薇（钛媒体漂亮的程序媛）聊过夜间模式实现的问题，当时薇薇酱负责钛媒体客户端的重构工作，有个夜间模式功能在考虑要不要用 Android M 新加的夜间模式特性。凭借稍微有点点老司机的经验，我直接说了 NO。按照以往的套路，通常新出的功能都会有坑，或者向下兼容性的问题。自己弄弄 Demo 玩玩是可以的，但是引入企业开发还是谨慎点，说白了就是先等等，让大家把坑填完了再用。果然，Android M 发正式版的时候，预览版里面的夜间模式功能被暂时移除了（哈哈哈哈，机智如我，最新发布的 Android N 正式版已经有夜间模式了，大家可以去玩玩）。

## 前言 ##

好了，回归正题，说回夜间模式。在网上看到很多童鞋都说用什么什么框架来实现这个功能，然后仔细去看一下各个推荐的框架，发现其实都是动态换肤的，动态换肤可比夜间模式要复杂多了，未免大材小用了。说实话，我一直没用什么好思路，虽然网上有童鞋提供了一种思路是通过 setTheme 然后再 recreate Activity 的方式，但是这样带来的问题是非常多的，看起来就相当不科学（为什么不科学，后文会说）。**于是，直接想到了去逆向分析那些夜间模式做得好的应用的源代码，学习他们的实现套路。所以，本文的实现思路来自于编写这些应用的夜间模式功能的童鞋，先在这里向他们表示感谢。**我的手机里面使用高频的应用不少，其中简书和知乎是属于夜间模式做得相当 nice 的。先给两个效果图大家对比感受下

如果大家仔细观察，肯定会发现，知乎的切换效果更漂亮些，因为它有一个渐变的效果。那么它们的夜间模式到底是如何实现的呢？别急接着往下看，你也可以。

## 实现套路 ##

这里先展示一下我的实现效果吧

<table> 
 <thead> 
  <tr> 
   <th>简书实现效果</th> 
   <th>知乎实现效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MTIxODEtMGQ4N2I4ZWRhZDhiNzY5ZS5naWY_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy80MzIvZm9ybWF0L3dlYnA"></p> </td> 
   <td> <p><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MTIxODEtMTEwN2Q1ZjZkMTkyNWRlYS5naWY_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy80MzIvZm9ybWF0L3dlYnA"></p> </td> 
  </tr> 
 </tbody> 
</table>

此处分为两个部分，一部分是 xml 文件中要干的活，一部分是 Java 代码要实现的活，先说 xml 吧。

### XML 配置 ###

首先，先写一套UI界面出来，上方左边是两个 TextView，右边是两个 CheckBox，下方是一个 RecyclerView ，实现很简单，这里我不贴代码了。

![format_png][]

接着，在 styles 文件中添加两个 Theme，一个是日间主题，一个是夜间主题。它们的属性都是一样的，唯一区别在于颜色效果不同。

<style name="DayTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="clockBackground">@android:color/white</item>
            <item name="clockTextColor">@android:color/black</item>
        </style>
    
        
        <style name="NightTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="colorPrimary">@color/color3F3F3F</item>
            <item name="colorPrimaryDark">@color/color3A3A3A</item>
            <item name="colorAccent">@color/color868686</item>
            <item name="clockBackground">@color/color3F3F3F</item>
            <item name="clockTextColor">@color/color8A9599</item>
        </style>

需要注意的是，上面的 clockTextColor 和 clockBackground 是我自定义的 color 类型属性

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <attr name="clockBackground" format="color" />
        <attr name="clockTextColor" format="color" />
    </resources>

然后再到所有需要实现夜间模式功能的 xml 布局文件中，加入类似下面设置，比如我在 RecyclerView 的 Item 布局文件中做了如下设置

![format_png 1][]

稍稍解释下其作用，如 TextView 里的 android:textColor="?attr/clockTextColor" 是让其字体颜色跟随所设置的 Theme。到这里，xml 需要做的配置全部完成，接下来是 Java 代码实现了。

### Java 代码实现 ###

大家可以先看下面的实现代码，看不懂的童鞋可以边结合我代码下方实现思路解说。

package com.clock.study.activity;
    
    import ...
    
    /**
     * 夜间模式实现方案
     *
     * @author Clock
     * @since 2016-08-11
     */
    public class DayNightActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
    
        private final static String TAG = DayNightActivity.class.getSimpleName();
        /**用于将主题设置保存到SharePreferences的工具类**/
        private DayNightHelper mDayNightHelper;
    
        private RecyclerView mRecyclerView;
    
        private LinearLayout mHeaderLayout;
        private List<RelativeLayout> mLayoutList;
        private List<TextView> mTextViewList;
        private List<CheckBox> mCheckBoxList;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
            initData();
            initTheme();
            setContentView(R.layout.activity_day_night);
            initView();
        }
    
        private void initView() {
            mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
            RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
            mRecyclerView.setLayoutManager(layoutManager);
            mRecyclerView.setAdapter(new SimpleAuthorAdapter());
    
            mHeaderLayout = (LinearLayout) findViewById(R.id.header_layout);
    
            mLayoutList = new ArrayList<>();
            mLayoutList.add((RelativeLayout) findViewById(R.id.jianshu_layout));
            mLayoutList.add((RelativeLayout) findViewById(R.id.zhihu_layout));
    
            mTextViewList = new ArrayList<>();
            mTextViewList.add((TextView) findViewById(R.id.tv_jianshu));
            mTextViewList.add((TextView) findViewById(R.id.tv_zhihu));
    
            mCheckBoxList = new ArrayList<>();
            CheckBox ckbJianshu = (CheckBox) findViewById(R.id.ckb_jianshu);
            ckbJianshu.setOnCheckedChangeListener(this);
            mCheckBoxList.add(ckbJianshu);
            CheckBox ckbZhihu = (CheckBox) findViewById(R.id.ckb_zhihu);
            ckbZhihu.setOnCheckedChangeListener(this);
            mCheckBoxList.add(ckbZhihu);
    
        }
    
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            int viewId = buttonView.getId();
            if (viewId == R.id.ckb_jianshu) {
                changeThemeByJianShu();
    
            } else if (viewId == R.id.ckb_zhihu) {
                changeThemeByZhiHu();
    
            }
        }
    
        private void initData() {
            mDayNightHelper = new DayNightHelper(this);
        }
    
        private void initTheme() {
            if (mDayNightHelper.isDay()) {
                setTheme(R.style.DayTheme);
            } else {
                setTheme(R.style.NightTheme);
            }
        }
    
        /**
         * 切换主题设置
         */
        private void toggleThemeSetting() {
            if (mDayNightHelper.isDay()) {
                mDayNightHelper.setMode(DayNight.NIGHT);
                setTheme(R.style.NightTheme);
            } else {
                mDayNightHelper.setMode(DayNight.DAY);
                setTheme(R.style.DayTheme);
            }
        }
    
        /**
         * 使用简书的实现套路来切换夜间主题
         */
        private void changeThemeByJianShu() {
            toggleThemeSetting();
            refreshUI();
        }
    
        /**
         * 使用知乎的实现套路来切换夜间主题
         */
        private void changeThemeByZhiHu() {
            showAnimation();
            toggleThemeSetting();
            refreshUI();
        }
    
        /**
         * 刷新UI界面
         */
        private void refreshUI() {
            TypedValue background = new TypedValue();//背景色
            TypedValue textColor = new TypedValue();//字体颜色
            Resources.Theme theme = getTheme();
            theme.resolveAttribute(R.attr.clockBackground, background, true);
            theme.resolveAttribute(R.attr.clockTextColor, textColor, true);
    
            mHeaderLayout.setBackgroundResource(background.resourceId);
            for (RelativeLayout layout : mLayoutList) {
                layout.setBackgroundResource(background.resourceId);
            }
            for (CheckBox checkBox : mCheckBoxList) {
                checkBox.setBackgroundResource(background.resourceId);
            }
            for (TextView textView : mTextViewList) {
                textView.setBackgroundResource(background.resourceId);
            }
    
            Resources resources = getResources();
            for (TextView textView : mTextViewList) {
                textView.setTextColor(resources.getColor(textColor.resourceId));
            }
    
            int childCount = mRecyclerView.getChildCount();
            for (int childIndex = 0; childIndex < childCount; childIndex++) {
                ViewGroup childView = (ViewGroup) mRecyclerView.getChildAt(childIndex);
                childView.setBackgroundResource(background.resourceId);
                View infoLayout = childView.findViewById(R.id.info_layout);
                infoLayout.setBackgroundResource(background.resourceId);
                TextView nickName = (TextView) childView.findViewById(R.id.tv_nickname);
                nickName.setBackgroundResource(background.resourceId);
                nickName.setTextColor(resources.getColor(textColor.resourceId));
                TextView motto = (TextView) childView.findViewById(R.id.tv_motto);
                motto.setBackgroundResource(background.resourceId);
                motto.setTextColor(resources.getColor(textColor.resourceId));
            }
    
            //让 RecyclerView 缓存在 Pool 中的 Item 失效
            //那么，如果是ListView，要怎么做呢？这里的思路是通过反射拿到 AbsListView 类中的 RecycleBin 对象，然后同样再用反射去调用 clear 方法
            Class<RecyclerView> recyclerViewClass = RecyclerView.class;
            try {
                Field declaredField = recyclerViewClass.getDeclaredField("mRecycler");
                declaredField.setAccessible(true);
                Method declaredMethod = Class.forName(RecyclerView.Recycler.class.getName()).getDeclaredMethod("clear", (Class<?>[]) new Class[0]);
                declaredMethod.setAccessible(true);
                declaredMethod.invoke(declaredField.get(mRecyclerView), new Object[0]);
                RecyclerView.RecycledViewPool recycledViewPool = mRecyclerView.getRecycledViewPool();
                recycledViewPool.clear();
    
            } catch (NoSuchFieldException e) {
                e.printStackTrace();
            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            } catch (NoSuchMethodException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }
    
            refreshStatusBar();
        }
    
        /**
         * 刷新 StatusBar
         */
        private void refreshStatusBar() {
            if (Build.VERSION.SDK_INT >= 21) {
                TypedValue typedValue = new TypedValue();
                Resources.Theme theme = getTheme();
                theme.resolveAttribute(R.attr.colorPrimary, typedValue, true);
                getWindow().setStatusBarColor(getResources().getColor(typedValue.resourceId));
            }
        }
    
        /**
         * 展示一个切换动画
         */
        private void showAnimation() {
            final View decorView = getWindow().getDecorView();
            Bitmap cacheBitmap = getCacheBitmapFromView(decorView);
            if (decorView instanceof ViewGroup && cacheBitmap != null) {
                final View view = new View(this);
                view.setBackgroundDrawable(new BitmapDrawable(getResources(), cacheBitmap));
                ViewGroup.LayoutParams layoutParam = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT);
                ((ViewGroup) decorView).addView(view, layoutParam);
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f);
                objectAnimator.setDuration(300);
                objectAnimator.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        ((ViewGroup) decorView).removeView(view);
                    }
                });
                objectAnimator.start();
            }
        }
    
        /**
         * 获取一个 View 的缓存视图
         *
         * @param view
         * @return
         */
        private Bitmap getCacheBitmapFromView(View view) {
            final boolean drawingCacheEnabled = true;
            view.setDrawingCacheEnabled(drawingCacheEnabled);
            view.buildDrawingCache(drawingCacheEnabled);
            final Bitmap drawingCache = view.getDrawingCache();
            Bitmap bitmap;
            if (drawingCache != null) {
                bitmap = Bitmap.createBitmap(drawingCache);
                view.setDrawingCacheEnabled(false);
            } else {
                bitmap = null;
            }
            return bitmap;
        }
    }

实现思路和代码解说：

1.  DayNightHelper 类是用于保存夜间模式设置到 SharePreferences 的工具类，在 initData 函数中被初始化，其他的 View 和 Layout 都是界面布局，在 initView 函数中被初始化；
2.  在 Activity 的 onCreate 函数调用 setContentView 之前，需要先去 setTheme，因为当 View 创建成功后 ，再去 setTheme 是无法对 View 的 UI 效果产生影响的；
3.  onCheckedChanged 用于监听日间模式和夜间模式的切换操作；
4.  **refreshUI 是本实现的关键函数**，起着切换效果的作用，通过 TypedValue 和 Theme.resolveAttribute 在代码中获取 Theme 中设置的颜色，来重新设置控件的背景色或者字体颜色等等。**需要特别注意的是 RecyclerView 和 ListView 这种比较特殊的控件处理方式，代码注释中已经说明，大家可以看代码中注释**；
5.  refreshStatusBar 用于刷新顶部通知栏位置的颜色；
6.  **showAnimation 和 getCacheBitmapFromView 同样是本实现的关键函数**，getCacheBitmapFromView 用于将 View 中的内容转换成 Bitmap（类似于截屏操作那样），showAnimation 是用于展示一个渐隐效果的属性动画，这个属性作用在哪个对象上呢？是一个 View ，一个在代码中动态填充到 DecorView 中的 View（不知道 DecorView 的童鞋得回去看看 Android Window 相关的知识）。**知乎之所以在夜间模式切换过程中会有渐隐效果，是因为在切换前进行了截屏，同时将截屏拿到的 Bitmap 设置到动态填充到 DecorView 中的 View 上，并对这个 View 执行一个渐隐的属性动画，所以使得我们能够看到一个漂亮的渐隐过渡的动画效果。而且在动画结束的时候再把这个动态添加的 View 给 remove 了，避免了 Bitmap 造成内存飙升问题。**对待知乎客户端开发者这种处理方式，我必须双手点赞外加一个大写的服。

到这里，实现套路基本说完了，简书和知乎的实现套路如上所述，区别就是知乎多了个截屏和渐隐过渡动画效果而已。

## 一些思考 ##

整理逆向分析的过程，也对夜间模式的实现有了不少思考，希望与各位童鞋们探讨分享。

> 最初步的逆向分析过程就发现了，知乎和简书并没有引入任何第三方框架来实现夜间模式，为什么呢？

因为我看到的大部分都实现夜间模式的思路都是用开源的换肤框架，或多或少存在着些 BUG。简书和知乎不用可能是出于框架不稳定性，以及我前面提到的用换肤框架来实现夜间模式大材小用吧。（我也只是瞎猜，哈哈哈）

> 前面我提到，通过 setTheme 然后再去 Activity recreate 的方案不可行，为什么呢？

我认为不可行的原因有两点，一个是 Activity recreate 会有闪烁效果体验不加，二是 Activity recreate 涉及到状态状态保存问题，如自身的状态保存，如果 Activity 中包含着多个 Fragment ，那就更加头疼了。

> 知乎和简书设置夜间模式的位置，有点巧妙，巧妙在哪？

知乎和简书出发夜间模式切换的地方，都是在 MainActivity 的一个 Fragment 中。也就是说，如果你要切换模式时，必须回到主界面，此时只存在主界面一个 Activity，只需要遍历主界面更新控件色调即可。而对于其他设置夜间模式后新建的 Activity ，只需要在 setContentView 之前做一下判断并 setTheme 即可。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MTIxODEtM2ZjMWI3MDRlYmMzZWY4YS5wbmc_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy80MTQvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MTIxODEtMWNmMTY1ZDUxYTY0ZmIwOC5wbmc_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy82ODUvZm9ybWF0L3dlYnA?x-oss-process=image/format,png