Ankoを使用してKotlinに下部ナビゲーションバーを作成する

新しいプロジェクトを開始して、どのレイアウトが形成されるかに基づいてXMLファイルを完全に放棄し、Ankoライブラリを使用して画面を作成することにしました。 Android向けの開発の経験がほとんどなく(約2年)、Kotlinでコードを作成した経験が半年(6か月強)だったため、すぐにアプリケーションにナビゲーションアーキテクチャコンポーネントを含めるか、 BottomNavigationViewによって作成された下部ナビゲーションバーをレンダリングするという問題に直面しました







まず第一に、可能な解決策を見つけるためにインターネットに目を向けました。 しかし、私がさまざまな程度の明瞭さで見つけたすべての記事は、ナビゲーションコンポーネントの操作方法について説明しましたが、Ankoでそれを行った記事はありませんでした。 タスクを解決したら、ボトムナビゲーションバーを作成するオプションをコミュニティに提供します。







すべてのコードはここで表示できます。

Android Studioで新しいプロジェクトを作成する段階をスキップします。モジュールレベルでbuild.gradleのAnkoおよびNavigation Architectureコンポーネントを操作するための次の依存関係に注意するだけです。







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'
      
      





次のステップは、将来のアプリケーションの構造を作成することです。 xmlファイルの代わりにメインアクティビティを描画するには、AnkoComponentインターフェイスから継承したMainActivityUIクラスを作成します。







 class MainActivityUI: AnkoComponent<MainActivity> { override fun createView(ui: AnkoContext<MainActivity>): View = with(ui) { constraintLayout { } } }
      
      





MainActivityクラスでは、setContentView(R.layout.activity_main)はMainActivityUI()。SetContentView(this)に置き換えられます。







次に、フラグメントとパッケージUIが存在するパッケージフラグメントを作成し、対応するフラグメントの画面のレンダリングを担当するクラスを配置します。 これはプロジェクトの構造です:







 fragments ui HomeUI UsersUI DetailsUI MoreUI HomeFragment UsersFragment DetailsFragment MoreFragment
      
      





ここで、ナビゲーションと下部ナビゲーションバーの作成を直接扱いましょう。

新しいナビゲーションコンポーネントを含めることの詳細な説明とナビゲーションエディターでの作業の説明は、 こちらのドキュメントページにあります 。 アプリケーション画面間のナビゲーション用のファイル(グラフ)を作成するには、resフォルダーに別のフォルダー(ナビゲーション)を追加し、navigation_graph.xmlファイルを既に追加する必要があります。 このプロジェクトの場合、次のようになります。







 <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>
      
      





バー自体を表示するには、別のリソースフォルダー、つまりメニューを作成する必要があります。 バーの表示部分を担当するファイルが含まれています。 このプロジェクトでは次のようになります。







 <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>
      
      





すべてをまとめて、それがどのように機能するかを見てみましょう。







MainActivityUIにフラグメントのコンテナを追加し、ナビゲーションバーのコンテナも定義します。







 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 ) } } }
      
      





この例のbottomNavigationは、次の形式の実存関数であることに特に注意してください。







 inline fun ViewManager.bottomNavigation(init: BottomNavigationView.() -> Unit = {}) = ankoView({ BottomNavigationView(it) }, theme = 0, init = init)
      
      





MainActivityでは、NavHostFragmentオブジェクトを定義する必要があります(ドックを参照)。







 private val host by lazy { NavHostFragment.create(R.navigation.navigation_graph) }
      
      





そしてonCreate()メソッドで、以下を定義します:







 supportFragmentManager.beginTransaction() .replace(R.id.fragment_container, host) .setPrimaryNavigationFragment(host) .commit()
      
      





最後の仕上げ-onStart()MainActivityにNavControllerクラスのオブジェクトを追加します。これにより、1つまたは別のナビゲーションバーオブジェクトを選択してフラグメント間を遷移できます。







 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") } }
      
      





私たちは、アプリケーションを起動します...







スクリーンショット








All Articles