Android 主题Theme样式一键换肤，非常简单（附小案例）

旧城等待， 2021-09-14 08:30 1043阅读 0赞

![SouthEast][]

# 导语 #

>     谷歌v7后的主题Theme其实就有意给开发者们开辟换肤的功能，我们一起手动制作一款可以换肤主题，开始撸码吧！

### 一、统一自定义属性名 ###

attr.xml

<?xml version="1.0" encoding="utf-8"?>
        <resources>
            <attr name="mainColor" format="color" />
            <attr name="mainPrimaryTextColor" format="color" />
            <attr name="mainPrimaryLightTextColor" format="color" />
            <attr name="mainBgColor" format="color" />
        </resources>

> 属性资源 attr 里可以定义属性类型：如color、float、integer、boolean、dimension（sp、dp/dip、px、pt…）、reference（指向本地资源）等等。

### 二、在Value文件中自定义若干套主题 ###

style.xml

<resources>
     
        <style name="AppThemeNoAction" parent="Theme.AppCompat.Light.NoActionBar">
            
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="mainBgColor">#BBDEFB</item>
            <item name="mainColor">#2196F3</item>
        </style>
    
        
        <style name="AppThemeNoAction.Green">
            <item name="colorPrimary">#4CAF50</item>
            <item name="colorPrimaryDark">#388E3C</item>
            <item name="colorAccent">#F3F5F3</item>
            <item name="mainBgColor">#C8E6C9</item>
            <item name="mainColor">#4CAF50</item>
        </style>
    
        <style name="AppThemeNoAction.Blue">
            <item name="colorPrimary">#2196F3</item>
            <item name="colorPrimaryDark">#1976D2</item>
            <item name="colorAccent">#607D8B</item>
            <item name="mainBgColor">#BBDEFB</item>
            <item name="mainColor">#2196F3</item>
        </style>
    
        <style name="AppThemeNoAction.Yellow">
            <item name="colorPrimary">#FFC107</item>
            <item name="colorPrimaryDark">#FF9800</item>
            <item name="colorAccent">#927215</item>
            <item name="mainBgColor">#D1C4E9</item>
            <item name="mainColor">#FFC107</item>
        </style>
    
        <style name="AppThemeNoAction.Grey">
            <item name="colorPrimary">#607D8B</item>
            <item name="colorPrimaryDark">#455A64</item>
            <item name="colorAccent">#58575A</item>
            <item name="mainBgColor">#CFD8DC</item>
            <item name="mainColor">#607D8B</item>
        </style>
    </resources>

### 三、指定自定义颜色 ###

> 需要跟随主题切换颜色的控件，可以直接设置背景、字体颜色，字符串或图片属性赋值。

（1）xml中赋值：

<?xml version="1.0" encoding="utf-8"?>
        <Linerlayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/mainColor"
            android:minHeight="?attr/actionBarSize" />

（2）代码中赋值：

TypedArray a = obtainStyledAttributes(new int[]{R.attr.mainBgColor, 
        R.attr.mainColor});
      
      int color = a.getColor(0, Color.BLACK)
    
    //或
    
      TypedValue typedValue = new TypedValue();
    
      newTheme.resolveAttribute(mAttrResId, typedValue, true)

> 这里只列出了颜色；还可以使用引用主题字符串以及图片。

### 四、工具类 ###

public class ThemeUtil {
    
        public static class ThemeColors {
            public static final int THEME_GREEN = 1;
            public static final int ThEME_BLUE = 2;
            public static final int THEME_GREY = 3;
            public static final int THEME_YELLOW = 4;
        }
    
        public static void setBaseTheme(Context context) {
            SharedPreferences sharedPreferences = context.getSharedPreferences(
                    "MyThemeShared", context.MODE_PRIVATE);
            int themeType = sharedPreferences.getInt("theme_type", 0);
            int themeId;
            switch (themeType) {
                case ThemeColors.THEME_GREEN:
                    themeId = R.style.AppThemeNoAction_Green;
                    break;
                case ThemeColors.ThEME_BLUE:
                    themeId = R.style.AppThemeNoAction_Blue;
                    break;
    
                case ThemeColors.THEME_GREY:
                    themeId = R.style.AppThemeNoAction_Grey;
                    break;
                case ThemeColors.THEME_YELLOW:
                    themeId = R.style.AppThemeNoAction_Yellow;
                    break;
                default:
                    themeId = R.style.AppThemeNoAction;
            }
            context.setTheme(themeId);
        }
    
        public static boolean setNewTheme(Context context, int theme) {
            SharedPreferences sharedPreferences = context.getSharedPreferences(
                    "MyThemeShared", context.MODE_PRIVATE);
            SharedPreferences.Editor e = sharedPreferences.edit();
            e.putInt("theme_type",theme);
    //        e.apply();
            return  e.commit();//有返回值
        }
    }

> 要在Activity的onCreate方法里的setContextView前使用了。这里最好写在BaseActivity中,更具share保存的样式值,来动态设置theme。

### 五、开始切换主题 ###

