Android微信式底部标签栏和fragment切换实现

一、标签栏视图

新建一个空项目后，首先要改的是activity_main.xml。 这里主要有两个部分，一个就是底部标签栏，一个是容纳上面动态加载的fragment的区域。

底部标签按钮直接用Button实现。里面用到几个图片请随意替换成自己的图片或系统自带图片。本例中放了4个tab。视觉效果并不完全模仿微信，仅作示意。

底部标签栏也可以单独写一个layout然后include进来，这里出于简便的目的就直接放进来了。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"  >

    <LinearLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="true"
        android:background="#3C4A5A"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/maintab_button1"
            android:text="Tab1"
            android:gravity="bottom|center"
            android:textSize="12sp"
            android:paddingTop="8dp"
            android:textColor="#ffffff"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#333E4B" 
            android:drawableTop="@drawable/discover"/>

        <Button
            android:id="@+id/maintab_button2"
            android:text="Tab2"
            android:gravity="bottom|center"
            android:textSize="12sp"
            android:paddingTop="8dp"
            android:textColor="#ffffff"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#333E4B" 
            android:drawableTop="@drawable/mycoin" />

        <Button
            android:id="@+id/maintab_button3"
            android:text="Tab3"
            android:gravity="bottom|center"
            android:textSize="12sp"
            android:paddingTop="8dp"
            android:textColor="#ffffff"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#333E4B" 
            android:drawableTop="@drawable/radio" />

        <Button
            android:id="@+id/maintab_button4"
            android:text="Tab4"
            android:gravity="bottom|center"
            android:textSize="12sp"
            android:paddingTop="8dp"
            android:textColor="#ffffff"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#333E4B" 
            android:drawableTop="@drawable/more" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/main_bottom" />

</RelativeLayout>

二、fragment视图和类

接下来准备4个fragment的layout。本例里面只放一个TextView作为标识。这里只贴出第一个的代码fragment_maintab1.xml，其他3个只是改一下数字。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Fragment1"/>

</LinearLayout>

然后准备4个fragment的类文件。这里同样只贴出第一个MainTab1Fragment.java。

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainTab1Fragment extends Fragment { 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){

        View view = inflater.inflate(R.layout.fragment_maintab1, container, false);

        return view;

    } 
}

三、MainActivity类

最后是重头戏，MainActivity.java。这里把4个tab按钮和4个fragment放在数组里进行管理，并使用了两个整型作索引，这样使代码更简洁、不易出错。
管理4个fragment是思路是，用getFragmentManager().beginTransaction()得到的FragmentTransaction实例把它们全部add()进来，而根据当前点击的标签，利用show()和hide()来控制显示哪个。
如果不是这么做而是使用replace()，那么每次切换标签都会销毁之前的fragment和重建新的fragment。

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

    private Button[] mainTabs; 
    private int index;
    private int currentTabIndex;

    private Fragment[] fragments;
    private MainTab1Fragment fragment1;
    private MainTab2Fragment fragment2;
    private MainTab3Fragment fragment3;
    private MainTab4Fragment fragment4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView(); 
    }

    /**
     * 初始化组件
     */
    private void initView() { 
        currentTabIndex=0;

        mainTabs = new Button[4];
        mainTabs[0] = (Button) findViewById(R.id.maintab_button1);
        mainTabs[1] = (Button) findViewById(R.id.maintab_button2);
        mainTabs[2] = (Button) findViewById(R.id.maintab_button3);
        mainTabs[3] = (Button) findViewById(R.id.maintab_button4);  
        mainTabs[0].setOnClickListener(this);
        mainTabs[1].setOnClickListener(this);
        mainTabs[2].setOnClickListener(this);
        mainTabs[3].setOnClickListener(this);

        mainTabs[0].setTextColor(0xff6699cc);

        fragment1= new MainTab1Fragment();
        fragment2= new MainTab2Fragment();
        fragment3= new MainTab3Fragment();
        fragment4= new MainTab4Fragment();
        fragments=new Fragment[]{fragment1, fragment2, fragment3, fragment4};

        getFragmentManager().beginTransaction()
        .add(R.id.fragment_container, fragments[0])
        .add(R.id.fragment_container, fragments[1])
        .add(R.id.fragment_container, fragments[2])
        .add(R.id.fragment_container, fragments[3])
    .hide(fragments[1]).hide(fragments[2]).hide(fragments[3])
        .show(fragments[0]).commit();
    }

    public void onClick(View view) {
        switch (view.getId()) {
        case R.id.maintab_button1:
            index = 0;
            break;
        case R.id.maintab_button2:
            index = 1;
            break;
        case R.id.maintab_button3:
            index = 2;
            break;
        case R.id.maintab_button4:
            index = 3;
            break;
        }
        if (currentTabIndex != index) {
            mainTabs[index].setTextColor(0xff6699cc);
            mainTabs[currentTabIndex].setTextColor(0xffffffff);

            FragmentTransaction trx = getFragmentManager().beginTransaction();
            trx.hide(fragments[currentTabIndex]);
            if (!fragments[index].isAdded()) {
                trx.add(R.id.fragment_container, fragments[index]);
            }
            trx.show(fragments[index]).commit();
        }

        currentTabIndex = index;
    }

}

---

参考资料

1. 环信Demo http://www.easemob.com/docs/android/
2. 《第一行代码——Android》郭霖