【Android】TabLayout 実装方法
【Windows10】
【Android Studio 3.1.1】
上図のようにTabLayoutを実装する方法です。
ViewPagerを使って、左右にスワイプすると選択タブが切り替わる実装となります。
実際のアプリは、Google Playで公開してますので、参考にどうぞ。
①MainActivityのxmlにTabLayoutを追加
xmlの中身はこんな感じ↓
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/adView_bottom"
android:orientation="vertical">
<LinearLayout
android:id="@+id/LinearLayout_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/waku_base"
android:textSize="12dp"
android:text="メニュー" />
<Button
android:id="@+id/button_backlight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/waku_base2"
android:textSize="12dp"
android:text="バックライト" />
<Button
android:id="@+id/button_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/waku_base"
android:textSize="12dp"
android:text="クリア" />
<Button
android:id="@+id/button_calc_mode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/waku_base2"
android:textSize="12dp"
android:text="加算" />
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#FFFFFF"
app:tabBackground="@drawable/tab_color_selector"
app:tabSelectedTextColor="#000000"
app:tabTextAppearance="@style/TabTextAppearance">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
LinearLayoutでandroid:orientation="vertical"を指定し、その中にTabLayout→ViewPagerとしないと、ViewPagerが画面全体を覆ってしまい、タブにタッチできなかったので上記のような実装にしています。
②MainActivityでTabLayoutの実装
MainActivityのonCreateのところで以下のように実装
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setOffscreenPageLimit(4);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
viewPager.setOffscreenPageLimit(4)は、TabLayoutのタブ数(今回は5つ) - 1の数を指定しています。これについては実装してなくてもOK。
なお、import android.support.v4.view.PagerAdapter;
があると、以下のところでインスタンスが生成されないとエラーがでるので上記は削除すること。
new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
③PagerAdapterの実装
以下図のようにJava Classを追加する
Packageのところは、自分のパッケージ名が入っていると思いますが、消さなくてもOK
以下のように実装する
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class PagerAdapter extends FragmentPagerAdapter {
int numberOfTabs;
private CharSequence[] tabTitles = {"機種", "通常", "当/確変", "潜伏", "結果"};
public PagerAdapter(FragmentManager fm, int numberOfTabs){
super(fm);
this.numberOfTabs = numberOfTabs;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new Fragment_kisyu_select();
case 1:
return new Fragment_tuzyo();
case 2:
return new Fragment_kakuhen();
case 3:
return new Fragment_senpuku();
case 4:
return new Fragment_result();
default:
return null;
}
}
@Override
public int getCount() {
return numberOfTabs;
}
}
上記のFragment getItemにある、Fragment_result()等でタブ毎の処理を実装します。また、タブ毎に表示するレイアウトも読み込まれるようになります(後述④参照)。ここでは呼び出すだけ。
④Fragmentの追加
③のFragment getItemで追加した分だけFragmentを追加する必要があります。
ここで、タブの数より少ないFragmentしか準備せずにビルドしても落ちるので、必ずタブの数分のFragmentを追加しましょう。今回の例では、④を5つ分(タブの数)追加する必要があります。
Fragment Name、Fragment Layout Nameは任意の名前でOK。
xmlでは、自分の好きなようにレイアウトを作成してください。ここでは省略します。
以下のjavaファイルの中身の例では追加時からいらないところを削除しています。
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.content.res.ResourcesCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
public class Fragment_result extends Fragment {
public Fragment_result() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_result, container, false);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
//ここにViewを追加する
LinearLayout_judge_1 = view.findViewById(R.id.LinearLayout_judge_1);
}
}
④では、ここまでをタブの数分だけ追加する必要があります。
これでビルドして、落ちなければ完了です。
