[Android]如何使用Viewpager+Tablayout

雖然Android 的Viewpager 和Tablayout網路上的教學文章非常多

但還是常常看到有新入門的朋友不是很清楚該怎麼將這兩個常用的元件組合使用，又加上看到幾篇教學文章的寫法並不是很清楚，所以就決定自己來寫一篇拉!

如果你還不清楚Viewpager和Tablayout是什麼的話，建議可以先看一下官方的說明:

Viewpager -

https://developer.android.com/reference/android/support/v4/view/ViewPager.html

Tablayout -

https://developer.android.com/reference/android/support/design/widget/TabLayout.html

這邊先簡單說一下Viewpager

Viewpager就是App裡面你常常可以看到可以左右滑動的元件，通常可以被應用在廣告輪播、App起始介紹頁、還有常常看照片時左右滑動的照片頁，反正只要看到可以左右滑動的，那麼有很大的機率都是Viewpager哦!

至於TabLayout則是你可以想像你在左右滑動Viewpager時，上面有一條線會跟著動，滑到哪線就跟到哪，Android裡稱它為Indicator

再來就進入主題，該如何將Viewpager和Tablayout合在一起使用，這邊就不介紹該怎麼使用Viewpager了，如果有需要，以後再寫一篇~

首先需要將Tablayout的dependencies加進App gradle裡面:

dependencies { 

      compile 'com.android.support:design:25.2.0' 

}

這邊我放的版本是25.2.0，但這不是最新版本，如果想用新版本可以到這裡查看最新版本:

https://developer.android.com/topic/libraries/support-library/revisions.html

加上dependencies後就可以到xml將TabLayout與Viewpager放上去拉

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="?android:actionBarSize"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tablayout"/>

</RelativeLayout>

Layout弄好之後就可以開始寫Code的部分

其實步驟也很簡單只有幾個步驟

1.findview，很簡單這沒問題

viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tablayout);

2.初始化viewpager，生成一個adapter，把它餵給viewpager

viewPager.setAdapter(new SimplePagerAdapter());

3.結合viewpage 和tablayou(重點)
這邊你可能會看到網路上文章是給tabLayout一個listener，然後再丟給viewpager，但其實只要用下面這行就好...

tabLayout.setupWithViewPager(viewPager);

4.給Tab名稱(重要)
你可能在網路上Google或官方文件看到說用下面這種方式

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

但其實只要在viewpager的Adapter裡面override getPageTitle就可以了，像這樣:

@Override
public CharSequence getPageTitle(int position) {
    return "Tab " + pages.get(position);
}

5.結束收工，沒錯！就這麼簡單！
全部程式碼

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;

    private TabLayout tabLayout;

    private ArrayList<Integer> pages;





    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initData();

        initViews();

    }



    private void initData() {

        pages = new ArrayList<>();

        for (int i = 0; i < 5; i++) {

            pages.add(i);

        }

    }



    private void initViews() {

        viewPager = (ViewPager) findViewById(R.id.viewpager);

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

        viewPager.setAdapter(new SimplePagerAdapter());

        tabLayout.setupWithViewPager(viewPager);

    }



    private class SimplePagerAdapter extends PagerAdapter {



        @Override

        public int getCount() {

            return pages.size();

        }



        @Override

        public boolean isViewFromObject(View view, Object o) {

            return o == view;

        }



        @Override

        public Object instantiateItem(ViewGroup container, int position) {

            LinearLayout ll = new LinearLayout(container.getContext());

            ll.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

            ll.setGravity(Gravity.CENTER);

            TextView tv = new TextView(container.getContext());

            tv.setTextColor(Color.YELLOW);

            tv.setText("current page is=" + pages.get(position));

            ll.addView(tv);

            container.addView(ll);

            return ll;

        }



        @Override

        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView((LinearLayout) object);

        }



        @Override

        public CharSequence getPageTitle(int position) {

            return "Tab " + pages.get(position);

        }

    }

}

其實這個組合目前很常用到，建議一定要學會哦！
有問題或者有錯的歡迎留言討論唷

最後附上程式碼

GitHub