Android下部タブ、BottomNavigationViewを使用して実装
こんにちは、今日はAndroidドロップダウンタブの実現方法について説明します.
次は完成本です.
下部タブを実装する前に、メニューに基づいて表示する計画を構成してください.
以下に示すように、簡単なホームページ、ライブラリ、および私のページ計画を実現しました.ラベル名のみが表示されます.
間違ったところがあったら、伝言を残してください.😊
次は完成本です.
下部タブを実装する前に、メニューに基づいて表示する計画を構成してください.
以下に示すように、簡単なホームページ、ライブラリ、および私のページ計画を実現しました.ラベル名のみが表示されます.
class HomeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_home, container, false)
}
companion object {
const val TAG = "HomeFragment"
fun newInstance() = HomeFragment()
}
}
<!-- res/layout/fragment_home.xml -->
<FrameLayout 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=".HomeFragment">
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/home" />
</FrameLayout>
必要な計画をすべて作成した場合は、次のようにメニューリソースファイルを作成し、タブを構成するメニュー項目を作成します.<!-- res/menu/menu_bottom_navigation -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_home"
android:title="@string/home"
android:icon="@drawable/ic_home" />
<item
android:id="@+id/menu_gallery"
android:title="@string/gallery"
android:icon="@drawable/ic_gallery" />
<item
android:id="@+id/menu_my_page"
android:title="@string/my_page"
android:icon="@drawable/ic_my_page" />
</menu>
次いで、FragmentContainerView
およびBottomNavigationView
は、ボトムラベルを実装するアクティブデバイス上に配置される.<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragment_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/bottomNav"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
最初に作成したメニュー項目をBottomNavigationView
のプロパティに追加します.(app:menu
プロパティ)<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:menu="@menu/menu_bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
最後に、下部タブにItemSelectedListener
を設定し、選択したメニューに従って対応するレイヤー表示を設定します.class MainActivity : AppCompatActivity(), NavigationBarView.OnItemSelectedListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
initView(ActivityMainBinding.inflate(layoutInflater))
}
private fun initView(binding: ActivityMainBinding) = with(binding) {
setContentView(root)
bottomNav.setOnItemSelectedListener(this@MainActivity)
bottomNav.selectedItemId = R.id.menu_home
}
override fun onNavigationItemSelected(item: MenuItem): Boolean =
when (item.itemId) {
R.id.menu_home -> {
showFragment(HomeFragment.TAG)
true
}
R.id.menu_gallery -> {
showFragment(GalleryFragment.TAG)
true
}
R.id.menu_my_page -> {
showFragment(MyPageFragment.TAG)
true
}
else -> false
}
private fun showFragment(tag: String) {
// 기존 프래그먼트 숨기기
supportFragmentManager.fragments.forEach {
supportFragmentManager.beginTransaction().hide(it).commit()
}
// 선택한 프래그먼트 보여주기
supportFragmentManager.findFragmentByTag(tag)?.let {
supportFragmentManager.beginTransaction().show(it).commit()
} ?: createFragmentByTag(tag).let {
supportFragmentManager.beginTransaction().add(R.id.fragmentContainer, it, tag).commit()
}
}
private fun createFragmentByTag(tag: String): Fragment = when (tag) {
HomeFragment.TAG -> HomeFragment.newInstance()
GalleryFragment.TAG -> GalleryFragment.newInstance()
MyPageFragment.TAG -> MyPageFragment.newInstance()
else -> throw Exception("유효하지 않은 TAG 입니다.")
}
}
これにより、選択したメニューに基づいてバックグラウンド変更を実施できます.間違ったところがあったら、伝言を残してください.😊
Reference
この問題について(Android下部タブ、BottomNavigationViewを使用して実装), 我々は、より多くの情報をここで見つけました https://velog.io/@dddiri/안드로이드-하단-탭-BottomNavigationView로-구현하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol