|
|
|
|
公众号矩阵

鸿蒙Tab切换选项卡同时更换内容

Tab选项卡是应用程序中最最常用,也是最普遍存在的一种布局形态,无论是在PC端还是在移动端,都是一种清晰明了,层级关系简单的,能够使用户明确所处位置。

作者:IT明来源:鸿蒙社区|2021-01-13 13:51

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

Tab选项卡是应用程序中最最常用,也是最普遍存在的一种布局形态,无论是在PC端还是在移动端,都是一种清晰明了,层级关系简单的,能够使用户明确所处位置。Tab选项卡可以置于页面的底部,比如微信底部选项卡;也可以置于顶部,比如新闻类的APP顶部的类别选项;还可以置于左侧或者右侧,一般常见的是后台应用左侧的树形导航栏。它们存在一个共同的特性,那就无论我点击那个选项卡,都不会跳转到二级页面,而是在同级页面中在选项卡下的内容区域中去渲染当前选中的选项卡内容。比如下面的示例图片中,我们有三个Tab,图片、视频以及音频,首次加载时我们选中的是图片(Image)选项卡,底部内容区域是一些排列的图片,如果我们选择视频(Video),那么底部的图片将被移除,视频列表页将被载入。


1、首先修改ability_main.xml代码,在布局中添加顶部选项卡列表。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:background_element="#444444" 
  7.     ohos:orientation="vertical"
  8.     <TabList 
  9.         ohos:id="$+id:tab_list" 
  10.         ohos:weight="1" 
  11.         ohos:top_margin="10vp" 
  12.         ohos:tab_margin="24vp" 
  13.         ohos:tab_length="140vp" 
  14.         ohos:text_size="20fp" 
  15.         ohos:height="36vp" 
  16.         ohos:width="match_parent" 
  17.         ohos:layout_alignment="center" 
  18.         ohos:orientation="horizontal" 
  19.         ohos:text_alignment="center" 
  20.         ohos:normal_text_color="#999999" 
  21.         ohos:selected_text_color="#FFFFFF" 
  22.         ohos:selected_tab_indicator_color="#FFFFFF" 
  23.         ohos:selected_tab_indicator_height="2vp"/> 
  24. </DirectionalLayout> 

2、在MainAbilitySlice中为TabList容器添加Tab选项卡。

  1. //列表项 
  2. TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list); 
  3.  
  4. TabList.Tab imageTab = tabList.new Tab(getContext()); 
  5. imageTab.setText("Image"); 
  6. tabList.addTab(imageTab, true); 
  7. scrollView.addComponent(imageGrid); 
  8.  
  9. TabList.Tab videoTab = tabList.new Tab(getContext()); 
  10. videoTab.setText("Video"); 
  11. tabList.addTab(videoTab); 
  12.  
  13. TabList.Tab audioTab = tabList.new Tab(getContext()); 
  14. audioTab.setText("Audio"); 
  15. tabList.addTab(audioTab); 

