ViewPager+Fragment又探：和TAB滑动条一起三者结合
ViewPager+Fragment再探：和TAB滑动条一起三者结合
Fragment前篇：
《Android Fragment初探：静态Fragment组成Activity》
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 <TextView 14 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 <TextView 23 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 <TextView 32 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 <ImageView 42 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.ViewPager 51 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 stub 25 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 @Override 21 public Fragment getItem(int arg0){ 22 return pFragment.get(arg0); 23 } 24 25 @Override 26 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 @Override 121 public void onPageScrolled(int arg0, float arg1, int arg2) { 122 } 123 124 @Override 125 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 @Override 139 public void onClick(View v){ 140 vp.setCurrentItem(num); 141 } 142 } 143 144 }