ViewPager+Fragment又探：和TAB滑动条一起三者结合_Android

ViewPager+Fragment再探：和TAB滑动条一起三者结合

Fragment前篇：

《Android Fragment初探：静态Fragment组成Activity》

ViewPager前篇：

《Android ViewPager初探：让页面滑动起来》

《Android ViewPager再探：增加滑动指示条》

这篇算是对之前学习写下的3篇博客知识总结吧~

程序的总体结构如下：

（其中listview.xml为测试项，可忽略）

其中，layout1对应Fragment1，以此类推；layout1中有listview，layout2和layout3只有根布局LinearLayout，区别是背景颜色。

layout1.xml代码如下：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3               android:layout_width="match_parent" 4               android:layout_height="match_parent" 5               android:background="#ffffff" 6               android:orientation="vertical" > 7  8     <ListView 9         android:id="@+id/lv"10         android:layout_width="match_parent"11         android:layout_height="match_parent"/>12 </LinearLayout>

activity_main.xml和《Android ViewPager再探：增加滑动指示条》一文中一样，下面是代码：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2                 xmlns:tools="http://schemas.android.com/tools" 3                 android:layout_width="match_parent" 4                 android:layout_height="match_parent" 5                 tools:context=".MainActivity"> 6  7     <LinearLayout 8         android:id="@+id/ll_tab" 9         android:layout_width="match_parent"10         android:layout_height="45dp"11         android:background="#FFFFFF" >12 13         <TextView14             android:id="@+id/tv_first"15             android:layout_width="match_parent"16             android:layout_height="match_parent"17             android:layout_weight="1"18             android:gravity="center"19             android:text="First"20             android:textSize="20sp" />21 22         <TextView23             android:id="@+id/tv_second"24             android:layout_width="match_parent"25             android:layout_height="match_parent"26             android:layout_weight="1"27             android:gravity="center"28             android:text="Second"29             android:textSize="20sp" />30 31         <TextView32             android:id="@+id/tv_third"33             android:layout_width="match_parent"34             android:layout_height="match_parent"35             android:layout_weight="1"36             android:gravity="center"37             android:text="Third"38             android:textSize="20sp" />39     </LinearLayout>40 41     <ImageView42         android:id="@+id/cursor"43         android:layout_below="@id/ll_tab"44         android:layout_width="match_parent"45         android:layout_height="wrap_content"46         android:scaleType="matrix"47         android:src="@mipmap/slidebar"48         android:contentDescription="slidebar"/>49 50     <android.support.v4.view.ViewPager51         android:id="@+id/viewpager"52         android:layout_below="@id/cursor"53         android:layout_width="wrap_content"54         android:layout_height="wrap_content"55         android:flipInterval="30"56         android:persistentDrawingCache="animation" />57 58 </RelativeLayout>

再来看布局的实现部分：

