鸿蒙开源第三方组件——页面滑动组件 ViewPagerIndicator_ohos

前言

         基于安卓平台的页面滑动组件ViewPagerIndicator（https://github.com/LuckyJayce/ViewPagerIndicator），实现了鸿蒙化迁移和重构，代码已经开源到（https://gitee.com/isrc_ohos/view-pager-indicator），目前已经获得了很多人的Star和Fork，欢迎各位下载使用并提出宝贵意见！

背景

         ViewPagerIndicator_ohos是一个信息展示组件，适用于展示新闻类、购物类等复杂信息。使用传统的页面展示内容时，同种类的信息在同一个页面上展示。使用ViewPagerIndicator_ohos组件展示内容时，一个种类的信息可以在多个页面展示，用户通过滑动屏幕的方式来实现页面切换，二者的效果对比如图1所示。

  图1 ViewPagerIndicator_ohos组件与传统的页面在展示内容时的区别

组件效果展示

       组件应用的主界面中有3个按钮，其中，“主页”和“我的”按钮展示的是组件的局部效果，“社区”按钮展示的是组件的整体效果。此处，我们不再赘述局部效果，直接讲解组件的整体效果，有对其余两个按钮的功能感兴趣的朋友可以下载源码了解。

       当用户点击应用底部导航栏区“社区”标签时，组件向用户展示“社区”板块的内容，内容分布在多个页面内。在应用的顶部有页面指示器，用户可以通过两种方式实现页面的切换效果：1）滑动屏幕时，页面随滑动切换，页面指示器始终指示当前正在展示的页面。2）点击页面指示器，页面会切换到被选中的指示器所指示的页面，效果如图2所示。

   图2 滑动页面同时指示器显示当前页面功能

Sample解析

         Sample部分主要用于构建显示布局，MainAbilitySlice文件负责构建应用主界面布局，CommunityFraction文件负责构建页面和页面指示器布局，CommunityFraction形成的UI以Fraction的形式嵌入到主界面布局中。

1、MainAbilitySlice文件

         MainAbilitySlice文件负责构建组件应用的主界面布局，下面给出布局构建的具体步骤：

         第1步：设置组件应用的布局文件

         组件的主界面布局定义在ability_main.xml中，界面包含三个Button和一个StackLayout，前者表示“主页”、“我的”和“社区”按钮，后者表示内容显示页面。通过setUIContent()方法将ability_main.xml文件设置为组件应用的主界面布局。

super.setUIContent(ResourceTable.Layout_ability_main);

第2步：按钮的定位

        在MainAbilitySlice文件的OnStart()方法中，通过findComponentById()的方法实现第1步中“社区”按钮的定位。

 //“主页”、“我的”和“社区”按钮
private Button basebtn,mybtn,communitybtn;
......
//定位“社区”按钮      
communitybtn= (Button) findComponentById(ResourceTable.Id_main_community_btn);

 第3步：按钮监听

         给“社区”按钮设置点击事件，点击按钮时，将表示社区内容的CommunityFraction嵌入到第1步的StackLayout中，实现点击“社区”按钮后的显示效果。<