侵权投诉

在鸿蒙中如何实现一屏多页

HarmonyOS技术社区 2021-09-28 09:46 次阅读

众所周知,PageSlider 是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换,而 PageFlipper 可能知道的人就比较少了。

其实 PageFlipper 和 PageSlider 类似,都是视图切换组件,它们都继承自 StackLayout,因此可以将多个 component 层叠在一起,每次只显示一个组件。

当视图从一个 component 切换到另一个 component 时,PageFlipper 支持指定动画效果。

区别:

PageFlipper 通过 addComponent() 添加 component,可使用动画控制多个 component 之间的切换效果,是个轻量级的组件,适合展示少量静态数据。

而 PageSlide 是由 provider 来提供 component 的,更适用复杂的视图切换,实现数据的动态加载。

下面是一个 PageSlider 和 PageFlipper 结合起来的使用效果,页面中间的卡片使用的是 PageSlider,背景图片和底部的数字指示器用的是 PageFlipper。

PageSlider

PageSlider 可以说是鸿蒙中最常用的视图切换组件了,使用方法不用多做介绍,官方文档有详细的说明,这里主要说一下一个特殊的效果。

①一屏多页效果

其实鸿蒙本身有提供一个 setClipEnabled() 的方法,作用是设置是否允许在组件超出其父布局时自动裁剪组件。

理论上通过给 pageSlider 父布局设置 setClipEnabled(false),加上给子组件设置合适的宽度可以实现一屏多页效果,但是经过测试并没达到效果。

这个方法我也单独拿出来在其他场景验证过确实无效,下面是验证的效果。

但是鸿蒙却提供了另外一个方法 setPageMargin(),它的作用是设置 PageSlider 中子组件边距的,当传入一个合适的负数时(必须是负数),就能实现一屏同时显示多个子组件的效果:

②动态设置缩放透明度变化

设置透明度和缩放比例就不细说了,主要就是在 PageSlider 子组件加载完成后和页面切换中的回调方法中改变 alpha 值和 scale 值。

直接上代码:

public final class AlphaScalePageTransformer {

/**

* 缩放

*/

public static final float INACTIVE_SCALE = 0.8f;

/**

* 透明度

*/

public static final float INACTIVE_ALPHA = 0.5f;

/**

* 设置初始状态的缩放和透明度

*

* @param child

* @param position

* @param current

*/

public static void defaultPage(ListContainer child, int position, float current) {

if (position != current) {

child.setAlpha(INACTIVE_ALPHA);

child.setScaleX(INACTIVE_SCALE);

child.setScaleY(INACTIVE_SCALE);

}

}

/**

* 设置滑动中的缩放和透明度

*

* @param childList

* @param position

* @param offset

* @param direction

*/

public static void transformPage(List《ListContainer》 childList, int position, float offset, float direction) {

Component child = childList.get(position);

float scale = INACTIVE_SCALE + (1 - INACTIVE_SCALE) * (1 - Math.abs(offset));

float alpha = INACTIVE_ALPHA + (1 - INACTIVE_ALPHA) * (1 - Math.abs(offset));

child.setScaleX(scale);

child.setScaleY(scale);

child.setAlpha(alpha);

if (direction 》 0) {

if (position 《 childList.size() - 1) {

child = childList.get(position + 1);

}

} else {

if (position 》= 1) {

child = childList.get(position - 1);

}

}

scale = INACTIVE_SCALE + (1 - INACTIVE_SCALE) * Math.abs(offset);

alpha = INACTIVE_ALPHA + (1 - INACTIVE_ALPHA) * Math.abs(offset);

child.setScaleX(scale);

child.setScaleY(scale);

child.setAlpha(alpha);

}

}

设置两边的 component 透明度和缩放效果:

//设置初始状态缩放和透明度

AlphaScalePageTransformer.defaultPage(image, i, pageSlider.getCurrentPage());

//设置页面切换中缩放和透明度

