【鸿蒙】HarMonyOS的UI组件学习四之自定义选项卡 | 您所在的位置:网站首页 › 鸿蒙系统换图标没有自定义 › 【鸿蒙】HarMonyOS的UI组件学习四之自定义选项卡 |
今天分享一个手机应用主界面的选项卡页面,可能很多朋友不理解什么叫选项卡界面,那么接下来举几个栗子: ohos:background_element="#FF1BCED4"设置整个选项卡容器的背景颜色 ohos:normal_text_color="#000000"设置未选中的选项卡的文字颜色 ohos:selected_text_color="#FF0000"设置选中的选项卡的文字颜色 ohos:selected_tab_indicator_color="#ff0000" ohos:text_alignment="center"设置每个选项卡的文字居中对齐 ohos:fixed_mode="true"设置添加的多个选项卡平均平分屏幕的宽度 ohos:tab_margin="20px"设置每个选项卡之间的间距 这个只是布局的代码,那么接下来我们需要通过java代码来动态的添加自定义选项卡,在项目的java文件夹的slice文件夹中新建一个界面TableListAbilitySlice,其代码如下: package com.example.hm_phone_java.slice; import com.example.hm_phone_java.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbColor; import ohos.agp.components.DependentLayout; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.TabList; import ohos.agp.components.Text; import ohos.agp.components.element.ShapeElement; public class TableListAbilitySlice extends AbilitySlice { //定义四个选项卡的文本信息 private String[] texts = {"新闻", "图片", "视频", "我的"}; //定义一个选项卡数组,用于保存创建的四个选项卡的对象 private TabList.Tab[] tabs = new TabList.Tab[texts.length]; //定义一个颜色数组,添加了四种颜色,分别为红,绿,蓝,黄,用于改变选项卡时,同时替换内容的背景颜色 private RgbColor[] colors={new RgbColor(255,0,0), new RgbColor(0,255,0), new RgbColor(0,0,255), new RgbColor(255,255,0)}; @Override protected void onStart(Intent intent) { super.onStart(intent); //加载布局文件 this.setUIContent(ResourceTable.Layout_ability_tablist); //获得text组件对象 Text tv = (Text) this.findComponentById(ResourceTable.Id_tv); //获得选项卡容器的对象 TabList tl = (TabList) this.findComponentById(ResourceTable.Id_tl); //获得显示内容的布局对象 DirectionalLayout dl= (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl); //创建选项卡,动态添加至选项卡组件容器中 for (int i = 0; i @Override public void onSelected(TabList.Tab tab) { //当有选项卡被选中执行 ShapeElement se=new ShapeElement(); se.setRgbColor(new RgbColor(164,145,27)); tab.setBackground(se); //选中了哪个选项卡,就将该选项卡的文本信息显示在Text组件上 tv.setText(tab.getText()); //并改变内容的背景颜色 ShapeElement se1=new ShapeElement(); se1.setRgbColor(colors[tab.getPosition()]); dl.setBackground(se1); } @Override public void onUnselected(TabList.Tab tab) { //当有选项卡从选中状态变为未选中状态执行 //当选项卡变为未选中时,恢复选项卡的背景颜色 tab.setBackground(null); } @Override public void onReselected(TabList.Tab tab) { //当同一选项卡被点击多次执行 } }); } }接下来就可以开启华为手机模拟器,将该项目运行起来,其效果图如下: |
CopyRight 2018-2019 实验室设备网 版权所有 |