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>

点击下载源码>>