2. 程式人生 > >Android 主題切換

Android 主題切換

阿新 • • 發佈：2019-01-03

介紹

所謂的多主題切換，就是能夠根據不同的設定，呈現不同風格的介面給使用者。想實現Android多套主題的切換，網路上方案已經很多了，也看了許多大神的實現方式，但心裡總想著自己去實現一遍，就這麼借鑑GitHub的開源實現了一個簡單的Android換膚框架。

實現的思路

通過LayoutInflaterCompat.setFactory方式，在onCreateView的回撥中，解析每一個View的attrs, 判斷是否有已標記需要換膚的屬性, 比方說background, textColor, 或者說相應資源是否為skin_開頭等等.然後儲存到集合中, 將相應的屬性收集到一起。 這種方式相對是比較簡單的，易於實現的方式。於是我也採用了這種方式去捉摸一番。

最後實現的效果

這裡寫圖片描述

一張圖瞭解Android中的主題顏色

這裡寫圖片描述
我們可以根據這裡的顏色定義成多套的主題Style，來應用我們的Android應用。

主題實現

   public void init(final AppCompatActivity activity) {
        LayoutInflaterCompat.setFactory(LayoutInflater.from(activity), new LayoutInflaterFactory() {
            @Override
            public View onCreateView
 
(View parent, String name, Context context, AttributeSet attrs) {
                List<SkinAttr> skinAttrsList = getSkinAttrs(attrs, context);
                //如果屬性為null 並且名字沒有包含. 說明不是自定義的view
                if (skinAttrsList == null || skinAttrsList.isEmpty()) {
                    if (!name.contains("."
 
)) {
                        return null;
                    }
                }
                View view = activity.getDelegate().createView(parent, name, activity, attrs);
                if (view == null) {
                    view = createViewFromTag(context, name, attrs);
                }
                if (view != null) {
                    if (skinAttrsList == null && !(view instanceof SkinCompatSupportable)) {
                        return null;
                    }
                    mSkinViewList.add(new SkinView(view, skinAttrsList));
                }
                return view;            }
        });
    }

oncreate中會回調當前頁面中的view名稱及view中所使用到的屬性，
該方法主要是獲取到檢視中，符合條件換膚的view，和需要變更的xml屬性，儲存到集合中。
關於LayoutInflaterCompat.setFactory的作用，這裡有一篇文章講解
http://blog.csdn.net/lmj623565791/article/details/51503977

List<SkinAttr> skinAttrsList = getSkinAttrs(attrs, context);

首先我們通過getSkinAttrs()方法獲取到一個view中需要換膚的屬性集合，

 private static final String COLOR_PRIMARY      = "colorPrimary";
    private static final String COLOR_PRIMARY_DARK = "colorPrimaryDark";
    private static final String COLOR_ACCENT       = "colorAccent";
    private static final String ATTR_PREFIX        = "skin"; //開頭

 private List<SkinAttr> getSkinAttrs(AttributeSet attrs, Context context) {
        List<SkinAttr> skinAttrsList = null;
        SkinAttr skinAttr;
        //遍歷所有屬性
        for (int i = 0; i < attrs.getAttributeCount(); i++) {
            //獲取到當前的屬性名字，
            String attributeName = attrs.getAttributeName(i);
            //改方法獲取到列舉中定義好的需要更改的屬性進行匹配
            SkinAttrType attrType = getSupportAttrType(attributeName);
            if (attrType == null) {
                continue;
            }
            //獲取當前屬性對應的值 並解析，如果是使用?attr/ 或者是 @color/屬性
            String attributeValue = attrs.getAttributeValue(i);
            if (attributeValue.startsWith("?") || attributeValue.startsWith("@")) {
                //獲取到該資源的id
                int id = ThemeUtils.getAttrResId(attributeValue);
                if (id != 0) {
                    //通過資源id 獲取到資源的名稱 
                    String entryName = context.getResources().getResourceEntryName(id);
                    //如果匹配 資源名稱 表示都是使用了換膚的 屬性則儲存起來
                    if (entryName.equals(COLOR_PRIMARY) || entryName.equals(COLOR_PRIMARY_DARK) || entryName.equals(COLOR_ACCENT) || entryName.startsWith(ATTR_PREFIX)) {
                        if (skinAttrsList == null) {
                            skinAttrsList = new ArrayList<>();
                        }
                        String typeName = context.getResources().getResourceTypeName(id);
                        skinAttr = new SkinAttr(attrType, entryName, attributeName, typeName);
                        skinAttrsList.add(skinAttr);
                    }
                }
            }
        }
        return skinAttrsList;
    }

遍歷所有屬性，獲取每一個屬性的名字，通過getSupportAttrType()方法進行屬性匹配，

private SkinAttrType getSupportAttrType(String attrName) {
        for (SkinAttrType attrType : SkinAttrType.values()) {
            if (attrType.getAttrType().equals(attrName))
                return attrType;
        }
        return null;
    }

實現定義好一個需要換膚的一些屬性列舉，這裡定義了三個列舉值，當前大家也可以根據自己的需要定義更多的屬性。background背景色，textColor字型顏色，src圖片，當遍歷的屬性剛好是以下屬性的時候，那麼就認為是一個有效的，需要換膚的view。

enum SkinAttrType {
        BACKGROUD("background") {
            @Override
            public void apply(View view, String attrName, String attrValueResName, String attrValueTypeName) {
                Context context = view.getContext();
                view.setBackground(ThemeUtils.getDrawable(context, getResId(context, attrName)));
            }
        },
        COLOR("textColor") {
            @Override
            public void apply(View view, String attrName, String attrValueResName, String attrValueTypeName) {
                Context context = view.getContext();
                ((TextView) view).setTextColor(ThemeUtils.getColorStateList(context, getResId(context, attrName)));
            }
        },
        SRC("src") {
            @Override
            public void apply(View view, String attrName, String attrValueResName, String attrValueTypeName) {
                Context context = view.getContext();
                ((ImageView) view).setImageDrawable(ThemeUtils.getDrawable(context, getResId(context, attrName)));
            }
        }
 }

列舉中定義了一個抽象方法

public abstract void apply(View view, String attrName, String attrValueResName, String attrValueTypeName);

用於最後的更換顏色呼叫apply方法的實現。

匹配換膚屬性的規則：定義好匹配的屬性 這裡選擇了 系統的 三種 colorPrimary 名字 或者是 skin開頭的，這裡的資源屬性命名有需要規範了，例如需要background背景色，那麼?attr/colorPrimary使用或者是
@color/skin_bottom_bar_not skin命名開頭的資源，就認定為時需要換膚的屬性值。

例項
 app:background="?attr/colorPrimary"
 app:background="@drawable/skin_bottom_bar_not"

獲取到每一條有效的換膚屬性，儲存到集合中返回。
這裡就是將所有需要換膚的屬性返回來了，屬性有 了，那麼還需要生成對應的view，最後更換主題的時候去設定view所需要改變的顏色。

回到onCreateView方法中

   View view = activity.getDelegate().createView(parent, name, activity, attrs);
                if (view == null) {
                    view = createViewFromTag(context, name, attrs);
                }
                if (view != null) {
                    if (skinAttrsList == null && !(view instanceof SkinCompatSupportable)) {
                        return null;
                    }
                    mSkinViewList.add(new SkinView(view, skinAttrsList));
                }
                return view;

如果有存在需要換膚的屬性集合，才會去建立該view，儲存到一個最終的集合中。這裡就完成了一個初始化的過程，獲取所以需要換膚的view，儲存起來。那麼接下就可以變更主題了。對外提供了兩個方法

 * 裝載改變主題的view 及 需要改變的主題元素
public class SkinView {
    private View           view;
    private List<SkinAttr> attrs;

