Fragment 实现android项目主流APP Tab （微博，今日头条等等），解决横竖屏切换重叠，以及切换回调。

最新推荐文章于 2022-03-21 16:18:06 发布

三少爷的鞋

最新推荐文章于 2022-03-21 16:18:06 发布

阅读量1.2k

点赞数

文章标签： Fragment

本文链接：https://blog.csdn.net/dhl_1986/article/details/51509969

版权

主流APP都是下面四个Tab，比如QQ3个，微信4个，今日头条4个，他们是通过Fragment实现的，今天我们就做一个主流APPdemo，以后做项目可以直接拿着用。

主布局，一个top ,一个bottom，中间一个FrameLayout用来容纳Fragment，布局如下：

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

    <include layout="@layout/layout_top" />

	<FrameLayout 
	    android:id="@+id/id_content"
	    android:layout_width="fill_parent"
	    android:layout_height="0dp"
	    android:layout_weight="1"
	    ></FrameLayout>

    <include layout="@layout/layout_bottom" />

</LinearLayout>

bottom,就是用来放四个Tab的（这里的Demo是四个，几个要看需求）：如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#ffffffff"
    android:gravity="center_vertical"
  
    >
    
    <View
      
            android:layout_width="match_parent"
            android:layout_height="1px"
           
            android:background="#FFDEDEDE" />
    <LinearLayout 
        
           android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_alignParentBottom="true"
    android:background="#ffffffff"
    android:orientation="horizontal"
        >

    <LinearLayout
        android:id="@+id/id_tab_message"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_message_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/bottom_img_tab01_select" />

        <TextView
             android:id="@+id/id_tab_message_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
           android:textSize="12sp"
            android:textColor="@drawable/bottom_text_select" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/bottom_img_tab02_select" />

        <TextView
             android:id="@+id/id_tab_frd_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
               android:textSize="12sp"
          
           android:textColor="@drawable/bottom_text_select" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_contacts"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_contacts_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/bottom_img_tab03_select" />

        <TextView
                android:id="@+id/id_tab_contacts_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
             android:textSize="12sp"
             android:textColor="@drawable/bottom_text_select" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/bottom_img_tab04_select" />

        <TextView
             android:id="@+id/id_tab_settings_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textSize="12sp"
           android:textColor="@drawable/bottom_text_select" />
    </LinearLayout>
</LinearLayout>
</RelativeLayout>

四个Tab，平分宽度。好，现在进入正题，代码部分：

private void initView() {

		// tabs
		mTabMessage = (LinearLayout) findViewById(R.id.id_tab_message);
		mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
		mTabContacts = (LinearLayout) findViewById(R.id.id_tab_contacts);
		mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
		// ImageButton
		mMessageImg = (ImageButton) findViewById(R.id.id_tab_message_img);
		mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
		mContactsImg = (ImageButton) findViewById(R.id.id_tab_contacts_img);
		mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

		mMessagetxt = (TextView) findViewById(R.id.id_tab_message_txt);
		mFrdtxt = (TextView) findViewById(R.id.id_tab_frd_txt);
		mContactstxt = (TextView) findViewById(R.id.id_tab_contacts_txt);
		mSettingtxt = (TextView) findViewById(R.id.id_tab_settings_txt);
		// LayoutInflater mInflater = LayoutInflater.from(this);
		fm = getSupportFragmentManager();

	}

	private void initEvent() {
		mTabMessage.setOnClickListener(this);
		mTabFrd.setOnClickListener(this);
		mTabContacts.setOnClickListener(this);
		mTabSetting.setOnClickListener(this);
	}

分别初始化View，和监听事件。核心代码：

