Android 實現切換主題皮膚功能（類似於眾多app中的 夜間模式，主題包等）

首先來個最簡單的一鍵切換主題功能，就做個白天和晚上的主題好了。

先看我們的styles檔案：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <!--白天主題-->
    <style name="dayTheme" parent="AppTheme">
          <item name="android:textColor">#525252</item>
        <item name="android:background">#f7f7f7</item>
    </style>

    <!--夜間主題-->
    <style name="nightTheme" parent="AppTheme">
        <item name="android:textColor">#868a96</item>
        <item name="android:background">#1e1e2a </item>
    </style>


</resources>

好，然後我們來看看主要activity

package com.example.administrator.mainchangethemeapp;

import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //sputils是對SharedPreferences的封裝，程式碼就不上了，大家理解意思就行了
        if(SPUtils.get(this,"theme","dayTheme").equals("dayTheme"))
        {
            //預設是白天主題
            setTheme(R.style.dayTheme);
        }else
        {
            //否則是晚上主題
            setTheme(R.style.nightTheme);
        }
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        tv=(TextView)this.findViewById(R.id.tv);
        tv.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                if(SPUtils.get(MainActivity.this,"theme","dayTheme").equals("dayTheme"))
                {
                    SPUtils.put(MainActivity.this,"theme","nightTheme");
                }else
                {
                    SPUtils.put(MainActivity.this, "theme", "dayTheme");
                }
                recreate();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

然後來看下效果：

 

當然了，上面這個demo實際上是有缺陷的。有人會說了 你看人家新浪微博，那麼多主題，你要是用這種方法，你這個app得有多大，

能做成微博那樣要用什麼就去下載什麼麼？答案是可以的。其實方案也很簡單。

這種方案的思路就是，把主題包 額外做成一個apk，注意這個apk 是不會在桌面顯示的。你只能在設定裡的app列表裡找到他。

然後在你的主activity裡 取這個apk裡的資源 即可。這裡我也把這種方案的程式碼寫一遍。注意下載apk 安裝apk的程式碼我就不寫了。

我們就假設 我們要切換的主題就是系統自帶的主題就行了，我們的主activity 使用的是白天主題。然後我們的子app裡面

為了簡化程式碼，我們就不放自定義主題了，就使用android studio 原始的程式碼，一步步來，

先放上子app裡的styles檔案，其實這個裡面一行程式碼都沒更改，全是ide自己生成的：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />


</resources>

然後就是子activity裡的 配置檔案manifest：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.administrator.sonproject" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>
    </application>

</manifest>

注意這裡 

<category android:name="android.intent.category.LAUNCHER" />

的這行程式碼 我是沒寫的。這樣就是保證在這個apk 安裝好以後不會在桌面出現。
然後我們來看看主activity程式碼

package com.example.administrator.mainchangethemeapp;

import android.content.Context;
import android.content.SharedPreferences;
import android.content.pm.PackageManager;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //sputils是對SharedPreferences的封裝，程式碼就不上了，大家理解意思就行了
        if (SPUtils.get(this, "theme", "dayTheme").equals("dayTheme")) {
            //預設是白天主題
            setTheme(R.style.dayTheme);
        } else {
            //否則是晚上主題，這裡晚上主題我們就去載入我們晚上主題apk裡的資源
            int resourceId = getResourceId(getPackageContext(this, "com.example.administrator.sonproject"), "style", "AppTheme");
            setTheme(resourceId);
        }
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv = (TextView) this.findViewById(R.id.tv);
        tv.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (SPUtils.get(MainActivity.this, "theme", "dayTheme").equals("dayTheme")) {
                    SPUtils.put(MainActivity.this, "theme", "nightTheme");
                } else {
                    SPUtils.put(MainActivity.this, "theme", "dayTheme");
                }
                recreate();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }


    /**
     * 獲取其他apk的context
     * @param context
     * @param packageName
     * @return
     */
    public static Context getPackageContext(Context context, String packageName) {
        try {
            return context.createPackageContext(packageName, Context.CONTEXT_INCLUDE_CODE | Context.CONTEXT_IGNORE_SECURITY);
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        return null;
    }

    //獲取指定context的 type裡面的 name屬性
    public static int getResourceId(Context context, String type, String name) {
        return context.getResources().getIdentifier(name, type, context.getPackageName());
    }
}

