Android fragment+viewpager 切换Tab

效果图和上一篇文章《Android Fragment制作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="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="0dp"
        android:layout_height="fill_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:background="@drawable/tab_weixin_pressed"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_find_frd_normal"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_address"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_address_normal"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_setting"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_settings_normal"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>

top.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="wrap_content"
    android:background="@drawable/title_bar"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="#ffffff"
        android:text="微信" />

</LinearLayout>

activity_main.xml

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="${packageName}.${activityClass}" >

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

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

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

</LinearLayout>

MainActivity.java

package com.example.fragemtviewpagerdemo;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
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.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener {

    private ViewPager mViewPager;
    private LinearLayout weixinLayout, frdLayout, addressLayout, settingLayout;
    private ImageButton weixinButton, frdButton, addressButton, settingButton;

    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments;

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

        initView();
        initEvent();

        setSeceted(0);
    }

    private void initEvent() {
        weixinLayout.setOnClickListener(this);
        frdLayout.setOnClickListener(this);
        addressLayout.setOnClickListener(this);
        settingLayout.setOnClickListener(this);
    }

    private void initView() {

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        weixinLayout = (LinearLayout) findViewById(R.id.tab_weixin);
        frdLayout = (LinearLayout) findViewById(R.id.tab_frd);
        addressLayout = (LinearLayout) findViewById(R.id.tab_address);
        settingLayout = (LinearLayout) findViewById(R.id.tab_setting);

        weixinButton = (ImageButton) findViewById(R.id.tab_weixin_img);
        frdButton = (ImageButton) findViewById(R.id.tab_frd_img);
        addressButton = (ImageButton) findViewById(R.id.tab_address_img);
        settingButton = (ImageButton) findViewById(R.id.tab_setting_img);

        mFragments = new ArrayList<Fragment>();
        Fragment fragment01 = new WeiXinFragment();
        Fragment fragment02 = new FrdFragment();
        Fragment fragment03 = new AddressFragment();
        Fragment fragment04 = new SettingFragment();
        mFragments.add(fragment01);
        mFragments.add(fragment02);
        mFragments.add(fragment03);
        mFragments.add(fragment04);

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }
        };

        mViewPager.setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                int i = mViewPager.getCurrentItem();
                setTab(i);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

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

    private void setSeceted(int i) {
        setTab(i);
        mViewPager.setCurrentItem(i);
    }

    private void setTab(int i) {
        // 设置图片为亮色
        resetImage();
        // 切换内容区域
        switch (i) {
        case 0:
            weixinButton.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            frdButton.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            addressButton.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            settingButton.setImageResource(R.drawable.tab_settings_pressed);
            break;
        }
    }

    private void resetImage() {
        weixinButton.setImageResource(R.drawable.tab_weixin_normal);
        frdButton.setImageResource(R.drawable.tab_find_frd_normal);
        addressButton.setImageResource(R.drawable.tab_address_normal);
        settingButton.setImageResource(R.drawable.tab_settings_normal);
    }
}

Demo下载地址