ViewPager与android.support.design.widget.TabLayout双向交互联动切换


ViewPager与android.support.design.widget.TabLayout双向交互联动切换
注意：本文是在上一篇文章的基础上写的：《Android L、M扩展支持包design中widget：TabLayout （文章链接地址：http://blog.csdn.net/zhangphil/article/details/48859961 ）》。本文所涉及到内容非常依赖上一篇文章的技术点。

通常，android.support.design.widget.TabLayout与Android的ViewPager联合使用，实现与ViewPager的切换与联动。

（1）比如，当用户手指触摸选择TabLayout中的某一项时候，ViewPager应当自动切换跳转到相应的Page页面；

（2）同样，当用户在翻动ViewPager时候，TabLayout也会自动的滚动到与当前ViewPager页面像对应的子item tab并使该子item tab处于选中状态。

（1）（2）所要求的需求如图所示：



现在给出代码示例，说明如何实现（1）（2）的设计需求。

测试用的主Activity MainActivity.java ：

package zhangphil.tablayout;

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends Activity {

private final int COUNT = 10;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);

// for (int i = 0; i < COUNT; i++) {
// TabLayout.Tab tab = tabLayout.newTab();
// tab.setText("选项卡槽" + i);
// tab.setIcon(R.drawable.ic_launcher);
// tabLayout.addTab(tab);
// }

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new MyViewPagerAdapter(this));

// TabLayout和ViewPager双向、交互联动。
tabLayout.setupWithViewPager(viewPager);
/*
* 以下注释掉的代码要实现的功能和 tabLayout.setupWithViewPager(viewPager)类似
*
* tabLayout.setOnTabSelectedListener(new
* TabLayout.OnTabSelectedListener(){
*
* @Override public void onTabReselected(Tab tab) {
*
* }
*
* @Override public void onTabSelected(Tab tab) { int
* pos=tab.getPosition(); viewPager.setCurrentItem(pos); }
*
* @Override public void onTabUnselected(Tab tab) {
*
* }});
*
* //此处代码实现ViewPager反向控制TabLayout的滑动和自动切换。
* TabLayout.TabLayoutOnPageChangeListener listener = new
* TabLayout.TabLayoutOnPageChangeListener(tabLayout);
* viewPager.addOnPageChangeListener(listener);
*/
}

private class MyViewPagerAdapter extends PagerAdapter {

private Activity activity;

public MyViewPagerAdapter(Activity activity) {
this.activity = activity;
}

@Override
public CharSequence getPageTitle(int pos) {
return "选项卡槽" + pos;
}

@Override
public Object instantiateItem(ViewGroup container, int pos) {
TextView tv = new TextView(activity);
tv.setText("@ViewPager:" + pos);
tv.setTextSize(30.0f);
tv.setGravity(Gravity.CENTER);

container.addView(tv);
return tv;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}

@Override
public int getCount() {
return COUNT;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
}
}
MainActivity.java需要的布局文件：activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff5252"
app:tabSelectedTextColor="#2196f3"
app:tabTextColor="#90caf9" />

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

运行结果就是本文配图中的结果。