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