回复
鸿蒙开源组件——幻灯片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'])
方法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 类需要继承 MaterialIntroSlice:
public class IntroSlice extends MaterialIntroSlice
第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": ""
}
]
}
}
第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;
}
}
SlideComponet用法的说明:
possiblePermissions
⇾ 不强制要求需要授予的权限neededPersmissions
⇾ 需要获得许可才能从该幻灯片进一步移动的权限MessageButtonBehaviour
⇾ 仅仅在你需要自定义操作或者button显示文字才会创建新的实例
第5步:
自定义 Intro Slice:
setSkipButtonVisible()
⇾ 在屏幕左下方显示跳过按钮,而不是后退按钮hideBackButton()
⇾ 隐藏屏幕左下方的返回按钮enableLastSlideAlphaExitTransition()
⇾ 设置最后一张幻灯片是否以Alpha渐渐透明的效果消失
自定义视图动画:
你可以为Intro Slice里面的任何控件设置进场、默认、退场位移动画. 因此,你需要为选定的视图控件选取包装器 (例如: getNextButtonTranslationWrapper()
) 并在那里设置接口 IViewTranslation
的实现类
getBackButtonTranslationWrapper().setEnterTranslation(Component::setAlpha);
目前提供的包装器 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"
/>
此处显示了简单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.
material-intro-screen-master.zip 18.43M 16次下载
已于2021-12-17 13:54:36修改
赞
收藏
回复
相关推荐