侵入性低扩展性强的Android换肤框架XSkinLoader的用法及原理

更好的阅读体验，请转到我的个人博客：Windy'Journal

前言

Android发展到现在，很多成熟的应用上已经集成了插件式换肤的功能，比如网易云音乐，手机QQ，QQ音乐等等。但是，成熟稳定易用的开源换肤框架并没有出现。

国内最早的插件式换肤框架是Android-Skin-Loader。后面也出现了一些在此基础上的改进版，比如：hongyang的ChangeSkin，andSkin，Android-skin-support，injor，QSkinLoader等等。大家都对Android-Skin-Loader做了一些改进，以使换肤过程侵入性更低，扩展性更强，使用更简单。但是还是会有一些不足之处，因此，XSkinLoader就诞生了。

XSkinLoader是在Android-Skin-Loader和QSkinLoader的基础上又进行了一次重大改进，主要的改进点有如下：

  1. 侵入性更低，换肤Activity并不用实现某个接口或者继承某个BaseActivity
  1. 支持布局里style中定义的属性换肤，默认支持了TextView的textColor和ProgressBar的indeterminateDrawable，并支持扩展；
  2. 更好地支持了AppCompatActivity中的控件换肤，由于AppCompatActivity中的TextView，ImageView等控件会被转为AppCompatTextView,AppCompatImageView，XSkinLoader换肤时并不会覆盖此转换，其他换肤框架会覆盖；
  3. 支持状态栏颜色换肤，并可以通过相似方法扩展支持标题栏和虚拟导航栏的换肤；
  4. 支持xml中指定的属性换肤

XSkinLoader项目源码地址为：https://github.com/WindySha/XSkinLoader

下面，先简单介绍XSkinLoader的基本用法，再通过分析源码来解析这些改进点的实现原理。

XSkinLoader的使用方法

XSkinLoader的使用方式特别简单，对代码的侵入性很低，需要换肤的Activity中只用在调用一行代码即可：

    SkinInflaterFactory.setFactory(this);

用法跟其他换肤框架基本相同，先在Application中初始化，然后在相关xml中加上skin:enable="true"即可， 详细用法如下：

初始化

首先在Application的onCreate中进行初始化：

        SkinManager.get().init(this);

如果代码中需要经常使用Application Context的LayoutInflater加载View，最好同时加上这样一行代码：

        SkinInflaterFactory.setFactory(LayoutInflater.from(this));  // for skin change
        SkinManager.get().init(this);

如此，使用LayoutInflater.from(context.getApplicationContext()).inflate()加载的view也是可以换肤的

XML换肤

xml布局中的View需要换肤的，只需要在布局文件中相关View标签下添加skin:enable="true"即可,例如：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:skin="http://schemas.android.com/android/skin"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/status_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        skin:enable="true"
        android:background="@color/title_color">
    </TextView>
<RelativeLayout/>

能换肤的前提是解析这个xml的LayoutInflater设置Factory接口：SkinInflaterFactory
因此，在相关activity的onCreate()中setContentView()方法之前添加：

    //干涉xml中view的创建，实现xml中资源换肤
    SkinInflaterFactory.setFactory(this);  //for skin change in XML

PS: 对于AppCompatActivity，务必要在onCreate()的super.onCreate()之前添加，否则不会使用AppComt包装的控件，比如：AppCompatTextView等。

某些view的资源是在代码中动态设置的，使用以下方式来设置资源，才能实现换肤效果：

    //设置imageView的src资源
    SkinManager.get().setImageDrawable(imageView, R.drawable.ic_action);
    //设置imageView的backgroud资源
    SkinManager.get().setViewBackground(imageView, R.drawable.ic_action);
    //设置textVie的color资源
    SkinManager.get().setTextViewColor(textView, R.color.title_color);
    //设置Activity的statusBarColor
    SkinManager.get().setWindowStatusBarColor(MainActivity.this.getWindow(), R.color.title_color);
    ...

xml中指定换肤属性

xml中假如出现了多个可换肤属性，但只需要换其中部分属性，而不是全部属性，比如：

<Button
        android:id="@+id/use_sdcard_skin"
        android:layout_width="180dp"
        android:layout_height="40dp"
        skin:enable="true"
        android:background="@drawable/confirm_skin_btn_border"
        android:textColor="@color/music_skin_change_button_color" />

