Android ViewPager和Fragment实现仿微信导航界面及滑动效果

1 先看看实现的效果：

主布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.troy.fragmentnavigation.MainActivity">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/blue">
<TextView
android:id="@+id/title"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的订单"
android:textSize="20sp"
android:textColor="@android:color/white"/>
</RelativeLayout>

<android.support.v4.view.ViewPager
android:id="@+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@android:color/white"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:orientation="horizontal"
android:layout_marginTop="1dp"
android:gravity="center_vertical"
android:baselineAligned="false">
<TextView
android:id="@+id/item_weixin"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:text="微信"
android:textSize="15dp"
android:textColor="@drawable/main_tab_text_color"/>
<TextView
android:id="@+id/item_tongxunlu"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:text="通讯录"
android:textSize="15dp"
android:textColor="@drawable/main_tab_text_color"/>
<TextView
android:id="@+id/item_faxian"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:text="发现"
android:textSize="15dp"
android:textColor="@drawable/main_tab_text_color"/>
<TextView
android:id="@+id/item_me"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:text="我"
android:textSize="15dp"
android:textColor="@drawable/main_tab_text_color"/>
</LinearLayout>

</LinearLayout>

MainActivity核心代码如下：

给FragmentList添加数据

</pre><p>mFragmentList.add(oneFragment); </p><p>mFragmentList.add(twoFragment); </p><p>mFragmentList.add(threeFragment); </p><p>mFragmentList.add(fouthFragmen);</p><pre>

ViewPager的监听事件--滑动ViewPager的时候触发修改文本的操作

mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);
vp.setOffscreenPageLimit(4);//ViewPager的缓存为4帧
vp.setAdapter(mFragmentAdapter);
vp.setCurrentItem(0);//初始设置ViewPager选中第一帧
item_weixin.setTextColor(Color.parseColor("#66CDAA"));

//ViewPager的监听事件
vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}
@Override
public void onPageSelected(int position) {
/*此方法在页面被选中时调用*/
title.setText(titles[position]);
changeTextColor(position);
}

@Override
public void onPageScrollStateChanged(int state) {
/*此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。
arg0 ==1的时辰默示正在滑动，
arg0==2的时辰默示滑动完毕了，
arg0==0的时辰默示什么都没做。*/
}
});

点击底部Text 动态修改ViewPager的内容

/**点击底部Text 动态修改ViewPager的内容，底部是采用4个textView，当然也可以使用RadioButton，*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.item_weixin:
vp.setCurrentItem(0, true);
break;
case R.id.item_tongxunlu:
vp.setCurrentItem(1, true);
break;
case R.id.item_faxian:
vp.setCurrentItem(2, true);
break;
case R.id.item_me:
vp.setCurrentItem(3, true);
break;
}
}

FragmentAdapter

public class FragmentAdapter extends FragmentPagerAdapter {

List<Fragment> fragmentList = new ArrayList<Fragment>();
public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}

@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}

@Override
public int getCount() {
return fragmentList.size();
}

}

源码下载