Android動態換膚原理解析及實踐

android飛魚發表於2018-11-29
Android

前言：

本文主要講述如何在專案中，在不重啟應用的情況下，實現動態換膚的效果。換膚這塊做的比較好的，有網易雲音樂，qq等，給使用者帶來了多樣的介面選擇和個性化定製。之前看到換膚的效果後對這塊也比較好奇，就抽時間研究了下，今天給大家分享解析原理和實踐中遇到的問題。

為什麼要做動態換膚：

  • 動態換膚可以滿足日常產品和運營需求，滿足使用者個性化介面定製的需求等等。

  • 動態換膚，相比於靜態皮膚，可以減小apk大小

  • 皮膚模組獨立便於維護

  • 由伺服器下發，不需要發版即可實現動態更新

換膚的一般實現思路：

  • 資源打包靜態替換方案:
    指定資源路徑地址，在打包時將對應資源打包進去
    build.gradle中進行對應配置

    sourceSets {
// 測試版本和線上版本用同一套資源
YymTest {
    res.srcDirs = ["src/Yym/res", "src/YymTest/res"]
    assets.srcDirs = ["src/Yym/assets"]
 }
}

    這種方式是在打包時，通過指定資原始檔的路徑在編譯打包時將對應的資源打包進去，以實現不同的主題樣式等換膚需求。適合釋出馬甲版本的app需求。

  • 動態換膚方案:
    應用執行時，選擇皮膚後，在主app中拿到對應皮膚包的Resource，將皮膚包中的
    資源動態載入到應用中展示並呈現給使用者。

動態換膚的一般步驟為：

  1. 下載並載入皮膚包

  2. 拿到皮膚包Resource物件

  3. 標記需要換膚的View

  4. 切換時即時重新整理頁面

  5. 製作皮膚包

  6. 換膚整體框架的搭建

如何拿到皮膚包Resouce物件：

PackageManager mPm = context.getPackageManager();
                    PackageInfo mInfo = mPm.getPackageArchiveInfo(skinPkgPath, 
PackageManager.GET_ACTIVITIES);
skinPackageName = mInfo.packageName;

AssetManager assetManager = AssetManager.class.newInstance();
Method addAssetPath = assetManager.getClass().getMethod("addAssetPath", String.class);
addAssetPath.invoke(assetManager, skinPkgPath);

Resources superRes = context.getResources();
Resources skinResource = new 
Resources(assetManager,superRes.getDisplayMetrics(),superRes.getConfiguration());

其中需要傳入的引數即為皮膚包的檔案路徑地址，還有當前app的context
其中superResource為當前app的Resource物件，而skinResource即為載入後的皮膚包的Resource物件。
皮膚包的資源即可通過skinResource.getIdentifier(resName, “color”, skinPackageName);這種方式拿到了。

如何標記需要換膚的View

  • 如何找到需要換膚的View

    1)通過xml標記的View:
    這種方式主要要通過實現LayoutInflate.Factory2這個介面(為支援AppcompotActivty 用LayoutInflaterFactory API是一樣的)。

/**
* Used with {@code LayoutInflaterCompat.setFactory()}. Offers the same API as
* {@code LayoutInflater.Factory2}.
*/
public interface LayoutInflaterFactory {

/**
 * Hook you can supply that is called when inflating from a LayoutInflater.
 * You can use this to customize the tag names available in your XML
 * layout files.
 *
 * @param parent The parent that the created view will be placed
 * in; <em>note that this may be null</em>.
 * @param name Tag name to be inflated.
 * @param context The context the view is being created in.
 * @param attrs Inflation attributes as specified in XML file.
 *
 * @return View Newly created view. Return null for the default
 *         behavior.
 */
public View onCreateView(View parent, String name, Context context, AttributeSet attrs);
}

LayoutInflater 提供了setFactory(LayoutInflater.Factory factory)和setFactory2(LayoutInflater.Factory2 factory)兩個方法可以讓你去自定義佈局的填充（有點類似於過濾器，我們在填充這個View之前可以做一些額外的事），Factory2 是在API 11才新增的。
通過實現這兩個介面可以實現View的重寫。Activity本身就預設實現了Factory介面，所以我們複寫了Factory的onCreateView之後，就可以不通過系統層而是自己截獲從xml對映的View進行相關View建立的操作，包括對View的屬性進行設定（比如背景色，字型大小，顏色等）以實現換膚的效果。如果onCreateView返回null的話，會將建立View的操作交給Activity預設實現的Factory的onCreateView處理。

SkinInflaterFactory:

public class SkinInflaterFactory implements LayoutInflaterFactory {

private static final boolean DEBUG = true;

/**
 * Store the view item that need skin changing in the activity
 */
private List<SkinItem> mSkinItems = new ArrayList<SkinItem>();
@Override
public View onCreateView(View parent, String name, Context context, AttributeSet attrs) {
    // if this is NOT enable to be skined , simplly skip it
    boolean isSkinEnable = attrs.getAttributeBooleanValue(SkinConfig.NAMESPACE, SkinConfig.ATTR_SKIN_ENABLE, false);
    Log.d("ansen", "isSkinEnable----->" + isSkinEnable);
    Log.d("ansen", "name----->" + name);
    if (!isSkinEnable) {
        return null;
    }

    View view = createView(context, name, attrs);

    if (view == null) {
        return null;
    }

    parseSkinAttr(context, attrs, view);

    return view;
}


/**
 * Invoke low-level function for instantiating a view by name. This attempts to
 * instantiate a view class of the given <var>name</var> found in this
 * LayoutInflater`s ClassLoader.
 *
 * @param context
 * @param name    The full name of the class to be instantiated.
 * @param attrs   The XML attributes supplied for this instance.
 * @return View The newly instantiated view, or null.
 */
private View createView(Context context, String name, AttributeSet attrs) {
    View view = null;
    try {
        if (-1 == name.indexOf(`.`)) {
            view = createViewFromPrefix(context, name, "android.view.", attrs);
            if (view == null) {
                view=createViewFromPrefix(context, name, "android.widget.", attrs);
                if(view==null){
                    view= createViewFromPrefix(context, name, "android.webkit.", attrs);
                }
            }

        } else {
            L.i("自定義View to create " + name);
            view=createViewFromPrefix(context, name, null, attrs);
        }

    } catch (Exception e) {
        L.e("error while create 【" + name + "】 : " + e.getMessage());
        view = null;
    }
    return view;
}

private View createViewFromPrefix(Context context, String name, String prefix, AttributeSet attrs) {
    View view;
    try {
        view = createView(context, name, prefix, attrs);
    } catch (Exception e) {
        view = null;
    }
    return view;

}

public void applySkin() {
    if (ListUtils.isEmpty(mSkinItems)) {
        return;
    }

    for (SkinItem si : mSkinItems) {
        if (si.view == null) {
            continue;
        }
        si.apply();
    }
  }

public void addSkinView(SkinItem item) {
    mSkinItems.add(item);
 }

}

對View屬性進行識別並轉化為皮膚屬性實體

  /**
     * Collect skin able tag such as background , textColor and so on
     *
     * @param context
     * @param attrs
     * @param view
     */
    private void parseSkinAttr(Context context, AttributeSet attrs, View view) {
        List<SkinAttr> viewAttrs = new ArrayList<SkinAttr>();

        for (int i = 0; i < attrs.getAttributeCount(); i++) {
        String attrName = attrs.getAttributeName(i);
        String attrValue = attrs.getAttributeValue(i);

        if (!AttrFactory.isSupportedAttr(attrName)) {
            continue;
        }

        if (attrValue.startsWith("@")) {
            try {
                int id = Integer.parseInt(attrValue.substring(1));
                String entryName = context.getResources().getResourceEntryName(id);
                String typeName = context.getResources().getResourceTypeName(id);
                SkinAttr mSkinAttr = AttrFactory.get(attrName, id, entryName, typeName);
                if (mSkinAttr != null) {
                    viewAttrs.add(mSkinAttr);
                }
            } catch (NumberFormatException e) {
                e.printStackTrace();
            } catch (NotFoundException e) {
                e.printStackTrace();
            }
          }
        }

        if (!ListUtils.isEmpty(viewAttrs)) {
        SkinItem skinItem = new SkinItem();
        skinItem.view = view;
        skinItem.attrs = viewAttrs;

        mSkinItems.add(skinItem);

        if (SkinManager.getInstance().isExternalSkin()) {
            skinItem.apply();
            }
        }

下面通過skin:enbale=”true”這種方式，對佈局中需要換膚的View進行標記

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:skin="http://schemas.android.com/android/skin"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:background="@color/hall_back_color"
  skin:enable="true"
  >

<code.solution.widget.CustomActivityBar
    android:id="@+id/custom_activity_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/widget_action_bar_height"
    app:common_activity_title="@string/app_name"
    app:common_activity_title_gravity="center"
    app:common_activity_title_icon="@drawable/ic_win_cp"
    />
</LinearLayout>

 

在SKinInflaterFactory的onCreateView 方法中，實際是對xml中對映的每個View
進行過濾。如果skin:enbale不為true則直接返回null交給系統預設去建立。而如果為true，則自己去建立這個View,並將這個VIew的所有屬性比如id, width height，textColor,background等與支援換膚的屬性進行對比。比如我們支援換background textColor listSelector等， android:background=”@color/hall_back_color” 這個屬性，在進行換膚的時候，如果皮膚包裡存在hall_back_color這個值的設定，就將這個顏色值替換為皮膚包裡的顏色值，以完成換膚的需求。同時，也會將這個需要換膚的View儲存起來。

如果在切換換膚之後，進入一個新的頁面，就在進入這個頁面Activity的 InlfaterFacory的onCreateView里根據skin:enable=”true” 這個標記，進行判斷。為true則進行換膚操作。而對於切換換膚操作時，已經存在的頁面，就對這幾個存在頁面儲存好的需要換膚的View進行換膚操作。

2)在程式碼中動態新增的View

