Fragment实现底部菜单栏

最新推荐文章于 2022-05-12 20:00:41 发布

转载最新推荐文章于 2022-05-12 20:00:41 发布 · 1.1k 阅读

Android学习专栏收录该内容

28 篇文章

订阅专栏

本文总结了使用Fragment和不同方法实现底部菜单栏的方法，包括TabHost+Activity、自定义底部选项卡+Fragment、FragmentTabHost+Fragment、RadioGroup+Fragment等。详细介绍了每个方法的实现步骤和优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上关于使用Fragment实现底部菜单栏的方法，总结一下以备后用。

1. TabHost + Activity：经典的搭配组合，从最早的TabHost + TabActivity演变而来。TabActivity灵活性很差，已经被抛弃了。

2. 自定义底部选项卡 + Fragment：灵活性大，实现起来也很简单。参考：

http://blog.youkuaiyun.com/yangyu20121224/article/details/8995025

http://my.eoe.cn/imesong/archive/21402.html

3. FragmentTabHost + Fragment：FragmentTabHost主要是实现底部的选项卡功能，Fragment负责内容显示和切换。参考：

http://blog.youkuaiyun.com/yangyu20121224/article/details/9016223

使用FragmentTabHost时，Fragment之间切换时每次都会调用onCreateView方法，导致每次Fragment的布局都重绘，无法保持Fragment原有状态，参考：

http://blog.youkuaiyun.com/renpengben/article/details/12615487

4. RadioGroup + Fragment：RadioGroup主要是实现底部的选项卡功能，Fragment负责内容显示和切换。参考：

http://blog.youkuaiyun.com/loongggdroid/article/details/9469935

http://www.cnblogs.com/tiantianbyconan/p/3360938.html

看了来动动手，下面是我参考以上的文章做的两个demo，界面效果相同。

1. FragmentTabHost + Fragment，demo下载地址https://github.com/jessicass/fragment2.git

核心代码：首先是MainActivity，它需要继承FragmentActivity(3.0之前的继承FragmentActivity，3.0版本之后的继承Activity)。

[java]view plaincopy 
   
 public class MainActivity extends FragmentActivity {  
     private FragmentTabHost mTabHost;  
     private LayoutInflater layoutInflater;  
   
     // 定义数组来存放Fragment界面  
     private Class<?> fragmentArray[] = { HomeFragment.class,  
             MessageFragment.class, SettingFragment.class };  
   
     // 定义数组来存放按钮图片  
     private int mImageViewArray[] = { R.drawable.tab_home_selector,  
             R.drawable.tab_message_selector, R.drawable.tab_setting_selector };  
   
     // Tab选项卡的文字  
     private int mTextviewArray[] = { R.string.tab_home, R.string.tab_message,  
             R.string.tab_setting };  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
         initView();  
     }  
   
     // 初始化组件  
     private void initView() {  
         // 实例化布局对象  
         layoutInflater = LayoutInflater.from(this);  
   
         // 实例化TabHost对象，得到TabHost  
         mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);  
         mTabHost.setup(this, getSupportFragmentManager(), R.id.container);  
   
         for (int i = 0; i < fragmentArray.length; i++) {  
             // 为每一个Tab按钮设置图标、文字和内容  
             TabSpec taSpec = mTabHost.newTabSpec(getString(mTextviewArray[i]))  
                     .setIndicator(getTabItemView(i));  
             // 将Tab按钮添加进Tab选项卡中  
             mTabHost.addTab(taSpec, fragmentArray[i], null);  
         }  
     }  
   
     // 给Tab按钮设置图标和文字  
     private View getTabItemView(int index) {  
         View view = layoutInflater.inflate(R.layout.tab_item_view, null);  
         ImageView imageView = (ImageView) view.findViewById(R.id.imageview);  
         imageView.setImageResource(mImageViewArray[index]);  
   
         TextView textView = (TextView) view.findViewById(R.id.textview);  
         textView.setText(getString(mTextviewArray[index]));  
   
         return view;  
     }  
   
     @Override  
     public boolean onCreateOptionsMenu(Menu menu) {  
         // Inflate the menu; this adds items to the action bar if it is present.  
         getMenuInflater().inflate(R.menu.main, menu);  
         return true;  
     }  
   
 }  

我建了三个Fragment，代码差不多，下面只贴出HomeFragment。

[java]view plaincopy 
   
 public class HomeFragment extends Fragment {  
   
     // 缓存Fragment的View  
     private View rootView;  
   
     @Override  
     public void onActivityCreated(Bundle savedInstanceState) {  
         super.onActivityCreated(savedInstanceState);  
     }  
   
     @Override  
     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
             Bundle savedInstanceState) {  
         if (rootView == null) {  
             rootView = inflater.inflate(R.layout.fragment_home, container,  
                     false);  
         } else {  
             // 缓存的rootView需要判断是否已经被加过parent  
             // 如果有parent需要从parent删除  
             ViewGroup parent = (ViewGroup) rootView.getParent();  
             if (parent != null) {  
                 parent.removeView(rootView);  
             }  
         }  
         return rootView;  
     }  
   
 }  

然后来看看布局文件activity_main.xml。

