Android APP换皮肤

作者: 因为我的心 | 来源:发表于2020-08-05 09:25 被阅读0次

一、前言：

Android-skin-support: 一款 Android 换肤框架, 极低的学习成本, 极好的用户体验.

只需要一行代码, 就可以实现换肤, 你值得拥有!!!

SkinCompatManager.withoutActivity(this).loadSkin();

就这么简单, 你的APK已经拥有了强大的换肤功能, 当然现在是拥有了换肤功能, 别忘了制作皮肤包.

框架地址：https://github.com/ximsfei/Android-skin-support

1、功能

支持布局中用到的资源换肤。
支持代码中设置的资源换肤。
默认支持大部分基础控件，Material Design换肤。
支持动态设置主题颜色值，支持选择sdcard上的图片作为drawable换肤资源。
支持多种加载策略(应用内/插件式/自定义sdcard路径/zip等资源等)。
资源加载优先级: 动态设置资源-加载策略中的资源-插件式换肤/应用内换肤-应用资源。
支持定制化，选择需要的模块加载。
支持矢量图(vector/svg)换肤。
skin-support 4.0.0以上支持AndroidX，4.0.0以下支持support库

2、展示效果图：

demo地址：https://github.com/lyyRunning/AndroidSkinDemo

录屏.gif

二、使用：

1、依赖

implementation 'skin.support:skin-support:4.0.5'                   // skin-support
implementation 'skin.support:skin-support-appcompat:4.0.5'         // skin-support 基础控件支持
implementation 'skin.support:skin-support-design:4.0.5'            // skin-support-design material design 控件支持[可选]
implementation 'skin.support:skin-support-cardview:4.0.5'          // skin-support-cardview CardView 控件支持[可选]
implementation 'skin.support:skin-support-constraint-layout:4.0.5' // skin-support-constraint-layout ConstraintLayout 控件支持[可选]

2、在Application的onCreate中初始化

@Override
public void onCreate() {
    super.onCreate();
    SkinCompatManager.withoutActivity(this)
            .addInflater(new SkinAppCompatViewInflater())           // 基础控件换肤初始化
            .addInflater(new SkinMaterialViewInflater())            // material design 控件换肤初始化[可选]
            .addInflater(new SkinConstraintViewInflater())          // ConstraintLayout 控件换肤初始化[可选]
            .addInflater(new SkinCardViewInflater())                // CardView v7 控件换肤初始化[可选]
            .setSkinStatusBarColorEnable(false)                     // 关闭状态栏换肤，默认打开[可选]
            .setSkinWindowBackgroundEnable(false)                   // 关闭windowBackground换肤，默认打开[可选]
            .loadSkin();
}

3、如果项目中使用的Activity继承自AppCompatActivity，需要重载getDelegate()方法

@NonNull
@Override
public AppCompatDelegate getDelegate() {
    return SkinAppCompatDelegateImpl.get(this, this);
}

4、多套资源包

多套资源包.png

图片.png

color资源：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary_night">#90a4ae</color>
    <color name="colorPrimaryDark_night">#455a64</color>
    <color name="colorAccent_night">#607d8b</color>
    <color name="colorToolbarTitle_night">#e6e6e6</color>
    <color name="colorAppBg_night">#EEEDED</color>
</resources>

注意：1、引入的资源包一定要和res包同一等级 2、不同资源颜色包一定要有后缀_night。

5、build.gradle中引入

android {
    ...
    //引入多套资源包
    sourceSets { 
        main { 
            res.srcDirs = ['src/main/res', 'src/main/res-red', 'src/main/res-night', 'src/main/res-yellow'] 
        } 
    }   
}

6、切换

   @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.activity_changeskin_toolbar_img_back:
                finish();
                break;
            case R.id.activity_changeskin_cd_blue:
                Toast.makeText(ChangeSkinActivity.this,"切换蓝色",Toast.LENGTH_SHORT).show();
                //设置默认颜色
                SkinCompatManager.getInstance().restoreDefaultTheme();
                break;
            case R.id.activity_changeskin_cd_black:
                Toast.makeText(ChangeSkinActivity.this,"切换暗黑色",Toast.LENGTH_SHORT).show();
                //设置暗黑色
                SkinCompatManager.getInstance().loadSkin("night", null, SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);
                break;
            case R.id.activity_changeskin_cd_red:
                Toast.makeText(ChangeSkinActivity.this,"切换红色",Toast.LENGTH_SHORT).show();
                //设置红色
                SkinCompatManager.getInstance().loadSkin("red", null, SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);
                break;
            case R.id.activity_changeskin_cd_yellow:
                Toast.makeText(ChangeSkinActivity.this,"切换黄色",Toast.LENGTH_SHORT).show();
                //设置黄色
                SkinCompatManager.getInstance().loadSkin("yellow", null, SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);
                break;

            default:
                break;
        }
    }

