Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

于 2024-05-04 10:21:12 发布
阅读量946 收藏 18
点赞数 12
分类专栏： 程序员 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84149733/article/details/138436089
版权
本文描述了一个Android应用中如何使用Fragment和ViewPager组件来实现底部导航栏的切换，展示了如何管理Fragment的显示和隐藏，以及如何通过TabSelection方法控制不同Fragment的显示。
摘要由CSDN通过智能技术生成

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. package com.example.mainframework02.fragment;

  2. import android.annotation.SuppressLint;

  3. import android.app.Activity;

  4. import android.app.FragmentManager;

  5. import android.app.FragmentTransaction;

  6. import android.os.Bundle;

  7. import android.view.View;

  8. import android.view.View.OnClickListener;

  9. import android.widget.ImageButton;

  10. import android.widget.LinearLayout;

  11. import com.example.mainframework02.R;

  12. public class FragmentMainActivity extends Activity implements OnClickListener

  13. {

  14. private MainTab02 mTab02;

  15. private MainTab01 mTab01;

  16. private MainTab03 mTab03;

  17. private MainTab04 mTab04;

  18. /**

  19. * 底部四个按钮

  20. */

  21. private LinearLayout mTabBtnWeixin;

  22. private LinearLayout mTabBtnFrd;

  23. private LinearLayout mTabBtnAddress;

  24. private LinearLayout mTabBtnSettings;

  25. /**

  26. * 用于对Fragment进行管理

  27. */

  28. private FragmentManager fragmentManager;

  29. @SuppressLint(“NewApi”)

  30. @Override

  31. protected void onCreate(Bundle savedInstanceState)

  32. {

  33. super.onCreate(savedInstanceState);

  34. setContentView(R.layout.fragment_main);

  35. initViews();

  36. fragmentManager = getFragmentManager();

  37. setTabSelection(0);

  38. }

  39. private void initViews()

  40. {

  41. mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

  42. mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

  43. mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

  44. mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

  45. mTabBtnWeixin.setOnClickListener(this);

  46. mTabBtnFrd.setOnClickListener(this);

  47. mTabBtnAddress.setOnClickListener(this);

  48. mTabBtnSettings.setOnClickListener(this);

  49. }

  50. @Override

  51. public void onClick(View v)

  52. {

  53. switch (v.getId())

  54. {

  55. case R.id.id_tab_bottom_weixin:

  56. setTabSelection(0);

  57. break;

  58. case R.id.id_tab_bottom_friend:

  59. setTabSelection(1);

  60. break;

  61. case R.id.id_tab_bottom_contact:

  62. setTabSelection(2);

  63. break;

  64. case R.id.id_tab_bottom_setting:

  65. setTabSelection(3);

  66. break;

  67. default:

  68. break;

  69. }

  70. }

  71. /**

  72. * 根据传入的index参数来设置选中的tab页。

  73. *

  74. */

  75. @SuppressLint(“NewApi”)

  76. private void setTabSelection(int index)

  77. {

  78. // 重置按钮

  79. resetBtn();

  80. // 开启一个Fragment事务

  81. FragmentTransaction transaction = fragmentManager.beginTransaction();

  82. // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况

  83. hideFragments(transaction);

  84. switch (index)

  85. {

  86. case 0:

  87. // 当点击了消息tab时，改变控件的图片和文字颜色

  88. ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

  89. .setImageResource(R.drawable.tab_weixin_pressed);

  90. if (mTab01 == null)

  91. {

  92. // 如果MessageFragment为空，则创建一个并添加到界面上

  93. mTab01 = new MainTab01();

  94. transaction.add(R.id.id_content, mTab01);

  95. } else

  96. {

  97. // 如果MessageFragment不为空，则直接将它显示出来

  98. transaction.show(mTab01);

  99. }

  100. break;

  101. case 1:

  102. // 当点击了消息tab时，改变控件的图片和文字颜色

  103. ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

  104. .setImageResource(R.drawable.tab_find_frd_pressed);

  105. if (mTab02 == null)

  106. {

  107. // 如果MessageFragment为空，则创建一个并添加到界面上

  108. mTab02 = new MainTab02();

  109. transaction.add(R.id.id_content, mTab02);

  110. } else

  111. {

  112. // 如果MessageFragment不为空，则直接将它显示出来

  113. transaction.show(mTab02);

  114. }

  115. break;

  116. case 2:

  117. // 当点击了动态tab时，改变控件的图片和文字颜色

  118. ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

  119. .setImageResource(R.drawable.tab_address_pressed);

  120. if (mTab03 == null)

  121. {

  122. // 如果NewsFragment为空，则创建一个并添加到界面上

  123. mTab03 = new MainTab03();

  124. transaction.add(R.id.id_content, mTab03);

  125. } else

  126. {

  127. // 如果NewsFragment不为空，则直接将它显示出来

  128. transaction.show(mTab03);

  129. }

  130. break;

  131. case 3:

  132. // 当点击了设置tab时，改变控件的图片和文字颜色

  133. ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

  134. .setImageResource(R.drawable.tab_settings_pressed);

  135. if (mTab04 == null)

  136. {

  137. // 如果SettingFragment为空，则创建一个并添加到界面上

  138. mTab04 = new MainTab04();

  139. transaction.add(R.id.id_content, mTab04);

  140. } else

  141. {

  142. // 如果SettingFragment不为空，则直接将它显示出来

  143. transaction.show(mTab04);

  144. }

  145. break;

  146. }

  147. transaction.commit();

  148. }

  149. /**

  150. * 清除掉所有的选中状态。

  151. */

  152. private void resetBtn()

  153. {

  154. ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

  155. .setImageResource(R.drawable.tab_weixin_normal);

  156. ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

  157. .setImageResource(R.drawable.tab_find_frd_normal);

  158. ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

  159. .setImageResource(R.drawable.tab_address_normal);

  160. ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

  161. .setImageResource(R.drawable.tab_settings_normal);

  162. }

  163. /**

  164. * 将所有的Fragment都置为隐藏状态。

  165. *

  166. * @param transaction

  167. *            用于对Fragment执行操作的事务

  168. */

  169. @SuppressLint(“NewApi”)

  170. private void hideFragments(FragmentTransaction transaction)

  171. {

  172. if (mTab01 != null)

  173. {

  174. transaction.hide(mTab01);

  175. }

  176. if (mTab02 != null)

  177. {

  178. transaction.hide(mTab02);

  179. }

  180. if (mTab03 != null)

  181. {

  182. transaction.hide(mTab03);

  183. }

  184. if (mTab04 != null)

  185. {

  186. transaction.hide(mTab04);

  187. }

  188. }

  189. }

