介绍Android中的DrawerLayout的使用

DrawerLayout的使用

本篇已Kotlin为主要语言

DrawerLayout也就是侧边栏

整体分析

• DrawerLayout –侧边栏的父容器
  • Fragment –容器
• NavigationView –侧边栏

开始实现

1. 首先创建3个Fragment

   ListFragment：

   class ListFragment : Fragment() {
   
       override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?,
           savedInstanceState: Bundle?
       ): View? {
           return inflater.inflate(R.layout.fragment_list, container, false)
       }
   
   }

   TextFragment：

   class TextFragment : Fragment() {
   
       override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?,
           savedInstanceState: Bundle?
       ): View? {
           return inflater.inflate(R.layout.fragment_text, container, false)
       }
   
   }

   PagerFragment：

   class PagerFragment : Fragment() {
   
       override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?,
           savedInstanceState: Bundle?
       ): View? {
           return inflater.inflate(R.layout.fragment_pager, container, false)
       }
   }

   点击 New 创建空白Framgnet即可

   

2. 接下来在res文件中创建一个名为”navigation”的文件夹，在文件夹下创建navigation的xml文件

   

3. 在navigation中编写3个Fragment，并将刚刚创建的3个Fragment传入

   <?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/navigation"
       app:startDestination="@id/textFragment">
   
       <fragment
           android:id="@+id/textFragment"
           android:name="com.laboratory.drawerdome.TextFragment"
           android:label="@string/text_fragment"
           tools:layout="@layout/fragment_text" />
       <fragment
           android:id="@+id/listFragment"
           android:name="com.laboratory.drawerdome.ListFragment"
           android:label="@string/list_fragment"
           tools:layout="@layout/fragment_list" />
       <fragment
           android:id="@+id/pagerFragment"
           android:name="com.laboratory.drawerdome.PagerFragment"
           android:label="@string/pager_fragment"
           tools:layout="@layout/fragment_pager" />
   </navigation>

4. 继续在res下创建名为”menu”的文件夹，在文件夹下创建menu的xml

5. 在menu中编写3个item，item的名字要与navigation中的fragment相同

   <?xml version="1.0" encoding="utf-8"?>
   <menu xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item
           android:id="@+id/textFragment"
           android:icon="@drawable/ic_baseline_one"
           android:title="@string/text_fragment" />
       <item
           android:id="@+id/listFragment"
           android:icon="@drawable/ic_baseline_two"
           android:title="@string/list_fragment" />
       <item
           android:id="@+id/pagerFragment"
           android:icon="@drawable/ic_baseline_three"
           android:title="@string/pager_fragment" />
   </menu>

6. 接下来就是在activity_main中进行设置

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity"
       tools:openDrawer="start">
   
       <androidx.constraintlayout.widget.ConstraintLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent">
   
           <fragment
               android:id="@+id/fragment"
               android:name="androidx.navigation.fragment.NavHostFragment"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               app:defaultNavHost="true"
               app:navGraph="@navigation/navigation" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   
       <com.google.android.material.navigation.NavigationView
           android:id="@+id/navigation"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_gravity="start"
           app:headerLayout="@layout/navigation_header"
           app:menu="@menu/menu" />
   </androidx.drawerlayout.widget.DrawerLayout>

   将menu设置给NavigationView，fragment设置侧边栏NavigationView

   android:layout_gravity=”start” 意思为设置侧边栏是从左到右，一定要写

   DrawerLayout的openDrawer，是设置显示效果

7. 最后在Activity中设置

   class MainActivity : AppCompatActivity() {
       //drawerLayout与导航栏的中继器
       private lateinit var appBerConfiguration: AppBarConfiguration
       //导航栏控制器
       private lateinit var navController: NavController
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContentView(R.layout.activity_main)
           //获取Fragment容器
           navController = findNavController(R.id.fragment)
           //将drawerLayout和获取到导航栏图表相连
           appBerConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
           //设置将由appBerConfiguration来控制navController
           setupActionBarWithNavController(navController, appBerConfiguration)
           //给Navigation设置控制器
           navigation.setupWithNavController(navController)
       }
   
       //将顶部栏与navigation进行连接
       override fun onSupportNavigateUp(): Boolean {
           return navController.navigateUp(appBerConfiguration) || super.onSupportNavigateUp()
       }
   }

以上效果就完成了