实现的效果如下图:
在我学习的过程中遇到了三个问题,解决了这三个问题,便能解决滑动切换的需求功能。
- TabList如何实现放在界面下端?
- PageSlider与TabList各自如何实现?
- PageSlider与TabList如何进行联动?
带着这三个问题,学起来就很轻松了。
一.TabList如何实现放在界面下端?
这个问题只需要给TabList加个背景色,立马就明白了。代码如下:
<?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:orientation="vertical">
<PageSlider
ohos:id="$+id:pageSlider"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"/>
<TabList
ohos:height="55vp"
ohos:width="match_parent"
ohos:background_element="#FF3A51C3"/>
</DirectionalLayout>
这里我是通过DirectionalLayout布局的weight属性实现的,方法很多,只要使它布局位于界面下方就行。效果如下图:
二.PageSlider与TabList各自如何实现?
PageSlider的实现在我的《鸿蒙组件 PageSlider 界面滑动效果的应用》这篇文章有详细介绍,这里不做赘述。
TabList的实现代码如下:
package com.jiakejian.myapplication.slice;
import com.jiakejian.myapplication.ResourceTable;
import com.jiakejian.myapplication.provider.PageProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.PageSlider;
import ohos.agp.components.TabList;
import java.util.ArrayList;
import java.util.List;
public class MainAbilitySlice extends AbilitySlice {
private TabList tabList;
private PageSlider pageSlider;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initTablist();
initPageSlider();
}
//初始化TabList
private void initTablist() {
tabList = (TabList) findComponentById(ResourceTable.Id_tabList);
//添加数据
String[] title = {"首页","分类","购物车","我的"};
//将数据添加到tab当中
for(int i = 0;i < title.length;i++){
TabList.Tab tab = tabList.new Tab(this);
tab.setText(title[i]);
tabList.addTab(tab);
}
}
//初始化PageSlider
private void initPageSlider() {
pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pageSlider);
PageProvider pageProvider = new PageProvider(saveData(),this);
pageSlider.setProvider(pageProvider);
}
public List<Integer> saveData(){
List<Integer> list = new ArrayList<>();
list.add(ResourceTable.Layout_index_layout);
list.add(ResourceTable.Layout_category_layout);
list.add(ResourceTable.Layout_shopcart_layout);
list.add(ResourceTable.Layout_My_layout);
return list;
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
布局文件代码:
<?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:orientation="vertical">
<PageSlider
ohos:id="$+id:pageSlider"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"/>
<TabList
ohos:id="$+id:tabList"
ohos:height="55vp"
ohos:width="match_parent"
ohos:text_alignment="center"
ohos:fixed_mode="true"
ohos:text_size="20fp"
ohos:normal_text_color="#5A5A5A"
ohos:selected_text_color="#FA1E23"
ohos:selected_tab_indicator_color="#FA1E23"
ohos:selected_tab_indicator_height="2vp"/>
</DirectionalLayout>
效果如下:
三.PageSlider与TabList如何进行联动?
答案是通过各自的监听事件进行联动。
代码如下:
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initTablist();
initPageSlider();
tabList.selectTabAt(0);
//给tab添加单机事件
tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
//连接PageSlider
pageSlider.setCurrentPage(tab.getPosition());
}
@Override
public void onUnselected(TabList.Tab tab) {}
@Override
public void onReselected(TabList.Tab tab) {}
});
//给PageSlider添加单机事件
pageSlider.addPageChangedListener(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) {
//连接Tab
if(i != tabList.getSelectedTabIndex()){
tabList.selectTabAt(i);
}
}
});
实现最终的效果。