当記事でわかること
・Fragment上にTabLayoutを実装する方法・Fragment上にFragmentを重ね、Fragmentを切り替える方法
背景
アプリ制作中にイマドキアプリにありがちな一つの画面内にて、スワイプで切り替えてコンテンツの表示を制御する実装(例:TwitterのHOME)を行いたく、
調査したが意外と行っている人が少なかったため、
備忘録として残したくなりました。
こちらの記事を参考することで以下の画像のようなレイアウトを作成することができます。
大前提(必読)
Fragmentとは、Activity上にあるライフサイクルを持ったViewです。＊こちらの記事ではFragmentへの理解を前提としております。
また、OSバージョンやエディタ環境のテストは、
筆者環境以外では行っていないため留意ください。
また、今回は非推奨となったFragmentPagerAdapterを使用する方法のため、
そちらもご了承くださいませ。(時間が出来次第推奨のやり方で記事出します。。)
コード
STEP1.土台のHomeFragmentを作成
「例えるなら机です。」HomeFragment.kt
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.activity_home_fragment, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
pager.adapter = PageAdapter(childFragmentManager)
tabLayout.setupWithViewPager(pager)
}
STEP2.TabLayoutをfragment_home.xml(HomeFragmentのxmlファイル)に実装
「例えるならお茶碗です。」fragment_home.xml
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabSelectedTextColor="#5c9ead"
app:tabTextColor="@color/colorgreen">
<com.google.android.material.tabs.TabItem
android:id="@+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first" />
<com.google.android.material.tabs.TabItem
android:id="@+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second" />
<com.google.android.material.tabs.TabItem
android:id="@+id/third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third" />
</com.google.android.material.tabs.TabLayout>
STEP3.今回切り替えたいFragmentを任意の数作成(当記事は3個にしてます)
「例えるなら白米・玄米・炊き込みご飯です。」fragment内部には実装内容のみで大丈夫です。
今回は例としてonCreateView()を軽く記載しております。
FirstFragment.kt
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
super.onCreateView(inflater, container, savedInstanceState)
return inflater.inflate(R.layout.fragment_first, container, false)
}
SecondFragment.kt
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
super.onCreateView(inflater, container, savedInstanceState)
return inflater.inflate(R.layout.fragment_second, container, false)
}
ThirdFragment.kt
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
super.onCreateView(inflater, container, savedInstanceState)
return inflater.inflate(R.layout.fragment_third, container, false)
}
STEP4.Adapterを作成
「例えるならしゃもじです。」補足:AdapterはTabをスワイプした際にFragment切り替えを行う際に必須です。
PageAdapter.kt
class PageAdapter(fm: FragmentManager) : FragmentPagerAdapter(
fm,
BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT
) {
override fun getItem(position: Int): Fragment {
return when (position) {
// どのFragmentを表示するか
0 -> {
FirstFragment()
}
1 -> {
SecondFragment()
}
2 -> {
ThirdFragment()
}
else -> {
FirstFragment()
}
}
}
// スワイプビューの数が３つだから
override fun getCount(): Int {
return 3
}
// スワイプビューのタイトルを決める
override fun getPageTitle(position: Int): CharSequence? {
return when (position) {
0 -> {
"First"
}
1 -> {
"Second"
}
2 -> {
"Third"
}
else -> {
null
}
}
}
}