ViewPager、Fragment、Matrix综合使用实现Tab滑页效果

原文地址：/article/5894813.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

原文地址：/article/5894813.html