Android最主流的4种实现Tab的方法

Tab选项卡几乎成为了App必备的一个功能，它的实现方法也是多种多样，本文将讲解迄今为止最主流的4种实现Tab的方法，包括ViewPager、Fragment、FragmentPagerAdapter和ViewPagerIndicator。

ViewPager实现Tab

下面将通过一个实例来讲解如何用ViewPager实现Tab，效果图如下所示：

上面实现了仿微信Tab导航效果，当点击底部的4个Tab之一时，上面的内容随之切换，同时也可通过左右滑动进行内容切换。
一.底部Tab布局文件
底部Tab的高度限定为70dp并让其子元素横向排列，然后添加4个LinearLayout ，利用layout_weight属性将每个LinearLayout的宽度设置为父元素的四分之一。
底部Tab布局文件bottom.xml代码如下所示：

<?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="70dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal">
    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton
            android:id="@+id/tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height= "wrap_content"
            android:src="@drawable/tab_weixin_pressed"
            android:clickable="false"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton
            android:id="@+id/tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height= "wrap_content"
            android:src="@drawable/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_address"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton
            android:id="@+id/tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height= "wrap_content"
            android:src="@drawable/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:textColor="#ffffff"
            android:text="通讯录"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_settings"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton
            android:id="@+id/tab_settings_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height= "wrap_content"
            android:src="@drawable/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:textColor="#ffffff"
            android:text="设置"/>
    </LinearLayout>
</LinearLayout>

注意：要将ImageButton的clickable的属性设置为false,否则点击ImageButton时，Tab无法实现切换。

二.创建主布局文件
通过include标签将bottom.xml添加到主布局文件中，这样可以优化布局层次，避免混乱。

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

然后在主布局文件中加入ViewPager，代码如下所示：

<?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.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>
</LinearLayout>

三.为ViewPager添加适配器
首先，创建PagerAdapter适配器，实现destroyItem()，instantiateItem(),getCount()，isViewFromObject()这四个方法。

PagerAdapter pagerAdapter = new PagerAdapter() {

            /**
             * 摧毁View
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
               container.removeView(mViewList.get(position));
            }

            /**
             * 初始化View
             * @param container
             * @param position
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = mViewList.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public int getCount() {
                return mViewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        };

然后为ViewPager添加适配器：

 mViewPager.setAdapter(pagerAdapter);

四.为ViewPager绑定事件监听器
当在手机屏幕上左右滑动时，实现Tab左右切换效果，同时会触发OnPageChangeListener()事件监听器，将对应的图片点亮。

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                resetImg();
                switch (position){
                    case 0:
                        mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                        break;
                    case 1:
                        mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                        break;
                    case 2:
                        mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                        break;
                    case 3:
                        mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

五.主程序代码

import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private ViewPager mViewPager;
    private List<View> mViewList = new ArrayList<>();

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingsImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //去掉活动条
        if(getSupportActionBar()!=null){
            getSupportActionBar().hide();
        }
        initView();
        initEvent();
    }

    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                resetImg();
                switch (position){
                    case 0:
                        mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                        break;
                    case 1:
                        mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                        break;
                    case 2:
                        mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                        break;
                    case 3:
                        mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

        mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.tab_settings);

        mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.tab_address_img);
        mSettingsImg = (ImageButton) findViewById(R.id.tab_settings_img);

        LayoutInflater layoutInflater = LayoutInflater.from(this);
        View viewWeixin = layoutInflater.inflate(R.layout.tab_weixin,null);
        View viewFrd = layoutInflater.inflate(R.layout.tab_frd,null);
        final View viewAddress = layoutInflater.inflate(R.layout.tab_address,null);
        View viewSettings = layoutInflater.inflate(R.layout.tab_settings,null);
        mViewList.add(viewWeixin);
        mViewList.add(viewFrd);
        mViewList.add(viewAddress);
        mViewList.add(viewSettings);

        PagerAdapter pagerAdapter = new PagerAdapter() {

            /**
             * 摧毁View
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
               container.removeView(mViewList.get(position));
            }

            /**
             * 初始化View
             * @param container
             * @param position
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = mViewList.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public int getCount() {
                return mViewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        };
        mViewPager.setAdapter(pagerAdapter);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.tab_weixin :
                //将图片设置为亮色
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                //设置ViewPager当前显示的View
                mViewPager.setCurrentItem(0);
                break;
            case R.id.tab_frd :
                //将图片设置为亮色
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                //设置ViewPager当前显示的View
                mViewPager.setCurrentItem(1);
                break;
            case R.id.tab_address :
                //将图片设置为亮色
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                //设置ViewPager当前显示的View
                mViewPager.setCurrentItem(2);
                break;
            case R.id.tab_settings :
                //将图片设置为亮色
                mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
                //设置ViewPager当前显示的View
                mViewPager.setCurrentItem(3);
                break;
        }
    }

    /**
     * 将所有图片切换成暗色
     */
    private void resetImg() {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
    }

}