    public SkinView(View view, List<SkinAttr> skinAttrs) {
        this.view = view;
        this.attrs = skinAttrs;
    }

    public void apply() {
        if (view == null) {
            return;
        }
        if (view instanceof SkinCompatSupportable) {
            ((SkinCompatSupportable) view).applySkin();
        }
        if (attrs == null) {
            return;
        }
        for (SkinAttr attr : attrs) {
            attr.apply(view);
        }
    }
}
/**
     * 設定當前主題
     */
    public void setTheme(Activity ctx) {
        int theme = USharedPref.get().getInteger(PRE_THEME_MODEL);
        ThemeEnum themeEnum = ThemeEnum.valueOf(theme);
        ctx.setTheme(themeEnum.getTheme());
    }

    /**
     * 更改主題
     */
    public void changeNight(Activity ctx, ThemeEnum themeEnum) {
        ctx.setTheme(themeEnum.getTheme());
        showAnimation(ctx);
        refreshUI(ctx);
        USharedPref.get().put(PRE_THEME_MODEL, themeEnum.getTheme());
    }

設定主題和更改當前的主題，當然我們還需要在style中定義多套主題。

藍色調主題
 <style name="AppThemeBlue" parent="AppTheme">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorBlue</item>
        <item name="colorPrimaryDark">@color/colorBlue</item>
        <item name="colorAccent">@color/colorBlue</item>
        <!--白色字型-->
        <item name="skin_kind_color_not">@color/colorWhite</item>
        <!--相近暗淡色-->
        <item name="skin_home_title_not">@color/home_title3</item>
        <!--dialog背景色-->
        <item name="skin_dialog_bg_not">@color/color_ef6f26</item>
        <!--相反色-->
        <item name="skin_contrast_color_not">@color/color_ef6f26</item>
        <!--主題透明度色-->
        <item name="skin_transparent_theme_color">@color/color_blue_80</item>
        <!--字型暗色-->
        <item name="skin_text_dark_color">@color/color_373737</item>
        <!--灰色字型-->
        <item name="skin_text_gray_color">@color/color_a7a7a7</item>
        <!--背景圖片-->
        <item name="skin_Background_drawable">@drawable/theme_bg3</item>
    </style>
紅色調主題
 <style name="AppThemeRed" parent="AppTheme">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorRed</item>
        <item name="colorPrimaryDark">@color/colorRed</item>
        <item name="colorAccent">@color/colorRed</item>
        <item name="skin_kind_color_not">@color/colorWhite</item>
        <item name="skin_home_title_not">@color/home_title2</item>
        <item name="skin_dialog_bg_not">@color/color_31c2c5</item>
        <item name="skin_contrast_color_not">@color/color_31c2c5</item>
        <item name="skin_transparent_theme_color">@color/color_red_80</item>
        <item name="skin_text_dark_color">@color/color_373737</item>
        <item name="skin_text_gray_color">@color/color_a7a7a7</item>
        <item name="skin_Background_drawable">@drawable/theme_bg1</item>
    </style>

多套主題的定義，當呼叫更改主題時 

 /**
     * 更改主題
     */
    public void changeNight(Activity ctx, ThemeEnum themeEnum) {
        ctx.setTheme(themeEnum.getTheme());
        showAnimation(ctx);
        refreshUI(ctx);
        USharedPref.get().put(PRE_THEME_MODEL, themeEnum.getTheme());
    }

開始了一個過渡動畫，然後進行頁面的UI重新整理，

/**
     * 重新整理UI介面
     */
    private void refreshUI(Activity ctx) {
        refreshStatusBar(ctx);
        for (SkinView skinView : mSkinViewList) {
            skinView.apply();
        }
    }
public void apply() {
        if (view == null) {
            return;
        }
        if (view instanceof SkinCompatSupportable) {
            ((SkinCompatSupportable) view).applySkin();
        }
        if (attrs == null) {
            return;
        }
        for (SkinAttr attr : attrs) {
            attr.apply(view);
        }
    }

