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連結