# SkinSprite

**Repository Path**: archermind-ti/skinsprite

## Basic Information

- **Project Name**: SkinSprite
- **Description**: SkinSprite是一种无需重新启动页面即可更改昼夜模式的一种解决方案
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-05-31
- **Last Updated**: 2021-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SkinSprite

### 简介

SkinSprite是一种无需重新启动页面即可更改昼夜模式的一种解决方案。

### 功能

1. 动态切换页面的昼夜模式
2. 支持常用的控件，如：Button、DepentLayout、DirectionalLayout、StackLayout和Text
3. 支持状态栏颜色的切换（默认使用系统定义的状态栏颜色）

###### 缺陷

1. 切换昼夜模式时，无法更改状态栏图标和字体颜色

### 演示效果

![art/preview.gif](art/preview.gif)

### 集成

1. 在module的build.gradle中添加对`SkinSprite`的依赖

```groovy
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	implementation 'com.gitee.archermind-ti:skinsprite:1.0.0'
    ……
}
```

2. 在project的build.gradle中添加`mavenCentral()`的引用

``` groovy
allprojects {
    repositories {
        ……
        mavenCentral()
    }
}
```



### 使用说明

1. 在你的`resources/dark`目录下定义你的`color`、`media`和`graphic`资源，这部分资源为黑夜模式的资源，白天模式的资源即为`resources`目录对应的资源。
2. 您的`Ability`或`AbilitySlice`需要继承`SkinnableAbility`或`SkinnableAbilitySlice`。
3. 在`Ability`或`AbilitySlice`中，使用`setReUIComponent(int layoutRes)`设置布局。
4. 在`Ability`或`AbilitySlice`中，使用`setDayNightMode(int colorMode)`切换白天/黑夜模式。

**示例：**

```java
//2 AbilitySlice继承至SkinnableAbilitySlice
public class MainAbilitySlice extends SkinnableAbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
      	//3 使用setReUIComponent(int layoutRes)设置布局 
        setReUIComponent(ResourceTable.Layout_ability_main);

        findComponentById(ResourceTable.Id_btn_change).setClickedListener(component -> {
            //4 使用setDayNightMode(int colorMode)切换白天/黑夜模式
            int currentNightMode = wrapColorMode(getColorMode());
            switch (currentNightMode) {
                case Configuration.DARK_MODE: {
                    setDayNightMode(Configuration.LIGHT_MODE);
                    // Night mode is not active, we're in day time
                    break;
                }
                case Configuration.LIGHT_MODE: {
                    setDayNightMode(Configuration.DARK_MODE);
                    // Night mode is active, we're at night!
                    break;
                }
            }
        });
    }

    private int wrapColorMode(int colorMode) {
        if (Configuration.AUTO_MODE == colorMode) {
            //获取系统当前显示模式
            return getResourceManager().getConfiguration().getSystemColorMode();
        }
        return colorMode;
    }
   
    /**
     * 获取昼夜模式状态栏颜色
     *
     * @return 颜色值
     */
    @Override
    protected int getDayNightStatusColor() {
        return getColor(ResourceTable.Color_statusColor);
    }
}
```

ability_main.xml：

```xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="$color:colorAccent"
    ohos:orientation="vertical"
    ohos:padding="16vp">

    <Text
        ohos:id="$+id:tv_wait_for_change"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$color:textColor"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_color="$color:colorPrimary"
        ohos:text_size="50px"
        ohos:top_margin="66vp"
        />

    <Button
        ohos:id="$+id:btn_change"
        ohos:height="48vp"
        ohos:width="match_parent"
        ohos:background_element="$color:colorPrimaryDark"
        ohos:text="change theme"
        ohos:text_color="$color:textColor"
        ohos:top_margin="50vp"/>
</DirectionalLayout>
```



#### 解析layout xml

如果你需要在Ability/AbilitySlice之外使用，你可以使用`SkinnableComponentLayoutScatter#parse(int,ComponentContainer,boolean)`解析layout xml，此时解析的结果`Component`很可能已经拥有白天/黑夜切换的能力。你可以使用类似下方的代码白天/黑夜模式切换后，使你的页面显示生效：

```java
   private void applyDayNightForComponent(Component component) {
        if (component instanceof Skinnable) {
            Skinnable skinnable = (Skinnable) component;
            if (skinnable.isSkinnable()) {
                skinnable.applyDayNight();
            }
        }
        if (component instanceof ComponentContainer) {
            ComponentContainer parent = (ComponentContainer) component;
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                applyDayNightForView(parent.getComponentAt(i));
            }
        }
    }
```

### 编译说明

1. 将项目通过git clone 至本地
2. 使用DevEco Studio 打开该项目，然后等待Gradle 构建完成
3. 点击`Run`运行即可（真机运行可能需要配置签名）

### 版权和许可信息

* [MIT License](LICENSE)