美文网首页
Android APP换皮肤

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换皮肤

    一、前言: Android-skin-support: 一款 Android 换肤框架, 极低的学习成本, 极好的...

  • 皮肤管理计划(初步想法)

    通过Android学习,来做我们的项目,我们组选择的题目是关于皮肤护肤的一个App,皮肤管理计划,我们将通过不同人...

  • 技术栈

    Android App架构 Android App开发, Android Framework框架 Java, JV...

  • 通知

    import android.app.Activity;import android.app.Notificati...

  • Android APP开发学习线路图,Android APP 开

    Android APP开发学习线路图,Android APP 开发要掌握这些技能 Android APP开发第一步...

  • Android apk动态加载研究

    前言 近期工作中遇到两个问题。 换应用皮肤 加载插件apk中的view Android 换肤技术一文中已经详细说明...

  • 换肤

    Android换肤功能 什么是换肤?app的皮肤,比如说黑夜模式,切换之后整体风格改变成以黑色为主题色 换了什么?...

  • App not installed

    Android安装app,出现:App not installed。 用Android Studio,点击绿色按钮...

  • 架构

    android app架构 android app架构 应用架构指南-官方 Data Binding

  • 要做好APP推广,不妨试试新的换量渠道活动

    APP换量是APP推广中较为常用的一种方法,说起APP换量,最为人所知的是换量联盟换量,而活动换量这种较为简单的模...

网友评论

      本文标题:Android APP换皮肤

      本文链接:https://www.haomeiwen.com/subject/hgfbrktx.html