読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

Design Support LibraryのTabLayoutを使ってみる

Android

概要

Design Support LibraryのTabLayoutを調べて使って見ると、いろいろと便利だったのでまとめる

詳細

まずはライブラリ追加

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

次にxmlにTabLayout指定
Activity

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />
    <fragment
        android:id="@+id/fragment"
        android:name="com.personal.shimadatatsuya.tablayouttest.MainActivityFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_main" />
</LinearLayout>

fragment

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivityFragment">

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

</RelativeLayout>

AndroidでToolBarを使うのでthemeでNoActionBarのthemeを指定しておく
それでactivityでToolBarをactionbarとして設定する

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        setSupportActionBar(_toolbar);
    }

fragmentに指定したTabLayoutでTabを指定する

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, container, false);
        ButterKnife.bind(this, view);

        _tabLayout.addTab(_tabLayout.newTab().setText("tab1"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab2"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab3"));

        return view;
    }

こんな感じ
f:id:tiro105:20150825231949p:plain

たくさんタブを追加すると2行になってしまう
f:id:tiro105:20150825232042p:plain

それが嫌なら横スクロールモードにすることで、タブが横スクロールしてくれるようになる

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, container, false);
        ButterKnife.bind(this, view);

        _tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        _tabLayout.addTab(_tabLayout.newTab().setText("tab1"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab2"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab3"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab4"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab5"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab6"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab7"));
        _tabLayout.addTab(_tabLayout.newTab().setText("tab8"));

        return view;
    }

f:id:tiro105:20150825232142p:plain

以前まではscrollviewの中にtabを入れるようなギミックを入れる必要があったのでこれは非常に助かる

ViewPagerとの使い方

これまではViewPagerの動きとTabの動きや枚数を合わせる必要があったが、TabLayout側でViewPagerに合わせるような作りになった
これは便利

まずはlayout

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivityFragment">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

次にViewPager用のadapter

public class ViewPagerAdapter extends FragmentPagerAdapter {
    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return TabFragment.getInstance(position);
    }

    @Override
    public int getCount() {
        return 3;
    }

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

最後にadapterをViewPagerに設定し、それをTabLayoutに設定する

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main, container, false);
        ButterKnife.bind(this, view);

        ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());
        _viewPager.setAdapter(adapter);
        _tabLayout.setupWithViewPager(_viewPager);

        return view;
    }

_tabLayout.setupWithViewPager(_viewPager)によってTabLayoutにViewPagerを設定している
これにより、枚数や挙動がViewPagerに合わされ、TabLayout側で調整する必要がない