各个TabFragment，一共四个TabFragment，下面贴出两个，基本都一样。

[java]  view plain  copy

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. package com.example.mainframework02.fragment;

  2. import android.annotation.SuppressLint;

  3. import android.app.Fragment;

  4. import android.os.Bundle;

  5. import android.view.LayoutInflater;

  6. import android.view.View;

  7. import android.view.ViewGroup;

  8. @SuppressLint(“NewApi”)

  9. public class MainTab01 extends Fragment

  10. {

  11. @Override

  12. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

  13. {

  14. return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);

  15. }

  16. }

[java]  view plain  copy

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. package com.example.mainframework02.fragment;

  2. import android.annotation.SuppressLint;

  3. import android.app.Fragment;

  4. import android.os.Bundle;

  5. import android.view.LayoutInflater;

  6. import android.view.View;

  7. import android.view.ViewGroup;

  8. import com.example.mainframework02.R;

  9. @SuppressLint(“NewApi”)

  10. public class MainTab02 extends Fragment

  11. {

  12. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

  13. {

  14. return inflater.inflate(R.layout.main_tab_02, container, false);

  15. }

  16. }

评价：每个Fragment中的控件的处理，都是独立到各自的类中，相对来说主Activity简化了不少，可惜没有左右滑动的效果了。

3、ViewPager+Fragment实现

主要通过ViewPager和FragmentPagerAdapter一起来实现。

效果图：

代码：

主Activity