上述是針對在佈局中設定skin:ebable=”true”的View進行換膚，那麼如果我們的View不是通過佈局檔案，而是通過在程式碼種建立的View，怎樣換膚呢？

public void dynamicAddSkinEnableView(Context context, View view, List<DynamicAttr> pDAttrs) {
    List<SkinAttr> viewAttrs = new ArrayList<SkinAttr>();
    SkinItem skinItem = new SkinItem();
    skinItem.view = view;

    for (DynamicAttr dAttr : pDAttrs) {
        int id = dAttr.refResId;
        String entryName = context.getResources().getResourceEntryName(id);
        String typeName = context.getResources().getResourceTypeName(id);
        SkinAttr mSkinAttr = AttrFactory.get(dAttr.attrName, id, entryName, typeName);
        viewAttrs.add(mSkinAttr);
    }

    skinItem.attrs = viewAttrs;
    skinItem.apply();
    addSkinView(skinItem);
}

public void dynamicAddSkinEnableView(Context context, View view, String attrName, int attrValueResId)     {
    int id = attrValueResId;
    String entryName = context.getResources().getResourceEntryName(id);
    String typeName = context.getResources().getResourceTypeName(id);
    SkinAttr mSkinAttr = AttrFactory.get(attrName, id, entryName, typeName);
    SkinItem skinItem = new SkinItem();
    skinItem.view = view;
    List<SkinAttr> viewAttrs = new ArrayList<SkinAttr>();
    viewAttrs.add(mSkinAttr);
    skinItem.attrs = viewAttrs;
    skinItem.apply();
    addSkinView(skinItem);
}

即在Activity中通過比如
dynamicAddSkinEnableView（context, mTextView，”textColor”,R.color.main_text_color）即可完成對動態建立的View的換膚操作。

本文研究是基於github開源專案Android-Skin-Loader進行的。這個框架主要是動態載入皮膚包，在不需要重啟應用的前提下，實現對頁面佈局等動態換膚的操作。皮膚包獨立製作和維護，不和主工程產生耦合。同時由後臺伺服器下發，可即時線上更新不依賴客戶端版本。

皮膚包的載入過程：

SKinManger:

public void load(String skinPackagePath, final ILoaderListener callback) {

    new AsyncTask<String, Void, Resources>() {

        protected void onPreExecute() {
            if (callback != null) {
                callback.onStart();
            }
        };

        @Override
        protected Resources doInBackground(String... params) {
            try {
                if (params.length == 1) {
                    String skinPkgPath = params[0];

                    File file = new File(skinPkgPath); 
                    if(file == null || !file.exists()){
                        return null;
                    }

                    PackageManager mPm = context.getPackageManager();
                    PackageInfo mInfo = mPm.getPackageArchiveInfo(skinPkgPath, PackageManager.GET_ACTIVITIES);
                    skinPackageName = mInfo.packageName;

                    AssetManager assetManager = AssetManager.class.newInstance();
                    Method addAssetPath = assetManager.getClass().getMethod("addAssetPath", String.class);
                    addAssetPath.invoke(assetManager, skinPkgPath);

                    Resources superRes = context.getResources();
                    Resources skinResource = new Resources(assetManager,superRes.getDisplayMetrics(),superRes.getConfiguration());

                    SkinConfig.saveSkinPath(context, skinPkgPath);

                    skinPath = skinPkgPath;
                    isDefaultSkin = false;
                    return skinResource;
                }
                return null;
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
        };

        protected void onPostExecute(Resources result) {
            mResources = result;

            if (mResources != null) {
                if (callback != null) callback.onSuccess();
                notifySkinUpdate();
            }else{
                isDefaultSkin = true;
                if (callback != null) callback.onFailed();
            }
        };

    }.execute(skinPackagePath);
}

@Override
public void attach(ISkinUpdate observer) {
    if(skinObservers == null){
        skinObservers = new ArrayList<ISkinUpdate>();
    }
    if(!skinObservers.contains(observer)){
        skinObservers.add(observer);
    }
}

@Override
public void detach(ISkinUpdate observer) {
    if(skinObservers == null) return;
    if(skinObservers.contains(observer)){
        skinObservers.remove(observer);
    }
}

@Override
public void notifySkinUpdate() {
    if(skinObservers == null) return;
    for(ISkinUpdate observer : skinObservers){
        observer.onThemeUpdate();
    }
}

SKinManager為整個皮膚包的管理類，負責載入皮膚包檔案，並得到該皮膚包的包名skinPackageName，和這個皮膚包的Resource物件skinResource，這樣整個皮膚包的資原始檔我們就都可以拿到了。在載入得到皮膚包的Resource之後，通知每個註冊過（attach）的頁面（Activity），去重新整理這些頁面所有儲存過的需要換膚的View，進行換膚操作。

切換時如何即時更新介面：

1、SkinBaseApplication:

public class SkinApplication extends BaseApplication {

@Override
public void onCreate() {
    super.onCreate();
    SkinManager.getInstance().init(this);
    SkinManager.getInstance().load();
  }
}

主要是進行一些初始化的操作。

2、SkinBaseActivity:

public abstract class BaseActivity extends
    code.solution.base.BaseActivity implements ISkinUpdate, IDynamicNewView {

private SkinInflaterFactory mSkinInflaterFactory;

@Override
protected void onCreate(Bundle savedInstanceState) {

mSkinInflaterFactory = new SkinInflaterFactory();
LayoutInflaterCompat.setFactory(getLayoutInflater(), mSkinInflaterFactory);
super.onCreate(savedInstanceState);
changeStatusColor();
}

/**
 * dynamic add a skin view
 *
 * @param view
 * @param attrName
 * @param attrValueResId
 */
protected void dynamicAddSkinEnableView(View view, String attrName, int attrValueResId){
    mSkinInflaterFactory.dynamicAddSkinEnableView(this, view, attrName, attrValueResId);
}

@Override
public void onThemeUpdate() {
    if(!isResponseOnSkinChanging){
        return;
    }
    mSkinInflaterFactory.applySkin();
    changeStatusColor();
}

在這裡使用了之前自定義的SkinInflaterFactory，來替換預設的Factory,以達到截獲建立View，獲取View的屬性，與支援換膚的屬性進行對比，進行View換膚操作以及儲存這些需要換膚的View到List中，在下次換膚切換時對這些View進行換膚的目的。

其中換膚操作執行時，會呼叫SKinManager.notifySKinUpdate方法

@Override
public void notifySkinUpdate() {
    if(skinObservers == null) return;
    for(ISkinUpdate observer : skinObservers){
        observer.onThemeUpdate();
    }
}

而這裡的observer.onThemeUpdate裡面主要是執行這個Activity的下述方法：

public void onThemeUpdate() {
    if(!isResponseOnSkinChanging){
        return;
    }
    mSkinInflaterFactory.applySkin();
    changeStatusColor();
}

mSkinInflaterFactory.applySkin();即為SKinInflaterFactory的applySkin方法，

public void applySkin() {
    if (ListUtils.isEmpty(mSkinItems)) {
        return;
    }

    for (SkinItem si : mSkinItems) {
        if (si.view == null) {
            continue;
        }
        si.apply();
    }
  }

其中 mSKinItems即為當前Acitivty通過xml 檔案中skin:enbale進行標記的 及動態dynamicAddSkinEnableView（…）新增的需要換膚的View的集合，這樣整個換膚的過程就完成了。

整體換膚框架類圖：

img

換膚架構類圖.png

如何製作皮膚包：

1). 新建工程project
2). 將換膚的資原始檔新增到res檔案下，無java檔案
3). 直接執行build.gradle，生成apk檔案（注意，執行時Run/Redebug configurations 中Launch Options選擇launch nothing），否則build 會報 no default Activty的錯誤。
4). 將apk檔案重新命名如black.apk，重新命名為black.skin防止使用者點選安裝

線上換膚：

  1. 將皮膚包上傳到伺服器後臺

  2. 客戶端根據介面資料下載皮膚包，進行載入及客戶端換膚操作

結語:

至此，整個換膚流程的原理解析已經全部講完了。本文針對基本的換膚原理流程做了解析，初步建立了一套相對完善的換膚框架。但是如何建立一套更加完善更加對其他開發者友善的換膚機制仍然是可以繼續研究的方向。比如如何更加安全的換膚，如何對程式碼的侵入性做到最小（比如通過在配置檔案中配置需要換膚的View的id name 而不是通過在xml檔案中進行標記）等等，都是可以繼續研究的方向，以後有時間會繼續在這方面進行探索。

因時間關係文章難免有疏漏，歡迎提出指正，謝謝。同時對換膚感興趣的童鞋可以參考以下連結：

1、Android-Skin-Loader
2、Android-skin-support
3、Android主題換膚 無縫切換

 

更多Android進階技術，面試資料系統整理分享，職業生涯規劃，產品，思維，行業觀察，談天說地。可以加Android架構師群；701740775。


相關文章