pageSlider.addPageChangedListener(new PageChangedListener() {

@Override

public void onPageSliding(int position, float positionOffset, int positionOffsetPixels) {

AlphaScalePageTransformer.transformPage(listContainers, position,

positionOffset, positionOffsetPixels);

}

});

PageFlipper(翻页器)

PageFlipper 是一个翻页器,当它有两个或多个子组件时,切换过程中可以轻松设置入场动画和出场动画,以达到意想不到的效果。

虽然 PageFlipper 的使用率远不及 PageSlider,但这并不意味着 PageFlipper 就不强大。

他能通过简单的代码实现许多动画效果,比如淘宝头条的效果,日历翻页效果,背景图淡入淡出效果等等。

常用方法:

getCurrentComponent()//获取当前组件

showNext():显示下一个组件(如果当前子组件是最后一个,则显示第一个子组件)

showPrevious():显示上一个组件(如果当前子组件是第一个,则显示最后一个子组件)

getFlipInterval() :获取自动翻转时间

setFlipPeriod(int period) :设置翻转周期

startFlipping() :开启自动翻转

stopFlipping() :停止自动翻转

addComponent() :添加组件

setIncomingAnimationA() :设置转入动画

setOutgoingAnimation() :设置转出动画

下面通过设置文字翻页效果来了解下它的使用方法:

代码如下:

public class IndicatorComponent extends DirectionalLayout {

/**

* 文字大小

*/

private static final int TEXT_SIZE = 130;

/**

* 动画时长

*/

private static final int DURATION = 600;

private PageFlipper textSwitcher;

private Text textcomponent;

/**

* ItemsCountcomponent

*

* @param context

* @param attrSet

*/

public IndicatorComponent(Context context, AttrSet attrSet) {

super(context, attrSet);

init(context);

}

private void init(Context context) {

setOrientation(ComponentContainer.HORIZONTAL);

textSwitcher = new PageFlipper(context);

//理论上PageFlipper只需要添加两个子component就能实现动画效果,但是实际测试发现如果切换速度太快就导致子组件衔接不上出现组件消失的额情况,

//因此这里通过实践多添加了几个子component,防止滑动过快出现bug

textSwitcher.addComponent(createcomponentForTextSwitcher(context));

textSwitcher.addComponent(createcomponentForTextSwitcher(context));

textSwitcher.addComponent(createcomponentForTextSwitcher(context));

textSwitcher.addComponent(createcomponentForTextSwitcher(context));

addComponent(textSwitcher, new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,

ComponentContainer.LayoutConfig.MATCH_CONTENT));

textcomponent = new Text(context);

textcomponent.setTextSize(TEXT_SIZE);

textcomponent.setFont(Font.DEFAULT_BOLD);

textcomponent.setTextColor(new Color(Color.getIntColor(“#8cffffff”)));

addComponent(textcomponent, new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,

ComponentContainer.LayoutConfig.MATCH_CONTENT));

}

/**

* 创建组件

*

* @param context 上下文

* @return text

*/

private Text createcomponentForTextSwitcher(Context context) {

Text text = new Text(context);

text.setTextSize(TEXT_SIZE);

text.setFont(Font.DEFAULT_BOLD);

text.setTextColor(Color.WHITE);

text.setLayoutConfig(new PageFlipper.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,

PageFlipper.LayoutConfig.MATCH_CONTENT));

return text;

}

/**

* update

*

* @param newPosition 新位置

* @param oldPosition 旧位置

* @param totalElements 总数

*/

public void update(int newPosition, int oldPosition, int totalElements) {

textcomponent.setText(“ / ” + totalElements);

int offset = textSwitcher.getHeight();

if (newPosition 》 oldPosition) {

//设置组件进入和退出的动画

textSwitcher.setIncomingAnimation(createPositionAnimation(-offset, 0, 0f, 1f, DURATION));

textSwitcher.setOutgoingAnimation(createPositionAnimation(0, offset, 1f, 0f, DURATION));

} else if (oldPosition 》 newPosition) {

textSwitcher.setIncomingAnimation(createPositionAnimation(offset, 0, 0f, 1f, DURATION));

textSwitcher.setOutgoingAnimation(createPositionAnimation(0, -offset, 1f, 0f, DURATION));

}

//显示下一个组件并执行动画

textSwitcher.showNext();

Text text = (Text) textSwitcher.getCurrentComponent();

text.setText(String.valueOf(newPosition + 1));

}

/**

* 创建属性动画

*

* @param fromY

* @param toY

* @param fromAlpha

* @param toAlpha

* @param duration

* @return

*/

private AnimatorProperty createPositionAnimation(int fromY, int toY, float fromAlpha, float toAlpha, int duration) {

AnimatorProperty animatorProperty = new AnimatorProperty();

animatorProperty.setCurveType(Animator.CurveType.DECELERATE);

animatorProperty.alphaFrom(fromAlpha);

animatorProperty.alpha(toAlpha);

animatorProperty.moveFromY(fromY);

animatorProperty.moveToY(toY);

animatorProperty.setDuration(duration);

return animatorProperty;

}

}

