# material-intro-screen **Repository Path**: HarmonyOS-tpc/material-intro-screen ## Basic Information - **Project Name**: material-intro-screen - **Description**: Material intro screen 的设计灵感来自于 Material Intro ， 为了使简介屏幕易于所有人使用并尽可能方便的扩展 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 6 - **Forks**: 1 - **Created**: 2021-04-15 - **Last Updated**: 2023-04-17 ## Categories & Tags **Categories**: harmonyos-advanced **Tags**: None ## README # Material Intro Screen Material intro screen 的设计灵感来自于 [Material Intro] ， 它是最好用的material design风格的引导页，可以很方便的自定义各种动画效果. ## Features - [轻松添加新幻灯片][Intro Slice] - [定制幻灯片][Custom Slide] - [视差幻灯片][Parallax Slide] - 易扩展的API - 最好的材料设计！！！ | [Simple slide][SimpleSlide] | [Custom slide][Custom Slide] | [Permission slide][PermissionSlide] | [Finish slide][FinishSlide] |:-:|:-:|:-:|:-:| | ![simple_slide] | ![customer_slide] | ![permission_slide] | ![finish_slide] | ## 用法 ### 第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``` ⇾ 不强制要求需要授予的权限 - ```neededPersmissions``` ⇾ 需要获得许可才能从该幻灯片进一步移动的权限 - ```MessageButtonBehaviour``` ⇾ 仅仅在你需要自定义操作或者button显示文字才会创建新的实例 ### 第5步： #### 自定义 Intro Slice: - ```setSkipButtonVisible()``` ⇾ 在屏幕左下方显示跳过按钮，而不是后退按钮 - ```hideBackButton()``` ⇾ 隐藏屏幕左下方的返回按钮 - ```enableLastSlideAlphaExitTransition()``` ⇾ 设置最后一张幻灯片是否以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 ``` - [视察视图详细使用方法请点击这里(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]: [Material Intro]: [simple_slide]: [customer_slide]: [permission_slide]: [finish_slide]: [Intro Slice]: [Parallax Slide]: [PermissionSlide]: [FinishSlide]: [SimpleSlide]: [ParallaxStack]: [ParallaxDirectiona]: [ParallaxDependent]: [ParallaxFactor]: [config]: [TranslationWrapper]: [Parallax link]: