こんにちはKID.Aです。
今回もデザインサポートライブラリーのクラスの説明をしていこうと思います。
Design support Libraryはデザインのサポートライブラリーで素晴らしいコンポーネントがいくつもあります。
今回は「TabLayout」について説明していきます。
TabLayoutは水平レイアウトのタブを提供します。
ディスプレイに表示するタブはTabLayout.Tabを使用します。
newTab()メソッドでタブを作り、setText()やsetIcon()でテキストやアイコンを作成できます。
作ったTabはaddTab(Tab)でレイアウトにタブを追加できます。
タブの選択状態が変更されたときはsetOnTabSelectedListenerに設定されるリスナーを介して通知されます。
これとViewPagerを組み合わせて、レイアウトをスクロールすると関連したタブの選択することができます。
・APIは以下の通りです。
http://developer.android.com/intl/ja/reference/android/support/design/widget/TabLayout.html
実装
ViewPagerと関連付けたTabLayoutを作ります。
実装は以下の通りです。
・build.gradle
dependencies { compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' }
・MainActivity .java
package jp.co.tablayoutsample; import android.support.design.widget.TabLayout; import android.support.v4.app.FragmentManager; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.addTab(tabLayout.newTab().setText("TAB 1").setIcon(R.mipmap.ic_launcher)); tabLayout.addTab(tabLayout.newTab().setText("TAB 2").setIcon(R.mipmap.ic_launcher)); tabLayout.addTab(tabLayout.newTab().setText("TAB 3").setIcon(R.mipmap.ic_launcher)); FragmentManager manager = getSupportFragmentManager(); final ViewPager viewPager = (ViewPager)findViewById(R.id.pager); final PageAdapter adapter = new PageAdapter(manager); viewPager.setAdapter(adapter); viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); } }
・activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="jp.co.tablayoutsample.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" /> <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>
挙動
挙動は以下の通りです。
・アプリが起動します。
・ページにスクロールすると関連したタブが選択されます。
以上です。