Fragment实现底部菜单栏

最新推荐文章于 2022-12-27 16:41:47 发布

yxRosy

最新推荐文章于 2022-12-27 16:41:47 发布

阅读量2.1k

点赞数

分类专栏： Android 文章标签： android Fragment FragmentTabHost 底部菜单栏 FragmentActivity

本文链接：https://blog.csdn.net/hellohm/article/details/19283737

版权

Android 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

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

http://blog.csdn.net/yangyu20121224/article/details/8995025

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

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

http://blog.csdn.net/yangyu20121224/article/details/9016223

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

http://blog.csdn.net/renpengben/article/details/12615487

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

http://blog.csdn.net/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)。

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。

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。

<?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。

<?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。

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。

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。

<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>