换肤功能接入及原理

2018/01/22 开源

前阵子开源出了自己的mp3剪切器项目,在鸿洋大神公众号的宣传下引来众人关注。本着持续维护的心,计划中项目要实现一个简单的应用内换肤功能。

经过调研发现一款很用心的开源的换肤框架Android-skin-support。它支持应用内换肤、插件式换肤和自定义加载的方式。在这里只介绍一下应用内换肤方式,希望能够抛砖引玉,详细的介绍可以参考它的github。先来看看效果Gif图。

效果图

使用方法

  1. 先来添加jcenter依赖库,
     compile 'skin.support:skin-support:2.2.3'                   
     compile 'skin.support:skin-support-design:2.2.3'  
    
  2. Application类中增加初始化sdk代码
    SkinCompatManager.withoutActivity(this)                         // 基础控件换肤初始化
                 .addInflater(new SkinMaterialViewInflater())            // material design 控件换肤初始化[可选]
                 .setSkinStatusBarColorEnable(false)                     // 关闭状态栏换肤,默认打开[可选]
                 .setSkinWindowBackgroundEnable(false)                   // 关闭windowBackground换肤,默认打开[可选]
                 .loadSkin();
    
  3. 设置需要换肤的控件,我这里主要为toolbar换肤。 ```

<skin.support.widget.SkinCompatToolbar android:id=”@+id/toolbar” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:fitsSystemWindows=”true” android:minHeight=”?attr/actionBarSize” android:popupTheme=”@style/ThemeOverlay.AppCompat.Light” app:theme=”@style/ThemeOverlay.AppCompat.ActionBar”

4. 准备换肤的资源,我这里用的主题颜色以及颜色的名称,放入arrays.xml中。
#000000 #FB5B81 #0077D9 #03A9F4 #000000 #009688 #795548 #4CAF50 #FF5252 @color/theme_color_redbase @color/theme_color_blue @color/theme_color_bluelight @color/theme_color_balck @color/theme_color_teal @color/theme_color_brown @color/theme_color_green @color/theme_color_red redbase blue bluelight balck teal brown green red

5. 换肤api调用, 这里传入了选中的主题颜色名称,以及换肤的加载方式(应用内换肤)

SkinCompatManager.getInstance().loadSkin( mThemeColorList.get(mThemeColorAdapter.getPosition()).getName(), null,SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);


## 问题
- 如何定位需要换肤的view,如何进行换肤操作?
- 如何遍历每个activity中的需要换肤的view?

## 浅析
1. 定位需要被换肤view的思路 主要通过`LayoutInflaterFactory`获取到当前activity中所有的组件,通过过滤定位到需要换肤的view。可以参考鸿洋的这篇文章 [Android 探究 LayoutInflater setFactory](http://blog.csdn.net/lmj623565791/article/details/51503977)。
  `SkinCompatDelegate`类实现了`LayoutInflaterFactory`接口,并实现了它的`createView()`方法, 这里看`SkinCompatViewInflater类的createView()`代码如下:
        case "View":
            view = new SkinCompatView(context, attrs);
            break;
        case "LinearLayout":
            view = new SkinCompatLinearLayout(context, attrs);
            break;
        case "RelativeLayout":
            view = new SkinCompatRelativeLayout(context, attrs);
            break;
        case "FrameLayout":
            view = new SkinCompatFrameLayout(context, attrs);
            break;
        case "TextView":
            view = new SkinCompatTextView(context, attrs);
            break;
        case "ImageView":
            view = new SkinCompatImageView(context, attrs);
            break; ``` 可以看到在`createView`遍历后将其替换了对应的Skin开头的对应的类。而Skin开头的类是什么呢, 来看`SkinCompatView`类。 ``` public class SkinCompatView extends View implements SkinCompatSupportable {
private SkinCompatBackgroundHelper mBackgroundTintHelper;
...
@Override
public void setBackgroundResource(int resId) {
    super.setBackgroundResource(resId);
    if (mBackgroundTintHelper != null) {
        mBackgroundTintHelper.onSetBackgroundResource(resId);
    }
}
@Override
public void applySkin() {
    if (mBackgroundTintHelper != null) {
        mBackgroundTintHelper.applySkin();
    }
}

}

可以看到它实现了`SkinCompatSupportable`接口以及其`applySkin`方法,该方法就是换肤的实现方法了。
接着来看`SkinCompatDelegate.onCreateView()`

@Override public View onCreateView(View parent, String name, Context context, AttributeSet attrs) { View view = createView(parent, name, context, attrs); if (view == null) { return null; } if (view instanceof SkinCompatSupportable) { mSkinHelpers.add(new WeakReference<>((SkinCompatSupportable) view)); } return view; }

上文已经将view转换为Skin开头的View(实现了`SkinCompatSupportable`的View)可以看到将其缓存到了mSkinHelpers数组中。再看`SkinCompatDelegate.applySkin()`
public void applySkin() {
    if (mSkinHelpers != null && !mSkinHelpers.isEmpty()) {
        for (WeakReference ref : mSkinHelpers) {
            if (ref != null && ref.get() != null) {
                ((SkinCompatSupportable) ref.get()).applySkin();
            }
        }
    }
} ``` 该方法就是换肤的操作了,遍历缓存中所有的view,执行其换肤方法`applySkin`。这里我们再看一下applySkin里面的实现,来看`SkinBuildInLoader.getTargetResourceEntryName()`。 ```
@Override
public String getTargetResourceEntryName(Context context, String skinName, int resId) {
    return context.getResources().getResourceEntryName(resId) + "_" + skinName;
} ```
  1. 第二个问题,可以通过BaseActivity的方式来达到目的,但是有更好的方式。来看SkinActivityLifecycle的构造方法application.registerActivityLifecycleCallbacks(this);。注册之后没个activity的声明周期回调都会在该类中回调到, 如onActivityCreated()
    @Override
     public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
         if (isContextSkinEnable(activity)) {
             installLayoutFactory(activity);
             updateStatusBarColor(activity);
             updateWindowBackground(activity);
             if (activity instanceof SkinCompatSupportable) {
                 ((SkinCompatSupportable) activity).applySkin();
             }
         }
     }
    

    在每个activity创建后都会对应执行到installLayoutFactory(activity)方法,从而达到对每个activity 换肤view做收集换肤的目的。 到此,基本原理,都阐述完了,具体不懂的更详细的还要结合源码来看,如下:

Github

mp3剪切器项目

Android-skin-support

Search

    Table of Contents