Tablist实例(本实例只适用于DevEco Studio...软件中创建鸿蒙Java项目)
问题：点击不同选项，展现不同内容
效果如图：
点击Bike时
点击Book时
实现思路：
①创建TabList组件
②添加Tab到TabList中
③使用排他思想，当点击当前Tab时，显示当前内容，其他Tab内容隐藏
代码：
①使用DevEco Studio...软件创建名为Myapplication的Java项目
②使用XML创建页面(名字为ability_main.xml原来就有，代码覆盖即可)
<?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:background_element="black"
ohos:orientation="vertical">
<!-- 创建一个tabList-->
<!-- 设置默认状态和选中状态的字体颜色和indicator的颜色-->
<!-- 设置fixedMode-->
<TabList
ohos:id="$+id:tab_list"
ohos:height="36vp"
ohos:width="match_parent"
ohos:fixed_mode="true"
ohos:layout_alignment="center"
ohos:normal_text_color="#FF008000"
ohos:orientation="horizontal"
ohos:selected_tab_indicator_color="#FFFFFF00"
ohos:selected_tab_indicator_height="2vp"
ohos:selected_text_color="#FFFF0000"
ohos:tab_length="140vp"
ohos:tab_margin="100vp"
ohos:text_alignment="center"
ohos:text_size="20fp"
ohos:top_margin="40vp"
/>
<!-- 1-->
<DependentLayout
ohos:id="$+id:depLayout_bike_1"
ohos:height="match_content"
ohos:width="match_content"
ohos:visibility="hide"
>
<Text
ohos:id="$+id:text1"
ohos:height="match_content"
ohos:width="match_parent"
ohos:auto_font_size="true"
ohos:background_element="#f4f4f4"
ohos:element_left="$media:bike_1"
ohos:left_margin="15vp"
ohos:right_margin="15vp"
ohos:text="Bike:500￥"
ohos:text_alignment="center"
ohos:text_color="#FFFFA500"
ohos:text_weight="700"
ohos:top_margin="15vp"
/>
</DependentLayout>
<!-- 2-->
<DependentLayout
ohos:id="$+id:depLayout_book_1"
ohos:height="match_content"
ohos:width="match_content"
ohos:visibility="hide"
>
<Text
ohos:id="$+id:text2"
ohos:height="match_content"
ohos:width="match_parent"
ohos:auto_font_size="true"
ohos:background_element="#f4f4f4"
ohos:element_left="$media:book_1"
ohos:left_margin="15vp"
ohos:right_margin="15vp"
ohos:text="Book:50￥"
ohos:text_alignment="center"
ohos:text_color="#FFFFA500"
ohos:text_weight="700"
ohos:top_margin="15vp"
/>
</DependentLayout>
<!-- 3-->
<DependentLayout
ohos:id="$+id:depLayout_umr_1"
ohos:height="match_content"
ohos:width="match_content"
ohos:visibility="hide"
>
<Text
ohos:id="$+id:text3"
ohos:height="match_content"
ohos:width="match_parent"
ohos:auto_font_size="true"
ohos:background_element="#f4f4f4"
ohos:element_left="$media:umr_1"
ohos:left_margin="15vp"
ohos:right_margin="15vp"
ohos:text="UMR:5000￥"
ohos:text_alignment="center"
ohos:text_color="#FFFFA500"
ohos:text_weight="700"
ohos:top_margin="15vp"
/>
</DependentLayout>
<!-- 4-->
<DependentLayout
ohos:id="$+id:depLayout_phone_1"
ohos:height="match_content"
ohos:width="match_content"
ohos:visibility="hide"
>
<Text
ohos:id="$+id:text4"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="#f4f4f4"
ohos:element_left="$media:phone_1"
ohos:left_margin="15vp"
ohos:multiple_lines="true"
ohos:right_margin="15vp"
ohos:text="Phone:5000￥"
ohos:text_alignment="center"
ohos:text_color="#FFFFA500"
ohos:text_size="25fp"
ohos:text_weight="700"
ohos:top_margin="15vp"
/>
</DependentLayout>
</DirectionalLayout>
会导致报错：
导入图片即可
图片所取的名字与该图中一致即可
③在MainAbliitySlice.java中
注意：包名
package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.window.dialog.CommonDialog;
public class MainAbilitySlice extends AbilitySlice {
TabList.Tab tab;
CommonDialog cd = new CommonDialog(this);
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//1.找到组件
TabList tabList_1 = (TabList) findComponentById(ResourceTable.Id_tab_list);
DependentLayout dependentLayout_1 = (DependentLayout) findComponentById(ResourceTable.Id_depLayout_bike_1);
DependentLayout dependentLayout_2 = (DependentLayout) findComponentById(ResourceTable.Id_depLayout_book_1);
DependentLayout dependentLayout_3 = (DependentLayout) findComponentById(ResourceTable.Id_depLayout_umr_1);
DependentLayout dependentLayout_4 = (DependentLayout) findComponentById(ResourceTable.Id_depLayout_phone_1);
//2.TabList中添加Tab(通过for循环)
String[] str = {"Bike", "Book", "UMR", "Phone"};
for (int i = 0; i < str.length; i++) {
tab = tabList_1.new Tab(getContext());
tab.setText(str[i]);
tabList_1.addTab(tab);
}
//3.设置布局(在xml与java代码中均可)
tabList_1.setTabLength(60);
tabList_1.setTabMargin(26);
tabList_1.setFixedMode(true);
//4.响应焦点变化
tabList_1.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
if (tab.getText().equals("Bike")) {
dependentLayout_1.setVisibility(Component.VISIBLE);//显示
}
if (tab.getText().equals("Book")) {
dependentLayout_2.setVisibility(Component.VISIBLE);
}
if (tab.getText().equals("UMR")) {
dependentLayout_3.setVisibility(Component.VISIBLE);
}
if (tab.getText().equals("Phone")) {
dependentLayout_4.setVisibility(Component.VISIBLE);
}
}
@Override
public void onUnselected(TabList.Tab tab) {
// 当某个Tab从选中状态变为未选中状态时的回调
if (tab.getText().equals("Bike")) {
dependentLayout_1.setVisibility(Component.HIDE);//隐藏
}
if (tab.getText().equals("Book")) {
dependentLayout_2.setVisibility(Component.HIDE);
}
if (tab.getText().equals("UMR")) {
dependentLayout_3.setVisibility(Component.HIDE);
}
if (tab.getText().equals("Phone")) {
dependentLayout_4.setVisibility(Component.HIDE);
}
}
@Override
public void onReselected(TabList.Tab tab) {
/*// 当某个Tab已处于选中状态，再次被点击时的状态回调
//设置标题
cd.setTitleText("您已经选中该选项！");
//设置内容
cd.setContentText("11111111111");
//设置按钮
//参数一:按钮的索引0，1，2
//参数二:按钮上的文字
//三:点击按钮后，能做什么
cd.setButton(0, "取消", new IDialog.ClickedListener() {
@Override
public void onClick(IDialog iDialog, int i) {
//销毁弹框
cd.destroy();
}
});
cd.show();*/
}
});
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}