@Override
    protected void onCreate(Bundle savedInstanceState) {
    
            super.onCreate(savedInstanceState);
    
            //设置主题
            ThemeUtil.setBaseTheme(this);
    
            setContentView(R.layout.activity_main);
    
    }
    
    private void setChangeTheme(){
    
           if (ThemeUtil.setNewTheme(mContext, ThemeUtil.ThemeColors.ThEME_BLUE)){
                  //重启Activity
                  recreate();
           }
    }

> 当然直接设置后立即生效体验会好点。但由于系统限制，正常情况都需要重启Activity，因此会出现闪屏问题。下面有个解决方案，就是动态获取控件的atts值，对每一个控件进行操作，但是有点繁琐。

ListView  mNewsListView = (ListView) findViewById(R.id.listview);
    
        // 为ListView设置要修改的属性,在这里没有对ListView本身的属性做修改
        ViewGroupSetter listViewSetter = new ViewGroupSetter(mNewsListView, 0);
        // 绑定ListView的Item View中的news_title视图，在换肤时修改它的text_color属性
        listViewSetter.childViewTextColor(R.id.news_title, R.attr.text_color);
    
    
        // 构建Colorful对象
        Colorful mColorful = new Colorful.Builder(this)
            .backgroundDrawable(R.id.root_view, R.attr.root_view_bg) // 设置view的背景图片
            .backgroundColor(R.id.change_btn, R.attr.btn_bg) // 设置按钮的背景色
            .textColor(R.id.textview, R.attr.text_color) // 设置文本颜色
            .setter(listViewSetter)           // 手动设置setter
            .create();

### 六、小案例，完整代码 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70][]

首先，请将前面代码复制到项目中。基本上已经完成了百分之80了。就差一个Toolbar和popwindow。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.aiyang.stickydecoration.MainActivity">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/mainColor"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="?attr/colorAccent"
                android:text="Material design" />
    
            <View
                android:id="@+id/menu_pop"
                android:layout_width="1dp"
                android:layout_height="1dp"
                android:layout_gravity="right"
                android:layout_marginRight="10dp" />
        </android.support.v7.widget.Toolbar>
    
        <Button
            android:id="@+id/golistpage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="?attr/mainBgColor"
            android:text="列表上下拉加载和分页加载"
            android:textColor="?attr/colorAccent" />
    
        <Button
            android:id="@+id/coordinatorpage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="?attr/mainBgColor"
            android:text="页面联动Coordinator"
            android:textColor="?attr/colorAccent" />
    
        <Button
            android:id="@+id/goshelfpage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="?attr/mainBgColor"
            android:text="最终合成的仿美团点餐页面"
            android:textColor="?attr/colorAccent" />
    </LinearLayout>

pop_window.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:paddingLeft="15dp"
        android:background="@mipmap/zidongfendan_bg">
    
    
        <LinearLayout
            android:id="@+id/checkyellow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical">
            <View
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_weight="0.3"
                android:background="@color/yellow"/>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:orientation="vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="黄色"
                    android:layout_margin="10dp"
                    android:textSize="18sp"
                    android:textColor="@color/txtcolor"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/backcolor"
                    android:layout_marginLeft="8dp"
                    />
            </LinearLayout>
    
        </LinearLayout>
    
    
        <LinearLayout
            android:id="@+id/checkblue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical">
    
            <View
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_weight="0.3"
                android:background="@color/blue"/>
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:orientation="vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="蓝色"
                    android:layout_margin="10dp"
                    android:textSize="18sp"
                    android:textColor="@color/txtcolor"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/backcolor"
                    android:layout_marginLeft="8dp"
                    />
            </LinearLayout>
    
        </LinearLayout>
    
    
        <LinearLayout
            android:id="@+id/checkgrey"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical">
    
            <View
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_weight="0.3"
               android:background="@color/grey"/>
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:orientation="vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="浅灰"
                    android:layout_margin="10dp"
                    android:textSize="18sp"
                    android:textColor="@color/txtcolor"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/backcolor"
                    android:layout_marginLeft="8dp"
                    />
            </LinearLayout>
    
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/checkgreen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical">
    
            <View
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_weight="0.3"
                android:background="@color/green"/>
    
            <LinearLayout
                android:layout_weight="0.7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="绿色"
                android:layout_margin="10dp"
                android:textSize="18sp"
                android:textColor="@color/txtcolor"/>
            </LinearLayout>
    
        </LinearLayout>
    
    </LinearLayout>

colors.xml
    
    <color name="txtcolor">#000000</color>
    <color name="yellow" >#FFEB3B</color>
    <color name="blue" >#03A9F4</color>
    <color name="green" >#009688</color>
    <color name="grey">#607D8B</color>

**mipmap-mdpi文件下图片**

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70 1][] ##

MainActivity

