ViewPage and Fragment（仿微信）

/**
 * @function 整理代码
 * @author JRwestbrook
 * @time 2014-12-31 15:00
 * @comment 当Viewpager 滑动的时候，下面的按钮随着ViewPager位置改变（实为变色）
 */

页面效果如下图(非动态)：

1.首先创建三个fragment

fragment_first.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="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first page" />

</LinearLayout>

FirstFragment.class

注意：“import android.support.v4.app.Fragment;”

package com.example.mytestproject.fragment;

import com.example.mytestproject.R;

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;

/**
 * @function 整理代码
 * @author JRwestbrook
 * @time 2014-12-31 15:00
 */
public class FirstFragment extends Fragment {
    View view;//初始化

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
	// TODO Auto-generated method stub
	view = inflater.inflate(R.layout.fragment_first, null);
	return view;
    }
}

//the second and  third are same as the first;
main_activity.xml

<RelativeLayout 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"
    tools:context="com.example.mytestproject.MainActivity" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/linearlayout1" >
        </android.support.v4.view.ViewPager>

        <LinearLayout
            android:id="@+id/linearlayout1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@null"
                android:text="menu"
                android:textColor="#9c9c9c" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@null"
                android:text="contacts"
                android:textColor="#9c9c9c" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@null"
                android:text="settings"
                android:textColor="#9c9c9c" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearlayout2"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:layout_alignTop="@+id/linearlayout1"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_weight="1"
                android:text="" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_weight="1"
                android:text="" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_weight="1"
                android:text="" />
        </LinearLayout>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_alignTop="@+id/linearlayout1"
            android:layout_centerHorizontal="true"
            android:background="#9a9a9a"
            android:text="TextView" />
    </RelativeLayout>
</RelativeLayout>

MainActivity.class

package com.example.mytestproject;

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

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.example.mytestproject.fragment.FirstFragment;
import com.example.mytestproject.fragment.SecondFragment;
import com.example.mytestproject.fragment.ThirdFragment;

/**
 * @function 整理代码
 * @author JRwestbrook
 * @time 2014-12-31 15:00
 * @comment
 */
public class MainActivity extends FragmentActivity {
    ViewPager viewpager;// init viewpager
    TextView textview_0, textview_1, textview_2;//
    Button btn_0, btn_1, btn_2;//

    @Override
    protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	InitViewPager();//initViewPager
	initViews();// initViews
    }

    public void initViews() {
	// init button
	btn_0 = (Button) findViewById(R.id.button1);
	btn_1 = (Button) findViewById(R.id.button2);
	btn_2 = (Button) findViewById(R.id.button3);
	btn_0.setOnClickListener(new ButtonListener());
	btn_1.setOnClickListener(new ButtonListener());
	btn_2.setOnClickListener(new ButtonListener());
	// init textview
	textview_0 = (TextView) findViewById(R.id.textView2);
	textview_1 = (TextView) findViewById(R.id.textView3);
	textview_2 = (TextView) findViewById(R.id.textView4);
	// init tab button color is green
	btn_0.setTextColor(Color.GREEN);
	textview_0.setBackgroundColor(Color.GREEN);
    }

    /**
     * @function button listener
     * 
     */
    public class ButtonListener implements View.OnClickListener {

	@Override
	public void onClick(View arg0) {
	    // TODO Auto-generated method stub
	   // onclick button 时切换到  viewpager position
	    switch (arg0.getId()) {
	    case R.id.button1:
		viewpager.setCurrentItem(0);
		break;
	    case R.id.button2:
		viewpager.setCurrentItem(1);
		break;
	    case R.id.button3:
		viewpager.setCurrentItem(2);
		break;
	    default:
		break;
	    }
	}

    }

    /**
     * viewpager init
     */
    public void InitViewPager() {
	ArrayList<Fragment> fragments = new ArrayList<Fragment>();
	fragments.add(new FirstFragment());
	fragments.add(new SecondFragment());
	fragments.add(new ThirdFragment());

	viewpager = (ViewPager) findViewById(R.id.viewpager);
	viewpager.setAdapter(new splashViewPagerAdapter(getSupportFragmentManager(), fragments));
	// viewpager  listener
	viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

	    @Override
	    public void onPageSelected(int arg0) {
		// 切换viewpager 改变对应的button color
		switch (arg0) {
		case 0:
		    btn_0.setTextColor(Color.GREEN);//对应的botton color  改为  green
		    textview_0.setBackgroundColor(Color.GREEN);
		    btn_1.setTextColor(Color.GRAY);
		    textview_1.setBackgroundColor(Color.WHITE);
		    btn_2.setTextColor(Color.GRAY);
		    textview_2.setBackgroundColor(Color.WHITE);
		    break;
		case 1:
		    btn_1.setTextColor(Color.GREEN);
		    textview_1.setBackgroundColor(Color.GREEN);
		    btn_0.setTextColor(Color.GRAY);
		    textview_0.setBackgroundColor(Color.WHITE);
		    btn_2.setTextColor(Color.GRAY);
		    textview_2.setBackgroundColor(Color.WHITE);
		    break;
		case 2:
		    btn_2.setTextColor(Color.GREEN);
		    textview_2.setBackgroundColor(Color.GREEN);
		    btn_1.setTextColor(Color.GRAY);
		    textview_1.setBackgroundColor(Color.WHITE);
		    btn_0.setTextColor(Color.GRAY);
		    textview_0.setBackgroundColor(Color.WHITE);
		    break;
		default:
		    break;
		}
	    }

	    @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

	    }
	});
	// 设置默认 fragment position
	viewpager.setCurrentItem(0);
    }

    /**
     * @function: ViewPager Adapter
     * 
     */
    public class splashViewPagerAdapter extends FragmentPagerAdapter {
	List<Fragment> fragments;

	public splashViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
	    super(fm);
	    this.fragments = fragments;
	    // TODO Auto-generated constructor stub
	}

	@Override
	public Fragment getItem(int arg0) {
	    // TODO Auto-generated method stub
	    return fragments.get(arg0);
	}

	@Override
	public int getCount() {
	    // TODO Auto-generated method stub
	    return fragments.size();
	}

    }
}

（）