在主程序中，还要为四个LinearLayout绑定监听事件，当点击LinearLayout时，图片点亮，ViewPager切换到对应的内容。
点击下载源码>>

Fragment实现Tab

下面通过Fragment实现上面相同的效果，只是Tab不能通过左右滑动进行切换。
相对于ViewPager实现Tab，采用Fragment方法可以避免所有代码集中在主程序中，将Tab对应显示的内容单独分离出来，方便后期维护。
一.底部Tab布局文件
底部Tab布局文件bottom.xml与“ViewPager实现Tab”中的bottom.xml代码相同。
二.主布局文件
通过include标签将bottom.xml添加到主布局文件中，并添加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">

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

    <include layout="@layout/bottom"/>
</LinearLayout>

三.创建对应于每个Tab选项卡的Fragment
接下来创建每个Tab的View页面，实例中含有4个Tab，则需要创建4个Fragment文件。
下面只写一个Fragment进行演示，创建一个类，让其继承Fragment，实现onCreateView()方法。

public class WeixinFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab_weixin,container,false);
    }
}

上面R.layout.tab_weixin文件对应的代码为：

<?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="match_parent"
        android:gravity="center"
        android:textSize="30dp"
        android:text="This is tab Weixin"/>
</LinearLayout>

四.实现切换效果
当点击Tab时，实现切换效果——显示对应的Fragment，将图片设置为亮色。
在Android中，对Fragment的操作都是通过FragmentTransaction来执行。

/**
     * 显示指定Tab，并将对应的图片设置为亮色
     * @param i
     */
    private void setSelect(int i) {
        FragmentManager fm = getSupportFragmentManager();  //获得FragmentManager
        FragmentTransaction transaction = fm.beginTransaction(); //开启事务
        hideFragment(transaction);
        switch (i){
            case 0:
                if (weixinFragment==null){
                    weixinFragment = new WeixinFragment();
                    transaction.add(R.id.content, weixinFragment);
                }
                //将图片设置为亮色
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                //显示指定Fragment
                transaction.show(weixinFragment);
                break;
            case 1:
                if (frdFragment==null){
                    frdFragment = new FrdFragment();
                    transaction.add(R.id.content, frdFragment);
                }
                //将图片设置为亮色
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                //显示指定Fragment
                transaction.show(frdFragment);
                break;
            case 2:
                if (addressFragment==null){
                    addressFragment = new AddressFragment();
                    transaction.add(R.id.content, addressFragment);
                }
                //将图片设置为亮色
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                //显示指定Fragment
                transaction.show(addressFragment);
                break;
            case 3:
                if (settingFragment==null){
                    settingFragment = new SettingsFragment();
                    transaction.add(R.id.content, settingFragment);
                }
                //将图片设置为亮色
                mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
                //显示指定Fragment
                transaction.show(settingFragment);
                break;
        }
        transaction.commit();  //提交事务
    }
     /**
     * 将所有Fragment隐藏起来
     * @param transaction
     */
    private void hideFragment(FragmentTransaction transaction) {
        if (weixinFragment!=null){
            transaction.hide(weixinFragment);
        }
        if (frdFragment!=null){
            transaction.hide(frdFragment);
        }
        if(addressFragment!=null) {
            transaction.hide(addressFragment);
        }
        if(settingFragment!=null){
            transaction.hide(settingFragment);
        }
    }

切换时，首先先将所有初始化了的Fragment隐藏，然后判断将要切换到的Fragment是否为空，如果为空就将其初始化，并将其添加到FragmentTransaction事物中，接下来将指定为图片设置为亮色、显示指定的Fragment。
五.主程序代码
让MainActivity继承FragmentActivity。

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements View.OnClickListener{

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingsImg;

    private WeixinFragment weixinFragment;
    private FrdFragment frdFragment;
    private AddressFragment addressFragment;
    private SettingsFragment settingFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        setSelect(0);  //显示第一个Tab
    }

    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initView() {
        mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.tab_settings);

        mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.tab_address_img);
        mSettingsImg = (ImageButton) findViewById(R.id.tab_settings_img);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.tab_weixin :
                setSelect(0);
                break;
            case R.id.tab_frd :
                setSelect(1);
                break;
            case R.id.tab_address :
                setSelect(2);
                break;
            case R.id.tab_settings :
                setSelect(3);
                break;
        }
    }

    /**
     * 显示指定Tab，并将对应的图片设置为亮色
     * @param i
     */
    private void setSelect(int i) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                if (weixinFragment==null){
                    weixinFragment = new WeixinFragment();
                    transaction.add(R.id.content, weixinFragment);
                }
                //将图片设置为亮色
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                //显示指定Fragment
                transaction.show(weixinFragment);
                break;
            case 1:
                if (frdFragment==null){
                    frdFragment = new FrdFragment();
                    transaction.add(R.id.content, frdFragment);
                }
                //将图片设置为亮色
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                //显示指定Fragment
                transaction.show(frdFragment);
                break;
            case 2:
                if (addressFragment==null){
                    addressFragment = new AddressFragment();
                    transaction.add(R.id.content, addressFragment);
                }
                //将图片设置为亮色
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                //显示指定Fragment
                transaction.show(addressFragment);
                break;
            case 3:
                if (settingFragment==null){
                    settingFragment = new SettingsFragment();
                    transaction.add(R.id.content, settingFragment);
                }
                //将图片设置为亮色
                mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
                //显示指定Fragment
                transaction.show(settingFragment);
                break;
        }
        transaction.commit();
    }

    /**
     * 将所有Fragment隐藏起来
     * @param transaction
     */
    private void hideFragment(FragmentTransaction transaction) {
        if (weixinFragment!=null){
            transaction.hide(weixinFragment);
        }
        if (frdFragment!=null){
            transaction.hide(frdFragment);
        }
        if(addressFragment!=null) {
            transaction.hide(addressFragment);
        }
        if(settingFragment!=null){
            transaction.hide(settingFragment);
        }
    }

    /**
     * 将所有图片切换成暗色
     */
    private void resetImg() {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
    }
}

注意：前面出现的 Fragment，FragmentManager，FragmentTransaction，FragmentActivity都是导入android.support.v4.app包下的类，不要与android.app.Fragment混淆。

点击下载源码>>

FragmentPagerAdapter+ViewPager实现Tab

FragmentPagerAdapter+ViewPager实现Tab，既能左右滑动切换Tab，又可将Fragment单独分离出来，方便维护。
一.布局文件
底部Tab布局文件bottom.xml和主布局文件与“Fragment实现Tab”中的相应文件相同。
二.每个Tab选项卡对应的Fragment
每个Tab选项卡对应的Fragment与“Fragment实现Tab”的对应文件相同。
三.为ViewPager设置FragmentPagerAdapter适配器
先创建一个List<Fragment>：

        List<Fragment> listFragment = new ArrayList<>();
        weixinFragment = new WeixinFragment();
        frdFragment = new FrdFragment();
        addressFragment = new AddressFragment();
        settingFragment = new SettingsFragment();
        listFragment.add(weixinFragment);
        listFragment.add(frdFragment);
        listFragment.add(addressFragment);
        listFragment.add(settingFragment);

创建FragmentPagerAdapter需要传入一个FragmentManager参数，可以通过getSupportFragmentManager()方法获取FragmentManager。

FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return listFragment.get(position);
            }

            @Override
            public int getCount() {
                return listFragment.size();
            }
        };
        viewPager.setAdapter(adapter);

四.为ViewPager设置监听事件
当在手机屏幕上左右滑动时，Tab内容左右切换，并触发OnPageChangeListener监听器，将对应的Tab图片设置为亮色。

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                setTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

上面setTab(position)对应的方法为：

    /**
     * 将指定的Tab图片设置为亮色
     * @param i
     */
    private void setTab(int i) {
        resetImg();
        switch (i){
           case 0:
               mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
               break;
           case 1:
               mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
               break;
           case 2:
               mAddressImg.setImageResource(R.drawable.tab_address_pressed);
               break;
           case 3:
               mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
               break;
         }
     }
     /**
     * 将所有图片切换成暗色
     */
    private void resetImg() {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
    }

五.主程序代码

package com.example.administrator.tabproject;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity implements View.OnClickListener{

    private ViewPager viewPager;
    private List<Fragment> listFragment;

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingsImg;

    private WeixinFragment weixinFragment;
    private FrdFragment frdFragment;
    private AddressFragment addressFragment;
    private SettingsFragment settingFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        setSelect(1);
    }

    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                setTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.view_pager);

        mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.tab_settings);

        mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.tab_address_img);
        mSettingsImg = (ImageButton) findViewById(R.id.tab_settings_img);

        listFragment = new ArrayList<>();
        weixinFragment = new WeixinFragment();
        frdFragment = new FrdFragment();
        addressFragment = new AddressFragment();
        settingFragment = new SettingsFragment();
        listFragment.add(weixinFragment);
        listFragment.add(frdFragment);
        listFragment.add(addressFragment);
        listFragment.add(settingFragment);

        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return listFragment.get(position);
            }

            @Override
            public int getCount() {
                return listFragment.size();
            }
        };
        viewPager.setAdapter(adapter);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tab_weixin :
                setSelect(0);
                break;
            case R.id.tab_frd :
                setSelect(1);
                break;
            case R.id.tab_address :
                setSelect(2);
                break;
            case R.id.tab_settings :
                setSelect(3);
                break;
        }
    }

    private void setSelect(int i) {
        setTab(i);
        viewPager.setCurrentItem(i);
    }

    /**
     * 将指定的Tab图片设置为亮色
     * @param i
     */
    private void setTab(int i) {
        resetImg();
        switch (i){
           case 0:
               mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
               break;
           case 1:
               mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
               break;
           case 2:
               mAddressImg.setImageResource(R.drawable.tab_address_pressed);
               break;
           case 3:
               mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
               break;
         }
     }

    /**
     * 将所有图片切换成暗色
     */
    private void resetImg() {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
    }
}

注意：前面出现的 Fragment，FragmentActivity，FragmentPagerAdapter同样需要导入android.support.v4.app包下的类。

点击下载源码>>

ViewPagerIndicator+ViewPager实现Tab

使用开源控件ViewPagerIndicator+ViewPager实现Tab，即可点击Tab进行切换，又可左右滑动切换。同时可以大大简化代码，方便维护。
下面实现一个Tab例子，效果图如下所示：

一.AndroidStudio导入ViewPagerIndicator
1.在app上右击，选择open module Settings

2.点击Dependencies,然后点击右侧的“+”,选择1.Library dependency

3.在输入框中输入ViewPagerIndicator，点击旁边的搜索图标，出现匹配的文件后，点击OK

二.主布局文件
主布局文件包含TabPageIndicator和ViewPager两个组件。

<?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">
    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tab_page_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

三.Tab内容对应的布局文件
布局文件fragment.xml中采用相对布局，只有一个TextView。

<?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="match_parent">
    <TextView
        android:id="@+id/id_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_centerInParent="true"/>
</RelativeLayout>

四.创建FragmentPagerAdapter适配器
创建FragmentPagerAdapter适配器，需要实现getItem()，getCount()，etPageTitle()三个方法。

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabAdapter extends FragmentPagerAdapter {

    public static String[] TITLES = new String[]{"Tab1","Tab2","Tab3","Tab4","Tab5"};

    public TabAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        TabFragment tabFragment = new TabFragment(position);
        return tabFragment;
    }

    @Override
    public int getCount() {
        return TITLES.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }
}

五.创建TabFragment类
TabFragment需要实现Fragment，在onCreateView()方法中创建Tab对应显示的页面内容。

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

@SuppressLint("ValidFragment")
public class TabFragment extends Fragment {

    private int pos;

    @SuppressLint("ValidFragment")
    public TabFragment(int pos) {
        this.pos = pos;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment,container,false);
        TextView textView = (TextView) view.findViewById(R.id.id_tv);
        textView.setText(TabAdapter.TITLES[pos]);
        return view;
    }
}

六.主程序代码
在主程序中，让MainActivity继承FragmentActivity，并为ViewPager设置适配器，同时为TabPageIndicator设置ViewPager。

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends FragmentActivity {

    private TabPageIndicator tabPageIndicator;
    private ViewPager viewPager;
    private TabAdapter adpater;

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

    private void initView() {
        tabPageIndicator = (TabPageIndicator) findViewById(R.id.tab_page_indicator);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        adpater = new TabAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adpater);    //为ViewPager设置适配器
        tabPageIndicator.setViewPager(viewPager);  //为TabPageIndicator设置ViewPager
    }
}

注意：前面出现的 Fragment，FragmentActivity，FragmentManager，FragmentPagerAdapter同样需要导入android.support.v4.app包下的类。

七.为Tab设置样式
在style.xml中加入如下代码：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
<style name="MyTheme" parent="AppTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">#262626</item>
    </style>

并将AndroidManifest.xml中application标签的android:theme属性改为@style/MyTheme

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/MyTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

点击下载源码>>