public class MainActivity extends AppCompatActivity {
        private MainActivity mContext;
        private PopupWindow popupWindow;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //设置主题
            ThemeUtil.setBaseTheme(this);
            setContentView(R.layout.activity_main);
            mContext = this;
            Toolbar toolbar= (Toolbar) findViewById(R.id.main_toolbar);
            setSupportActionBar(toolbar);
            //设置不现实自带的title文字
            getSupportActionBar().setDisplayShowTitleEnabled(false);
    
    
            findViewById(R.id.golistpage).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    startActivity(new Intent(MainActivity.this, ListScrollListenerActivity.class));
                }
            });
    
            findViewById(R.id.goshelfpage).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    startActivity(new Intent(MainActivity.this, GoodsShelfActivity.class));
                }
            });
    
            findViewById(R.id.coordinatorpage).setOnClickListener(new View.OnClickListener() {
                                                                      @Override
                                                                      public void onClick(View view) {
                                                                          startActivity(new Intent(MainActivity.this, CoordinatorActivity.class
                                                                          ));
                                                                      }
                                                                  }
            );
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main,menu);
            return true;
        }
    
        @Override
        public boolean onPrepareOptionsMenu(Menu menu) {
            menu.findItem(R.id.settings).setIcon(android.support.v7.appcompat.R.drawable.abc_ic_menu_overflow_material);
            return super.onPrepareOptionsMenu(menu);
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
    
            if (item.getItemId() == R.id.settings){
                showPopupWindow(findViewById(R.id.menu_pop));
            }
            return true;
        }
    
        /**
         * 更多菜单选项弹框
         *
         * @param view
         */
        private void showPopupWindow(View view) {
            // 一个自定义的布局，作为显示的内容
            View contentView = LayoutInflater.from(this).inflate(
                    R.layout.pop_window, null);
    
            contentView.findViewById(R.id.checkblue).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (ThemeUtil.setNewTheme(mContext, ThemeUtil.ThemeColors.ThEME_BLUE)){
                        recreate();
                    }
                    popupWindow.dismiss();
                }
            });
            contentView.findViewById(R.id.checkyellow).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (ThemeUtil.setNewTheme(mContext, ThemeUtil.ThemeColors.THEME_YELLOW))
                        recreate();
                    popupWindow.dismiss();
                }
            });
            contentView.findViewById(R.id.checkgreen).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (ThemeUtil.setNewTheme(mContext, ThemeUtil.ThemeColors.THEME_GREEN))
                        recreate();
                    popupWindow.dismiss();
                }
            });
            contentView.findViewById(R.id.checkgrey).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (ThemeUtil.setNewTheme(mContext, ThemeUtil.ThemeColors.THEME_GREY))
                        recreate();
                    popupWindow.dismiss();
                }
            });
            popupWindow = new PopupWindow(contentView,
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);
    
            popupWindow.setBackgroundDrawable(new ColorDrawable(0000000000));
            popupWindow.setFocusable(true);
            popupWindow.setOutsideTouchable(true); // 点击外部关闭
            popupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
            // 设置好参数之后再show
            popupWindow.showAsDropDown(view, 0, 30);
        }
    }

## 其他方式的主题实现 ##

> 网易云音乐开源项目实现方法大概是添加Gradle依赖后，再创建一个拥有不同图片和主题风格的项目子模块，然后切换所谓的主题切换，就能够根据不同的方法设定，呈现不同风格的界面给用户，也就是所谓的换肤。
> 
> APK主题方案和主题包保存到SD卡上(墨迹,搜狗实现方式)的方案类似,只不过是apk压缩格式,一些资源的引用可以调用系统api。

> APK主题方案的基本思路是：在Android中，所有的资源都是基于包的。资源以id进行标识，在同一个应用中，每个资源都有唯一标识。但在不同的应用中，可以有相同的id。因此，只要获取到了其他应用的Context对象，就可以通过它的getRsources获取到其绑定的资源对象。然后，就可以使用Resources的getXXX方法获取字符串、颜色、dimension、图片等。 要想获取其他应用的Context对象，Android已经为我们提供好了接口。那就是：android.content.ContextWrapper.createPackageContext(String packageName, int flags)方法。

try { 
                String remotePackage = "com.your.themepackagename";  
                Context remoteContext = createPackageContext(remotePackage,  
                        CONTEXT_IGNORE_SECURITY);  
                Resources remoteResources = remoteContext.getResources();  
                text.setText(remoteResources.getText(remoteResources.getIdentifier("application_name", "string", remotePackage)));  
                color.setTextColor(remoteResources.getColor(remoteResources.getIdentifier("color_name", "color", remotePackage)));  
                image.setImageDrawable(remoteResources.getDrawable(remoteResources.getIdentifier("ic_icon", "drawable", remotePackage)));  
            } catch (NameNotFoundException e) {  
                e.printStackTrace();  
            }

> 除了压缩包,apk包等实现方式,还可以考虑插件实现方式,目的都是更好的解耦,更方便的迭代项目.
> 
>

[SouthEast]: /images/20210802/1184c80349004d77ab4c0ec8b3963ce6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70]: /images/20210802/60d52b5300a74fb9ba99fa128d5f4ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70 1]: /images/20210802/a27e126917a34648926a9ef0cdd6206f.png