Android開發之ViewPager+Fragment+FragmentTabHost實現底部選單

在Android開發中，底部選單是經常要使用的，如微信、微博、支付寶等，實現底部選單有好幾種方式，大致分為：

• 通過TabWidget實現
• 隱藏TabWidget，通過RadioGroup和RadioButton實現底部選單欄
• 通過FragmentTabHost實現
• 通過5.0以後的TabLayout實現
• 通過最近推出的 Bottom navigation

---

本文的主題是 ViewPager+Fragment+FragmentTabHost 實現底部選單

1、構造4個Fragment，每個佈局類似如下

<?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" 
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fragment1" 
        android:textSize="20dp"/>

</LinearLayout>

2、Activity佈局

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

     <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black" >
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

上面是一個ViewPager，用於裝載Fragment進行滑動；下面放一個FragmentTabHost，用於存放底部選單的具體內容，它的顏色就是黑色的，選單的文字為白色，這樣好區分。

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:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/tab_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tab_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />

</LinearLayout>

4、Activity程式碼

//注意是繼承 FragmentActivity
public class MainActivity extends FragmentActivity
{

    // FragmentTabHost
    private FragmentTabHost mTabHost;
    // layoutInflater
    private LayoutInflater layoutInflater;
    // imageViewArray陣列，用於顯示底部選單
    private int imageViewArray[] = { R.drawable.mywork, R.drawable.mypatient,
            R.drawable.infusion, R.drawable.personal };
    // textViewArray陣列
    private String textViewArray[] = { "工作", "回家", "互動", "我的" };
    // Fragment陣列
    private List<Fragment> list = new ArrayList<Fragment>();
    // ViewPager
    private ViewPager vp;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_layout);

        initView();
    }

    /**
     * 控制元件初始化
     */
    private void initView()
    {
        vp = (ViewPager) findViewById(R.id.pager);

        layoutInflater = LayoutInflater.from(this);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);

        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();
        Fragment4 fragment4 = new Fragment4();
        list.add(fragment1);
        list.add(fragment2);
        list.add(fragment3);
        list.add(fragment4);

        int count = textViewArray.length;

        // 新增選單內容
        for (int i = 0; i < count; i++)
        {
            // 一個選單就是一個TabSpec，然後新增到FragmentTabHost中
            TabSpec tabSpec = mTabHost.newTabSpec(textViewArray[i])
                    .setIndicator(getTabItemView(i));
            mTabHost.addTab(tabSpec, list.get(i).getClass(), null);
            // 預設讓第一個選中
            mTabHost.getTabWidget().getChildAt(0)
                    .setBackgroundResource(R.drawable.selector_tab_background);
        }

        // ViewPager新增Adapter，這裡用FragmentPagerAdapter
        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager())
        {

            @Override
            public int getCount()
            {

                return list.size();
            }

            @Override
            public android.support.v4.app.Fragment getItem(int arg0)
            {
                return list.get(arg0);
            }
        });

    }

    private View getTabItemView(int i)
    {
        View view = layoutInflater.inflate(R.layout.tab_content, null);
        ImageView mImageView = (ImageView) view
                .findViewById(R.id.tab_imageview);
        TextView mTextView = (TextView) view.findViewById(R.id.tab_textview);
        mImageView.setBackgroundResource(imageViewArray[i]);
        mTextView.setText(textViewArray[i]);
        return view;
    }

}

上面的 selector_tab_background.xml檔案如下，只是改變了一下背景色來示意選中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@color/purple"/>
    <item android:state_focused="true" android:drawable="@color/purple"/>
    <item android:state_pressed="true" android:drawable="@color/purple"/>
    <item android:drawable="@android:color/black"/>

</selector>

這樣寫了以後，只能實現底部有選單，上面能滑動，但是底部選單和上面的ViewPager並沒有關聯起來，怎麼關聯呢？首先，上面滑動的時候，需要監聽滑動到哪裡了，然後下面的選單跟著聯動；同理，如果點選了下面的選單，上面的ViewPager應該滑動到對應的Fragment

5、關聯ViewPager與底部選單

• ViewPager實現OnPageChangeListener監聽器，目的是讓ViewPager滑動的時候能夠帶著底部選單聯動

    vp.setOnPageChangeListener(new OnPageChangeListener()
        {

            @Override
            public void onPageScrollStateChanged(int arg0)
            {

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2)
            {

            }

            @Override
            public void onPageSelected(int arg0)
            {
                // 選中選單
                mTabHost.setCurrentTab(arg0);
                // 設定對應選單高亮
                mTabHost.getTabWidget()
                        .getChildAt(arg0)
                        .setBackgroundResource(
                                R.drawable.selector_tab_background);
            }
        });

• FragmentTabHost實現setOnTabChangedListener，目的是當點選了下面的選單時，上面的ViewPager應該滑動到對應的Fragment

mTabHost.setOnTabChangedListener(new OnTabChangeListener()
        {

            @Override
            public void onTabChanged(String tabId)
            {
                // 獲取點選的選單的位置
                int position = mTabHost.getCurrentTab();
                // ViewPager滑動到對應的位置
                vp.setCurrentItem(position);
            }
        });

至此，這個雙向關聯的底部選單就已經完成了。如果要求內容不需要滑動，如微信、支付寶那種，只有底部點選切換Fragment的功能，那麼只需要將Activity佈局中的ViewPager換成一個FrameLayout佔位，然後在程式替換Fragment即可~~