繼續呼叫列舉中apply這個抽象方法

 public void apply(View view) {
        attrType.apply(view, attrName, attrValueResName, attrValueTypeName);
    }

每個屬性下實現各自的apply更改UI的實現

背景色的修改
BACKGROUD("background") {
            @Override
            public void apply(View view, String attrName, String attrValueResName, String attrValueTypeName) {
                Context context = view.getContext();
                view.setBackground(ThemeUtils.getDrawable(context, getResId(context, attrName)));
            }
        },
字型顏色
 COLOR("textColor") {
            @Override
            public void apply(View view, String attrName, String attrValueResName, String attrValueTypeName) {
                Context context = view.getContext();
                ((TextView) view).setTextColor(ThemeUtils.getColorStateList(context, getResId(context, attrName)));
            }
        },
圖片
 SRC("src") {
            @Override
            public void apply(View view, String attrName, String attrValueResName, String attrValueTypeName) {
                Context context = view.getContext();
                ((ImageView) view).setImageDrawable(ThemeUtils.getDrawable(context, getResId(context, attrName)));
            }
        },

這樣一個簡單的換膚就實現完成啦，具體的細節可以到程式碼中檢視。
https://github.com/zguop/Towards 存在於wt_library下 theme包中。

關於自定義view設定的自定義屬性設定換膚屬性，可以實現SkinCompatSupportable介面來更改自定義屬性的，來呼叫自己view中的方法。

public interface SkinCompatSupportable {
    void applySkin();
}

相關推薦

Android 主題切換

介紹 所謂的多主題切換，就是能夠根據不同的設定，呈現不同風格的介面給使用者。想實現Android多套主題的切換，網路上方案已經很多了，也看了許多大神的實現方式，但心裡總想著自己去實現一遍，就這麼借鑑GitHub的開源實現了一個簡單的Android換膚框架。

Android主題切換（一），基本使用流程

效果 前言 最近做的一個音樂類開源專案，有不少使用者反映，說介面主題膚色太單一，希望能夠提供多種顏色的主題供使用者選擇，剛好這段時間事情不多，就琢磨著為專案新增一個切換主題的功能。 在網上查閱了大量的資料、參考了各個App的主題切換效果，隨後做出了

Android的Theme主題切換

簡單的Theme換膚功能 效果截圖 1、定義屬性 先定義幾個需要改變的屬性，例如： <!--換膚--> <attr name="userNameColor" format="

Android主題換膚 無縫切換

今天再給大家帶來一篇乾貨。 Android的主題換膚 ，可外掛化提供面板包，無需Activity的重啟直接實現無縫切換,可高仿網易雲音樂的主題換膚。 這個連結是本次的Demo打包出來的樣本SkinChangeDemo，可以去下載下來先試試效果，面板檔案需放到儲存卡的根目錄下。

Android App切換主題的實現原理剖析

今天再給大家帶來一篇乾貨。 Android的主題換膚 ，可外掛化提供面板包，無需Activity的重啟直接實現無縫切換,可高仿網易雲音樂的主題換膚。 這個連結是本次的Demo打包出來的樣本SkinChangeDemo，可以去下載下來先試試效果，面板檔案需放到儲存卡的根目錄下。 關於Android的主

Android自定義View實現炫酷的主題切換動畫(仿酷安客戶端)

前兩日偶然看到了一個很炫酷的動畫效果： 判斷它是不是用的ValueAnimator, 如果是的話, 我們可以在設定-開發者選項裡面設定 “動畫時長縮放”來改變動畫時長. 所以這次我們通過設定這個選項, 把動畫速度降低之後, 很快就看出了其中的奧妙

Android無縫切換主題，動態換膚

說起Android的動態換膚方案，可謂是人云亦云，各有各的方法，魚龍混雜，我實在是參考不來一個好的換膚方案。 於是準備自己搞一個。 在這裡我是拒絕寫多個style實現換膚的 那麼只能用Java程式碼來實現（話說這樣是不是有點難度啊，答案是否定的，難倒是不難，就是稍微麻