[java]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent"  
     android:orientation="vertical" >  
   
     <FrameLayout  
         android:id="@+id/container"  
         android:layout_width="fill_parent"  
         android:layout_height="0dip"  
         android:layout_weight="1" />  
   
     <android.support.v4.app.FragmentTabHost  
         android:id="@android:id/tabhost"  
         android:layout_width="fill_parent"  
         android:layout_height="wrap_content" >  
   
         <FrameLayout  
             android:id="@android:id/tabcontent"  
             android:layout_width="0dp"  
             android:layout_height="0dp"  
             android:layout_weight="0" />              
     </android.support.v4.app.FragmentTabHost>  
   
 </LinearLayout>  

最后是每个选项卡的布局文件tab_item_view.xml。

[java]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:background="@drawable/tab_bg_selector"  
     android:gravity="center"  
     android:orientation="vertical" >  
   
     <ImageView  
         android:id="@+id/imageview"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:focusable="false"  
         android:padding="3dp" >  
     </ImageView>  
   
     <TextView  
         android:id="@+id/textview"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:textColor="#ffffff"  
         android:textSize="12sp" >  
     </TextView>  
   
 </LinearLayout>  

2. RadioGroup + Fragment，demo下载地址https://github.com/jessicass/fragment3.git

核心代码：首先是MainActivity。

[java]view plaincopy 
   
 public class MainActivity extends FragmentActivity {  
   
     // 底部选项卡  
     private RadioGroup bottomRg;  
     private FragmentManager fragmentManager;  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
         setFragmentIndicator();  
     }  
   
     private void setFragmentIndicator() {  
         fragmentManager = getSupportFragmentManager();  
   
         // 绑定Fragment页面和对应的RadioButton  
         final BiMap<Fragment, Integer> biMap = HashBiMap.create();  
         biMap.put(fragmentManager.findFragmentById(R.id.fragment_home),  
                 R.id.rb_home);  
         biMap.put(fragmentManager.findFragmentById(R.id.fragment_message),  
                 R.id.rb_message);  
         biMap.put(fragmentManager.findFragmentById(R.id.fragment_setting),  
                 R.id.rb_setting);  
   
         // 默认显示HomeFragment  
         showFragmentByBtnId(biMap, R.id.rb_home);  
   
         bottomRg = (RadioGroup) findViewById(R.id.bottomRg);  
         bottomRg.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
   
             @Override  
             public void onCheckedChanged(RadioGroup group, int checkedId) {  
                 showFragmentByBtnId(biMap, checkedId);  
             }  
         });  
   
     }  
   
     private void showFragmentByBtnId(final BiMap<Fragment, Integer> biMap,  
             int shownId) {  
         FragmentTransaction fragmentTransaction = fragmentManager  
                 .beginTransaction();  
         // 先隐藏所有的Fragment  
         for (Fragment fragment : biMap.keySet()) {  
             fragmentTransaction.hide(fragment);  
         }  
         // 显示对应的Fragment  
         fragmentTransaction.show(biMap.inverse().get(shownId)).commit();  
         // biMap.inverse().get(R.id.rb_home)通过biMap的Value获得Key  
     }  
   
     @Override  
     public boolean onCreateOptionsMenu(Menu menu) {  
         // Inflate the menu; this adds items to the action bar if it is present.  
         getMenuInflater().inflate(R.menu.main, menu);  
         return true;  
     }  
   
 }  

和上面一样建了三个Fragment，代码差不多，只贴出HomeFragment。

[java]view plaincopy 
   
 public class HomeFragment extends Fragment {  
   
     @Override  
     public void onActivityCreated(Bundle savedInstanceState) {  
         super.onActivityCreated(savedInstanceState);  
     }  
   
     @Override  
     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
             Bundle savedInstanceState) {  
         View view = inflater.inflate(R.layout.fragment_home, container, false);    
         return view;  
     }  
   
 }  

然后来看看布局文件activity_main.xml。

[java]view plaincopy 
   
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     xmlns:tools="http://schemas.android.com/tools"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:orientation="vertical" >  
   
     <!-- 上边主页面 -->  
   
     <fragment  
         android:id="@+id/fragment_home"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"  
         android:layout_weight="1"  
         class="com.example.fragment3.fragment.HomeFragment" />  
   
     <fragment  
         android:id="@+id/fragment_message"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"  
         android:layout_weight="1"  
         class="com.example.fragment3.fragment.MessageFragment" />  
   
     <fragment  
         android:id="@+id/fragment_setting"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"  
         android:layout_weight="1"  
         class="com.example.fragment3.fragment.SettingFragment" />  
   
     <!-- 底部菜单页面 -->  
   
     <RadioGroup  
         android:id="@+id/bottomRg"  
         android:layout_width="fill_parent"  
         android:layout_height="wrap_content"  
         android:orientation="horizontal" >  
   
         <RadioButton  
             android:id="@+id/rb_home"  
             style="@style/rg_btn_style"  
             android:checked="true"  
             android:drawableTop="@drawable/tab_home_selector"  
             android:text="@string/tab_home" >  
         </RadioButton>  
   
         <RadioButton  
             android:id="@+id/rb_message"  
             style="@style/rg_btn_style"  
             android:drawableTop="@drawable/tab_message_selector"  
             android:text="@string/tab_message" />  
   
         <RadioButton  
             android:id="@+id/rb_setting"  
             style="@style/rg_btn_style"  
             android:drawableTop="@drawable/tab_setting_selector"  
             android:text="@string/tab_setting" />  
     </RadioGroup>  
   
 </LinearLayout>  