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

缺乏、安全感 2023-10-16 22:20 28阅读 0赞

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

注意：本文是在上一篇文章的基础上写的：《Android L、M扩展支持包design中widget：TabLayout （文章链接地址：[http://blog.csdn.net/zhangphil/article/details/48859961][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）所要求的需求如图所示：

![Center][]

现在给出代码示例，说明如何实现（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：

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

[http_blog.csdn.net_zhangphil_article_details_48859961]: http://blog.csdn.net/zhangphil/article/details/48859961
[Center]: https://img-blog.csdn.net/20151002151126564?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center