鸿蒙开源组件——幻灯片UI

jacksky

发布于 2021-12-17 13:53

浏览

0收藏

Material Intro Screen

Material intro screen 的设计灵感来自于 Material Intro ，它是最好用的material design风格的引导页，可以很方便的自定义各种动画效果.

Features

轻松添加新幻灯片【见文件 IntroSlice.javaa】
定制幻灯片【见文件 CustomSlide.java】
视差幻灯片【见文件 slide_custom.xml】
易扩展的API
最好的材料设计！！！

Simple slide	Custom slide	Permission slide	Finish slide

用法

第1步-使用：

方法1-使用har包

通过library生成har包，添加har包到要集成的libs文件夹内
在entry的gradle内添加如下代码
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])1.
2.
3.

方法2-使用implementation依赖

allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.openharmony.tpc.thirdlib:material-intro-screen:1.0.2'1.
2.
3.
4.
5.
6.

entry运行要求

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

第2步：

首先, 你的 intro Slice 类需要继承 MaterialIntroSlice:

public class IntroSlice extends MaterialIntroSlice1.

第3步：

在 config 里面设置沉浸式主题等:

        {
               "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": ""
                   }
                 ]
               }
             }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

第4步：

添加幻灯片：

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        if (isFirst) {
            enableLastSlideAlphaExitTransition(true);
            getBackButtonTranslationWrapper().setEnterTranslation(Component::setAlpha);
            addOrganizePage();
            addGoOnPage();
            addCustomPage();
            addPermissionPage();
            addEndPage();
            isFirst = false;
        }
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

SlideComponet用法的说明：

possiblePermissions ⇾ 不强制要求需要授予的权限
neededPersmissions ⇾ 需要获得许可才能从该幻灯片进一步移动的权限
MessageButtonBehaviour ⇾ 仅仅在你需要自定义操作或者button显示文字才会创建新的实例

第5步：

自定义 Intro Slice:

setSkipButtonVisible() ⇾ 在屏幕左下方显示跳过按钮，而不是后退按钮
hideBackButton() ⇾ 隐藏屏幕左下方的返回按钮
enableLastSlideAlphaExitTransition() ⇾ 设置最后一张幻灯片是否以Alpha渐渐透明的效果消失

自定义视图动画:

你可以为Intro Slice里面的任何控件设置进场、默认、退场位移动画. 因此，你需要为选定的视图控件选取包装器 (例如: getNextButtonTranslationWrapper()) 并在那里设置接口 IViewTranslation的实现类

 getBackButtonTranslationWrapper().setEnterTranslation(Component::setAlpha);1.

目前提供的包装器 translation wrappers:

getNextButtonTranslationWrapper()
getBackButtonTranslationWrapper()
getPageIndicatorTranslationWrapper()
getViewPagerTranslationWrapper()
getSkipButtonTranslationWrapper()

定制幻灯片

您只需要扩展SlideComponet并覆盖以下功能就可以实现完全自定义的幻灯片：

backgroundColor()
buttonsColor()
canMoveFurther() (仅当您要阻止用户在执行某些操作之前就无法进一步移动时才需要实现这个方法)
cantMoveFurtherErrorMessage() (同上)

如果要在自定义控件中使用视差，请使用以下视图之一：

ParallaxStackLayout
ParallaxDirectionalLayout
ParallaxDependentLayout

并在XML中设置 zdy:layout_parallax_Factor 属性:

<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"
        />1.
2.
3.
4.
5.
6.
7.
8.

视察视图详细使用方法请点击这里(For details about how to use the parallax view,click here.)

此处显示了简单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.1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.