安装包UI美化之路-nsNiuniuSkin安装包轮播图的多种配置方法比较

Posted 2023-04-04 大蓝头

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了安装包UI美化之路-nsNiuniuSkin安装包轮播图的多种配置方法比较相关的知识，希望对你有一定的参考价值。

在安装包安装过程中，通过交替显示的图片或文字信息，提前给客户介绍所安装产品的亮点功能，现在已经成为了广大软件安装包的标配。

那么，要如何在安装包中加入轮播信息呢？

这种轮播的信息，我们一般称作轮播图，nsNiuniuSkin支持多种方式来配置轮播图，不同的配置方法均能配置出来满足要求的轮播效果，同时在使用中也各有其优缺点，让我们一起来看一下吧！

不同配置方法及其优缺点比较

应用的控件	配置方法	优点	缺点
ImageShow控件	可配置多张图片，指定间隔进行交替显示	1. 配置简单	1. 图片尺寸必需一样大 2. 文字与图片均需由设计人员提供，无法通过程序配置
GifAnim控件	配置一张gif图片，自动播放	1. 配置简单 2. 研发人员不需要考虑实现成本	1. 体积大 2. 文字与图片均需由设计人员提供，无法通过程序配置 3. 质量稍差
AnimationTabLayout	可配置多张图片，指定切换间隔，设置不同的宣传文字	1. 配置简单且灵活 2. 图片可任意大小，可在脚本中配置显示指定区域 3. 文字可独立配置，便于实现多语言	无

接下来我们详细看看不同的配置方法以及效果：

1. 通过ImageShow控件来配置轮播图

设置代码如下：

<ImageShow images="images\\banner2.png images\\banner4.png" padding="60,33,0,0" imagecount="2" elapse="1500" loop="true" width="440" height="200" />

如上面的代码所示，banner2.png及banner4.png将以每1.5秒切换一次的速度进行交替显示，效果如下：

还可以通过指定滚动效果来让图片的切换更自然一点：

<ImageShow images="images\\banner2.png images\\banner4.png" padding="60,33,0,0" imagecount="2" elapse="1500" loop="true" width="440" height="200" />

效果如下：

这种方式配置简单，最主要的缺点在于无法在ImageShow控件显示的同时，相应的配置文字，只能完全依赖于轮播图。

2. 通过GifAnim控件来配置轮播图

通过GifAnim控件，我们能够加载gif动画，并循环的播放他；如果已经有满足条件的gif图片，或者UI设计人员有能力设计出来质量较高的gif图片，那么我们可以采用这种方法来配置：

<GifAnim bkimage="images\\banner.gif" autosize="false" width="440" height="200" autoplay="true" />

效果如下：

GifAnim控件可以说是真正让开发人员解放了出来，但对于安装包本身，却并不是一件好事；一个质量高，且能承载较多宣传信息的gif轮播图，其体积往往会达到好几兆，这对于安装包来说，是一种很大的浪费；同时，gif对于UI设计人员的要求也比较高，整体来看，这并不是一个好的配置轮播图的方案，不建议使用。

3. 通过AnimationTabLayout来配置轮播图

AnimationTabLayout容器扩展自TabLayout，给需要进行切换的Tab页增加了渐入渐出的效果；在此基础上，我们给其加上了自动切换能力。

在配置层面，只需要给其中的每页内容配置上背景图，同时在其内部配置上相应的文字，完美的轮播效果就出现了！

	<AnimationTabLayout padding="30,40,0,0" width="480" height="260" elapse="3000" animation_count="30" animation_elapse="10">
	<VerticalLayout bkimage="file='images\\banner1.png' source='0,0,320,200' dest='230,30,550,230'">
		<Label font="2" padding="10,100,0,0" width="280" text="极速高效" msgid="msg.rotate_title1" textcolor="#FF000000" />
		<Label font="1" padding="10,0,0,0" width="380" text="极速渲染最高线程可达192渲染" msgid="msg.rotate_subtitle1_1" textcolor="#FF000000" />
		<Label font="1" padding="10,0,0,0" width="380" text="相当约i7-8核机同时渲染" msgid="msg.rotate_subtitle1_2" textcolor="#FF000000" />
	</VerticalLayout>
	<VerticalLayout bkimage="file='images\\banner2.png' source='0,0,300,200' dest='250,30,550,230'">
		<Label font="2" padding="10,100,0,0" width="280" text="极致简约" msgid="msg.rotate_title2" textcolor="#FF000000" />
		<Label font="1" padding="10,0,0,0" width="380" text="提升制图效率10倍" msgid="msg.rotate_subtitle2_1" textcolor="#FF000000" />
		<Label font="1" padding="10,0,0,0" width="380" text="超30W+素材免费下载" msgid="msg.rotate_subtitle2_2"textcolor="#FF000000" />
	</VerticalLayout>
	</AnimationTabLayout>

显示效果如下：