在鸿蒙系统的撸引导页代码的经验
手机 app 的引导页是一个常见的功能，今天和大家一起分享在鸿蒙系统的撸引导页代码的经验。
应用引导页的功能
①为什么要做应用的引导功能？
几乎所有的 app 都会有做一些界面引导，有的是页面交互的引导，有的是为了介绍新功能。
②通用的功能性引导大概分哪些呢？
主功能引导、新功能引导和功能转移或改名引导。
③通用的应用引导，需要注意哪些？
引导的内容文字不宜太长，适当加入一些图案可以方便用户理解。言归正传吧，开始咱们今天的主题，如何实现应用的引导功能吧！
实现应用的引导功能
具体步骤如下：
首先来看看讨论的引导功能的效果吧！点击引导页，向上滑动过程，第一个界面图案和文字渐变消失的过程。
而第二页界面的图片和文字渐渐清晰可见。底部 next 图标会下滑隐藏再弹出的动画效果。
开发准备
搭建鸿蒙开发环境，这里就不做介绍了，如果没有环境没有搭建好的同学可以进入学习安装环境， 安装好环境以后接下来我们就可以进行开发工作了。
①设计思路
首先我们做的是公用的组件，我们需要使用组件化思想去搭建我们的项目框架，接下来根据组件的需求我们先去设计一下界面。
设计好之后我们需要对页面添加数据，添加完数据之后组件的大体界面已经展示给我们，下来就是在滑动 page 的时候添加底部 button 的回弹动画，并且在此时我们需要操作 page 的子 view。最后我们要去使用我们的组件。
②设计步骤
（1）设计界面
根据我们要实现的功能，我们可以使用 pageslider 控件去实现界面布局文件，实现代码为：
《pageslider
ohos:id=“$+id:vertical_view_pager”
ohos:width=“match_parent”
ohos:height=“match_parent” 》《/pageslider》
添加数据、初始化数据：
public void setdata（） {
super.setdata（）;
pagecolors = new arraylist《》（）;
pagecolors.add（getstring（resourcetable.color_coloraccent））;
pagecolors.add（getstring（resourcetable.color_color2））;
pagecolors.add（getstring（resourcetable.color_colorprimary））;
pagecolors.add（getstring（resourcetable.color_color3））;
pagemoudles = getdata（）;
}
private list《pagemoudle》 getdata（） {
string textvalue = “lorem ipsum is simply dummy text of the printing and typesetting industry.”;
pagemoudle pagemoudleone = new pagemoudle（）;
pagemoudleone.setrecoureid（resourcetable.graphic_intro_second_vector）;
pagemoudleone.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（0））））;
pagemoudleone.settitle（“lorem ipsum lorem ipsum”）;
pagemoudleone.settext（textvalue + textvalue + textvalue）;
pagemoudleone.settitlesize（17）;
pagemoudleone.settextsize（14）;
list《pagemoudle》 datas = new arraylist《》（）;
datas.add（pagemoudleone）;
pagemoudle pagemoudletwo = new pagemoudle（）;
pagemoudletwo.setrecoureid（resourcetable.graphic_four）;
pagemoudletwo.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（1））））;
pagemoudletwo.settitle（“lorem ipsum lorem ipsum ”）;
pagemoudletwo.settext（textvalue + textvalue）;
datas.add（pagemoudletwo）;
pagemoudle pagemoudlethree = new pagemoudle（）;
pagemoudlethree.setrecoureid（resourcetable.graphic_ohos）;
pagemoudlethree.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（2））））;
pagemoudlethree.settitle（“lorem ipsum”）;
pagemoudlethree.settext（textvalue）;
datas.add（pagemoudlethree）;
pagemoudle pagemoudlefour = new pagemoudle（）;
pagemoudlefour.setrecoureid（resourcetable.media_new_intro）;
pagemoudlefour.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（3））））;
pagemoudlefour.settitle（“lorem ipsum”）;
pagemoudlefour.settext（textvalue + textvalue + textvalue）;
datas.add（pagemoudlefour）;
return datas;
}
设置 provider：
pageslider = （pageslider） findcomponentbyid（resourcetable.id_vertical_view_pager）;
pageslider.setorientation（component.vertical）;
pageslider.addpagechangedlistener（this）;
pageslider.settoucheventlistener（this：：ontouchevent）;
adapter = new verticalintropageradapter（this， pagemoudles）;
pageslider.setprovider（adapter）;
（2）添加动画
这里我们使用属性动画去完成底部 button 的上弹和下弹操作，上弹和下弹是和我们手指滑动的方向是有关系的。
所以这里我们必须实现手指的触摸事件，在触摸事件中获取我们手机滑动的距离，如果距离大于 0 则是下滑，如果小于 0 则是下滑。
获取是上滑还是下滑代码如下：
@override
public boolean ontouchevent（component component， touchevent touchevent） {
int action = touchevent.getaction（）;
switch （action） {
case touchevent.primary_point_down：
pageslider.setslidingpossible（true）;
startpointy = gettouchy（touchevent， 0， component）;
return true;
case touchevent.point_move：
movepointy = gettouchy（touchevent， touchevent.getindex（）， component） - startpointy;
if （page ！= 0 && movepointy 》 0） {
windowmanager.getinstance（）.gettopwindow（）.get（）.setstatusbarcolor（getcolorbystring（pagecolors.get（page - 1）））;
}
return true;
case touchevent.primary_point_up：
return true;
default：
}
return false;
}
获取到上滑还是下滑后，接下来就去给底部 button 设置动画。动画用的是属性动画，属性动画大体实现是初始化动画，设置动画持续时间，实现动画属性值变化监听事件，最后启动动画。
大体代码如下：
private void startchangebuttonbg（int direction， int duration） {
if （animatorvalue == null） {
animatorvalue = new animatorvalue（）;
}
animatorvalue.setcurvetype（animator.curvetype.linear）;
animatorvalue.setduration（duration）;
animatorvalue.setvalueupdatelistener（new animatorvalue.valueupdatelistener（） {
@override
public void onupdate（animatorvalue animatorvalue， float v） {
if （direction 《= 0） {
double value = （（1 - （double）v） * nextheight） * direction;
next.setmarginbottom（（int） value）;
} else {
float value = -（v * nextheight）;
next.setmarginbottom（（int） value）;
if （v 》 0.9） {
if （page == 3） {
skip.setvisibility（component.invisible）;
next.settext（“done”）;
next.setnormalcolor（pagecolors.get（1））;
} else {
skip.setvisibility（component.visible）;
next.settext（“next”）;
next.setnormalcolor（pagecolors.get（page + 1））;
}
next.setmarginbottom（0）;
}
}
}
}）;
setanimstatechangelist（direction）;
animatorvalue.start（）;
}
private void setanimstatechangelist（int direction） {
animatorvalue.setstatechangedlistener（new animator.statechangedlistener（） {
@override
public void onstart（animator animator） {
if （direction 《= 0） {
if （page == 3） {
skip.setvisibility（component.invisible）;
next.settext（“done”）;
next.setnormalcolor（pagecolors.get（1））;
} else {
skip.setvisibility（component.visible）;
next.settext（“next”）;
next.setnormalcolor（pagecolors.get（page + 1））;
}
}
}
@override
public void onstop（animator animator） {
}
@override
public void oncancel（animator animator） {
}
@override
public void onend（animator animator） {
movepointy = 0;
}
@override
public void onpause（animator animator） {
}
@override
public void onresume（animator animator） {
}
}）;
}
（3）操作子 view
如何去操作子 view 呢？首先我们先去看看 pageslider 是否有子 view 的操作监听接口，查看 api 后没有这样的接口获取方法，那就得我们自己去考虑怎么实现呢。
我这里的实现思路是在 pageslider 设置 provider 的时候保存所有的子 view 对象，然后再使用的时候拿出子 view 再进行操作。
我们这里例子是改变子 view 的透明度。代码实现如下：
保存子 view：
public class verticalintropageradapter extends pagesliderprovider {
linkedhashmap《integer， component》 pagecomonents;
public verticalintropageradapter（context context， list《pagemoudle》 datas） {
this.context = context;
this.datas = datas;
pagecomonent = new arraylist《》（）;
// 初始化用来添加子view的集合，注意这里是一个有序集合
pagecomonents = new linkedhashmap《integer， component》（）;
}
//添加子view
@override
public object createpageincontainer（componentcontainer componentcontainer， int i） {
if （！pagecomonents.containsvalue（component）） {
pagecomonents.put（i， component）;
}
}
}
操作子 view：
private void setpageapale（int currentpage， int targetpage， float offset） {
if （adapter.pagecomonents ！= null && adapter.pagecomonents.get（currentpage） ！= null
&& adapter.pagecomonents.get（targetpage） ！= null） {
float alpha = new bigdecimal（1.0f）.subtract（new bigdecimal（offset）.multiply（new bigdecimal（2）））.floatvalue（）;
if （offset 》= 0.4 && offset 《= 0.9） {
offset = new bigdecimal（offset）.subtract（new bigdecimal（ 0.4f））.floatvalue（）;
} else if （offset 《 0.4） {
offset = 0.0f;
} else {
offset = 1.0f;
}
setapale（currentpage， targetpage， alpha， offset）;
}
}
到这里我们的竖直引导工具组件就已经封装好了。
（4）使用组件
如何去使用我们的组件呢？这里我们用的是组件化思想。所以我们呢只需要在我们的项目中引入我们的组件，然后在我们的 ablity 中集成我们封装好的 verticalintroslice 对象就行。
最后我们再把封装一个添加数据的接口，把我们的数据变成动态添加的就行。
结语
到此我们的整个设计流程就完了，通过上面的操作，相信小伙伴们就可以实现应用引导功能了。
即将发布！iQOO Neo 5部分配置信息曝光
5G已经给中国社会带来了重大变化
光纤传感器的原理_光纤传感器的特征
全球首个 中国广电700MHz大带宽成为5G国际标准
浪潮联合Xilinx推出业界首款集成HBM2的FPGA
在鸿蒙系统的撸引导页代码的经验
眼球追踪技术大揭秘
华为，3G元年之初体验
双向ESD静电保护器件二极管 DW03D-B-S 原厂直供
能使螺线管通电时正常的升压电路
尖晶石结构正极材料动力锂电池的热安全性研究
5G下通信测试仪器有什么发展的希望
如何使用proteus仿真软件进行ARM7显示系统
魅族 Note9详细评测:它会是今年千元机的新标杆吗?
国网信息通信产业集团有限公司与腾讯云在北京签署合作协议
存储技术新突破，10PB单盘使用寿命超过5000年
如何快速且经济高效地为空间受限和密封的设备添加无线充电
DesignStart Cortex-M3软件开发网上课程
300mW 调频发射机,FM transmitter
因美国大选引起争议，Facebook将采取措施预防
应用引导页的功能
①为什么要做应用的引导功能？
几乎所有的 app 都会有做一些界面引导，有的是页面交互的引导，有的是为了介绍新功能。
②通用的功能性引导大概分哪些呢？
主功能引导、新功能引导和功能转移或改名引导。
③通用的应用引导，需要注意哪些？
引导的内容文字不宜太长，适当加入一些图案可以方便用户理解。言归正传吧，开始咱们今天的主题，如何实现应用的引导功能吧！
实现应用的引导功能
具体步骤如下：
首先来看看讨论的引导功能的效果吧！点击引导页，向上滑动过程，第一个界面图案和文字渐变消失的过程。
而第二页界面的图片和文字渐渐清晰可见。底部 next 图标会下滑隐藏再弹出的动画效果。
开发准备
搭建鸿蒙开发环境，这里就不做介绍了，如果没有环境没有搭建好的同学可以进入学习安装环境， 安装好环境以后接下来我们就可以进行开发工作了。
①设计思路
首先我们做的是公用的组件，我们需要使用组件化思想去搭建我们的项目框架，接下来根据组件的需求我们先去设计一下界面。
设计好之后我们需要对页面添加数据，添加完数据之后组件的大体界面已经展示给我们，下来就是在滑动 page 的时候添加底部 button 的回弹动画，并且在此时我们需要操作 page 的子 view。最后我们要去使用我们的组件。
②设计步骤
（1）设计界面
根据我们要实现的功能，我们可以使用 pageslider 控件去实现界面布局文件，实现代码为：
《pageslider
ohos:id=“$+id:vertical_view_pager”
ohos:width=“match_parent”
ohos:height=“match_parent” 》《/pageslider》
添加数据、初始化数据：
public void setdata（） {
super.setdata（）;
pagecolors = new arraylist《》（）;
pagecolors.add（getstring（resourcetable.color_coloraccent））;
pagecolors.add（getstring（resourcetable.color_color2））;
pagecolors.add（getstring（resourcetable.color_colorprimary））;
pagecolors.add（getstring（resourcetable.color_color3））;
pagemoudles = getdata（）;
}
private list《pagemoudle》 getdata（） {
string textvalue = “lorem ipsum is simply dummy text of the printing and typesetting industry.”;
pagemoudle pagemoudleone = new pagemoudle（）;
pagemoudleone.setrecoureid（resourcetable.graphic_intro_second_vector）;
pagemoudleone.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（0））））;
pagemoudleone.settitle（“lorem ipsum lorem ipsum”）;
pagemoudleone.settext（textvalue + textvalue + textvalue）;
pagemoudleone.settitlesize（17）;
pagemoudleone.settextsize（14）;
list《pagemoudle》 datas = new arraylist《》（）;
datas.add（pagemoudleone）;
pagemoudle pagemoudletwo = new pagemoudle（）;
pagemoudletwo.setrecoureid（resourcetable.graphic_four）;
pagemoudletwo.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（1））））;
pagemoudletwo.settitle（“lorem ipsum lorem ipsum ”）;
pagemoudletwo.settext（textvalue + textvalue）;
datas.add（pagemoudletwo）;
pagemoudle pagemoudlethree = new pagemoudle（）;
pagemoudlethree.setrecoureid（resourcetable.graphic_ohos）;
pagemoudlethree.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（2））））;
pagemoudlethree.settitle（“lorem ipsum”）;
pagemoudlethree.settext（textvalue）;
datas.add（pagemoudlethree）;
pagemoudle pagemoudlefour = new pagemoudle（）;
pagemoudlefour.setrecoureid（resourcetable.media_new_intro）;
pagemoudlefour.setbackgroudrgbcolor（rgbcolor.fromargbint（color.getintcolor（pagecolors.get（3））））;
pagemoudlefour.settitle（“lorem ipsum”）;
pagemoudlefour.settext（textvalue + textvalue + textvalue）;
datas.add（pagemoudlefour）;
return datas;
}
设置 provider：
pageslider = （pageslider） findcomponentbyid（resourcetable.id_vertical_view_pager）;
pageslider.setorientation（component.vertical）;
pageslider.addpagechangedlistener（this）;
pageslider.settoucheventlistener（this：：ontouchevent）;
adapter = new verticalintropageradapter（this， pagemoudles）;
pageslider.setprovider（adapter）;
（2）添加动画
这里我们使用属性动画去完成底部 button 的上弹和下弹操作，上弹和下弹是和我们手指滑动的方向是有关系的。
所以这里我们必须实现手指的触摸事件，在触摸事件中获取我们手机滑动的距离，如果距离大于 0 则是下滑，如果小于 0 则是下滑。
获取是上滑还是下滑代码如下：
@override
public boolean ontouchevent（component component， touchevent touchevent） {
int action = touchevent.getaction（）;
switch （action） {
case touchevent.primary_point_down：
pageslider.setslidingpossible（true）;
startpointy = gettouchy（touchevent， 0， component）;
return true;
case touchevent.point_move：
movepointy = gettouchy（touchevent， touchevent.getindex（）， component） - startpointy;
if （page ！= 0 && movepointy 》 0） {
windowmanager.getinstance（）.gettopwindow（）.get（）.setstatusbarcolor（getcolorbystring（pagecolors.get（page - 1）））;
}
return true;
case touchevent.primary_point_up：
return true;
default：
}
return false;
}
获取到上滑还是下滑后，接下来就去给底部 button 设置动画。动画用的是属性动画，属性动画大体实现是初始化动画，设置动画持续时间，实现动画属性值变化监听事件，最后启动动画。
大体代码如下：
private void startchangebuttonbg（int direction， int duration） {
if （animatorvalue == null） {
animatorvalue = new animatorvalue（）;
}
animatorvalue.setcurvetype（animator.curvetype.linear）;
animatorvalue.setduration（duration）;
animatorvalue.setvalueupdatelistener（new animatorvalue.valueupdatelistener（） {
@override
public void onupdate（animatorvalue animatorvalue， float v） {
if （direction 《= 0） {
double value = （（1 - （double）v） * nextheight） * direction;
next.setmarginbottom（（int） value）;
} else {
float value = -（v * nextheight）;
next.setmarginbottom（（int） value）;
if （v 》 0.9） {
if （page == 3） {
skip.setvisibility（component.invisible）;
next.settext（“done”）;
next.setnormalcolor（pagecolors.get（1））;
} else {
skip.setvisibility（component.visible）;
next.settext（“next”）;
next.setnormalcolor（pagecolors.get（page + 1））;
}
next.setmarginbottom（0）;
}
}
}
}）;
setanimstatechangelist（direction）;
animatorvalue.start（）;
}
private void setanimstatechangelist（int direction） {
animatorvalue.setstatechangedlistener（new animator.statechangedlistener（） {
@override
public void onstart（animator animator） {
if （direction 《= 0） {
if （page == 3） {
skip.setvisibility（component.invisible）;
next.settext（“done”）;
next.setnormalcolor（pagecolors.get（1））;
} else {
skip.setvisibility（component.visible）;
next.settext（“next”）;
next.setnormalcolor（pagecolors.get（page + 1））;
}
}
}
@override
public void onstop（animator animator） {
}
@override
public void oncancel（animator animator） {
}
@override
public void onend（animator animator） {
movepointy = 0;
}
@override
public void onpause（animator animator） {
}
@override
public void onresume（animator animator） {
}
}）;
}
（3）操作子 view
如何去操作子 view 呢？首先我们先去看看 pageslider 是否有子 view 的操作监听接口，查看 api 后没有这样的接口获取方法，那就得我们自己去考虑怎么实现呢。
我这里的实现思路是在 pageslider 设置 provider 的时候保存所有的子 view 对象，然后再使用的时候拿出子 view 再进行操作。
我们这里例子是改变子 view 的透明度。代码实现如下：
保存子 view：
public class verticalintropageradapter extends pagesliderprovider {
linkedhashmap《integer， component》 pagecomonents;
public verticalintropageradapter（context context， list《pagemoudle》 datas） {
this.context = context;
this.datas = datas;
pagecomonent = new arraylist《》（）;
// 初始化用来添加子view的集合，注意这里是一个有序集合
pagecomonents = new linkedhashmap《integer， component》（）;
}
//添加子view
@override
public object createpageincontainer（componentcontainer componentcontainer， int i） {
if （！pagecomonents.containsvalue（component）） {
pagecomonents.put（i， component）;
}
}
}
操作子 view：
private void setpageapale（int currentpage， int targetpage， float offset） {
if （adapter.pagecomonents ！= null && adapter.pagecomonents.get（currentpage） ！= null
&& adapter.pagecomonents.get（targetpage） ！= null） {
float alpha = new bigdecimal（1.0f）.subtract（new bigdecimal（offset）.multiply（new bigdecimal（2）））.floatvalue（）;
if （offset 》= 0.4 && offset 《= 0.9） {
offset = new bigdecimal（offset）.subtract（new bigdecimal（ 0.4f））.floatvalue（）;
} else if （offset 《 0.4） {
offset = 0.0f;
} else {
offset = 1.0f;
}
setapale（currentpage， targetpage， alpha， offset）;
}
}
到这里我们的竖直引导工具组件就已经封装好了。
（4）使用组件
如何去使用我们的组件呢？这里我们用的是组件化思想。所以我们呢只需要在我们的项目中引入我们的组件，然后在我们的 ablity 中集成我们封装好的 verticalintroslice 对象就行。
最后我们再把封装一个添加数据的接口，把我们的数据变成动态添加的就行。
结语
到此我们的整个设计流程就完了，通过上面的操作，相信小伙伴们就可以实现应用引导功能了。
即将发布！iQOO Neo 5部分配置信息曝光
5G已经给中国社会带来了重大变化
光纤传感器的原理_光纤传感器的特征
全球首个 中国广电700MHz大带宽成为5G国际标准
浪潮联合Xilinx推出业界首款集成HBM2的FPGA
在鸿蒙系统的撸引导页代码的经验
眼球追踪技术大揭秘
华为，3G元年之初体验
双向ESD静电保护器件二极管 DW03D-B-S 原厂直供
能使螺线管通电时正常的升压电路
尖晶石结构正极材料动力锂电池的热安全性研究
5G下通信测试仪器有什么发展的希望
如何使用proteus仿真软件进行ARM7显示系统
魅族 Note9详细评测:它会是今年千元机的新标杆吗?
国网信息通信产业集团有限公司与腾讯云在北京签署合作协议
存储技术新突破，10PB单盘使用寿命超过5000年
如何快速且经济高效地为空间受限和密封的设备添加无线充电
DesignStart Cortex-M3软件开发网上课程
300mW 调频发射机,FM transmitter
因美国大选引起争议，Facebook将采取措施预防