Memulai proyek baru, saya memutuskan untuk mencoba sepenuhnya meninggalkan file XML, berdasarkan tata letak yang dibentuk, dan membuat layar menggunakan perpustakaan Anko. Memiliki sedikit pengalaman pengembangan untuk Android (sekitar 2 tahun) dan bahkan lebih sedikit pengalaman menulis kode di Kotlin (sedikit lebih dari enam bulan), saya langsung mengalami masalah termasuk Komponen Arsitektur Navigasi dalam aplikasi, atau lebih tepatnya membuat Bilah Navigasi Bawah yang dibuat oleh BottomNavigationView .
Pertama-tama, saya beralih ke Internet untuk mencari solusi yang memungkinkan. Tetapi semua artikel yang saya temukan dengan berbagai tingkat kejelasan menceritakan tentang bagaimana bekerja dengan komponen navigasi dan tidak ada (dari mereka yang artikelnya saya pelajari) melakukannya di Anko. Setelah menyelesaikan tugas, saya menawarkan komunitas versi saya untuk membuat Bilah Navigasi Bawah.
Semua kode dapat dilihat di sini.
Saya melewati tahap membuat proyek baru di Android Studio, saya hanya mencatat dependensi berikut untuk bekerja dengan Anko dan Komponen Arsitektur Navigasi di build.gradle di tingkat modul:
implementation "org.jetbrains.anko:anko:$anko_version" implementation "org.jetbrains.anko:anko-constraint-layout:$anko_version" implementation "com.android.support.constraint:constraint-layout:2.0.0-alpha3" implementation 'android.arch.navigation:navigation-fragment:1.0.0-beta02' implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-beta02' implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-beta02' implementation 'com.google.android.material:material:1.0.0'
Langkah selanjutnya adalah membuat struktur aplikasi masa depan. Untuk menggambar aktivitas utama, alih-alih file xml, buat kelas MainActivityUI yang diwarisi dari antarmuka AnkoComponent:
class MainActivityUI: AnkoComponent<MainActivity> { override fun createView(ui: AnkoContext<MainActivity>): View = with(ui) { constraintLayout { } } }
Di kelas MainActivity, setContentView (R.layout.activity_main) digantikan oleh MainActivityUI (). SetContentView (ini).
Kemudian kami membuat paket fragmen di mana fragmen dan paket kami akan terletak untuk menempatkan kelas yang bertanggung jawab untuk rendering layar dari fragmen yang sesuai. Ini adalah struktur proyek:
fragments ui HomeUI UsersUI DetailsUI MoreUI HomeFragment UsersFragment DetailsFragment MoreFragment
Sekarang kita akan berurusan langsung dengan navigasi dan pembuatan Bilah Navigasi Bawah.
Deskripsi terperinci tentang penyertaan komponen navigasi baru dan deskripsi pekerjaan di Editor Navigasi dapat ditemukan di halaman dokumentasi di sini . Untuk membuat file (grafik) untuk navigasi di antara layar aplikasi, Anda harus menambahkan folder lain ke folder res, yaitu navigasi, dan menambahkan file navigation_graph.xml ke dalamnya. Untuk proyek ini, akan seperti ini:
<navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/navigation_graph" app:startDestination="@id/homeFragment"> <fragment android:id="@+id/homeFragment" android:name="com.arsinde.ankobottomnavbar.fragments.HomeFragment" android:label="HomeFragment"> <action android:id="@+id/action_homeFragment_to_detailsFragment" app:destination="@id/detailsFragment"/> </fragment> <fragment android:id="@+id/detailsFragment" android:name="com.arsinde.ankobottomnavbar.fragments.DetailsFragment" android:label="DetailsFragment"> <action android:id="@+id/action_detailsFragment_to_usersFragment" app:destination="@id/usersFragment"/> </fragment> <fragment android:id="@+id/usersFragment" android:name="com.arsinde.ankobottomnavbar.fragments.UsersFragment" android:label="UsersFragment"> <action android:id="@+id/action_usersFragment_to_moreFragment" app:destination="@id/moreFragment"/> </fragment> <fragment android:id="@+id/moreFragment" android:name="com.arsinde.ankobottomnavbar.fragments.MoreFragment" android:label="MoreFragment"/> </navigation>
Untuk menampilkan Bar itu sendiri, Anda perlu membuat folder sumber daya lain, yaitu menu. Ini berisi file yang bertanggung jawab untuk bagian yang terlihat dari bar. Begini tampilannya dalam proyek ini:
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@id/homeFragment" android:icon="@drawable/ic_home" android:title="@string/menu_title_home"/> <item android:id="@id/usersFragment" android:icon="@drawable/ic_users" android:title="@string/menu_title_users"/> <item android:id="@id/detailsFragment" android:icon="@drawable/ic_info" android:title="@string/menu_title_details"/> <item android:id="@id/moreFragment" android:icon="@drawable/ic_more" android:title="@string/menu_title_more"/> </menu>
Inilah saatnya untuk menyatukan semuanya dan melihat cara kerjanya.
Tambahkan wadah untuk fragmen di MainActivityUI, dan tetapkan wadah untuk bilah navigasi.
constraintLayout { val fragmentContainer = frameLayout { id = R.id.fragment_container }.lparams { width = matchParent height = matchConstraint } val bottomNavigation = bottomNavigation { id = R.id.bottom_nav_view inflateMenu(R.menu.bottom_navigation_menu) } applyConstraintSet { fragmentContainer { connect( START to START of PARENT_ID, END to END of PARENT_ID, TOP to TOP of PARENT_ID, BOTTOM to TOP of R.id.bottom_nav_view ) } bottomNavigation { connect( START to START of PARENT_ID, END to END of PARENT_ID, TOP to BOTTOM of R.id.fragment_container, BOTTOM to BOTTOM of PARENT_ID ) } } }
Perlu dicatat secara khusus bahwa navigasi bawah dalam contoh ini adalah fungsi extantion, yang memiliki bentuk sebagai berikut:
inline fun ViewManager.bottomNavigation(init: BottomNavigationView.() -> Unit = {}) = ankoView({ BottomNavigationView(it) }, theme = 0, init = init)
Sekarang di MainActivity Anda perlu mendefinisikan objek NavHostFragment (lihat dok):
private val host by lazy { NavHostFragment.create(R.navigation.navigation_graph) }
Dan dalam metode onCreate (), tentukan:
supportFragmentManager.beginTransaction() .replace(R.id.fragment_container, host) .setPrimaryNavigationFragment(host) .commit()
Sentuhan akhir - tambahkan ke onStart () MainActivity sebuah objek dari kelas NavController, yang memungkinkan Anda untuk bertransisi antar fragmen dengan memilih satu atau beberapa objek bilah navigasi:
override fun onStart() { super.onStart() val navController = host.findNavController() findViewById<BottomNavigationView>(R.id.bottom_nav_view)?.setupWithNavController(navController) navController.addOnDestinationChangedListener{_, destination, _ -> val dest: String = try { resources.getResourceName(destination.id) } catch (e: Resources.NotFoundException) { Integer.toString(destination.id) } Log.d("NavigationActivity", "Navigated to $dest") } }
Luncurkan aplikasi dan vois là ...