Viewpage和Fragment实现页面切换，微信界面

项目类和界面为上图；

MainActivity类：

package org.great.viewpagerweixin;

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

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.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;

import android.widget.LinearLayout;

/**
 * 1.继承FragmentActivity，包要android.support.v4.app包
 * 
 * @author code_Q
 * 
 */
public class MainActivity extends FragmentActivity implements OnClickListener {

	private ViewPager viewPager;
	private List<Fragment> listFragment;
	private FragmentPagerAdapter adapter; // 适配器

	private LinearLayout linearContact;
	private LinearLayout linearChat;
	private LinearLayout linearFind;
	private LinearLayout linearI;

	private ImageButton butContact;
	private ImageButton butChat;
	private ImageButton butFind;
	private ImageButton butI;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE); // 去除标题
		setContentView(R.layout.activity_main);
		initView();
		initClick();
	}

	/**
	 * 2.初始化界面
	 */
	private void initView() {
		viewPager = (ViewPager) findViewById(R.id.page);
		linearContact = (LinearLayout) findViewById(R.id.linear1);
		linearChat = (LinearLayout) findViewById(R.id.linear2);
		linearFind = (LinearLayout) findViewById(R.id.linear3);
		linearI = (LinearLayout) findViewById(R.id.linear4);
		butChat = (ImageButton) findViewById(R.id.but1);
		butContact = (ImageButton) findViewById(R.id.but2);
		butFind = (ImageButton) findViewById(R.id.but3);
		butI = (ImageButton) findViewById(R.id.but4);

		listFragment = new ArrayList<Fragment>();
		Fragment page1 = new ViewPage_chat();
		Fragment page2 = new ViewPage_contact();
		Fragment page3 = new ViewPage_find();
		Fragment page4 = new ViewPage_i();
		listFragment.add(page1);
		listFragment.add(page2);
		listFragment.add(page3);
		listFragment.add(page4); // 将四个Fragment放入集合中
		/**
		 * FragmentPagerAdapter(FragmentManager fm) 后面是一个FragmentManager类型参数
		 * 整个过程跟Listview差不多
		 */
		adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

			@Override
			public int getCount() {
				// Fragment的个数
				return listFragment.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				// 具体哪一个Fragment
				return listFragment.get(arg0);
			}
		};
		viewPager.setAdapter(adapter);
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// 当前的item
				int item = viewPager.getCurrentItem();
				initBackground();
				switch (item) {
				case 0:
					butChat.setBackgroundResource(R.drawable.p12);
					break;
				case 1:
					butContact.setBackgroundResource(R.drawable.p22);
					break;
				case 2:
					butFind.setBackgroundResource(R.drawable.p32);
					break;
				case 3:
					butI.setBackgroundResource(R.drawable.p42);
					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

			}
		});
	}

	/**
	 * 3.初始化监听，这是linearLayout的监听（linearLayout和button之间焦点的问题，把button的焦点设为false）
	 */
	private void initClick() {
		linearChat.setOnClickListener(this);
		linearContact.setOnClickListener(this);
		linearFind.setOnClickListener(this);
		linearI.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		initBackground();  
		switch (v.getId()) {
		case R.id.linear1:
			butChat.setBackgroundResource(R.drawable.p12);
			viewPager.setCurrentItem(0);
			break;
		case R.id.linear2:
			butContact.setBackgroundResource(R.drawable.p22);
			viewPager.setCurrentItem(1);
			break;
		case R.id.linear3:
			butFind.setBackgroundResource(R.drawable.p32);
			viewPager.setCurrentItem(2);
			break;
		case R.id.linear4:
			butI.setBackgroundResource(R.drawable.p42);
			viewPager.setCurrentItem(3);
			break;
		default:
			break;
		}
	}

	/**
	 * 初始化按钮图片默认为没有选中
	 */
	private void initBackground () {
		butChat.setBackgroundResource(R.drawable.p11);
		butContact.setBackgroundResource(R.drawable.p21);
		butFind.setBackgroundResource(R.drawable.p31);
		butI.setBackgroundResource(R.drawable.p41);
	}
}
           

其中一个Fragment类，其他Fragment一样：

package org.great.viewpagerweixin;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ViewPage_chat extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.viewpage_chat, container,false);
		return view;
	}
}
           

接下来是layout的xml代码

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" >

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

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

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

</LinearLayout>
           

bottom.xml:  （ imageButton 设置clickable为false）

</pre><p></p><p></p><pre name="code" class="html"><?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:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/but1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/p12"
            android:clickable="false" /> 
            <!--clickable="false" 设置为没有点击事件 -->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="聊天" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/but2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/p21"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="通讯录" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/but3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/p31"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="发现" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/but4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/p41"
            android:clickable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="我" />
    </LinearLayout>

</LinearLayout>
           

其他代码省略~