这个布局中，包含两个换肤属性：background，textColor，假如只想换textColor,那该怎么办？
此处，借鉴了andSkin中的一个办法，增加一个属性attrs，在此属性中声明需要换肤的属性。
具体到上面的例子，只需要增加这样一行代码skin:attrs="textColor"就行：

<Button
        android:id="@+id/use_sdcard_skin"
        android:layout_width="180dp"
        android:layout_height="40dp"
        skin:enable="true"
        skin:attrs="textColor"
        android:background="@drawable/confirm_skin_btn_border"
        android:textColor="@color/music_skin_change_button_color" />

如果支持多个属性，使用|分割就行：

        skin:attrs="textColor|background"

其实，大多数情况下并不用在Xml中加此属性来控制，如若不想此属性换肤，也可以在相应的皮肤apk中去掉此属性指定的资源。

新增换肤属性

对已经成型的大型项目来说，XSkinLoader中提供的换肤属性是不够用的，需要额外增加的换肤属性该怎么办？
在sample中写好了相应的模板，具体参考ExtraAttrRegister.java

public static final String CUSTIOM_VIEW_TEXT_COLOR = "titleTextColor";

    static {
        //增加自定义控件的自定义属性的换肤支持
        SkinResDeployerFactory.registerDeployer(CUSTIOM_VIEW_TEXT_COLOR, new CustomViewTextColorResDeployer());

    }

新增style中的换肤属性

假如style中的换肤属性不够用，需要新增，该怎么办？
sample中也写了一个模板，在ExtraAttrRegister.java中:

static {
        //增加xml里的style中指定的View background属性换肤
        StyleParserFactory.addStyleParser(new ViewBackgroundStyleParser());
    }

XSKinLoader的实现原理分析

换肤框架核心的技术原理和Android-skim-loader以及由此衍生出来的那些框架都差不多。主要就是实现LayoutInflater.Factory接口干涉xml中view解析的过程，并将解析出来的熟悉和view保存到list(map)中，换肤的时候，遍历此list(map)，重新设置此view的换肤属性对应的资源（用皮肤包对应的Resources来设置）。

具体细节，如若不清楚可以参考QSkinLoader的源码解析：
Android换肤功能实现与换肤框架QSkinLoader使用方式介绍
或者 andSkin的源码解析：
Android 换肤原理分析和总结
核心原理都差不多，都来自于Android-skin-loader，此处就不再啰嗦。

这里，主要讲XSkinLoader的改进点。

使用WeakHashMap

将View和对应的换肤属性保存在全局的WeakHashMap中，这样activity退出后，WeakHashMap中的view会被GC回收掉，因此不会出现内存泄漏的问题。

    //使用这个map保存所有需要换肤的view和其对应的换肤属性及资源
    //使用WeakHashMap两个作用，1.避免内存泄漏，2.避免重复的view被添加
    //使用HashMap存SkinAttr，为了避免同一个属性值存了两次
    private WeakHashMap<View, HashMap<String, SkinAttr>> mSkinAttrMap = new WeakHashMap<>();

WeakHashMap中键值对的值使用HashMap<String, SkinAttr>，是为了避免view的属性重复添加，比如，在xml中设置了TextView的textColor换肤资源，在代码中又设置了textColor换肤资源
SkinManager.get().setTextViewColor(textView, R.color.title_color);
这样代码中设置的换肤资源会覆盖掉xml中设置的。（xml中设置的属性资源也会覆盖style中设置的属性资源）

支持AppCompatActivity换肤

由于AppCompatActivity会设置LayoutInflater.Factory，干涉view的创建过程，并将TextView,ImageView等替换为AppCompatTextView,AppCompatImageView。假如不做特殊处理，会覆盖掉AppCompatActivity中设置的Factory，因此，没有兼容到AppCompatActivity的一些属性。

查阅AppCompatActivity，可知，为了兼容不同的android版本，它是通过AppCompatDelegate来设置LayoutInflater的Factory,代码细节如下：

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        final AppCompatDelegate delegate = getDelegate();
        delegate.installViewFactory();
        delegate.onCreate(savedInstanceState);
        ...
        ...
        super.onCreate(savedInstanceState);
    }

delegate.installViewFactory();最终调到了AppCompatDelegateImplV9.java中的installViewFactory()。

    @Override
    public void installViewFactory() {
        LayoutInflater layoutInflater = LayoutInflater.from(mContext);
        if (layoutInflater.getFactory() == null) {
            LayoutInflaterCompat.setFactory2(layoutInflater, this);
        } else {
            if (!(layoutInflater.getFactory2() instanceof AppCompatDelegateImplV9)) {
                Log.i(TAG, "The Activity's LayoutInflater already has a Factory installed"
                        + " so we can not install AppCompat's");
            }
        }
    }