你看，到這裡 我們就實現了，動態載入主題的方式了。當然了，到這裡依舊是不完美的，因為settheme方法大家都知道一定要重啟activity才有效啊。這樣就不好了。

體驗並非最佳。總是給人很突兀的感覺。而且我們都知道重啟activity的成本很大。要考慮很多生命週期之類的東西。那我們繼續往下看，看看有什麼比較好的解決方案能解決這個問題。

首先 我們可以考慮一下這個問題，所謂的切換主題 之類的，無非就是把你那些控制元件的 背景色啊 字型顏色之類的 改變了一下。對於一個app來說，使用者一般只有一個介面 會有切換主題的這個入口，

換句話說，我們的app裡面 只有這一個activity 需要實現 不重啟activity就切換 控制元件style的功能，其他activity我們是不需要實現這個功能的，因為再切換過去的時候基本上都會走oncreate。所以

我們只需要考慮這個 有切換主題按鈕的 這個activity能實現 不重啟activity就換皮膚的功能就可以了。其他activity不需要考慮。so 這樣一想 這個功能就簡單清晰了很多。

首先我們可以自定義2個屬性,我們把他放在attrs 這個xml裡面

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 首先自定義屬性，這裡我們為了簡便 只自定義了這2種屬性，如果你要自己做的話 看需求可以增加屬性-->
    <!-- 另外注意我們這裡並沒有使用declare-styleable  來包裹這裡的2個屬性 好處就是在xml檔案裡 不用另外定義字首了-->
    <attr name="custom_background" format="reference|color"/>
    <attr name="custom_textcolor" format="reference|color"/>
</resources>

 

然後我們去定義一下我們的主題：

<resources>

    <!-- 這裡就設定2個最簡單的 主題就行了，-->
    <!--白天主題-->
    <style name="dayTheme" >
        <item name="custom_background">#f7f7f7</item>
        <item name="custom_textcolor">#525252</item>
    </style>

    <!--晚上主題-->
    <style name="nightTheme">
        <item name="custom_background">#1e1e2a</item>
        <item name="custom_textcolor">#868a96</item>
    </style>
</resources>

然後我們來寫一下mainactivity的xml佈局檔案，我們假設這個佈局是非常簡單的：

<?xml version="1.0" encoding="utf-8"?>
<com.example.administrator.mainchangethemeapp.ThemeRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/custom_background"
    android:id="@+id/mainview"
    >

    <com.example.administrator.mainchangethemeapp.ThemeTextView
        android:id="@+id/tv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="一鍵切換主題"
        android:background="?attr/custom_background"
        android:textColor="?attr/custom_textcolor"
        />

</com.example.administrator.mainchangethemeapp.ThemeRelativeLayout>

你看這個佈局裡面 就一個relativelayout和一個textview。 和以前xml唯一的區別就是這裡backaground和textcolor使用的值 是我們前面定義好的屬性了（但是要注意 這屬性是沒有值的 賦值的操作放在java程式碼裡實現）。同時這2個控制元件 也並非是系統控制元件 而是自定義控制元件。然後我們看看這個自定義控制元件是怎麼寫的。注意我這裡就做了2個自定義控制元件，如果你們的那個切換主題的入口頁面裡面有其他控制元件的話，就要學著下面的方法 自己擴充一下了，其實也很簡單的。

首先呢，我們來定義一個介面，誰實現了這個介面 就說明這個控制元件可以不啟動activity直接換膚！

package com.example.administrator.mainchangethemeapp;

import android.content.res.Resources;
import android.view.View;

/**
 * Created by Administrator on 2015/11/14.
 */
public interface ThemeUIInterface {

    public View getView();
    public  void setTheme(Resources.Theme themeId);
}

然後我們來看看2個自定義控制元件怎麼寫：

package com.example.administrator.mainchangethemeapp;

import android.content.Context;
import android.content.res.Resources;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.RelativeLayout;

/**
 * Created by Administrator on 2015/11/14.
 */
public class ThemeRelativeLayout extends RelativeLayout implements ThemeUIInterface{

    private int attr_background = -1;

    public ThemeRelativeLayout(Context context) {
        super(context);
    }