[java]  view plain  copy

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. package com.example.mainframework03;

  2. import java.util.ArrayList;

  3. import java.util.List;

  4. import android.os.Bundle;

  5. import android.support.v4.app.Fragment;

  6. import android.support.v4.app.FragmentActivity;

  7. import android.support.v4.app.FragmentPagerAdapter;

  8. import android.support.v4.view.ViewPager;

  9. import android.support.v4.view.ViewPager.OnPageChangeListener;

  10. import android.widget.ImageButton;

  11. import android.widget.LinearLayout;

  12. public class MainActivity extends FragmentActivity

  13. {

  14. private ViewPager mViewPager;

  15. private FragmentPagerAdapter mAdapter;

  16. private List mFragments = new ArrayList();

  17. /**

  18. * 底部四个按钮

  19. */

  20. private LinearLayout mTabBtnWeixin;

  21. private LinearLayout mTabBtnFrd;

  22. private LinearLayout mTabBtnAddress;

  23. private LinearLayout mTabBtnSettings;

  24. @Override

  25. protected void onCreate(Bundle savedInstanceState)

  26. {

  27. super.onCreate(savedInstanceState);

  28. setContentView(R.layout.activity_main);

  29. mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

  30. initView();

  31. mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())

  32. {

  33. @Override

  34. public int getCount()

  35. {

  36. return mFragments.size();

  37. }

  38. @Override

  39. public Fragment getItem(int arg0)

  40. {

  41. return mFragments.get(arg0);

  42. }

  43. };

  44. mViewPager.setAdapter(mAdapter);

  45. mViewPager.setOnPageChangeListener(new OnPageChangeListener()

  46. {

  47. private int currentIndex;

  48. @Override

  49. public void onPageSelected(int position)

  50. {

  51. resetTabBtn();

  52. switch (position)

  53. {

  54. case 0:

  55. ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

  56. .setImageResource(R.drawable.tab_weixin_pressed);

  57. break;

  58. case 1:

  59. ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

  60. .setImageResource(R.drawable.tab_find_frd_pressed);

  61. break;

  62. case 2:

  63. ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

  64. .setImageResource(R.drawable.tab_address_pressed);

  65. break;

  66. case 3:

  67. ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

  68. .setImageResource(R.drawable.tab_settings_pressed);

  69. break;

  70. }

  71. currentIndex = position;

  72. }

  73. @Override

  74. public void onPageScrolled(int arg0, float arg1, int arg2)

  75. {

  76. }

  77. @Override

  78. public void onPageScrollStateChanged(int arg0)

  79. {

  80. }

  81. });

  82. }

  83. protected void resetTabBtn()

  84. {

  85. ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))

  86. .setImageResource(R.drawable.tab_weixin_normal);

  87. ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))

  88. .setImageResource(R.drawable.tab_find_frd_normal);

  89. ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))

  90. .setImageResource(R.drawable.tab_address_normal);

  91. ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))

  92. .setImageResource(R.drawable.tab_settings_normal);

  93. }

  94. private void initView()

  95. {

  96. mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);

  97. mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);

  98. mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);

  99. mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

  100. MainTab01 tab01 = new MainTab01();

  101. MainTab02 tab02 = new MainTab02();

  102. MainTab03 tab03 = new MainTab03();

  103. MainTab04 tab04 = new MainTab04();

  104. mFragments.add(tab01);

  105. mFragments.add(tab02);

  106. mFragments.add(tab03);

  107. mFragments.add(tab04);

  108. }

  109. }

还有4个TabFragment，下面贴一个，四个基本一样

[java]  view plain  copy

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. package com.example.mainframework03;

  2. import android.os.Bundle;

  3. import android.support.v4.app.Fragment;

  4. import android.view.LayoutInflater;

  5. import android.view.View;

  6. import android.view.ViewGroup;

  7. public class MainTab01 extends Fragment

  8. {

  9. @Override

  10. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

  11. {

  12. return  inflater.inflate(R.layout.main_tab_01, container, false);

  13. }

  14. }

评价：实现效果和第一种效果一模一样，每个Fragment独自处理自己内部的逻辑，代码整洁很多，并且支持左右滑动。感觉是第一种和第二种的结合版本。

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

实现方式和3是一致的，但是使用了TabPageIndicator作为tab的指示器，效果还是不错的，这个之前写过，就不再贴代码了。

效果图：

参考：Android 使用Fragment，ViewPagerIndicator 制作csdn app主要框架

最后

针对于上面的问题，我总结出了互联网公司Android程序员面试涉及到的绝大部分面试题及答案，并整理做成了文档，以及系统的进阶学习视频资料。
（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

image

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
ayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

  1. {

  2. return  inflater.inflate(R.layout.main_tab_01, container, false);

  3. }

  4. }

评价：实现效果和第一种效果一模一样，每个Fragment独自处理自己内部的逻辑，代码整洁很多，并且支持左右滑动。感觉是第一种和第二种的结合版本。

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

实现方式和3是一致的，但是使用了TabPageIndicator作为tab的指示器，效果还是不错的，这个之前写过，就不再贴代码了。

效果图：

参考：Android 使用Fragment，ViewPagerIndicator 制作csdn app主要框架

最后

针对于上面的问题，我总结出了互联网公司Android程序员面试涉及到的绝大部分面试题及答案，并整理做成了文档，以及系统的进阶学习视频资料。
（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

