ViewPager、Fragment、Matrix综合使用实现Tab滑页效果
原文地址：http://www.cnblogs.com/kross/p/3372987.html
我们实现一个上面是一个可以左右滑动的页面，下面是三个可点击切换的tab按钮，tab按钮上还有一个激活条。效果如下图所示：
----------------我是分割线--------------------
--------------------------我是分割线，下面的图片表示往右滑动，白条中的小机器人往右滑动-------------------------
--------------------------我是分割线，切换到第二个页面，tab中的第二个被激活，字呈白色-----------------------
------------------我是分割线-------------------
OK，效果就是如上所示的效果。现在开始一步一步的介绍如何实现。
1.创建好基础的布局文件。
整个页面是一个LinearLayout，如果你用其他的布局也是可以的，在下只是图一个方便了。
根据最终效果，我们将整个布局分为三个部分：
第一部分是上面那一大块有颜色的区域，这是一个ViewPager，里面的内容是通过Fragment加载进来的。
第二部分是那个在白条中间的小机器人这一块，这个作为激活条（自己编的名词，就是表名当前的tab是被激活的），就是一个ImageView。
第三部分是最底下的三个tab，是一个水平的LinearLayout，里面每一个tab都是ImageView+TextView构成的。
注意这里tab这个布局是被重复使用的，因为有三个嘛，为了代码重用，我们可以使用<include>标签。
所以，我们先写好每个小tab的布局（/res/layout/tab.xml），代码如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/tab_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/tab_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/tab_text" android:gravity="center" android:textColor="#cccccc"/> </LinearLayout>
为了方便，就直接使用启动图标的图片了，啊哈哈……啊哈哈哈……
接下来我们去写主体页面的布局（/res/layout/activity_main.xml），代码如下：
注意<include>标签的使用哦~
<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=".MainActivity" > <!-- ViewPager的使用必须是完整的名字哦 --> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1"/> <!-- 这是所谓的激活条，为了方便，也直接使用启动图标的图片了 --> <ImageView android:id="@+id/active_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/ic_launcher" android:background="#ffffff"/> <!-- 下面的线性布局是三个tab放置的区域 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <!-- 使用include标签，可以直接重用xml，这是我在《Android UI 基础教程》中发现的~\(^o^)/~ --> <include android:id="@+id/tab1" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" layout="@layout/tab"/> <include android:id="@+id/tab2" android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" layout="@layout/tab"/> <include android:id="@+id/tab3" android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" layout="@layout/tab"/> </LinearLayout> </LinearLayout>
OK，这样我们整个页面的框架就有了。
2.给ViewPager添加页面
OKOK，在这一步呢，我们要做的是给ViewPager这个控件添加页面，我们从一开始就打算添加三个页面的，所以上面才有3个tab，如果你需要更多，都是一样的道理。
ViewPager这个控件使用起来是非常方便的，在给它添加好页面后，它自身可以实现左右滑动切换的效果，非常滴好用啊。
ViewPager最重要的是给它设置适配器（setAdapter），我们期望的结果是，每个页面里，都有自己的控件，操作这些控件的方法都可以分别写在各自的Fragment中，而不是全部都写在MainActivity中。所以，我们要让ViewPager里面装载的是Fragment，因此，我们需要去拓展（extends）一个FragmentPagerAdapter。
实现FragmentPagerAdapter又需要事先准备好三个Fragment，三个Fragment又需要三个独立的布局。
因此我们需要做的第一件事是准备三个我们期望的布局。
为了简单起见，我们准备layout1、layout2、layout3（/res/layout/layout*.xml）这样三个布局，这三个布局的背景颜色都是不一样的，里面都放了一个按钮，为了能够在后面实现每个页面独立的功能。
布局文件的代码如下：
<?xml version="1.0" encoding="utf-8"?> <!-- 这是layout1.xml的布局代码，另外两个布局文件就是背景颜色和按钮的id，text改变了而已 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#ff0000"> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="button1"/> </LinearLayout>
接下来，我们要拓展（extends）三个Fragment，分别是Fragment1.java、Fragment2.java、Fragment3.java（/src/fragment/Fragment*.java）。代码如下：
推荐不同功能的类，建立不同的包来进行分类管理。
public class Fragment1 extends Fragment { private View layout = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { this.layout = inflater.inflate(R.layout.layout1, null); //从这里到return之间，你可以为这个Fragment添加其功能。 Button b = (Button)this.layout.findViewById(R.id.button1); b.setOnClickListener(new ButtonListener()); return this.layout; } public class ButtonListener implements OnClickListener { @Override public void onClick(View v) { Toast.makeText(getActivity(), "button1", Toast.LENGTH_SHORT).show(); } } }
OKOK，三个Fragment也准备好了，接下来实现一个FragmentPagerAdapter（/src/adapter/FragmentAdapter.java），代码如下：
public class FragmentAdapter extends FragmentPagerAdapter{ //这个是存放三个Fragment的数组，待会从MainActivity中传过来就行了 private ArrayList<Fragment> fragmentArray; //自己添加一个构造函数从MainActivity中接收这个Fragment数组 public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> fragmentArray) { this(fm); this.fragmentArray = fragmentArray; } public FragmentAdapter(FragmentManager fm) { super(fm); } //这个函数的作用是当切换到第arg0个页面的时候调用。 @Override public Fragment getItem(int arg0) { return this.fragmentArray.get(arg0); } @Override public int getCount() { return this.fragmentArray.size(); } }
实现好Adapter后，我们就去MainActivity（src/com.kross.test/MainActivity.java）中配置一下。
在MainActivity中，我们需要做如下几件事情：
1.准备好Fragment，把它们添加进数组。
2.获取到ViewPager的实例，为其设置适配器。
3.设置ViewPager当前显示第一页。
因为在FragmentAdapter的构造函数中需要一个FragmentManager，所以，MainActivity应该继承FragmentActivity。
代码如下：
public class MainActivity extends FragmentActivity { private ViewPager viewPager = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);this.initViewPager(); }
private void initViewPager() { //获取到ViewPager的实例 this.viewPager = (ViewPager)findViewById(R.id.viewpager); //构造好存放Fragment的数组 ArrayList<Fragment> fragmentArray = new ArrayList<Fragment>(); fragmentArray.add(new Fragment1()); fragmentArray.add(new Fragment2()); fragmentArray.add(new Fragment3()); //为ViewPager设置适配器 this.viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentArray)); //设置当前显示的页面 this.viewPager.setCurrentItem(0); } }
3.为下面的三个tab添加点击事件，并设置好相应的激活效果。
完成上面两步，应该可以实现三个页面滑动的效果。但下面的三个Tab是没有被用上的。我们这步要做到的事情是：点击下面的tab，切换到相应的页面，并激活tab，滑动上面的页面，并激活tab。
这里需要使用到一个接口OnPageChangeListener。这个接口中有三个方法，都是在页面滑动的时候会被调用。我们需要使用这个接口，让页面滑动的时候激活相应的tab。
现在来实现该接口PagerListener（/src/listener/PagerListener.java），代码如下：
public class PagerListener implements OnPageChangeListener { private ArrayList<View> tabArray = null;private final static String TAG = "PagerListener"; public PagerListener(ArrayList<View> tabArray) { this.tabArray = tabArray; } @Override //这个…… public void onPageScrollStateChanged(int arg0) { Log.i(TAG, "onPageScrollStateChanged:" + Integer.toString(arg0)); } @Override //这个方法是页面滚动的时候被调用，我们将在这个方法里完成对激活条的操作 public void onPageScrolled(int arg0, float arg1, int arg2) { Log.i(TAG, "onPageScrolled"); } @Override //这个方法是当页面切换完毕后被调用， public void onPageSelected(int arg0) { Log.i(TAG, "onPageSelected"); //先将所有的tab设置成灰色的 for (View item : this.tabArray) { ((TextView)item.findViewById(R.id.tab_text)).setTextColor(Color.rgb(20, 20, 20)); } //再将当前的tab设置成白色的，表示激活状态 ((TextView)this.tabArray.get(arg0).findViewById(R.id.tab_text)).setTextColor(Color.WHITE); } }
接下来，我们需要实现一个OnClickListener。
TabListener（src/listener/TabListener.java），代码如下：
public class TabListener implements OnClickListener { private ViewPager viewPager = null; public TabListener(ViewPager v) { this.viewPager = v; } @Override public void onClick(View arg0) { switch (arg0.getId()) { case R.id.tab1: this.viewPager.setCurrentItem(0); break; case R.id.tab2: this.viewPager.setCurrentItem(1); break; case R.id.tab3: this.viewPager.setCurrentItem(2); break; } } }
OKOK，接下来，我们只需要在MainActivity中获取tab的实例，给tab设置监听器，给ViewPager设置监听器就OK了。
MainActivity的代码变成如下这样：
public class MainActivity extends FragmentActivity { private ViewPager viewPager = null; //三个tab private View tab1 = null; private View tab2 = null; private View tab3 = null;//存放tab的数组 private ArrayList<View> tabArray = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);this.initViewPager(); this.initTab(); this.setListener(); }private void initTab() { this.tab1 = findViewById(R.id.tab1); this.tab2 = findViewById(R.id.tab2); this.tab3 = findViewById(R.id.tab3); this.tabArray = new ArrayList<View>(); this.tabArray.add(tab1); this.tabArray.add(tab2); this.tabArray.add(tab3); } private void initViewPager() { //获取到ViewPager的实例 this.viewPager = (ViewPager)findViewById(R.id.viewpager); //构造好存放Fragment的数组 ArrayList<Fragment> fragmentArray = new ArrayList<Fragment>(); fragmentArray.add(new Fragment1()); fragmentArray.add(new Fragment2()); fragmentArray.add(new Fragment3()); //为ViewPager设置适配器 this.viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentArray)); //设置当前显示的页面 this.viewPager.setCurrentItem(0); } private void setListener() { TabListener tl = new TabListener(this.viewPager); this.tab1.setOnClickListener(tl); this.tab2.setOnClickListener(tl); this.tab3.setOnClickListener(tl); this.viewPager.setOnPageChangeListener(new PagerListener(this.tabArray); } }
完成上面的三步，就基本上实现了大部分的功能了。页面可以切换，tab也可以点，有激活效果。
4.使用Matrix让激活条随页面的滑动而滑动。
激活条的滑动，需要使用到OnPageChangeListener接口中的onPageScrolled方法，
该方法有会在页面被滑动的时候调用，将会获取到三个参数，第一个参数为当前页面的下标，第二个参数为滑动距离占屏幕宽度的百分比，第三个参数为实际滑动的像素。
假设我们当前处在0下标的页面，我们从右往左滑动，滑向1下标的页面，在滑动的时候，该方法会一直被调用。
在没有彻底切换到1下标的页面时，第一个参数一直是0，直到彻底切换到1下标的页面。
第二个参数是个[0,1)的浮点数，一滑动，该参数就开始变大 0.12313---->0.23321---->0.31233，当页面快完成彻底切换的时候，也就是该参数将无限逼近1，但不会是1，然后突然变成了0，完成的页面的切换。
第三个参数就很好理解了，我的屏幕宽度是720px，我滑到一般，它的值就是360。
知道了这些，我们需要获取激活条需要移动的长度，以及屏幕的宽度。
tab有三个，所以我们用屏幕宽度/3，这是每个tab的宽度，tab的宽度 - 图片的宽度，这是剩余的空间，剩余的空间 / 2，就是小图片的偏移量（offset）。
激活条图片默认会出现在所在控件位置的最左边，初始的时候，我们就需要将它的位置设置在一个offset之后。
因此MainActivity的代码变成如下这样：
public class MainActivity extends FragmentActivity { private ViewPager viewPager = null; //三个tab private View tab1 = null; private View tab2 = null; private View tab3 = null; //偏移量 private int offset; //图片宽度 private int imageWidth; //存放tab的数组 private ArrayList<View> tabArray = null; private ImageView activeBar = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //获取激活条控件 this.activeBar = (ImageView)findViewById(R.id.active_bar); //获取该激活条的宽度 this.imageWidth = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher).getWidth(); //获取屏幕的宽度 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenWidth = dm.widthPixels; //计算出偏移量 this.offset = (screenWidth / 3 - imageWidth) / 2; this.initViewPager(); this.initTab(); this.setListener(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } private void initTab() { this.tab1 = findViewById(R.id.tab1); this.tab2 = findViewById(R.id.tab2); this.tab3 = findViewById(R.id.tab3); this.tabArray = new ArrayList<View>(); this.tabArray.add(tab1); this.tabArray.add(tab2); this.tabArray.add(tab3); } private void initViewPager() { //获取到ViewPager的实例 this.viewPager = (ViewPager)findViewById(R.id.viewpager); //构造好存放Fragment的数组 ArrayList<Fragment> fragmentArray = new ArrayList<Fragment>(); fragmentArray.add(new Fragment1()); fragmentArray.add(new Fragment2()); fragmentArray.add(new Fragment3()); //为ViewPager设置适配器 this.viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentArray)); //设置当前显示的页面 this.viewPager.setCurrentItem(0); } private void setListener() { TabListener tl = new TabListener(this.viewPager); this.tab1.setOnClickListener(tl); this.tab2.setOnClickListener(tl); this.tab3.setOnClickListener(tl); //注意这里的构造函数 this.viewPager.setOnPageChangeListener(new PagerListener(this.tabArray, this.activeBar, this.offset, this.imageWidth)); } }
需要注意给ViewPager设置监听器的时候，传入了激活条的句柄，偏移量以及图片的宽度。
接下来我们需要修改下PagerListener的代码：
public class PagerListener implements OnPageChangeListener { private ArrayList<View> tabArray = null; private ImageView activeBar = null; private int offset; private int imageWidth; private final static String TAG = "PagerListener"; public PagerListener(ArrayList<View> tabArray, ImageView activeBar, int offset, int iw) { this.tabArray = tabArray; this.activeBar = activeBar; this.offset = offset; this.imageWidth = iw; } @Override //这个…… public void onPageScrollStateChanged(int arg0) { Log.i(TAG, "onPageScrollStateChanged:" + Integer.toString(arg0)); } @Override //这个方法是页面滚动的时候被调用，我们将在这个方法里完成对激活条的操作 public void onPageScrolled(int arg0, float arg1, int arg2) { Log.i(TAG, "onPageScrolled"); //new一个矩阵 Matrix matrix = new Matrix(); //设置激活条的最终位置 switch (arg0) { case 0: //使用set直接设置到那个位置 matrix.setTranslate(this.offset, 0); break; case 1: matrix.setTranslate(this.offset * 3 + this.imageWidth, 0); break; case 2: matrix.setTranslate(this.offset * 5 + this.imageWidth * 2, 0); break; } //在滑动的过程中，计算出激活条应该要滑动的距离 float t = (this.offset * 2 + this.imageWidth) * arg1; //使用post追加数值 matrix.postTranslate(t, 0); this.activeBar.setImageMatrix(matrix); } @Override //这个方法是当页面切换完毕后被调用， public void onPageSelected(int arg0) { Log.i(TAG, "onPageSelected"); //先将所有的tab设置成灰色的 for (View item : this.tabArray) { ((TextView)item.findViewById(R.id.tab_text)).setTextColor(Color.rgb(20, 20, 20)); } //再将当前的tab设置成白色的，表示激活状态 ((TextView)this.tabArray.get(arg0).findViewById(R.id.tab_text)).setTextColor(Color.WHITE); } }
OKOK，完成上面所有的代码，就OK了。这样就实现了所有的效果。真是辛苦啊……
如果还有疑惑的话，可以来微博上问我：http://weibo.com/KrossFord
原文地址：http://www.cnblogs.com/kross/p/3372987.html