Android 不同版本的主題切換方案/AndroidThemeChange

先上效果圖： Android 5.0效果： Android 4.4效果： 其實也沒多少要說的，大家可以下載程式碼看一下，因為之前在這方面遇到很多坑，所以這次把最近做的小專案中的主題更換模組單獨拿出來分享，給剛需的人。 Android 4.4 的地方，剛開始使用了和Too

Android應用主題切換詳解

今日科技快訊昨天，小米董事長、CEO雷軍的母校武漢大學召開新品釋出會，正式推出小米6X，該機售價

aNDROID圖片切換JaVa代碼

baidu oid http and ongl java java代碼 aid 代碼 COCOs2D-X%E6%B8%B8%E6%88%8F%E6%8A%80%E8%83%BDCD%E5%AE%9E%E7%8E%B0 http://music.baidu.com/song

畢業設計心得與整理-APP-主題切換

-a 視圖 設計 activit 畢業 重啟 app start 主題切換 1.定義主體顏色： 在style自定義了三個屬性： 他們並不是android自由的屬性，他們是我自定義的屬性。他們的定義寫在attrs.xml裏面 在這裏定義過後，就可以在xml中直接使用，

android 動態切換view

需求情形：需要在一個activity中更換佈局，如點選按鈕，跳轉到另外一個介面。 如果兩個佈局檔案都是LinearLayout 或者FrameLayout的話，可以使用LinearLayout和FrameLayout兩個類來管理當前的layout，如addView 或者removeView；可是

Android | 開發切換頁面後取消掉非同步執行緒AsyncTask

   對於Fragment ，切換時 我用 isDetached() 居然不行，我看過Log，切換後顯示的運行了detached，但卻不行。 但是肯定是不可見的啊。 如： if(!isVisible()){ //這樣一串小小的程式碼解決了

android 介面切換教程

　　Android的介面切換其實並沒有什麼難度，就和java的介面切換一樣簡單，但是java的使用的是Swing框架進行的切換，而Android使用的是Intent 來切換框架的，這是一個全新的使用方法，其中有一個問題是必須在 AndroidMainfest.xml 新增新建立的activity比如 &l

SpringMVC實現i18n和主題切換

一、什麼是i18n i18n（其來源是英文單詞 internationalization的首末字元i和n，18為中間的字元數）是“國際化”的簡稱。對於程式開發來說，i18n就是能夠在不修改內部程式碼的情況下，能夠根據不同的的語言和地區顯示相應的介面。 在SringMVC中，Dis

Android之切換佈局

佈局1： ?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:layout_width="fill_parent" android:layout_height="

Jupyter Notebook 主題切換

在這裡記錄一下更改 jupyter notebook theme 的步驟 使用 pip 命令安裝 jupyterthemes： pip install jupyterthemes pip install --upgrade jupyt

android fragment 切換時上下層檢視點選區域衝突

在使用fragment 動態add  或者replace fragment 後碰到過點選空白區域響應   add 或者replace 之前的 UI 或者fragment裡的點選事件 ，導致異常操作！ 在android-support-v4 中FragmentPager

Android-自動切換文字TextSwitcher

介紹： 1.TextSwitcher是ViewSwicher的一個子類，繼承了ViewSwicher的所有方法 2.與ViewSwitcher的另一個子類類似，TextSwitcher也有 3.ImageSwitcher不同的是：TextSwitcher的ViewFactory方法的

Android: 如何切換 SCO 鏈路。

最近在做藍芽音箱開發，在 A2DP 和 HFP 來回切換的時候，遇到了手機相容性的問題。最終發現裝置收聲和手機收聲，是因為 soc 切換有問題。原先在網上找了一些資料發現其實還蠻簡單的。就兩句話，當時沒想這麼多就直接寫了，發現還真能從裝置收聲，然後就沒管了。然後客戶反饋很多手