因为layout2和layout3里没什么东西，所以以Fragment1为例：

 1 package com.example.fragmentviewpager.fragmentviewpager; 2  3 import android.os.Bundle; 4 import android.support.v4.app.Fragment; 5 import android.view.LayoutInflater; 6 import android.view.View; 7 import android.view.ViewGroup; 8 import android.widget.ArrayAdapter; 9 import android.widget.ListView;10 11 import java.util.ArrayList;12 import java.util.List;13 14 /**15  * Created by LT on 2015/7/29.16  */17 public class Fragment1 extends Fragment {18 19     private ListView listView;20 21 22     public View onCreateView(LayoutInflater inflater, ViewGroup container,23                              Bundle savedInstanceState) {24         // TODO Auto-generated method stub25         View view= inflater.inflate(R.layout.layout1, container, false);26         listView = (ListView)view.findViewById(R.id.lv);27         ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(getActivity(),28                 android.R.layout.simple_list_item_1,getData());29         listView.setAdapter(arrayAdapter);30 31         return view;32     }33 34     private List<String> getData(){35         List<String> data = new ArrayList<String>();36         for(int i = 0;i <20;i++) {37             data.add(i+"");38         }39         return data;40     }41 }

此处给layout1里的listview添加了20项，名字分别是1——20，用的适配器是ArrayAdapter。

考虑到有三个fragment存在（Fragment1，Fragment2，Fragment3），为了方便viewpager管理，我们自定义一个适配器，继承自FragmentPagerAdapter：

FPAdapter.java:

 1 package com.example.fragmentviewpager.fragmentviewpager; 2  3 import android.support.v4.app.Fragment; 4 import android.support.v4.app.FragmentManager; 5 import android.support.v4.app.FragmentPagerAdapter; 6  7 import java.util.List; 8  9 /**10  * Created by LT on 2015/7/29.11  */12 public class FPAdapter extends FragmentPagerAdapter {13     private List<Fragment> pFragment;14 15     public FPAdapter(FragmentManager fragmentManager,List<Fragment> fragments){16         super(fragmentManager);17         this.pFragment = fragments;18     }19 20     @Override21     public Fragment getItem(int arg0){22         return pFragment.get(arg0);23     }24 25     @Override26     public int getCount(){27         return pFragment.size();28     }29 }

FragmentPagerAdapter只需要重写

public Fragment getItem(int arg0)

public int getCount()

这两个函数即可。

与之对应的适配器初始化和设定代码如下：

 1 //构造适配器 2         fragments=new ArrayList<Fragment>(); 3         fragments.add(new Fragment1()); 4         fragments.add(new Fragment2()); 5         fragments.add(new Fragment3()); 6         FPAdapter adapter = new FPAdapter(getSupportFragmentManager(), fragments); 7  8 //设定适配器 9         vp = (ViewPager)findViewById(R.id.viewpager);10         vp.setAdapter(adapter);

和上一篇《Android ViewPager再探：增加滑动指示条》的代码相结合，最终的MainActivity如下：

  1 package com.example.fragmentviewpager.fragmentviewpager;  2   3 import android.graphics.BitmapFactory;  4 import android.graphics.Matrix;  5 import android.os.Bundle;  6 import android.support.v4.app.Fragment;  7 import android.support.v4.app.FragmentActivity;  8 import android.support.v4.view.ViewPager;  9 import android.util.DisplayMetrics; 10 import android.view.View; 11 import android.view.animation.Animation; 12 import android.view.animation.TranslateAnimation; 13 import android.widget.ImageView; 14 import android.widget.TextView; 15  16 import java.util.ArrayList; 17 import java.util.List; 18  19  20 public class MainActivity extends FragmentActivity { 21     private TextView first,second,third; 22  23     /*滑动条相关定义*/ 24     private ImageView cursor; 25     private int bmp_width = 0;//游标宽度 26     private int offset = 0;//游标图片偏移量 27     private int number = 0;//当前页面编号 28     private ViewPager vp; 29     private List<Fragment> fragments; 30  31     @Override 32     protected void onCreate(Bundle savedInstanceState) { 33         super.onCreate(savedInstanceState); 34         setContentView(R.layout.activity_main); 35  36         //TAB初始化 37         first = (TextView)findViewById(R.id.tv_first); 38         second = (TextView)findViewById(R.id.tv_second); 39         third = (TextView)findViewById(R.id.tv_third); 40  41         //构造适配器 42         fragments=new ArrayList<Fragment>(); 43         fragments.add(new Fragment1()); 44         fragments.add(new Fragment2()); 45         fragments.add(new Fragment3()); 46         FPAdapter adapter = new FPAdapter(getSupportFragmentManager(), fragments); 47  48         //初始化指示器位置 49         initCursorPos(); 50  51         //设定适配器 52         vp = (ViewPager)findViewById(R.id.viewpager); 53         vp.setAdapter(adapter); 54  55         vp.setCurrentItem(0);//设置当前页 56         vp.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变 57  58         /*Tab页面监听*/ 59         first.setOnClickListener(new TabOnClickListener(0)); 60         second.setOnClickListener(new TabOnClickListener(1)); 61         third.setOnClickListener(new TabOnClickListener(2)); 62     } 63  64     //初始化指示器位置 65     public void initCursorPos() { 66         // 初始化动画 67         cursor = (ImageView) findViewById(R.id.cursor); 68         bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar) 69                 .getWidth();// 获取图片宽度 70  71         DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象 72         getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中 73         int s_width = dm.widthPixels;// 获取分辨率宽度 74  75         offset = (s_width / fragments.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间) 76  77         Matrix matrix = new Matrix(); 78         matrix.postTranslate(offset, 0); 79         cursor.setImageMatrix(matrix);// 设置动画初始位置 80     } 81  82     //页面改变监听器 83     public class NewPageChangeListener implements ViewPager.OnPageChangeListener { 84  85         int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量 86         int two = one * 2;// 页卡1 -> 页卡3 偏移量 87  88         @Override 89         public void onPageSelected(int arg0) { 90             Animation animation = null; 91             switch (arg0) { 92                 case 0: 93                     if (number == 1) { 94                         animation = new TranslateAnimation(one, 0, 0, 0); 95                     } else if (number == 2) { 96                         animation = new TranslateAnimation(two, 0, 0, 0); 97                     } 98                     break; 99                 case 1:100                     if (number == 0) {101                         animation = new TranslateAnimation(offset, one, 0, 0);102                     } else if (number == 2) {103                         animation = new TranslateAnimation(two, one, 0, 0);104                     }105                     break;106                 case 2:107                     if (number == 0) {108                         animation = new TranslateAnimation(offset, two, 0, 0);109                     } else if (number == 1) {110                         animation = new TranslateAnimation(one, two, 0, 0);111                     }112                     break;113             }114             number = arg0;115             animation.setFillAfter(true);// True:图片停在动画结束位置116             animation.setDuration(300);117             cursor.startAnimation(animation);118         }119 120         @Override121         public void onPageScrolled(int arg0, float arg1, int arg2) {122         }123 124         @Override125         public void onPageScrollStateChanged(int arg0) {126         }127     }128 129 130     /*Tab页面点击监听*/131     public class TabOnClickListener implements View.OnClickListener{132         private int num = 0;133 134         public TabOnClickListener(int index){135             num = index;136         }137 138         @Override139         public void onClick(View v){140             vp.setCurrentItem(num);141         }142     }143 144 }