README.md · HarmonyOS-TPC/material-intro-screen

#  Material Intro Screen

Material intro screen 的设计灵感来自于 [Material Intro] ， 它是最好用的material design风格的引导页，可以很方便的自定义各种动画效果.
## Features
  - [轻松添加新幻灯片][Intro Slice]
  - [定制幻灯片][Custom Slide]
  - [视差幻灯片][Parallax Slide]
  - 易扩展的API
  - 最好的材料设计！！！

## 用法
### 第1步-使用：
#### 方法1-使用har包
```
通过library生成har包，添加har包到要集成的libs文件夹内
在entry的gradle内添加如下代码
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
```

#### 方法2-使用implementation依赖
```
allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.openharmony.tpc.thirdlib:material-intro-screen:1.0.2'
```

#### entry运行要求
```
通过DevEco studio,并下载SDK
将项目中的build.gradle文件中dependencies→classpath版本改为对应的版本（即你的IDE新建项目中所用的版本）
```

### 第2步：
#### 首先, 你的 [intro Slice][Intro Slice] 类需要继承 MaterialIntroSlice:
```java
public class IntroSlice extends MaterialIntroSlice
```
### 第3步：
#### 在 [config][config] 里面设置沉浸式主题等:
```json
        {
               "orientation": "unspecified",
               "name": "agency.tango.materialintro.IntroAbility",
               "icon": "$media:icon",
               "description": "$string:introability_description",
               "label": "$string:app_name",
               "type": "page",
               "launchType": "standard",
               "metaData": {
                 "customizeData": [
                   {
                     "name": "hwc-theme",
                     "value": "androidhwext:style/Theme.Emui.NoTitleBar",
                     "extra": ""
                   }
                 ]
               }
             }
```
### 第4步：
#### [添加幻灯片：][Intro Slice]
```java
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        if (isFirst) {
            enableLastSlideAlphaExitTransition(true);
            getBackButtonTranslationWrapper().setEnterTranslation(Component::setAlpha);
            addOrganizePage();
            addGoOnPage();
            addCustomPage();
            addPermissionPage();
            addEndPage();
            isFirst = false;
        }
    }
```
#### SlideComponet用法的说明：
  - ```possiblePermissions``` &#8702; 不强制要求需要授予的权限
  - ```neededPersmissions``` &#8702; 需要获得许可才能从该幻灯片进一步移动的权限
  - ```MessageButtonBehaviour``` &#8702; 仅仅在你需要自定义操作或者button显示文字才会创建新的实例

### 第5步：
#### 自定义 Intro Slice:
  - ```setSkipButtonVisible()``` &#8702; 在屏幕左下方显示跳过按钮，而不是后退按钮
  - ```hideBackButton()``` &#8702; 隐藏屏幕左下方的返回按钮
  - ```enableLastSlideAlphaExitTransition()``` &#8702; 设置最后一张幻灯片是否以Alpha渐渐透明的效果消失

#### 自定义视图动画:

你可以为Intro Slice里面的任何控件设置进场、默认、退场位移动画. 因此，你需要为选定的视图控件选取包装器 (例如: ```getNextButtonTranslationWrapper()```)  并在那里设置接口 ```IViewTranslation```的实现类
```java
 getBackButtonTranslationWrapper().setEnterTranslation(Component::setAlpha);
```
#### 目前提供的包装器 [translation wrappers][TranslationWrapper]:
- ```getNextButtonTranslationWrapper()```
- ```getBackButtonTranslationWrapper()```
- ```getPageIndicatorTranslationWrapper()```
- ```getViewPagerTranslationWrapper()``` 
- ```getSkipButtonTranslationWrapper()```

## 定制幻灯片
####  您只需要扩展SlideComponet并覆盖以下功能就可以实现完全自定义的幻灯片：
 - ```backgroundColor()```
 - ```buttonsColor()```
 - ```canMoveFurther()``` (仅当您要阻止用户在执行某些操作之前就无法进一步移动时才需要实现这个方法)
 - ```cantMoveFurtherErrorMessage()``` (同上)
 
#### 如果要在自定义控件中使用视差，请使用以下视图之一：
  - [ParallaxStackLayout][ParallaxStack]
  - [ParallaxDirectionalLayout][ParallaxDirectiona]
  - [ParallaxDependentLayout][ParallaxDependent]

#### 并在XML中设置 [zdy:layout_parallax_Factor][ParallaxFactor] 属性:
```xml
<agency.tango.materialintroscreen.parallax.ParallaxDirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:zdy="http://schemas.huawei.com/res/ohos/zdy"
   >

<Image
        zdy:layout_parallax_Factor="0.6"
        />
```

- [视察视图详细使用方法请点击这里(For details about how to use the parallax view,click here.)][Parallax link]
  
 #### 此处显示了简单SlideComponet中没有的所有功能： [Custom Slide]

## License
```
 MIT License
 
 Copyright (c) 2016 Tango Agency
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
```

[Custom Slide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/CustomSlide.java>
[Material Intro]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/slice/MaterialIntroSlice.java>
[simple_slide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/simple_slide.gif>
[customer_slide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/custom_slide.gif>
[permission_slide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/permissions_slide.gif>
[finish_slide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/raw/master/images/finish_slide.gif>

[Intro Slice]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/IntroSlice.java>
[Parallax Slide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/resources/base/layout/slide_custom.xml>
[PermissionSlide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/IntroSlice.java#L61>
[FinishSlide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/IntroSlice.java#L51>
[SimpleSlide]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/java/agency/tango/materialintro/slice/IntroSlice.java#L83>
[ParallaxStack]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxStackLayout.java>
[ParallaxDirectiona]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxDirectionalLayout.java>
[ParallaxDependent]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/parallax/ParallaxDependentLayout.java>
[ParallaxFactor]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/resources/base/layout/fragment_slide.xml#L26>
[config]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/entry/src/main/config.json#L47>
[TranslationWrapper]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/material-intro-screen/src/main/java/agency/tango/materialintroscreen/animations/ViewTranslationWrapper.java>
[Parallax link]: <https://gitee.com/HarmonyOS-tpc/material-intro-screen/blob/master/README_PARALLAX.md>

HarmonyOS-TPC/material-intro-screen

简介

发行版

贡献者

语言

近期动态

HarmonyOS-TPC/material-intro-screen .gitee-modal { width: 500px !important; }

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

语言

近期动态

搜索帮助

HarmonyOS-TPC/material-intro-screen