3、选项卡切换状态需要监听选项卡的选中状态。我们可以在监听事件中对选项卡的业务逻辑做处理,其提供给我们三种方法,一当前选中的Tab,二取消选中的Tab,三再次选中当前Tab。在这三个方法中,我们可以具体的实现业务逻辑,比如当前选中的Tab被连续点击时,我们可以刷新我们呈现的内容。

  1. tabList.addTabSelectedListener(new TabList.TabSelectedListener() { 
  2.  
  3. @Override 
  4.  
  5. public void onSelected(TabList.Tab tab) { 
  6.  
  7. //TODO 具体业务逻辑代码 
  8.  
  9.  
  10. @Override 
  11.  
  12. public void onUnselected(TabList.Tab tab) { 
  13.  
  14. //TODO 具体业务逻辑代码 
  15.  
  16.  
  17. @Override 
  18.  
  19. public void onReselected(TabList.Tab tab) { 
  20.  
  21. //TODO 具体业务逻辑代码 
  22.  
  23.  
  24. }); 

4、顶部选项卡我们已经实现了,那么怎么去实现点击后内容的更改呢?这里就需要用到一个新的组件ScrollView,ScrollView是一种带有滚动功能的组件。如果我们使用常规的布局组件,内容超出范围后,上下左右滚动是需要我们自己去重写,而ScrollView组件只需要设置它的子组件方向即可。修改ability_main.xml代码添加ScrollView组件。

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:height="match_parent" 
  4.  
  5. ohos:width="match_parent" 
  6.  
  7. ohos:background_element="#444444" 
  8.  
  9. ohos:orientation="vertical"
  10.  
  11.  
  12. ... /> 
  13.  
  14.  
  15. ohos:id="$+id:tab_content" 
  16.  
  17. ohos:height="match_parent" 
  18.  
  19. ohos:width="match_parent" 
  20.  
  21. ohos:padding="10vp" 
  22.  
  23. ohos:weight="9"

5、首先初始化两个TableLayout组件,在其中添加多个子组件,用于显示图片列表和视频列表(仅供参考学习,未实现真正的图片和视频)。

  1. private void initVideoGrid() { 
  2.  
  3. videoGrid = new TableLayout(this); 
  4.  
  5. videoGrid.setWidth(MATCH_PARENT); 
  6.  
  7. videoGrid.setHeight(MATCH_CONTENT); 
  8.  
  9. videoGrid.setColumnCount(1); 
  10.  
  11. videoGrid.setRowCount(2); 
  12.  
  13. for (int i = 1; i < 4; i++) { 
  14.  
  15. Text text = new Text(this); 
  16.  
  17. text.setWidth(MATCH_PARENT); 
  18.  
  19. text.setHeight(800); 
  20.  
  21. text.setTextAlignment(TextAlignment.CENTER); 
  22.  
  23. text.setText("第" + i + "块视频"); 
  24.  
  25. ShapeElement shapeElement = new ShapeElement(); 
  26.  
  27. shapeElement.setCornerRadius(20); 
  28.  
  29. shapeElement.setRgbColor(new RgbColor(192,0,255)); 
  30.  
  31. text.setBackground(shapeElement); 
  32.  
  33. text.setPadding(10,10,10,10); 
  34.  
  35. text.setMarginsTopAndBottom(10,10); 
  36.  
  37. text.setMarginsLeftAndRight(20,20); 
  38.  
  39. text.setTextSize(50); 
  40.  
  41. videoGrid.addComponent(text); 
  42.  
  43.  
  44.  
  45. private void initImageGrid() { 
  46.  
  47. imageGrid = new TableLayout(this); 
  48.  
  49. imageGrid.setWidth(MATCH_PARENT); 
  50.  
  51. imageGrid.setHeight(MATCH_CONTENT); 
  52.  
  53. imageGrid.setColumnCount(4); 
  54.  
  55. imageGrid.setRowCount(2); 
  56.  
  57. for (int i = 1; i <= 10; i++) { 
  58.  
  59. Text text = new Text(this); 
  60.  
  61. text.setWidth(400); 
  62.  
  63. text.setHeight(400); 
  64.  
  65. text.setTextAlignment(TextAlignment.CENTER); 
  66.  
  67. text.setText("第" + i + "块图片"); 
  68.  
  69. ShapeElement shapeElement = new ShapeElement(); 
  70.  
  71. shapeElement.setCornerRadius(20); 
  72.  
  73. shapeElement.setRgbColor(new RgbColor(0,192,255)); 
  74.  
  75. text.setBackground(shapeElement); 
  76.  
  77. text.setPadding(10,10,10,10); 
  78.  
  79. text.setMarginsTopAndBottom(10,10); 
  80.  
  81. text.setMarginsLeftAndRight(20,20); 
  82.  
  83. text.setTextSize(50); 
  84.  
  85. imageGrid.addComponent(text); 
  86.  
  87.  

6、 构建好各自的Tab的内容后,我们需要在选择监听中去做显示处理。选中图片后,需要加载图片列表,选中视频后,需要加载视频列表的同时移除图片列表,不然会存在小问题,你也可以尝试一下。看看出现了什么问题。

  1. tabList.addTabSelectedListener(new TabList.TabSelectedListener() { 
  2.  
  3. @Override 
  4.  
  5. public void onSelected(TabList.Tab tab) { 
  6.  
  7. if (tab.getPosition() == 0) { 
  8.  
  9. scrollView.addComponent(imageGrid); 
  10.  
  11. else if (tab.getPosition() == 1) { 
  12.  
  13. scrollView.addComponent(videoGrid); 
  14.  
  15. else { 
  16.  
  17. scrollView.addComponent(new DirectionalLayout(getContext())); 
  18.  
  19.  
  20. HiLog.info(label, "onSelected:" + tab.getPosition()); 
  21.  
  22.  
  23. @Override 
  24.  
  25. public void onUnselected(TabList.Tab tab) { 
  26.  
  27. if (tab.getPosition() == 0) { 
  28.  
  29. scrollView.removeComponent(imageGrid); 
  30.  
  31. else if (tab.getPosition() == 1) { 
  32.  
  33. scrollView.removeComponent(videoGrid); 
  34.  
  35. else { 
  36.  
  37. scrollView.removeComponent(new DirectionalLayout(getContext())); 
  38.  
  39.  
  40. HiLog.info(label, "onUnselected:" + tab.getText()); 
  41.  
  42.  
  43. @Override 
  44.  
  45. public void onReselected(TabList.Tab tab) { 
  46.  
  47. HiLog.info(label, "onReselected:" + tab.getText()); 
  48.  
  49.  
  50. }); 
  51.  

在这里我是以Tab的序号去判断选中后的操作,你也可以使用它的text属性来判断。到这里基本的功能已经实现了,我们运行查看一下效果。

图片中有个小Bug,你发现了吗?应该怎么解决这个问题呢?

©著作权归作者和HarmonyOS技术社区共同所有,如需转载,请注明出处,否则将追究法律责任。

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

【编辑推荐】

  1. 一文教你探测虚拟环境是物理机、虚拟机还是容器?
  2. 比较9款代码质量工具,看看哪款更好用
  3. 推荐十个好用的程序员摸鱼网站,现在就给我玩起来!
  4. 2021年网络安全趋势:更高的预算,重点终端和云安全
  5. 为什么码农不应该在面试中同意进行编程测试
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

3人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

30人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

209人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微