如何使用 ViewPager + TabLayout + Toolbar

如何使用 ViewPager + TabLayout + Toolbar

情境

在 如何使用 ViewPager + TabLayout 當中
示範了怎麼操作 ViewPager 加上 TabLayout
我們可以再加上一個 Toolbar 可以讓我們的範例看起來更完整

效果如下



相關參考

關於 TabLayout 的操作可以參考

程式碼下載

你可以到 GitHub 上面觀看或下載完整的程式碼

程式碼說明

如果要加入一個 Toolbar
只需要在 activity_main.xml 內加入 android.support.v7.widget.Toolbar 元件的宣告
指定好對應的位置
如下方 xml 所示
接著搭配 ViewPager 以及 TabLayout 就可以完成我們所需要的佈局了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:layout_alignParentTop="true"
        android:id="@+id/toolbar"
        android:background="#fff000"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"/>

    <android.support.design.widget.TabLayout
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabs"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_below="@id/tabs"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

接著在 MainActvitiy.java 中把我們所需的元件引用進來

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private Toolbar mToolbar;
    private List<PageView> pageList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initData() {
        pageList = new ArrayList<>();
        pageList.add(new PageOne(MainActivity.this));
        pageList.add(new PageTwo(MainActivity.this));
        pageList.add(new PageThree(MainActivity.this));
    }

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        setSupportActionBar(mToolbar);

        mTabLayout.addTab(mTabLayout.newTab().setText("Page one"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Page two"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Page three"));

        mViewPager.setAdapter(new SamplePagerAdapter());
        initListener();
    }

    private void initListener() {
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
            mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
    }

    private class SamplePagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return pageList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object o) {
            return o == view;
        }

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

    }
}

接著只需要在主程式內呼叫它做一些設定就完成了

private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        setSupportActionBar(mToolbar);

        mTabLayout.addTab(mTabLayout.newTab().setText("Page one"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Page two"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Page three"));

        mViewPager.setAdapter(new SamplePagerAdapter());
        initListener();
    }

注意：
有時候你會出現閃退的情況
可能會是這個原因
因為 Toolbar 就是要拿來取代 actionbar
所以你必須在 theme 那邊將 Actionbar 設定為 no_actionbar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>