结束

以上主要介绍了 PageSlider 和 PageFlipper 的一些简单使用,最后补充一个小功能,设置渐变效果,这个简单的效果可能很多人还不知道如何设置。

首先生成一个 foreground_gradient.xml:

《shape

xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:shape=“rectangle”》

//设置填充的颜色,可以根据实际需要设置多个

《solid

ohos:colors=“#000000,#00ffffff,#d8000000”/》

//设置渐变方向,有三个值可供选择:linear_gradient,radial_gradient,sweep_gradient

《gradient

ohos:shader_type=“linear_gradient”

/》《/shape》

然后给目标组件设置前景色即可:

ohos:foreground_element=“$graphic:foreground_gradient”

责任编辑:haq

原文标题:在鸿蒙上实现一屏多页效果!

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:HarmonyOS技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏
分享:

评论

相关推荐

HDF驱动加载问题

源码版本:3.0LTS下 开发板:HI3516 编译系统:小型系统 描述: 按照驱动开发的指导编写驱动,可以正常编译进去,但是没...
发表于 10-18 17:25 101次 阅读

HarmonyOS卡片开发-基础信息概述与配置

一.基本概念原子化服务中每个便捷服务应有独立的图标、名称、描述、快照,这些称为便捷服务基础信息。基础信息应能够准确反映便...
发表于 10-18 10:22 101次 阅读
HarmonyOS卡片开发-基础信息概述与配置

华为P20系列将支持最新HarmonyOS系统

HarmonyOS官方宣布华为P20系列将享受最新的HarmonyOS升级,升级HarmonyOS ....
的头像 lhl545545 发表于 10-18 09:59 412次 阅读

HarmonyOS服务卡片开发-资源访问学习

卡片工程可以访问的资源,包括JS模块的resources资源,应用resources资源(所有JS模块共享)和系统预置资源。资源限定词资源...
发表于 10-15 11:35 505次 阅读

鸿蒙系统到底有多少“差评”?虽然很难听,但是很真实

HarmonyOS 2.0HarmonyOS 2.0是华为技术有限公司于20年9月在华为开发者大会上发布的操作系统,适用于部分手机、车机、智能电...
发表于 10-14 16:10 297次 阅读

iPhone13的劲敌,华为Mate50卖点不止鸿蒙系统,但有一个小遗憾

受到一些众所周知的因素影响,手机业务发展受限的华为,目前在全球手机市场中份额直线下滑。从华为的新机发布情况来看,按照以往...
发表于 10-14 11:24 404次 阅读
iPhone13的劲敌,华为Mate50卖点不止鸿蒙系统,但有一个小遗憾

HarmonyOS服务卡片开发-文件组织与配置学习

1. 文件组织 目录结构 JS服务卡片(entry/src/main/js/Component)的典型开发目录结构如下: 目录结构中文件分类如下: ....
发表于 10-14 10:19 277次 阅读

HarmonyOS服务卡片开发-HML语法学习

HML(HarmonyOS Markup Language)是一套类HTML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事...
发表于 10-13 10:48 16次 阅读

