你的位置:首页 > 操作系统

[操作系统]ViewPager+Fragment再探:和TAB滑动条一起三者结合


Fragment前篇:

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

ViewPager前篇:

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

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

 

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

程序的总体结构如下:

(其中listview.

 

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

layout1.

 1 <??> 2 <LinearLayout ="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.

 1 <RelativeLayout ="http://schemas.android.com/apk/res/android" 2         ="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 }