private void setSelect(int i) {
		//FragmentManager fm = getSupportFragmentManager();
		FragmentTransaction transaction = fm.beginTransaction();
		hideFragment(transaction);
		// 把图片设置为亮的
		// 设置内容区域
		currentSelect = i;
		setBottom(i);
		switch (i) {
		case 0:
			if (messageFragment == null) {
				messageFragment = new MessageFragment();
				transaction.add(R.id.id_content, messageFragment,"message");
				// transaction.add
			} else {
				messageFragment.onResume();
				transaction.show(messageFragment);
			}

			break;
		case 1:
			if (friendFragment == null) {
				friendFragment = new FriendFragment();
				transaction.add(R.id.id_content, friendFragment,"friend");
			} else {
				friendFragment.onResume();
				transaction.show(friendFragment);
			}

			break;
		case 2:
			if (contactsFragment == null) {
				contactsFragment = new ContactsFragment();
				transaction.add(R.id.id_content, contactsFragment,"contacts");
			} else {
				contactsFragment.onResume();
				transaction.show(contactsFragment);
			}
			break;
		case 3:
			if (settingFragment == null) {
				settingFragment = new SettingFragment();
				transaction.add(R.id.id_content, settingFragment,"setting");
			
			} else {
				settingFragment.onResume();
				transaction.show(settingFragment);
			}
			break;
		default:
			break;
		}
		transaction.commit();
	}

在这里，我们通过触发事件选择要显示的Tab（Fragment），以case 1：为例，若选择消息Tab，创建对象，transaction.add(R.id.id_content, messageFragment,"message");加入事物，若已创建过对象，直接show出来，最后commit 一下，这个Tab，就会显示。展示Tab(Fragment)已经没有问题了，剩下要考虑图片与文字高亮的问题了，

public void onClick(View view) {
		// TODO Auto-generated method stub
		if (view == currentView) {
			return;
		}
		resetImg();
		switch (view.getId()) {
		case R.id.id_tab_message:
			setSelect(0);
			break;
		case R.id.id_tab_frd:
			setSelect(1);
			break;
		case R.id.id_tab_contacts:
			setSelect(2);
			break;
		case R.id.id_tab_settings:
			setSelect(3);
			break;
		default:
			break;
		}
	}

每一次触发我们收先会调用resetImg(),这是重置他们的被选中的状态：

/**
	 * 将所有的图片切换默认不选中
	 */
	private void resetImg() {
		mMessageImg.setSelected(false);
		mFrdImg.setSelected(false);
		mContactsImg.setSelected(false);
		mSettingImg.setSelected(false);

		mFrdtxt.setSelected(false);
		mMessagetxt.setSelected(false);
		mContactstxt.setSelected(false);
		mSettingtxt.setSelected(false);

	}

并且在接下来会调用setBottom(i);方法：

private void setBottom(int position) {

		switch (position) {
		case 0:
			currentView = mTabMessage;
			mMessageImg.setSelected(true);
			mMessagetxt.setSelected(true);
			break;
		case 1:
			currentView = mTabFrd;
			mFrdImg.setSelected(true);
			mFrdtxt.setSelected(true);
			break;
		case 2:
			currentView = mTabContacts;
			mContactsImg.setSelected(true);
			mContactstxt.setSelected(true);
			break;
		case 3:
			currentView = mTabSetting;
			mSettingImg.setSelected(true);
			mSettingtxt.setSelected(true);
			break;

		default:
			break;
		}
	}

这个方法会为选中的Tab选中状态。这时候，基本已经完成Tab的切换了，但是我们横竖屏的时候，发现，Fagment会重叠，why?怎么解决这个问题呢？在上一篇我们提到了切换横竖屏会导致数据丢失点击打开链接，于是我们需要重写onSaveInstanceState，来记录横竖屏切换时，我们选中的Tab：

@Override
	protected void onSaveInstanceState(Bundle outState) {
		// TODO Auto-generated method stub
		super.onSaveInstanceState(outState);
		outState.putInt("currentSelect", currentSelect);
	}

在写个方法来取出保存的状态：

/**
	 * 横竖屏切换保存数据
	 */
	private void setFragment(Bundle savedInstanceState )
	{
		if(savedInstanceState != null)
		{
			currentSelect = savedInstanceState.getInt("currentSelect");
			messageFragment = (MessageFragment)fm.findFragmentByTag("message");
			friendFragment = (FriendFragment)fm.findFragmentByTag("friend");
			contactsFragment = (ContactsFragment)fm.findFragmentByTag("contacts");
			settingFragment = (SettingFragment)fm.findFragmentByTag("setting");
		}
		setSelect(currentSelect);
	}

然后在onCreate里调一下就可以，这样就不会在出现重叠的情况了。源码如下：

源码