Android仿微信界面--使用FragmentPagerAdapter,viewpager实现(慕课网笔记)

来自慕课网：http://www.imooc.com/video/5904

使用FragmenPagerAdapter和viewpager实现微信界面，与http://blog.csdn.net/hnyzwtf/article/details/50296013不同的是，可以左右滑动切换聊天界面；

效果图：

总体设计：一个标题栏top.xml,一个底部导航栏bottom.xml，中间内容显示区域使用viewpager实现，每一个导航按钮对应一个布局文件，微信按钮对应tab01.xml,朋友对应tab02.xml,通讯录对应tab03.xml,设置对应tab04.xml，每一个布局用fragment实现分别是WeixinFragment,FrdFragment,AddressFragment,SettingFragment，通过适配器fragmentPagerAdapter将4个布局的fragment和viewpager关联起来，从而利用viewpager就可以滑动切换内容区域了。

1 布局文件设计

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/top"/>
   	<android.support.v4.view.ViewPager
   	    android:id="@+id/id_viewpager"
   	    android:layout_width="match_parent"
   	    android:layout_height="0dp"
   	    android:layout_weight="1">
   	    
   	</android.support.v4.view.ViewPager>
   	  
   	
   <include layout="@layout/bottom"/>

</LinearLayout>

其他布局和上述提到的另一篇布局一样

2 MainActivity

package com.example.imooc_tab03;

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

public class MainActivity extends FragmentActivity implements OnClickListener {
	private ViewPager viewpager;
	private FragmentPagerAdapter mAdapter;//Fragment适配器，viewpager的适配器
	private List<Fragment> mFragments;//适配器的数据源
	
	private LinearLayout mTabWeixin;
	private LinearLayout mTabFrd;
	private LinearLayout mTabAddress;
	private LinearLayout mTabSetting;
	
	private ImageButton mImgWeixin;
	private ImageButton mImgFrd;
	private ImageButton mImgAddress;
	private ImageButton mImgSetting;
	
	private Fragment mTab01;
	private Fragment mTab02;
	private Fragment mTab03;
	private Fragment mTab04;

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

	private void initEvent() {
		mTabWeixin.setOnClickListener(this);
		mTabFrd.setOnClickListener(this);
		mTabAddress.setOnClickListener(this);
		mTabSetting.setOnClickListener(this);
		
	}

	private void initView() {
		viewpager = (ViewPager) findViewById(R.id.id_viewpager);
		mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
		mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
		mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
		mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
		mImgWeixin = (ImageButton)findViewById(R.id.id_tab_weixin_img);
		mImgFrd = (ImageButton)findViewById(R.id.id_tab_frd_img);
		mImgAddress = (ImageButton)findViewById(R.id.id_tab_address_img);
		mImgSetting = (ImageButton)findViewById(R.id.id_tab_setting_img);
		
		mFragments = new ArrayList<Fragment>();//初始化数据源
		mTab01 = new WeixinFragment();
		mTab02 = new FrdFragment();
		mTab03 = new AddressFragment();
		mTab04 = new SettingFragment();
		//将4个fragment添加到数据源中
		mFragments.add(mTab01);
		mFragments.add(mTab02);
		mFragments.add(mTab03);
		mFragments.add(mTab04);
		//初始化适配器
		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
			
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return mFragments.size();
			}
			
			@Override
			public Fragment getItem(int arg0) {
				// TODO Auto-generated method stub
				return mFragments.get(arg0);//通过位置返回不同的fragment
			}
		};
		/*
		 * Android中可变的控件，比如ViewPager，listview,gridview，一个控件对应一个适配器，一个适配器对应一系列的数据源
		 * 数据源一般都是一个list
		 * 
		 * */
		viewpager.setAdapter(mAdapter);//为viewpager设置一个适配器
		//实现当viewpager滑动时（滑动页面改变）底部的导航按钮同步改变
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				int currentItem = viewpager.getCurrentItem();
				setTab(currentItem);
			}
			
			@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 boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	@Override
	public void onClick(View v) {
		
		switch (v.getId()) {
		case R.id.id_tab_weixin:
			setSelect(0);
			break;
		case R.id.id_tab_frd:
			setSelect(1);		
			break;
		case R.id.id_tab_address:
			setSelect(2);
			break;
		case R.id.id_tab_setting:
			setSelect(3);
			break;

		default:
			break;
		}
		
	}
	/*
	 * 将图片设置为亮色的；切换显示内容的fragment
	 * */
	private void setSelect(int i) {
		setTab(i);//alt + shift + m可以提取选择的代码为方法
		viewpager.setCurrentItem(i);
	}

	private void setTab(int i) {
		resetImg();
		switch (i) {
		case 0:
			mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
			break;
		case 1:
			mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);		
			break;
		case 2:
			mImgAddress.setImageResource(R.drawable.tab_address_pressed);
			break;
		case 3:
			mImgSetting.setImageResource(R.drawable.tab_settings_pressed);
			break;

		default:
			break;
		}
	}

	private void resetImg() {
		mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
		mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
		mImgAddress.setImageResource(R.drawable.tab_address_normal);
		mImgSetting.setImageResource(R.drawable.tab_settings_normal);
	}
}

源代码在这里：http://download.csdn.net/detail/hnyzwtf/9359371