系统架构设计实现视图

系统架构设计实现视图

Add Navigation Architecture Component & Material Design Dependencies

添加导航架构组件和材料设计依赖项 //navigation architecture component implementation “androidx.navigation:navigation-fragment-ktx:2.3.0” implementation “androidx.navigation:navigation-ui-ktx:2.3.0”// material design implementation ‘com.google.android.material:material:1.2.0’

2. Create Menu Resource for Bottom Navigation View (res/menu/menu_bottom_sheet_main.xml)

2.为底部导航视图创建菜单资源(res / menu / menu_bottom_sheet_main.xml)

<?xml version=”1.0" encoding=”utf-8"?><menu xmlns:android=”http://schemas.android.com/apk/res/android" <item android:id=”@+id/nav_personal” android:icon=”@drawable/ic_personal” android:title=”Personal” /> <item android:id=”@+id/nav_transaction” android:icon=”@drawable/ic_transaction” android:title=”Transaction” /> <item android:id=”@+id/nav_promotional” android:icon=”@drawable/ic_promotional” android:title=”Promotional” /> <item android:id=”@+id/nav_blocked” android:icon=”@drawable/ic_blocked” android:title=”Blocked” /></menu>

3. Add BottomNavigationView to Activity XML (activity_main.xml)

3.将BottomNavigationView添加到Activity XML(activity_main.xml)

<?xml version=”1.0" encoding=”utf-8"?><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”> <com.google.android.material.bottomnavigation.BottomNavigationView android:id=”@+id/main_bottom_navigation_view” android:layout_width=”match_parent” android:layout_height=”wrap_content” app:labelVisibilityMode=”labeled” app:layout_constraintBottom_toBottomOf=”parent” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:menu=”@menu/menu_bottom_sheet_main” /></androidx.constraintlayout.widget.ConstraintLayout>

4. Create Fragment for each of the menu items

4.为每个菜单项创建片段

PersonalFragmentTransactionFragmentPromotionalFragmentBlockedFragment

5. Create a new Navigation resource file (res/navigation/nav_manin.xml)

5.创建一个新的导航资源文件(res / navigation / nav_manin.xml)

<?xml version=”1.0" encoding=”utf-8"?><navigation 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:id=”@+id/nav_main” app:startDestination=”@id/nav_personal”> <fragment android:id=”@+id/nav_personal” android:name=”com.jay.navigationarchdemo.ui.personal.PersonalFragment” android:label=”personal_fragment” tools:layout=”@layout/personal_fragment” /> <fragment android:id=”@+id/nav_transaction” android:name=”com.jay.navigationarchdemo.ui.transaction.TransactionFragment” android:label=”transaction_fragment” tools:layout=”@layout/transaction_fragment” /> <fragment android:id=”@+id/nav_promotional” android:name=”com.jay.navigationarchdemo.ui.promotional.PromotionalFragment” android:label=”promotional_fragment” tools:layout=”@layout/promotional_fragment” /> <fragment android:id=”@+id/nav_blocked” android:name=”com.jay.navigationarchdemo.ui.blocked.BlockedFragment” android:label=”blocked_fragment” tools:layout=”@layout/blocked_fragment” /></navigation>

NOTE: make sure id of the fragment should match with the id specified in menu_bottom_sheet_main.xml

注意：确保片段的ID应该与menu_bottom_sheet_main.xml中指定的ID相匹配

6. Add nav host fragment in activity XML (activity_main.xml)

6.在活动XML(activity_main.xml)中添加导航主机片段

<?xml version=”1.0" encoding=”utf-8"?><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”> <fragment android:id=”@+id/main_fragment_nav_host” android:name=”androidx.navigation.fragment.NavHostFragment” android:layout_width=”0dp” android:layout_height=”0dp” app:defaultNavHost=”true” app:layout_constraintBottom_toTopOf=”@id/main_bottom_navigation_view” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” app:navGraph=”@navigation/nav_main” /> <com.google.android.material.bottomnavigation.BottomNavigationView android:id=”@+id/main_bottom_navigation_view” android:layout_width=”match_parent” android:layout_height=”wrap_content” app:labelVisibilityMode=”labeled” app:layout_constraintBottom_toBottomOf=”parent” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:menu=”@menu/menu_bottom_sheet_main” /></androidx.constraintlayout.widget.ConstraintLayout>

7. Setup Bottom Navigation View with Nav Controller (MainActivity.kt)

7.使用导航控制器(MainActivity.kt)设置底部导航视图

package com.jay.navigationarchdemoimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport androidx.navigation.findNavControllerimport androidx.navigation.ui.setupWithNavControllerimport com.google.android.material.bottomnavigation.BottomNavigationViewclass MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val navController = findNavController(R.id.main_fragment_nav_host) val bottomNavigationView = findViewById<BottomNavigationView>(R.id.main_bottom_navigation_view) bottomNavigationView.setupWithNavController(navController) }}

翻译自: https://medium.com/@impateljay/android-navigation-architecture-component-with-bottom-navigation-view-step-by-step-implementation-65447f5bfb2a

系统架构设计实现视图

相关资源：微信小程序源码-合集6.rar