[外链图片转存中…(img-3w91KZ7H-1714789228162)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

2401_84149733
关注
  • 12
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 手机Tab 页各种实现方法
07-28
实现了各种Tab页的切换效果，ViewPager+view ViewPager+Fragment Fragment+FragmentManager ViewPager+Fragment+TabPageIndicator 实现
android tab选项卡实现 仿知乎App
weixin_44659286的博客
10-10 943
效果 TabActivity package com.coral3.ah.ui.activity; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.Fragm
Carson带你学Android：底部/顶部Tab导航栏快速实现-TabLayout+ViewPager+Fragment
热门推荐
Carson带你学Android
07-24 2万+
前言Android开发中使用顶部 & 底部Tab导航栏的频次非常高，主要的实现手段有以下： TabWidget 隐藏TabWidget，使用RadioGroup和RadioButton FragmentTabHost 5.0以后的TabLayout 最近推出的 Bottom navigation 在上一篇我介绍了如何使用(Fragment+FragmentTabHost++ViewPager) 实
Android中实现可滑动的Tab的3种方式
像个孩子壹洋
08-22 1007
这篇文章主要介绍了Android中实现可滑动的Tab的3种方式,需要的朋友可以参考下 1. 第一种，使用 TabHost + ViewPager 实现 该方法会有一个Bug，当设置tabHost.setCurrentTab()为0时，ViewPager不显示（准确的说是加载），只有点击其他任意一个tab后才会加载。 有解的同学吼一声~~~~~~~
三种实现Android主界面Tab的方式
taoerchun的专栏
05-13 6350
转载于:https://www.cnblogs.com/caobotao/p/5103673.html 在平时的Android开发中，我们经常会使用Tab来进行主界面的布局。由于手机屏幕尺寸的限制，合理使用Tab可以极大的利用屏幕资源，给用户带来良好的体验。学会Tab的使用方法已经成为学习Android开发必不可少的技能了。我们经常使用的微信、QQ就是使用Tab的方式进行主界面的布局的。 　　...
利用fragment+ViewPager实现主界面布局
09-17
在Android应用开发中，...在实际开发中，利用Fragment和ViewPager的组合，可以轻松实现Android主界面的动态布局，适应不同尺寸的屏幕，提供丰富的用户体验。通过合理的设计和优化，可以使应用程序更加高效且功能强大。
Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
08-26
"Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果" Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果是Android开发中常用的技术之一。本文将对其进行详细介绍，并提供了具体的实现代码。 知识...
IndicaterTab:使用VIewpager+ViewPagerIndicator+Fragment实现的tab主界面
06-08
【标题】"IndicaterTab:使用VIewpager+ViewPagerIndicator+Fragment实现的tab主界面"涉及的关键知识点包括： 1. ViewPager：这是一个Android SDK中的组件，用于在多个视图之间进行平滑滚动，通常用于创建滑动 tabs...
仿网易基本UI架构，Fragment+Viewpager
11-12
在Android应用开发中，"仿网易基本UI架构，Fragment+ViewPager"是一个常见的设计模式，用于构建高效的、可滚动的屏幕视图。这个架构主要用于实现类似网易新闻客户端的多板块滑动浏览效果，允许用户在不同的内容区域...
android项目Tab标签页大汇总
11-11
android项目Tab标签页大汇总 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
Android之Tab页面切换
weixin_44715384的博客
05-25 3496
Android之Tab页面切换 1. 实现效果 2. 代码实现： 一个TabHost 两个Fragment 一个界面 package cn.app.project.tableshow.home.huo_ti_zi_chan_guan_li.fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; im
Tab---Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
yyb.ye专栏
03-04 989
转载自:http://blog.csdn.net/lmj623565791/article/details/24740977 Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了： 1、传统的ViewPager实现 2、FragmentManager+Fragment实现 3、ViewPager+FragmentPagerAdapter实现
[Android] 选项卡组件TabHost
sam___1的博客
04-24 5196
Tab选项卡实现多个分页之间的快速切换，每个分页可以显示不同的内容，在Android平台提供了TabHost组件实现Tab选项卡的功能，选项卡组件的主要功能是可以进行应用程序分类管理。 每个选项卡称为一个Tab，而包含这多个选项卡的容器称为TabHost。 1.TabHost的常用方法 public TabHost (Context context)： 创建TabHost类对象 public void addTab(TabHost.TabSpec tabSpec)：增加一个tab public Tab.
android Tab页详解
chuanao8829的博客
07-22 646
一、android Tab的实现方式总结 说起Tab页，基本每个做移动端的都会需要。iOS中内置了一个，所以ioser用起来很方便。而android这一块就比较乱。 木器实现Tab效果的方式，主要有4种，下面分别来说一下他们的优缺点： 1.radioGroup-Fragment 这种实...
Android开发进阶系列（二） Tab页界面布局
日西月东的专栏
11-23 3442
Android ViewPager 左右滑动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值