HarmonyOS的组件化设计方案

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,Ha....
的头像 HarmonyOS开发者 发表于 10-13 09:59 184次 阅读

基于HarmonyOS的黑白翻棋手机版本

前言 之前发过两篇黑白翻棋游戏的手表版本,这次给大家带来的小分享是黑白翻棋的手机版本,也是JS写的,....
的头像 HarmonyOS官方合作社区 发表于 10-13 09:38 142次 阅读

鸿蒙OS 3.0马上就要来了

花粉们都用上鸿蒙系统了吗?据统计,目前鸿蒙OS 2.0升级用户数突破1.2亿,平均每天超100万用户....
的头像 HarmonyOS官方合作社区 发表于 10-13 09:33 733次 阅读

我摊牌了:13香并不香!我最终还是选择了国产华为P50

​苹果13和华为p50是现在最欢迎的两款手机,不管是手机颜值还是提供带来的手机网络性能体验来说,都是不错的一个选择。 ​虽然说...
发表于 10-12 17:28 669次 阅读

openharmony 应用为什么不能在harmonyos 真机上也harmonyos 虚拟机上运行?

场景:基于openharmony 开发一款产品(假设为手机终端),一个应用开发商为该手机开发一款 openharmony 应用,难道这个应用不能在...
发表于 10-12 16:50 335次 阅读

网传华为手机首发的高通骁龙898是一次无奈的回归

电子发烧友网报道(文/黄山明)自从华为被美国四轮制裁以后,消费者业务在这几年的情况都不容乐观,尤其是....
的头像 电子发烧友网 发表于 10-12 16:49 470次 阅读

一文带你看懂HarmonyOS如何适配多种终端

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系...
发表于 10-12 14:37 454次 阅读
一文带你看懂HarmonyOS如何适配多种终端

鸿蒙的网络管理功能你们知道有多厉害吗

  本示例演示了如何使用网络管理模块相关接口,演示了以下功能: 功能 1: 使用默认网络,打开连接,....
的头像 HarmonyOS技术社区 发表于 10-11 14:26 267次 阅读
鸿蒙的网络管理功能你们知道有多厉害吗

HarmonyOS微博第三方登录实现(内附代码)

  前期准备 在微博开放平台注册一个网站应用,微博开放平台地址如下: https: //open.w....
的头像 HarmonyOS技术社区 发表于 10-11 14:21 207次 阅读

鸿蒙开发中怎么引入第三方库

Android 发展到现在不仅提供了很多 API,还提供了很多第三方库。这降低了我们开发者的开发难度....
的头像 HarmonyOS技术社区 发表于 10-11 14:11 202次 阅读

HarmonyOS系统TextField组件基本用法

1. TextField组件基本用法 组件说明: 是Text的子类,用来进行用户输入数据的 常见属性....
的头像 电子发烧友论坛 发表于 10-09 09:18 228次 阅读
HarmonyOS系统TextField组件基本用法

HarmonyOS如何自动生成JS FA调用Java PA的模板代码

