ViewPager+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.support.v4.view.ViewPager
        android:id="@+id/act_home_vp"
        android:layout_width="fill_parent"
        android:layout_height="0dp"   //因为高度为0，然后布局权重为1，因此就正好实现填充剩余效果
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#e2e2e2" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:gravity="center"
        android:orientation="horizontal" >

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

            <ImageView
                android:id="@+id/act_home_lin1_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/icon_anli_on" />

            <TextView
                android:id="@+id/act_home_lin1_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:text="xx"
                android:textColor="#0099cc"
                android:textSize="12sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/act_home_lin2_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/icon_moxing_off" />

            <TextView
                android:id="@+id/act_home_lin2_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:text="yy"
                android:textColor="#666666"
                android:textSize="12sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/act_home_lin3_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/icon_jindu_off" />

            <TextView
                android:id="@+id/act_home_lin3_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:text="zz"
                android:textColor="#666666"
                android:textSize="12sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/act_home_lin4_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/icon_ziliao_off" />

            <TextView
                android:id="@+id/act_home_lin4_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:text="cc"
                android:textColor="#666666"
                android:textSize="12sp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/act_home_lin5_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/icon_my_off" />

            <TextView
                android:id="@+id/act_home_lin5_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:text="vv"
                android:textColor="#666666" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

---

---

Activity文件：

package com.example.tjhd;

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

import com.example.base.BaseActivity;
import com.example.base.BaseInterface;
import com.example.tjhd.adapter.Act_Home_PagerAdapter;
import com.example.tjhd.fragment.DataFragment;
import com.example.tjhd.fragment.HomeFragment;
import com.example.tjhd.fragment.ModelFragment;
import com.example.tjhd.fragment.MyFragment;
import com.example.tjhd.fragment.PlanFragment;

import android.R.color;
import android.app.AlertDialog;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class HomeActivity extends BaseActivity implements BaseInterface, OnClickListener{


    private static List<Fragment> frags = null;
    private LinearLayout[] lins = new LinearLayout[5];
    private int[] resLinIds = {R.id.act_home_lin1,R.id.act_home_lin2,R.id.act_home_lin3,R.id.act_home_lin4,R.id.act_home_lin5};
    private ImageView[] imgs = new ImageView[5];
    private int[] resImgIds = {R.id.act_home_lin1_img,R.id.act_home_lin2_img,R.id.act_home_lin3_img,R.id.act_home_lin4_img,R.id.act_home_lin5_img};
    private TextView[] tvs = new TextView[5];
    private int[] resTvIds = {R.id.act_home_lin1_tv,R.id.act_home_lin2_tv,R.id.act_home_lin3_tv,R.id.act_home_lin4_tv,R.id.act_home_lin5_tv};

    private int[] iconIds_on = {R.drawable.icon_anli_on,R.drawable.icon_moxing_on,R.drawable.icon_jindu_on,R.drawable.icon_ziliao_on,R.drawable.icon_my_on};
    private int[] iconIds_off = {R.drawable.icon_anli_off,R.drawable.icon_moxing_off,R.drawable.icon_jindu_off,R.drawable.icon_ziliao_off,R.drawable.icon_my_off};

    private ViewPager vp;
    private AlertDialog backDialog;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.act_home);
        initView();
        initData();
        initViewOper();
    }

    @Override
    public void initView() {
        // TODO Auto-generated method stub
        for (int i = 0; i < 5; i++) {
            lins[i] = linerById(resLinIds[i]);
            imgs[i] = imgById(resImgIds[i]);
            tvs[i] = tvById(resTvIds[i]);
            lins[i].setOnClickListener(this);

        }
        vp = (ViewPager) findViewById(R.id.act_home_vp);

    }

    @Override
    public void initData() {
        // TODO Auto-generated method stub
        frags = new ArrayList<Fragment>();
        frags.add(new HomeFragment());
        frags.add(new ModelFragment());
        frags.add(new PlanFragment());
        frags.add(new DataFragment());
        frags.add(new MyFragment());
    }

    @Override
    public void initViewOper() {
        // TODO Auto-generated method stub
        vp.setAdapter(new Act_Home_PagerAdapter(getSupportFragmentManager(), frags));
        vp.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                updateView(position);
                toast(position+"");
            }

            @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) {
        toast(v.getId()+"");
        switch (v.getId()) {
        case R.id.act_home_lin1:
            updateView(0);
            vp.setCurrentItem(0);  // 实现碎片的切换
            break;
        case R.id.act_home_lin2:
            updateView(1);
            vp.setCurrentItem(1);
            break;
        case R.id.act_home_lin3:
            updateView(2);
            vp.setCurrentItem(2);
            break;
        case R.id.act_home_lin4:
            updateView(3);
            vp.setCurrentItem(3);
            break;
        case R.id.act_home_lin5:
            updateView(4);
            vp.setCurrentItem(4);
            break;

        }
    }
    /**
     * 更改当前选中的视图
     * @param position    当前用户的选项卡下标 0 1 2 3 4
     */
    public void updateView(int position){
        for (int i = 0; i < 5; i++) {
            if (i==position) {
                imgs[i].setImageResource(iconIds_on[i]);
                tvs[i].setTextColor(Color.parseColor("#0099cc"));
            }else{

                imgs[i].setImageResource(iconIds_off[i]);
                tvs[i].setTextColor(Color.parseColor("#666666"));
            }
        }
    }

}

---

---

FR:徐海涛（Hunk Xu)