三、代码：

1、MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView activityMainToolbarImgMore;
    private DrawerLayout activityMainDrawerlayout;
    private LinearLayout menuLeftLayout;
    private CardView menuLeftLayoutCdChangeskin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        activityMainToolbarImgMore = (ImageView) findViewById(R.id.activity_main_toolbar_img_more);
        activityMainDrawerlayout = (DrawerLayout) findViewById(R.id.activity_main_drawerlayout);
        menuLeftLayout = (LinearLayout) findViewById(R.id.menu_left_layout);
        menuLeftLayoutCdChangeskin = (CardView) findViewById(R.id.menu_left_layout_cd_changeskin);

        activityMainToolbarImgMore.setOnClickListener(this);
        menuLeftLayoutCdChangeskin.setOnClickListener(this);

    }

    /**
     * 一定要加
     * @return
     */
    @NonNull
    @Override
    public AppCompatDelegate getDelegate() {
        return SkinAppCompatDelegateImpl.get(this, this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.activity_main_toolbar_img_more:
                switchLeftMenu();
                break;
            case R.id.menu_left_layout_cd_changeskin:
                startActivity(new Intent(this,ChangeSkinActivity.class));
                break;
        }
    }

    private void switchLeftMenu(){
        if (activityMainDrawerlayout.isDrawerOpen(menuLeftLayout)) {
            activityMainDrawerlayout.closeDrawer(menuLeftLayout);
        } else {
            activityMainDrawerlayout.openDrawer(menuLeftLayout);
        }
    }
}

2、activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/activity_main_drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimaryDark">

            <ImageView
                android:id="@+id/activity_main_toolbar_img_more"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_more" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/activity_main_toolbar_img_more"
                android:text="首页"
                android:textColor="@color/colorToolbarTitle"
                android:textSize="23sp" />
        </RelativeLayout>
    </LinearLayout>


    <include layout="@layout/menu_left_layout" />
</androidx.drawerlayout.widget.DrawerLayout>

3、menu_left_layout

<?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"
    android:id="@+id/menu_left_layout"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/colorAppBg"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@color/colorPrimaryDark">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/menu_left_layout_img_avuser"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_avuser" />

        <TextView
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/menu_left_layout_img_avuser"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="大奶牛"
            android:textColor="@color/colorToolbarTitle"
            android:textSize="15sp" />
    </RelativeLayout>

    <androidx.cardview.widget.CardView
        android:id="@+id/menu_left_layout_cd_changeskin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:cardElevation="2dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAppBg">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/my_module_item_bill_ripple"
                android:orientation="horizontal"
                android:padding="5dp">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:padding="2dp"
                    android:src="@drawable/ic_skin" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="换肤"
                    android:textColor="@color/colorPrimaryDark"
                    android:textSize="18sp" />
            </LinearLayout>

        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

4、ChangeSkinActivity