AppCompatDelegateImplV9.java中的Factory2的接口实现为：

    /**
     * From {@link LayoutInflater.Factory2}.
     */
    @Override
    public final View onCreateView(View parent, String name, Context context, AttributeSet attrs) {
        // First let the Activity's Factory try and inflate the view
        final View view = callActivityOnCreateView(parent, name, context, attrs);
        if (view != null) {
            return view;
        }

        // If the Factory didn't handle it, let our createView() method try
        return createView(parent, name, context, attrs);
    }

在createView中使用AppCompatViewInflater来创建View，并将TextView,ImageView等替换为AppCompatTextView,AppCompatImageView：

    public final View createView(View parent, final String name, @NonNull Context context,
            @NonNull AttributeSet attrs, boolean inheritContext,
            boolean readAndroidTheme, boolean readAppTheme, boolean wrapContext) {
        ...
        ...
        switch (name) {
            case "TextView":
                view = new AppCompatTextView(context, attrs);
                break;
            case "ImageView":
                view = new AppCompatImageView(context, attrs);
                break;
            case "Button":
                view = new AppCompatButton(context, attrs);
                break;
            case "EditText":
                view = new AppCompatEditText(context, attrs);
                break;
            case "Spinner":
                view = new AppCompatSpinner(context, attrs);
                break;
            case "ImageButton":
                view = new AppCompatImageButton(context, attrs);
                break;
            ...
            ...

        return view;
    }

为了使我们的SkinInflaterFactory不干涉AppCompatActivity的view创建过程，我们可以这样做：

    public static void setFactory(Activity activity) {
        LayoutInflater inflater = activity.getLayoutInflater();
        SkinInflaterFactory factory = new SkinInflaterFactory();
        if (activity instanceof AppCompatActivity) {
            //AppCompatActivity本身包含一个factory,将TextView等转换为AppCompatTextView.java, 参考：AppCompatDelegateImplV9.java
            final AppCompatDelegate delegate = ((AppCompatActivity) activity).getDelegate();
            factory.setInterceptFactory(new Factory() {
                @Override
                public View onCreateView(String name, Context context, AttributeSet attrs) {
                    //创建view的过程还是交给AppCompatDelegate来做
                    return delegate.createView(null, name, context, attrs);
                }
            });
        }
        inflater.setFactory(factory);
    }
    
    //因为LayoutInflater的setFactory方法只能调用一次，当框架外需要处理view的创建时，可以调用此方法
    public void setInterceptFactory(Factory factory) {
        mViewCreateFactory = factory;
    }

    @Override
    public View onCreateView(String name, Context context, AttributeSet attrs) {
        View view = null;
        if (mViewCreateFactory != null) {
            //给框架外提供创建View的机会
            view = mViewCreateFactory.onCreateView(name, context, attrs);
        }
        if (isSupportSkin(attrs)) {
            if (view == null) {
                view = createView(context, name, attrs);
            }
            if (view != null) {
                parseAndSaveSkinAttr(attrs, view);
            }
        }

        return view;
    }

Activity的statusBar颜色换肤

首先将Activity对应的Window传过来，然后获取Window对应的DecorView，对DecorView实施换肤：

    public void setWindowStatusBarColor(Window window, @ColorRes int resId) {
        View decorView = window.getDecorView();
        setSkinViewResource(decorView, SkinResDeployerFactory.ACTIVITY_STATUS_BAR_COLOR, resId);
    }

正真换肤的时候，又通过DecorView反射获取其对应的Window，然后设置window的StatusBarColor：

public class ActivityStatusBarColorResDeployer implements ISkinResDeployer {
    @Override
    public void deploy(View view, SkinAttr skinAttr, ISkinResourceManager resource) {
        //the view is the window's DecorView
        Window window = (Window) ReflectUtils.getField(view, "mWindow");
        if (window == null) {
            throw new IllegalArgumentException("view is not a DecorView, cannot get the window");
        }
        if (SkinConfig.RES_TYPE_NAME_COLOR.equals(skinAttr.attrValueTypeName)) {
            window.setStatusBarColor(resource.getColor(skinAttr.attrValueRefId));
        }
    }
}

支持style中的换肤属性

style中的换肤属性支持方法主要是根据传入的AttributeSet和控件的styleable列表获取控件中属性对应的资源id，并将view，属性，资源id保存起来。以TextView的textColor为例，具体实现细节如下：

public class TextViewTextColorStyleParser implements ISkinStyleParser{

    private static int[] sTextViewStyleList;
    private static int sTextViewTextColorStyleIndex;

    @Override
    public void parseXmlStyle(View view, AttributeSet attrs, Map<String, SkinAttr> viewAttrs, String[] specifiedAttrList) {
        if (!TextView.class.isAssignableFrom(view.getClass())) {
            return;
        }
        Context context = view.getContext();
        int[] textViewStyleable = getTextViewStyleableList();
        int textViewStyleableTextColor = getTextViewTextColorStyleableIndex();

        TypedArray a = context.obtainStyledAttributes(attrs, textViewStyleable, 0, 0);
        if (a != null) {
            int n = a.getIndexCount();
            for (int j = 0; j < n; j++) {
                int attr = a.getIndex(j);
                if (attr == textViewStyleableTextColor &&
                        SkinConfig.isCurrentAttrSpecified(SkinResDeployerFactory.TEXT_COLOR, specifiedAttrList)) {
                    int colorResId = a.getResourceId(attr, -1);
                    SkinAttr skinAttr = SkinAttributeParser.parseSkinAttr(context, SkinResDeployerFactory.TEXT_COLOR, colorResId);
                    if (skinAttr != null) {
                        viewAttrs.put(skinAttr.attrName, skinAttr);
                    }
                }
            }
            a.recycle();
        }
    }

    private static int[] getTextViewStyleableList() {
        if (sTextViewStyleList == null || sTextViewStyleList.length == 0) {
            sTextViewStyleList = (int[]) ReflectUtils.getField("com.android.internal.R$styleable", "TextView");
        }
        return sTextViewStyleList;
    }

    private static int getTextViewTextColorStyleableIndex() {
        if (sTextViewTextColorStyleIndex == 0) {
            Object o = ReflectUtils.getField("com.android.internal.R$styleable", "TextView_textColor");
            if (o != null) {
                sTextViewTextColorStyleIndex = (int) o;
            }
        }
        return sTextViewTextColorStyleIndex;
    }
}

具体细节如若不明白，可以参考TextView.java第四个构造方法中对AttributeSet和style的处理。

总结

XSkinLoader虽然说已经很完美了，但是还有一些不足之处：

  1. 无法支持Theme中定义的属性换肤，无论是Activity中的Theme还是Application还是控件中指定的Theme，都是无法支持换肤。暂时没能找到解决方法，而且其他的换肤框架也没有解决这个问题，比较坑。
  2. 暂时没能支持Glide控件设置默认图片的换肤，一般使用Glide设置默认图是这样：
    Glide.with(context).load(url).placeholder(R.drawable.default).into(imageView);
    暂时不能支持R.drawable.default的换肤，不过，此问题应该可解，毕竟Glide的扩展性非常强。
  3. RecyclerView的缓存问题，可能会导致换肤RecyclerView的item换肤失败，不过暂时未碰到。假如遇到此问题，可以参考QSkinLoader的清除缓存的方法。
  4. 可能存在的性能问题.
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容

  • Android换肤框架Debug 7.1.1源码一步步写
    大家好，我是徐爱卿。博客地址：flutterall.com 这个SkinAPPDemo是很早的时候就写好的，今天才...
    徐爱卿阅读 3,071评论 3赞 38
  • Android动态换肤原理解析及实践
    前言： 本文主要讲述如何在项目中，在不重启应用的情况下，实现动态换肤的效果。换肤这块做的比较好的，有网易云音乐，q...
    Yagami3zZ阅读 13,360评论 5赞 50
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25赞 707
  • 你尽管造，有人关心算我输
    小雪夜，天干，物燥。 北方风很大，吱吱呀呀折了枝桠，呼啦呼啦，楼下安居的一群顽童好麻将。 夜里的麻将声，分不清哪个...
    司聘阅读 342评论 0赞 1
  • 《迷神引-梦如洗》
    淼淼沧浪映霞鹜，楚天岳阳楼睇。 烟波浩瀚，叶舟难系。忆何年，携纤手，似游鲤。 别后曾思否，去无计。 北上长相望，远...
    刘小地阅读 373评论 24赞 78