JS UI框架提供了JS FA(Feature Ability)调用Java PA(Particle....
的头像 HarmonyOS开发者 发表于 09-28 10:09 329次 阅读

JavaUI框架新增组件开发指南

Java UI框架是HarmonyOS应用开发中诸多开发者需要关注的重要内容。近期,文档君结合各位开....
的头像 HarmonyOS开发者 发表于 09-28 10:04 404次 阅读
JavaUI框架新增组件开发指南

如何对OpenHarmony贡献代码

OpenHarmony 是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的....
的头像 HarmonyOS技术社区 发表于 09-28 09:58 304次 阅读
如何对OpenHarmony贡献代码

在鸿蒙上使用Python进行物联网编程

在上一篇帖子《使用 Python 开发鸿蒙设备程序(1-GPIO 外设控制)》中,已经成功的使用 P....
的头像 HarmonyOS技术社区 发表于 09-28 09:55 457次 阅读
在鸿蒙上使用Python进行物联网编程

鸿蒙系统中线程管理的使用

不同应用在各自独立的进程中运行。当应用以任何形式启动时,系统为其创建进程,该进程将持续运行。当进程完....
的头像 HarmonyOS技术社区 发表于 09-28 09:49 231次 阅读
鸿蒙系统中线程管理的使用

OpenHarmony3.0上编译C控制Hi3516开发板的LED闪烁

OpenHarmony 分为轻量系统、小型系统、标准系统,目前对应 LiteOS-M、LiteOS-....
的头像 HarmonyOS技术社区 发表于 09-28 09:42 678次 阅读
OpenHarmony3.0上编译C控制Hi3516开发板的LED闪烁

HarmonyOS与OpenHarmony开发角度上的区别

开篇第一句,所有学习与开发资料以官方资料为准。任何博客类只能作为参考,自行判断优良,不要被误导,包括....
的头像 HarmonyOS技术社区 发表于 09-28 09:31 547次 阅读
HarmonyOS与OpenHarmony开发角度上的区别

自制鸿蒙Neptune开发板实时更新温湿度到手机

好久不见!最近在研究 OpenHarmony,经过一番折腾,终于打通了南向和北向开发。 如下: 自己....
的头像 HarmonyOS技术社区 发表于 09-28 09:26 476次 阅读
自制鸿蒙Neptune开发板实时更新温湿度到手机

用Python完成鸿蒙开发板外设控制

话说很久以前,我将 MicroPython 的解释器给“挖”了出来,然后做了适配,成功运行于鸿蒙设备....
的头像 HarmonyOS技术社区 发表于 09-28 09:22 327次 阅读

鸿蒙APP开发鸿蒙权限请求框架

关于 HarmonyOS 的动态授权的常规操作流程和代码我之前写过一篇文章:《鸿蒙动态权限申请完整规....
的头像 HarmonyOS技术社区 发表于 09-28 09:19 279次 阅读

在HarmonyOS点亮LED步骤

Hi3861 模组的介绍 ①外观和基本功能 Hi3861 开发板模组大小约 2cm*5cm,是一款高....
的头像 HarmonyOS技术社区 发表于 09-28 09:16 1097次 阅读
在HarmonyOS点亮LED步骤

芯海科技赋能众多头部品牌率先进入鸿蒙智联生态

作为华为生态合作伙伴,芯海科技从早期的HiLink到最新的HarmonyOS Connect,为终端....
的头像 鸿蒙系统HarmonyOS 发表于 09-27 09:40 2734次 阅读
芯海科技赋能众多头部品牌率先进入鸿蒙智联生态

未来已来,万物互联丨倍益康携筋膜枪HI首秀登场!

2021年5月,华为宣布将“Works With HUAWEI HiLink”和“Powered b....
的头像 科讯视点 发表于 09-26 16:10 588次 阅读
未来已来,万物互联丨倍益康携筋膜枪HI首秀登场!

华为欧拉os系统是家用的吗

华为欧拉os系统可以家用,华为欧拉os操作系统是基于Linux开发的,它融入了华为对于服务器场景的很....
的头像 lhl545545 发表于 09-26 10:39 3396次 阅读

华为欧拉系统和鸿蒙系统的区别

华为公司全新操作系统openEuler欧拉系统明天(9月25日)即将正式发布,华为此前就已经发布了鸿....
的头像 lhl545545 发表于 09-24 16:56 7827次 阅读

HarmonyOS 荣获两项红点设计大奖

在近日揭晓的2021红点设计大奖(RedDot Award)中,HarmonyOS 设计系统,以及H....
的头像 HarmonyOS 发表于 09-23 09:44 360次 阅读

鸿蒙与产业数字化就像天然匹配的钥匙和锁 矿山中的鸿蒙花开

几个月以来,鸿蒙OS已经从一种期待,变成了我们生活中的一部分。 9月13日,华为消费者业务 CEO余....
的头像 脑极体 发表于 09-23 09:38 2298次 阅读

智能电网占营收九成!力合微大力拓展非电网市场,已支持华为鸿蒙系统

电子发烧友网(文/莫婷婷)随着AI、5G等新技术的兴起,我国电网朝着的信息化、自动化、智能化的方向升....
的头像 Monika观察 发表于 09-22 06:43 2776次 阅读
智能电网占营收九成!力合微大力拓展非电网市场,已支持华为鸿蒙系统

鸿蒙生态迎来新机遇,华为开发者大会带来新特性

9月13日,HarmonyOS 2升级用户数正式破亿,极速增长的用户群体给硬件合作伙伴、应用和服务合....
的头像 物联网星球 发表于 09-16 10:55 743次 阅读
鸿蒙生态迎来新机遇,华为开发者大会带来新特性

HarmonyOS系统中基础UI组件

一、UI组件概述 UI组件(以下简称“组件”),是构建界面的核心。 应用中所有的界面元素都是由组件(....
的头像 HarmonyOS开发者 发表于 09-16 09:39 247次 阅读
HarmonyOS系统中基础UI组件

华为开发者大会比去年推迟1个月,在憋什么大招?鸿蒙3.0?

15日,华为官方微博发了一条动态海报,官宣华为开发者大会2021(简称HDC)将在10月22日-24....
的头像 物联网星球 发表于 09-15 16:38 672次 阅读
华为开发者大会比去年推迟1个月,在憋什么大招?鸿蒙3.0?

开放原子教育OpenHarmony高校师资培训成功举办

​开源项目 OpenHarmony是每个人的 OpenHarmony   2021 年 8 月 26....
的头像 开放原子教育 发表于 09-15 11:27 1431次 阅读
开放原子教育OpenHarmony高校师资培训成功举办

HarmonyOS赋能 华为PixLab X1打印机发布

2021年9月13日,华为智慧办公新品发布会如期召开,发布会上,全球首款搭载HarmonyOS 的激....
的头像 话说科技 发表于 09-15 09:28 666次 阅读

鸿蒙系统如何设置自定义下拉刷新控件

Ohos-MaterialRefreshLayout 是一个自定义 Material 风格下拉刷新控....
的头像 HarmonyOS技术社区 发表于 09-13 09:24 365次 阅读

剖析JS语言在HarmonyOS应用开发框架中的作用

在万物互联(Internet of Things,简称IoT)时代,JS(JavaScript)语言....
的头像 HarmonyOS开发者 发表于 09-10 09:13 350次 阅读
剖析JS语言在HarmonyOS应用开发框架中的作用

HDI接口中如何实现驱动入口

HDI接口概述 HDF 驱动框架的一个重要功能是为系统提供稳定的统一的硬件接口,这样才能保证系统服务....
的头像 HarmonyOS开发者 发表于 09-08 11:23 353次 阅读

HarmonyOS JS应用开发需要关注哪些线程?官方解析来啦~

作者:wuyawei,华为软件开发工程师 HarmonyOS 2提供了对两种开发语言的支持:Java....
的头像 话说科技 发表于 09-06 15:25 322次 阅读
HarmonyOS JS应用开发需要关注哪些线程?官方解析来啦~

支付宝支持HarmonyOS版本的SDK

随着 HarmonyOS 的快速发展,支付宝也推出了支持 HarmonyOS 版本的 SDK。 具体....
的头像 HarmonyOS技术社区 发表于 09-06 09:46 1328次 阅读

鸿蒙系统中如何实现通知功能

HarmonyOS 通过 ANS(Advanced Notification Service,即通知....
的头像 HarmonyOS技术社区 发表于 09-06 09:42 735次 阅读

鸿蒙的数据库知识点学习

移动端开发,数据存储是非常重要的,鸿蒙也不例外,说到数据存储,首要的就是数据库了,数据库的存储机制是....
的头像 HarmonyOS技术社区 发表于 09-06 09:34 287次 阅读

在鸿蒙系统的撸引导页代码的经验

手机 APP 的引导页是一个常见的功能,今天和大家一起分享在鸿蒙系统的撸引导页代码的经验。 应用引导....
的头像 HarmonyOS技术社区 发表于 09-06 09:25 244次 阅读