public class ChangeSkinActivity extends AppCompatActivity implements View.OnClickListener{
    private ImageView activityChangeskinToolbarImgBack;
    private CardView activityChangeskinCdBlue;
    private CardView activityChangeskinCdBlack;
    private CardView red;
    private CardView yellow;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_changeskin);

        activityChangeskinToolbarImgBack = (ImageView) findViewById(R.id.activity_changeskin_toolbar_img_back);
        activityChangeskinCdBlue = (CardView) findViewById(R.id.activity_changeskin_cd_blue);
        activityChangeskinCdBlack = (CardView) findViewById(R.id.activity_changeskin_cd_black);
        red = (CardView) findViewById(R.id.activity_changeskin_cd_red);
        yellow = (CardView) findViewById(R.id.activity_changeskin_cd_yellow);
        activityChangeskinToolbarImgBack.setOnClickListener(this);
        activityChangeskinCdBlue.setOnClickListener(this);
        activityChangeskinCdBlack.setOnClickListener(this);
        red.setOnClickListener(this);
        yellow.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.activity_changeskin_toolbar_img_back:
                finish();
                break;
            case R.id.activity_changeskin_cd_blue:
                Toast.makeText(ChangeSkinActivity.this,"切换蓝色",Toast.LENGTH_SHORT).show();
                //设置默认颜色
                SkinCompatManager.getInstance().restoreDefaultTheme();
                break;
            case R.id.activity_changeskin_cd_black:
                Toast.makeText(ChangeSkinActivity.this,"切换暗黑色",Toast.LENGTH_SHORT).show();
                //设置暗黑色
                SkinCompatManager.getInstance().loadSkin("night", null, SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);
                break;
            case R.id.activity_changeskin_cd_red:
                Toast.makeText(ChangeSkinActivity.this,"切换红色",Toast.LENGTH_SHORT).show();
                //设置红色
                SkinCompatManager.getInstance().loadSkin("red", null, SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);
                break;
            case R.id.activity_changeskin_cd_yellow:
                Toast.makeText(ChangeSkinActivity.this,"切换黄色",Toast.LENGTH_SHORT).show();
                //设置黄色
                SkinCompatManager.getInstance().loadSkin("yellow", null, SkinCompatManager.SKIN_LOADER_STRATEGY_BUILD_IN);
                break;

            default:
                break;
        }
    }



    /**
     * 一定要加
     * @return
     */
    @NonNull
    @Override
    public AppCompatDelegate getDelegate() {
        return SkinAppCompatDelegateImpl.get(this, this);
    }
}

5、activity_changeskin

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:background="@color/colorAppBg"
    tools:context=".MainActivity">
    <RelativeLayout
        android:id="@+id/rl_top"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimaryDark"
        tools:ignore="MissingConstraints">
        <ImageView
            android:layout_width="30dp"
            android:padding="3dp"
            android:layout_centerVertical="true"
            android:id="@+id/activity_changeskin_toolbar_img_back"
            android:src="@drawable/ic_back"
            android:layout_height="30dp" />
        <TextView
            android:layout_width="wrap_content"
            android:text="主题换肤"
            android:layout_marginLeft="10dp"
            android:textColor="@color/colorToolbarTitle"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/activity_changeskin_toolbar_img_back"
            android:textSize="23sp"
            android:layout_height="wrap_content" />
    </RelativeLayout>


        <LinearLayout
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="80dp"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="5dp"
                android:layout_height="wrap_content">
                <androidx.cardview.widget.CardView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    app:cardPreventCornerOverlap="true"
                    app:cardUseCompatPadding="true"
                    app:cardElevation="4dp"
                    app:cardCornerRadius="4dp"
                    android:id="@+id/activity_changeskin_cd_blue"
                    android:layout_marginLeft="10dp"
                    android:clickable="true"
                    android:layout_marginRight="3dp"
                    android:foreground="?attr/selectableItemBackground"
                    android:layout_height="240dp">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:background="#0097a7"
                        android:layout_height="match_parent">
                        <TextView
                            android:layout_width="wrap_content"
                            android:text="清爽蓝"
                            android:textColor="#F2F1F0"
                            android:textSize="14sp"
                            android:layout_centerInParent="true"
                            android:layout_height="wrap_content" />
                    </RelativeLayout>
                </androidx.cardview.widget.CardView>
                <androidx.cardview.widget.CardView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    app:cardPreventCornerOverlap="true"
                    app:cardUseCompatPadding="true"
                    app:cardCornerRadius="4dp"
                    android:id="@+id/activity_changeskin_cd_black"
                    app:cardElevation="4dp"
                    android:layout_marginLeft="3dp"
                    android:clickable="true"
                    android:layout_marginRight="10dp"
                    android:foreground="?attr/selectableItemBackground"
                    android:layout_height="240dp">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:background="#455a64"
                        android:layout_height="match_parent">
                        <TextView
                            android:layout_width="wrap_content"
                            android:text="炫酷黑"
                            android:textColor="#F2F1F0"
                            android:textSize="14sp"
                            android:layout_centerInParent="true"
                            android:layout_height="wrap_content" />
                    </RelativeLayout>
                </androidx.cardview.widget.CardView>
            </LinearLayout>



            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="5dp"
                android:layout_height="wrap_content">
                <androidx.cardview.widget.CardView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    app:cardPreventCornerOverlap="true"
                    app:cardUseCompatPadding="true"
                    app:cardElevation="4dp"
                    app:cardCornerRadius="4dp"
                    android:id="@+id/activity_changeskin_cd_red"
                    android:layout_marginLeft="10dp"
                    android:clickable="true"
                    android:layout_marginRight="3dp"
                    android:foreground="?attr/selectableItemBackground"
                    android:layout_height="240dp">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:background="#ff8888"
                        android:layout_height="match_parent">
                        <TextView
                            android:layout_width="wrap_content"
                            android:text="清爽红"
                            android:textColor="#F2F1F0"
                            android:textSize="14sp"
                            android:layout_centerInParent="true"
                            android:layout_height="wrap_content" />
                    </RelativeLayout>
                </androidx.cardview.widget.CardView>
                <androidx.cardview.widget.CardView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    app:cardPreventCornerOverlap="true"
                    app:cardUseCompatPadding="true"
                    app:cardCornerRadius="4dp"
                    android:id="@+id/activity_changeskin_cd_yellow"
                    app:cardElevation="4dp"
                    android:layout_marginLeft="3dp"
                    android:clickable="true"
                    android:layout_marginRight="10dp"
                    android:foreground="?attr/selectableItemBackground"
                    android:layout_height="240dp">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:background="#FFFF55"
                        android:layout_height="match_parent">
                        <TextView
                            android:layout_width="wrap_content"
                            android:text="炫酷黄"
                            android:textColor="#000000"
                            android:textSize="14sp"
                            android:layout_centerInParent="true"
                            android:layout_height="wrap_content" />
                    </RelativeLayout>
                </androidx.cardview.widget.CardView>
            </LinearLayout>
        </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

