Android - Fragment+ViewPager结合使用

这篇作为详细回顾Fragment的最后一篇。

第一篇：http://blog.csdn.net/u014470702/article/details/48139579 为什么使用Fragment，Fragment的生命周期及各个生命期我们可以做的事，静态创建Fragment

第二篇：http://blog.csdn.net/u014470702/article/details/48157189 动态创建Fragment，FragmentManager和FragmentTransaction的常用API

第三篇：http://blog.csdn.net/u014470702/article/details/48173931 Fragment与Activity的交互，使用DialogFragment

本篇：Fragment与ViewPager结合使用

首先看一下效果图

这就是ViewPager，当然微信也是ViewPager。ViewPager其实很常见了，跟fragment结合起来使用还是比较好用的。知道了ViewPager的用法，只需要将里面的view替换成Fragment就可以了。这里我就直接上代码，里面注释掉的就是ViewPager没有使用fragment填充的代码。

public class MainActivity extends FragmentActivity {private View view1,view2,view3;//要滑动的页private ViewPager mViewPager;//viewpagerprivate List<View> viewList;//滑动的页添加到List列表private List<Fragment> fragments;//private PagerTabStrip mPagerTabStrip;//页卡标题//private List<String> mTitles;//标题listprivate ImageView tabImage; //页卡指示器private int offset = 0;//指示器偏移量private int moveI = 0;//进度条移动值private int currIndex = 0;//当前页卡编号private int tabWidth;//指示器的宽度private TextView tab1Title,tab2Title,tab3Title;//标题private int screenWidth = 0;private RelativeLayout.LayoutParams layoutParams;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initTabView();initTabTitle();initViewPager();}private void initTabTitle() {tab1Title = (TextView) findViewById(R.id.id_tab1);tab2Title = (TextView) findViewById(R.id.id_tab2);tab3Title = (TextView) findViewById(R.id.id_tab3);tab1Title.setOnClickListener(new TextListener(0));tab2Title.setOnClickListener(new TextListener(1));tab3Title.setOnClickListener(new TextListener(2));}class TextListener implements OnClickListener{int index;public TextListener(int i) {index = i;}@Overridepublic void onClick(View v) {mViewPager.setCurrentItem(index);}}private void initTabView() {tabImage = (ImageView) findViewById(R.id.id_tab_image);tabWidth = BitmapFactory.decodeResource(getResources(), R.drawable.tab).getWidth();DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);screenWidth = dm.widthPixels;offset = (screenWidth/3 - tabWidth)/2;Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);tabImage.setImageMatrix(matrix);layoutParams = (LayoutParams) tabImage.getLayoutParams();}private void initViewPager() {mViewPager = (ViewPager) findViewById(R.id.id_viewpager);Log.i("i_viewpager", "viewpagerw=="+mViewPager.getWidth());//mPagerTabStrip = (PagerTabStrip) findViewById(R.id.id_pagertab);//mPagerTabStrip.setTabIndicatorColor(Color.BLUE);//mPagerTabStrip.setDrawFullUnderline(false);//mPagerTabStrip.setTextSpacing(50);////LayoutInflater inflater = getLayoutInflater().from(this);//view1 = inflater.inflate(R.layout.view1, null);//view2 = inflater.inflate(R.layout.view2, null);//view3 = inflater.inflate(R.layout.view3, null);//viewList = new ArrayList<View>();//viewList.add(view1); //viewList.add(view2); //viewList.add(view3); //mTitles = new ArrayList<String>();//mTitles.add("Tab1");//mTitles.add("Tab2");//mTitles.add("Tab3");//mViewPager.setAdapter(new MyViewPagerAdapter(viewList,mTitles));fragments = new ArrayList<Fragment>();Fragment1 fragment1 = new Fragment1();Fragment2 fragment2 = new Fragment2();Fragment3 fragment3 = new Fragment3();fragments.add(fragment1);fragments.add(fragment2);fragments.add(fragment3);//mViewPager.setAdapter(new MyViewPagerAdapter(viewList));mViewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),fragments));mViewPager.setCurrentItem(0);mViewPager.setOnPageChangeListener(new MyOnPagerChangeListener());}class MyFragmentAdapter extends FragmentPagerAdapter{private List<Fragment> fragments;public MyFragmentAdapter(FragmentManager fm,List<Fragment> fragments) {super(fm);this.fragments = fragments;}@Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn fragments.get(arg0);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn fragments.size();}}class MyViewPagerAdapter extends PagerAdapter{private List<View> mListView;//private List<String> mTitle;//public MyViewPagerAdapter(List<View> data,List<String> title) {//this.mListView = data;//this.mTitle = title;//}public MyViewPagerAdapter(List<View> data) {this.mListView = data;}//@Override//public CharSequence getPageTitle(int position) {//// TODO Auto-generated method stub//return mTitle.get(position);//}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.addView(mListView.get(position), position);return mListView.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListView.get(position));}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mListView.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}}public class MyOnPagerChangeListener implements OnPageChangeListener{int tab1_tab2 = offset*2 + tabWidth;//tab1到tab2的偏移量@Overridepublic void onPageScrollStateChanged(int arg0) {}/** * @param * position : 当前位置 * positionOffset:滑动的比例 * positionOffsetPixels:滑动的像素 */@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {tabMove(position, positionOffsetPixels);}@Overridepublic void onPageSelected(int arg0) {//如果滑动时滑条不需要移动，可以使用这个//Animation animation = new TranslateAnimation(tab1_tab2*currIndex, tab1_tab2*arg0,0,0);//currIndex = arg0;//animation.setFillAfter(true);//animation.setDuration(300);//tabImage.startAnimation(animation);}}private void tabMove(int position, int positionOffsetPixels) {moveI = (tabWidth+2*offset)*position + (tabWidth+2*offset)*positionOffsetPixels/screenWidth;Log.i("i_viewpager", "moveI=="+moveI);layoutParams.leftMargin = moveI;tabImage.setLayoutParams(layoutParams);}}

布局文件：

activity_main.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"     >        <LinearLayout         android:id="@+id/id_tab"        android:layout_width="match_parent"        android:layout_height="40dp"        android:orientation="horizontal">        <TextView             android:id="@+id/id_tab1"            android:layout_width="fill_parent"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:textSize="20sp"            android:text="页卡1"/>        <TextView             android:id="@+id/id_tab2"            android:layout_width="fill_parent"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:textSize="20sp"            android:text="页卡2"/>        <TextView             android:id="@+id/id_tab3"            android:layout_width="fill_parent"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:textSize="20sp"            android:text="页卡3"/>    </LinearLayout>        <RelativeLayout         android:id="@+id/id_img_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/id_tab"        >        <ImageView         android:id="@+id/id_tab_image"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/tab"        />    </RelativeLayout>            <android.support.v4.view.ViewPager         android:id="@+id/id_viewpager"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_below="@id/id_img_layout"        >    </android.support.v4.view.ViewPager></RelativeLayout>

这里自定义了上面的导航栏。系统给的实在是不好用。

注意：使用FragmentAdapterListener时,是需要该activity继承FragmentActivity的，因为他的构造函数的需要。viewpager只能从v4包拿到，这里面所有的相关的都是从v4包拿到的，v4包中想要拿到FragmentManager只能继承FragmentActivity。

这里面最关键的就是onPageChangeListener的重写，在这里面实现界面与人的交互。至于滑动条移动的像素可以自己动手画一下算一下。

至此我的回顾Fragment就算告一段落了。可以自己模仿写一个微信的界面，只是在监听活动时对下面自定义的导航做一个动画的改变即可。