    public ThemeRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.attr_background =ViewAttributeUtil.getBackgroundAttibute(attrs);
    }

    public ThemeRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.attr_background =ViewAttributeUtil.getBackgroundAttibute(attrs);

    }


    @Override
    public View getView() {
        return this;
    }

    @Override
    public void setTheme(Resources.Theme themeId) {
        if(attr_background!=-1) {
            ViewAttributeUtil.applyBackgroundDrawable(this, themeId, attr_background);
        }
    }
}

package com.example.administrator.mainchangethemeapp;

import android.content.Context;
import android.content.res.Resources;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;

/**
 * Created by Administrator on 2015/11/16.
 */
public class ThemeTextView extends TextView implements ThemeUIInterface{

    private int attr_drawable=-1;
    private int attr_textColor=-1;

    public ThemeTextView(Context context) {
        super(context);
    }

    public ThemeTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.attr_drawable = ViewAttributeUtil.getBackgroundAttibute(attrs);
        this.attr_textColor = ViewAttributeUtil.getTextColorAttribute(attrs);
    }

    public ThemeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.attr_drawable = ViewAttributeUtil.getBackgroundAttibute(attrs);
        this.attr_textColor = ViewAttributeUtil.getTextColorAttribute(attrs);
    }

    @Override
    public View getView() {
        return this;
    }

    @Override
    public void setTheme(Resources.Theme themeId) {
        if (attr_drawable != -1) {
            ViewAttributeUtil.applyBackgroundDrawable(this, themeId, attr_drawable);
        }
        if (attr_textColor != -1) {
            ViewAttributeUtil.applyTextColor(this, themeId, attr_textColor);
        }
    }
}

看上去 其實也蠻簡單的對吧，無非就相比傳統控制元件，他對外暴露了 setTheme這個方法罷了，而這個setTheme方法 其實就做了一件事，呼叫系統自己的方法重新set那些屬性罷了。

package com.example.administrator.mainchangethemeapp;


import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;

public class ViewAttributeUtil {

    public static int getAttributeValue(AttributeSet attr, int paramInt) {
        int value = -1;
        int count = attr.getAttributeCount();
        for(int i = 0; i <count;i++) {
            if(attr.getAttributeNameResource(i) == paramInt) {
                String str = attr.getAttributeValue(i);
                if(null != str && str.startsWith("?")) {
                    value = Integer.valueOf(str.substring(1, str.length())).intValue();
                    return value;
                }
            }
        }
        return value;
    }

    public static int getBackgroundAttibute(AttributeSet attr) {
        return getAttributeValue(attr , android.R.attr.background);
    }


    public static int getTextColorAttribute(AttributeSet attr) {
        return getAttributeValue(attr, android.R.attr.textColor);
    }

    public static void applyBackgroundDrawable(ThemeUIInterface ci, Resources.Theme theme, int paramInt) {
        TypedArray ta = theme.obtainStyledAttributes(new int[]{paramInt});
        Drawable drawable = ta.getDrawable(0);
        if(null != ci) {
            (ci.getView()).setBackgroundDrawable(drawable);
        }
        ta.recycle();
    }
    public static void applyTextColor(ThemeUIInterface ci, Resources.Theme theme, int paramInt) {
        TypedArray ta = theme.obtainStyledAttributes(new int[]{paramInt});
        int resourceId = ta.getColor(0,0);
        if(null != ci && ci instanceof TextView) {
            ((TextView)ci.getView()).setTextColor(resourceId);
        }
        ta.recycle();
    }

}

好，到這裡 脈絡就逐漸清晰了，我們就看看主activity裡怎麼寫了：

