換膚功能接入及原理

zyl409214686發表於2018-01-16

前陣子開源出了自己的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'  
複製程式碼
  1. Application類中增加初始化sdk程式碼
SkinCompatManager.withoutActivity(this)                         // 基礎控制元件換膚初始化
                .addInflater(new SkinMaterialViewInflater())            // material design 控制元件換膚初始化[可選]
                .setSkinStatusBarColorEnable(false)                     // 關閉狀態列換膚，預設開啟[可選]
                .setSkinWindowBackgroundEnable(false)                   // 關閉windowBackground換膚，預設開啟[可選]
                .loadSkin();
複製程式碼
  1. 設定需要換膚的控制元件，我這裡主要為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"
複製程式碼
  1. 準備換膚的資源，我這裡用的主題顏色以及顏色的名稱,放入arrays.xml中。
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 預設主題顏色 -->
    <color name="theme_color">#000000</color>

    <!-- theme array -->
    <color name="theme_color_redbase">#FB5B81</color>
    <color name="theme_color_blue">#0077D9</color>
    <color name="theme_color_bluelight">#03A9F4</color>
    <color name="theme_color_balck">#000000</color>
    <color name="theme_color_teal">#009688</color>
    <color name="theme_color_brown">#795548</color>
    <color name="theme_color_green">#4CAF50</color>
    <color name="theme_color_red">#FF5252</color>

    <!-- 主題顏色， 用於換膚， 例如：@color/xx_redbase -->
    <string-array name="theme_colors">
        <item>@color/theme_color_redbase</item>
        <item>@color/theme_color_blue</item>
        <item>@color/theme_color_bluelight</item>
        <item>@color/theme_color_balck</item>
        <item>@color/theme_color_teal</item>
        <item>@color/theme_color_brown</item>
        <item>@color/theme_color_green</item>
        <item>@color/theme_color_red</item>
    </string-array>

    <!-- 主題名稱， 用於換膚， 例如：@color/xx_redbase -->
    <string-array name="theme_names">
        <item>redbase</item>
        <item>blue</item>
        <item>bluelight</item>
        <item>balck</item>
        <item>teal</item>
        <item>brown</item>
        <item>green</item>
        <item>red</item>
    </string-array>
</resources>

複製程式碼
  1. 換膚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。 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

相關文章