ViewPager+TabLayout滑动简单实现

用ViewPager+TabLayout实现简单滑动实现，可手动滑动，tab切换，先上效果预览：

    

由于TabLayout位于design包下，所以得先引入design包，TabLayout目录android.support.design.widget.TabLayout

先将design包导入eclipse，作为引用库，design目录为你得sdk下sdk/extras/android/support/design，直接引入即可

先引入design包，和引入项目一样，File-import-Existing Android code into worksPace,选择design，design目录如下，找到你得sdk目录：

    注意，引入后可能会报错，这是因为design包依赖android-support-v7-appcompat,这就需要在上面Library上Add加入android-support-v7-appcompat，

记得先引入android-support-v7-appcompat，引入的方法和引入design一样，引入后一定要确保is Library勾选，这样才能确保Add时显示。

 ok，接下来开始实现我们今天的主要内容ViewPager+TabLayout

1:新建项目，添加design依赖包，添加步骤如下，第二张图是添加好的。

2.查看布局文件：

<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/com.example.tablayoutviepage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.tablayoutviepage.MainActivity" >
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>
</LinearLayout>

这里同时引入TabLayout和ViewPager,注意ViewPager来自v4包。

3.实现主MainAcivity，先看全部代码，再逐个讲解

public class MainActivity extends AppCompatActivity implements OnTabSelectedListener {
	private String[] titles = { "头条", "新闻", "娱乐", "科技", "美女" };
	private ViewPager viewPage;
	private TabLayout tabLayout;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPage = (ViewPager) findViewById(R.id.viewpage);
		tabLayout = (TabLayout) findViewById(R.id.tablayout);
		MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
		tabLayout.setOnTabSelectedListener(this);
		viewPage.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
		tabLayout.setTabsFromPagerAdapter(adapter);
		viewPage.setAdapter(adapter);
	}

	class MyAdapter extends FragmentPagerAdapter {
		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}
		@Override
		public CharSequence getPageTitle(int position) {
			// TODO Auto-generated method stub
			return titles[position];
		}
		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			newsFragment fragment = new newsFragment();
			Bundle bundle = new Bundle();
			bundle.putString("title", titles[arg0]);
			fragment.setArguments(bundle);
			return fragment;
		}
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return titles.length;
		}
	}

	@Override
	public void onTabReselected(Tab arg0) {
		// TODO Auto-generated method stub
	}
	@Override
	public void onTabSelected(Tab tab) {
		// TODO Auto-generated method stub
		viewPage.setCurrentItem(tab.getPosition(), true);
	}
	@Override
	public void onTabUnselected(Tab arg0) {
		// TODO Auto-generated method stub

	}
}

这个没什么可说的，初始化一个titles，用于我们数据显示，初始化ViewPager和TabLayout

	private String[] titles = { "头条", "新闻", "娱乐", "科技", "美女" };
	private ViewPager viewPage;
	private TabLayout tabLayout;

<pre name="code" class="java">        viewPage = (ViewPager) findViewById(R.id.viewpage);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);

接下来是为ViewPage设置适配器

class MyAdapter extends FragmentPagerAdapter {
		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}
		@Override
		public CharSequence getPageTitle(int position) {//tab上显示的文字
			// TODO Auto-generated method stub
			return titles[position];
		}
		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			newsFragment fragment = new newsFragment();
			Bundle bundle = new Bundle();
			bundle.putString("title", titles[arg0]);
			fragment.setArguments(bundle);
			return fragment;
		}
		@Override
		public int getCount() {   
			// TODO Auto-generated method stub
			return titles.length;
		}
	}

这里需要说的是

public Fragment getItem(int arg0) 这个方法，我们在这里new了一个新的Fragment,为了方便，我们这里只用了同一个Fragment，

具体实现的时候，你可以new多个Fragment放入list中，在这拿到就行，注意：

              Bundle bundle = new Bundle();
		bundle.putString("title", titles[arg0]);
		fragment.setArguments(bundle);

传递参数，这个大家都能看懂吧。这个就是简单的ViewPage的Adapter，下面是FragMent的方法，

public class newsFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.fragment, container, false);
		TextView text = (TextView) view.findViewById(R.id.textView);
		Bundle bundle = getArguments();
		String title = (String) bundle.get("title");
		text.setText(title);
		return view;
	}

这个没什么要说的，加载布局，拿到适配器传入的参数。

接下来看这两句：

tabLayout.setOnTabSelectedListener(this);
viewPage.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

大家可以想一下，现在我们定义好了，然后数据也设置上了，那么我点击TabLayout上的item时下面的ViewPager也得跟着做相应的变化吧，滑动下面的ViewPager

时上面的tab条目也得对应滑动吧，上面两句就是做这个事情。

我们在setOnTabSelectedListener接口下的onTabSelected方法中设置ViewPager的条目，Tab被选择时ViewPager也跟着相应发生变化。

viewPager.addOnPageChangeListener为ViewPager添加监听，当ViewPager滑动时，tab也做出相应改变。

ok，基本的已经实现，

完整Demo链接