前言
Material Design 作为一种目前非常流行的设计语言，广泛应用于网页和移动应用的 UI 设计中。其中，主要的布局控件是非常重要的组成部分，也是开发中经常会用到的组件。本文将介绍 Material Design 中包含的四个主要布局控件，并提供相应的使用技巧和示例代码，帮助开发者更好的掌握这些组件的使用方法。
1、AppBarLayout
AppBarLayout 可以看做是一种可滚动的工具栏，它通常位于屏幕顶部，并包含一个或多个子视图，比如图标、标题、菜单按钮等。
-- -------------------- ---- ------- ------------------------------------------- ----------------------------------- ------------------------------------- ---------------------------------- ----------------------------------- ------------------------------------------- --------------------------------------- -------------------------------------------- ---- --- --- ------------------------------------ ---------------------------------------------展开代码
可以通过设置 app:layout_scrollFlags 属性实现与其他 View 的联动效果。比如设置为 scroll|enterAlways，则当向下滚动屏幕时 Toolbar 会自动隐藏进入屏幕顶部，向上滚动时又自动显示出来。
2、CoordinatorLayout
CoordinatorLayout 是 MaterialDesign 中的布局容器，它可以帮助我们更好地管理和协调子 View 之间的交互行为。相比于 FrameLayout 等其他布局，CoordinatorLayout 的特点是可以响应子控件之间的交互事件，比如 ToolBar 和 FloatingActionButton 之间的交互。
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 子视图，可以是 AppBarLayout、RecyclerView 等 --> </android.support.design.widget.CoordinatorLayout>
在 CoordinatorLayout 中还可以使用 Behavior 实现子 View 的自定义交互效果，比如 SwipeDismissBehavior 可以帮助我们实现对子 View 的滑动删除功能。
-- -------------------- ---- ------- ------------------------------------------------ ----------------------------------- ------------------------------------- --------------------------------------------------- ----------------------------------- ------------------------------------ ----------------------------------- ------------------------------ ------------------------------------------------------------------------ -- --------------------------------------------------展开代码
3、CollapsingToolbarLayout
CollapsingToolbarLayout 可以将 AppBarLayout 和 Toolbar 相互结合，实现更加丰富的交互效果。它可以实现 Toolbar 在可滚动视图上进行收缩和展开，以便在滚动时提供更大的视觉空间。
-- -------------------- ---- ------- ------------------------------------------------------ ----------------------------------- ------------------------------------ --------------------------------------------------- ---------- ----------------------------------- ----------------------------- ------------------------------ -------------------------------- ---------------------------------- -- ---------------------------------- ----------------------------------- ------------------------------------------- ----------------------------- ---------------------------------------------- ---- --- --- ------------------------------------ --------------------------------------------------------展开代码
在使用 CollapsingToolbarLayout 时，需要注意将 AppBarLayout 的 layout_scrollFlags 属性设置为 scroll|exitUntilCollapsed，才能使得 Toolbar 在向上滚动时始终可见。
4、NavigationView
NavigationView 可以创建一个从屏幕左侧滑出的导航抽屉。抽屉中通常包含应用的主菜单，帮助用户快速地导航到不同部分的内容。
-- -------------------- ---- ------- --------------------------------------- ----------------------------------- ------------------------------------- ---- ---- --- --------------------------------------------- ----------------------------------- ------------------------------------ ------------------------------ ------------------------------------- ------------------------- -- -----------------------------------------展开代码
其中，app:headerLayout 属性可以指定抽屉的头部，app:menu 属性可以指定抽屉的菜单项。
结语
本文介绍了 Material Design 中的四个主要布局控件，包括 AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout 和 NavigationView。希望此篇文章对于初学者的 Material Design 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c26f15314edc2684bb1b55
