今年的雙11又再一次刷新了記錄，大家剁手做貢獻了嗎
回到今天的主題，很多app底下的Tab菜單結構為了突出，中間的tab比兩邊的高。

思路

• 使用FragmentTabHost搭建Tab菜單
• 使用一張圖片放在Tab中間

實現

1.使用FragmentTabHost搭建Tab菜單布局

activity_main.xml

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.tab.MainActivity">

    <android.support.v4.app.FragmentTabHost
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0"/>

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0.8dp"
                android:background="#c8c8c8"/>

            <TabWidget
                android:id="@android:id/tabs"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:divider="#00000000"
                android:layout_weight="0"/>

        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>
    <!--中間的tab-->
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@mipmap/add"
        android:layout_marginBottom="20dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

2.編寫每個tab的布局

<?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:background="#ffffff"
              android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab"
        android:textColor="@color/tab_text"
        android:textSize="12sp"/>

</LinearLayout>

3.為每個tab實現點擊選中的狀態

tab_text.xml
tab文字在選中和未選中的顏色選擇

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#0AA284"/>
    <item android:state_selected="false" android:color="#747474"/>
</selector>

tab_xxx.xml
每個tab在選中和未選中的圖標

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/xxx" android:state_selected="true"></item>
    <item android:drawable="@mipmap/xxx"></item>
</selector>

4.實現FragmentTabHost

package com.test.tab;

import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity
{

    private FragmentTabHost mTabHost;
    int[] img = new int[]
            {R.drawable.tab_article, R.drawable.tab_topic, R.mipmap.white, R.drawable.tab_mag, R.drawable.tab_site};

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

         /**setIndicator:設置tab的樣式
         *TabFragment.class：點擊tab展現的片段
         *getBundle(0)：傳入展現片段的bundle
        */
 mTabHost.addTab(mTabHost.newTabSpec("home").setIndicator(getIndicatorView(0)),
                TabFragment.class, getBundle(0));
        mTabHost.addTab(mTabHost.newTabSpec("find").setIndicator(getIndicatorView(1)),
                TabFragment.class, getBundle(1));
        mTabHost.addTab(mTabHost.newTabSpec("add").setIndicator(getIndicatorView(2)),
                TabFragment.class, getBundle(2));
        mTabHost.addTab(mTabHost.newTabSpec("news").setIndicator(getIndicatorView(3)),
                TabFragment.class, getBundle(3));
        mTabHost.addTab(mTabHost.newTabSpec("mine").setIndicator(getIndicatorView(4)),
                TabFragment.class, getBundle(4));
    }

    public View getIndicatorView(int i)
    {
        View view = getLayoutInflater().inflate(R.layout.layout_indicator_view, null);
        ImageView mImageView = (ImageView) view.findViewById(R.id.iv);
        mImageView.setImageResource(img[i]);
        return view;
    }

    public Bundle getBundle(int type)
    {
        Bundle bundle = new Bundle();
        bundle.putInt("type", type);
        return bundle;
    }
}

原本中間的tab用白色的圖片資源代替

方法：給圖片設置一個點擊事件

 ImageView tab_add = (ImageView) findViewById(R.id.tab_add);
        tab_add.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                //設置tab當前頁面
                mTabHost.setCurrentTab(2);
            }
        });

Demo