6、BaseApplication

public class BaseApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        SkinCompatManager.withoutActivity(this)
                .addInflater(new SkinAppCompatViewInflater())           // 基础控件换肤初始化
                .addInflater(new SkinMaterialViewInflater())            // material design 控件换肤初始化[可选]
                .addInflater(new SkinConstraintViewInflater())          // ConstraintLayout 控件换肤初始化[可选]
                .addInflater(new SkinCardViewInflater())                // CardView v7 控件换肤初始化[可选]
//                .setSkinStatusBarColorEnable(false)                     // 关闭状态栏换肤，默认打开[可选]
//                .setSkinWindowBackgroundEnable(false)                   // 关闭windowBackground换肤，默认打开[可选]
                .loadSkin();
    }
}

7、color值

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary_night">#90a4ae</color>
<color name="colorPrimaryDark_night">#455a64</color>
<color name="colorAccent_night">#607d8b</color>
<color name="colorToolbarTitle_night">#e6e6e6</color>
<color name="colorAppBg_night">#EEEDED</color>
</resources>

8、引入资源包

android {
    ...
    //引入多套资源包
    sourceSets {
        main {
            res.srcDirs = ['src/main/res', 'src/main/res-red', 'src/main/res-night', 'src/main/res-yellow']
        }
    }

}

Android APP换皮肤

一、前言：

1、功能

2、展示效果图：

二、使用：

1、依赖

2、在Application的onCreate中初始化

3、如果项目中使用的Activity继承自AppCompatActivity，需要重载getDelegate()方法

4、多套资源包

5、build.gradle中引入

6、切换

三、代码：

1、MainActivity

2、activity_main

3、menu_left_layout

4、ChangeSkinActivity

5、activity_changeskin

6、BaseApplication

7、color值

8、引入资源包

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android APP换皮肤

一、前言：

1、 功能

2、 展示效果图：

二、使用：

1、依赖

2、在Application的onCreate中初始化

3、如果项目中使用的Activity继承自AppCompatActivity，需要重载getDelegate()方法

4、多套资源包

5、build.gradle中引入

6、切换

三、代码：

1、MainActivity

2、activity_main

3、menu_left_layout

4、ChangeSkinActivity

5、activity_changeskin

6、BaseApplication

7、color值

8、引入资源包

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1、功能

2、展示效果图：