package com.example.administrator.mainchangethemeapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends Activity {

    private TextView tv;

    private View view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //這行程式碼千萬不能漏掉，否則會報錯的。因為你在xml裡 的那些值 根本就沒有實際的值，如果不在這裡強制性的setTheme就直接報錯了
        //在實際使用中 我們當然可以把這個方法 放在baseactivity裡面。我們這裡預設主題就白天吧
        setTheme(R.style.dayTheme);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //這個就是跟佈局
        view = this.findViewById(R.id.mainview);
        tv = (TextView) this.findViewById(R.id.tv);
        tv.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                //這邊邏輯沒啥好說的 其實可以不需要看啊，就是白天就切換到黑夜 黑夜就切換到白天唄
                if (SPUtils.get(MainActivity.this, "theme", "dayTheme").equals("dayTheme")) {
                    SPUtils.put(MainActivity.this, "theme", "nightTheme");
                    setTheme(R.style.nightTheme);
                } else {
                    SPUtils.put(MainActivity.this, "theme", "dayTheme");
                    setTheme(R.style.dayTheme);
                }
                //這個方法就是實現不重啟頁面切換主題的
                ThemeUiUtil.changeTheme(view, getTheme());
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

然後看一下切換主題的方法是怎麼做的：

package com.example.administrator.mainchangethemeapp;

import android.content.res.Resources;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;

import java.lang.reflect.Field;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

/**
 * Created by Administrator on 2015/11/14.
 */
public class ThemeUiUtil {
    /**
     * 切換應用主題
     *
     * @param rootView
     */
    public static void changeTheme(View rootView, Resources.Theme theme) {
        //這裡邏輯很簡單 就是遞迴呼叫changeTheme-----遞迴呼叫setTheme了。
        //注意 你們如果是listview也包含在裡面的話 listview自定義實現介面的時候要稍微複雜一些，看你們需要不需要也重新整理listview裡的item了
        //這裡為了簡單 我就不寫那麼複雜了，就這一個邏輯：先set自己的theme 然後遍歷自己的子控制元件 逐一set
        if (rootView instanceof ThemeUIInterface) {
            ((ThemeUIInterface) rootView).setTheme(theme);
            if (rootView instanceof ViewGroup) {
                int count = ((ViewGroup) rootView).getChildCount();
                for (int i = 0; i < count; i++) {
                    changeTheme(((ViewGroup) rootView).getChildAt(i), theme);
                }
            }
        }
    }


}

 

你看，到這裡 我們不重啟activity實現換膚的功能就基本實現了，當然要做的完美的話 還需要各位自己擴充一下 其他控制元件。但是思路都是一樣的。

 

 

看到這裡 有人仍然會說，你這個雖然沒有重啟activity，但是還是不好看呀，還是顯的突兀了，能否做到知乎 android app那樣 切換白天黑夜主題的時候 顯的很柔順呢。

答案是可以的，而且解決方案也比較簡單。就是給個動畫就完事了，在切換前 先保留一下 之前介面的bitmap 然後切換皮膚的的時候 把這個bitmap 顯示出來以後 然後改變他的

alpha值 就可以了，當全部動畫顯示結束以後 把那些不需要的資源全部釋放 就ok了！

來看下程式碼，這裡就放出點選事件的程式碼了，其他地方與前面的程式碼一致：

{

                //我們先取這個根佈局的 bitmap快取 這個實際上跟截圖是差不多的一個東西。
                view.setDrawingCacheEnabled(true);
                view.buildDrawingCache(true);
                final Bitmap localBitmap = Bitmap.createBitmap(view.getDrawingCache());
                view.setDrawingCacheEnabled(false);

                //這邊邏輯沒啥好說的 其實可以不需要看啊，就是白天就切換到黑夜 黑夜就切換到白天唄
                if (SPUtils.get(MainActivity.this, "theme", "dayTheme").equals("dayTheme")) {
                    SPUtils.put(MainActivity.this, "theme", "nightTheme");
                    setTheme(R.style.nightTheme);
                } else {
                    SPUtils.put(MainActivity.this, "theme", "dayTheme");
                    setTheme(R.style.dayTheme);
                }
                //我們new出來的這個蒙版view --mengbanview 就把他放到跟佈局view裡面 並且讓他充滿 同時這個view的background就是截圖前我們的那個截圖bitmap
                final View mengbanView = new View(getApplicationContext());
                mengbanView.setBackgroundDrawable(new BitmapDrawable(getResources(), localBitmap));
                ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                ((ViewGroup) view).addView(mengbanView, params);
                mengbanView.animate().alpha(0).setDuration(400).setListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        //這個方法就是實現不重啟頁面切換主題的
                        ThemeUiUtil.changeTheme(view, getTheme());
                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        //動畫結束的時候移出這個蒙版view 並釋放bitmap
                        ((ViewGroup) view).removeView(mengbanView);
                        localBitmap.recycle();
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                }).start();


            }

最後來看下效果是否和知乎一樣：

大功告成，看上去自然多了！