4.6【HarmonyOS 鸿蒙开发】组件 PageSlider 和 PageSliderIndicator
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
PageSlider 是用于页面之间切换的组件,它通过响应滑动事件实现页面间的切换。
一、反对的 XML 属性
PageSlider 无自有的 XML 属性,共有 XML 属性继承自:StackLayout
二、PageSlider 的应用办法
1、在 layout 目录下的 xml 文件中创立 PageSlider。
<PageSlider
ohos:id="$+id:page_slider"
ohos:height="300vp"
ohos:width="300vp"
ohos:background_element="#33aa0000"
ohos:layout_alignment="horizontal_center"/>
成果:
<img src=”https://img.chengxuka.com/WX20210616-114314@2x.png/mark” alt=”WX20210616-114314@2x” style=”zoom:50%;” />
2、每个页面可能须要出现不同的数据,因而须要适配不同的数据结构,须要应用 PageSliderProvider。
办法名 | 作用 |
---|---|
getCount() | 获取可用视图的数量。 |
createPageInContainer(ComponentContainer componentContainer, int position) | 在指定地位创立页面。 |
destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) | 销毁容器中的指定页面。 |
isPageMatchToObject(Component component, Object o) | 视图是否关联指定对象。 |
新建一个 provider 包,创立 TestPageProvider.java,需继承 PageSliderProvider.java,必须重写以下办法:
示例代码:
package com.example.hanrupageslider.provider;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;
import java.util.List;
/**
* 继承 PageSliderProvider
*/
public class TestPagerProvider extends PageSliderProvider {
// 数据源,每个页面对应 list 中的一项
private List<DataItem> list;
public TestPagerProvider(List<DataItem> list) {this.list = list;}
/**
* 示意以后 Provider 当中加载数据的条目
* @return 返回值示意 Provider 中数据条目个数
*/
@Override
public int getCount() {return list.size();
}
/**
* 示意依据下标实例化 PageSlider 中每个 page 页数据
*
* @param componentContainer,示意以后实例化 item 属于的 PageSlider 控件
* @param position,示意以后实例化下标
* @return
*/
@Override
public Object createPageInContainer(ComponentContainer componentContainer, int position) {
// 1. 依据下标获取数据
final DataItem data = list.get(position);
// 2. 创立一个 Text 对象,以及各种设置该 text
Text label = new Text(null);
label.setTextAlignment(TextAlignment.CENTER);
label.setLayoutConfig(
new StackLayout.LayoutConfig(
ComponentContainer.LayoutConfig.MATCH_PARENT,
ComponentContainer.LayoutConfig.MATCH_PARENT
));
label.setText(data.mText);
label.setTextColor(Color.BLACK);
label.setTextSize(50);
ShapeElement element = new ShapeElement();
element.setRgbColor(RgbColor.fromArgbInt(Color.getIntColor("#AFEEEE")));
label.setBackground(element);
// 3. 将刚刚创立的 Text 对象,加载到 PageSlider 中
componentContainer.addComponent(label);
return label;
}
/**
* 示意依据下标移除 PageSlider 中的 pager 页
* @param componentContainer,示意以后移除的 pager 页所属得 PageSlider 控件
* @param position,示意移除 page 页的下标
* @param object
*/
@Override
public void destroyPageFromContainer(ComponentContainer componentContainer, int position, Object object) {componentContainer.removeComponent((Component) object);
}
/**
* 视图是否关联指定对象。* @param component
* @param object
* @return
*/
@Override
public boolean isPageMatchToObject(Component component, Object object) {return true;}
// 数据实体类
public static class DataItem{
String mText;
public DataItem(String txt) {mText = txt;}
}
}
3、在 MainAbilitySlice 中,增加数据,,并适配 PageSlider 的数据结构。
package com.example.hanrupageslider.slice;
import com.example.hanrupageslider.ResourceTable;
import com.example.hanrupageslider.provider.TestPagerProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.PageSlider;
import java.util.ArrayList;
/**
* PageSlider 次要通过左右滑动展现数据的控件
* PageSlider 中展现数据列表 所以属于 Provider 控件
*/
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initPageSlider();}
// 1. 初始化 PageSlider
private void initPageSlider() {PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
pageSlider.setProvider(new TestPagerProvider(getData()));
}
// 2. 提供数据源
private ArrayList<TestPagerProvider.DataItem> getData() {ArrayList<TestPagerProvider.DataItem> dataItems = new ArrayList<>();
dataItems.add(new TestPagerProvider.DataItem("Page A"));
dataItems.add(new TestPagerProvider.DataItem("Page B"));
dataItems.add(new TestPagerProvider.DataItem("Page C"));
dataItems.add(new TestPagerProvider.DataItem("Page D"));
return dataItems;
}
@Override
public void onActive() {super.onActive();
}
@Override
public void onForeground(Intent intent) {super.onForeground(intent);
}
}
PageSlider 的应用成果:
<img src=”https://img.chengxuka.com/pageslideryunxing1.gif” alt=”pageslideryunxing1″ style=”zoom:50%;” />
三、PageSlider 罕用办法
罕用办法表
办法名 | 作用 |
---|---|
setProvider(PageSliderProvider provider) | 设置 Provider,用于配置 PageSlider 的数据结构。 |
addPageChangedListener(PageChangedListener listener) | 响应页面切换事件。 |
removePageChangedListener(PageChangedListener listener) | 移除页面切换的响应。 |
setOrientation(int orientation) | 设置布局方向。 |
setPageCacheSize(int count) | 设置要保留以后页面两侧的页面数。 |
setCurrentPage(int itemPos) | 设置以后展现页面。 |
setCurrentPage(int itemPos, boolean smoothScroll) | 设置以后展现界面,并确定是否须要平滑滚动。 |
setSlidingPossible(boolean enable) | 是否启用页面滑动。 |
setReboundEffect(boolean enabled) | 是否启用回弹成果。 |
setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent)setReboundEffectParams(ReboundEffectParams reboundEffectParams) | 配置回弹成果参数。 |
setPageSwitchTime(int durationMs) | 设置页面切换工夫。 |
1、响应页面切换事件
pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
@Override
public void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) { }
@Override
public void onPageSlideStateChanged(int state) { }
@Override
public void onPageChosen(int itemPos) {}});
2、设置布局方向,默认为横向布局
在 xml 中设置:
<PageSlider
...
ohos:orientation="vertical"/>
在代码中设置:
pageSlider.setOrientation(Component.VERTICAL);
设置布局方向为纵向布局
<img src=”https://img.chengxuka.com/pageslideryunxing2.gif” alt=”pageslideryunxing2″ style=”zoom:50%;” />
3、设置保留以后页面两侧的页面数
在 xml 中设置:
<PageSlider
...
ohos:page_cache_size="2"/>
在代码中设置:
pageSlider.setPageCacheSize(2);
4、设置以后展现页面
pageSlider.setCurrentPage(2);
示例代码:
// 1. 初始化 PageSlider
private void initPageSlider() {PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
pageSlider.setProvider(new TestPagerProvider(getData()));
// 设置以后展现页面,从 0 开始
pageSlider.setCurrentPage(2);// Page C
}
关上之后,默认展现第 3 个 Page:
<img src=”https://img.chengxuka.com/WX20210616-135723@2x.png/mark” alt=”WX20210616-135723@2x” style=”zoom:50%;” />
平滑滚动到指定页面
pageSlider.setCurrentPage(2,true); // Page C
平滑滚动到页面 C 成果:模拟器太卡了,看不出平滑滚动的成果,这里用官网文档的图片了。
5、设置是否启用页面滑动
ageSlider.setSlidingPossible(false);
6、设置回弹成果
pageSlider.setReboundEffect(true);
回弹成果:图片来自官网文档。
7、设置页面切换工夫,单位:ms
pageSlider.setPageSwitchTime(2000);
四、组件 PageSliderIndicator
PageSliderIndicator,需配合 PageSlider 应用,批示在 PageSlider 中展现哪个界面。
1、咱们在刚刚的 ability_main.xml 里持续增加 PageSliderIndicator 控件。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<PageSlider
ohos:id="$+id:page_slider"
ohos:height="300vp"
ohos:width="300vp"
ohos:background_element="#33aa0000"
ohos:layout_alignment="horizontal_center"/>
<!-- ohos:orientation="vertical",滑动方向,默认程度 -->
<!-- ohos:page_cache_size="2" , 设置保留以后页面两侧的页面数 -->
<PageSliderIndicator
ohos:id="$+id:indicator"
ohos:height="match_content"
ohos:width="match_content"
ohos:padding="8vp"
ohos:layout_alignment="horizontal_center"
ohos:top_margin="16vp"
ohos:background_element="#55FFC0CB"/>
</DirectionalLayout>
2、在 MainAbilitySlice.java 的初始化 PageSlider 的办法 initPageSlider() 中,接着创立 PageSliderIndicator 对象,并设置到 PageSlider 对象上。
// 1. 初始化 PageSlider
private void initPageSlider() {PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
pageSlider.setProvider(new TestPagerProvider(getData()));
// 设置回弹成果
pageSlider.setReboundEffect(true);
// 设置页面切换工夫,单位:ms
pageSlider.setPageSwitchTime(2000);
// 设置以后展现页面,从 0 开始
// pageSlider.setCurrentPage(2); // Page C
// 平滑滚动到指定页面
pageSlider.setCurrentPage(2,true); // Page C
// 创立 PageSliderIndicator
PageSliderIndicator indicator = (PageSliderIndicator)findComponentById(ResourceTable.Id_indicator);
ShapeElement normalElement = new ShapeElement();
normalElement.setRgbColor(RgbColor.fromArgbInt(0xADD8E6));
normalElement.setAlpha(168);
normalElement.setShape(ShapeElement.OVAL);
normalElement.setBounds(0, 0, 32, 32);
ShapeElement selectedElement = new ShapeElement();
selectedElement.setRgbColor(RgbColor.fromArgbInt(0x00BFFF));
selectedElement.setAlpha(168);
selectedElement.setShape(ShapeElement.OVAL);
selectedElement.setBounds(0, 0, 48, 48);
indicator.setItemElement(normalElement, selectedElement);
indicator.setItemOffset(60);
// 设置
indicator.setPageSlider(pageSlider);
}
搭配 PageSlider 成果:
<img src=”https://img.chengxuka.com/pageslideryunxing3.gif” alt=”pageslideryunxing3″ style=”zoom:50%;” />
五、PageSliderIndicator 罕用办法
1、关联 PageSlider
indicator.setPageSlider(pageSlider);
2、响应页面更改事件
indicator.addOnSelectionChangedListener(new PageSlider.PageChangedListener() {
@Override
public void onPageSliding(int i, float v, int i1) { }
@Override
public void onPageSlideStateChanged(int i) { }
@Override
public void onPageChosen(int i) {}});
3、设置所选领导航点的地位
indicator.setSelected(2);
此办法也会扭转关联的 PageSlider 对象中的页面。
4、设置导航点的背景
除了上述应用 Java 创立背景外,也能够应用 XML 形式创立。
在 graphic 文件夹下创立 selected_page_bg_element.xml。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="16vp"/>
<bounds
ohos:top="0"
ohos:left="0"
ohos:right="64vp"
ohos:bottom="32vp"/>
<solid
ohos:color="#00BFFF"/>
</shape>
在 graphic 文件夹下创立 unselected_page_bg_element.xml。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<bounds
ohos:top="0"
ohos:left="0"
ohos:right="32vp"
ohos:bottom="32vp"/>
<solid
ohos:color="#ADD8E6"/>
</shape>
在 Java 代码中调用,设置导航点背景。
ShapeElement normalElement = new ShapeElement(this, ResourceTable.Graphic_unselected_page_bg_element);
ShapeElement selectedElement = new ShapeElement(this, ResourceTable.Graphic_selected_page_bg_element);
indicator.setItemElement(normalElement, selectedElement);
导航点背景设置成果:
<img src=”https://img.chengxuka.com/pageslideryunxing4.gif” alt=”pageslideryunxing4″ style=”zoom:50%;” />
5、设置导航点之间的偏移量
// 置导航点之间的偏移量
indicator.setItemOffset(100);
// 设置
indicator.setPageSlider(pageSlider);
成果:
<img src=”https://img.chengxuka.com/WX20210616-143633@2x.png/mark” alt=”WX20210616-143633@2x” style=”zoom:50%;” />
更多内容:
1、社区:鸿蒙巴士 https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交换 QQ 群:714518656
4、视频课:https://www.chengxuka.com