Material Design常用控件的学习和实践

丿silencer
556 阅读4分钟

项目地址：gitee.com/SilencerM/m…

        Material Design是谷歌提出来的一种新的UI设计理念，意在同意Android开发中UI的风格同一问题，使用户在使用APP时不会因为各种不同风格而导致不适应，使开发出来的APP具有更好的跨平台性。

        Material Design被译为“质感设计”，它通过Z轴的引入，使用三维空间的光影变化来解决信息的层级关系，用卡片材料作为信息的载体，通过像现实世界中卡片的裁剪、变换、层叠等效果来实现信息的分块、转换、层级的关系。而且，Material Design尽可能的符合现实物理现象，这使得它的动画非常的自然和平滑。同时，Material Design使用鲜明的色彩，让整个UI变得更加好看。

        Material Design常使用的控件有，DrawerLayout、NavigationView、CoordinatorLayout、FloatingActionButton、SwipeRefreshLayout、AppBarLayout、CollapsingToolbarLayout以及CardView等等。它们在XML中的结构往往下图1所示。

图1 控件结构图 ​

         UI看起来层次很深，但是其实许多布局只是对FrameLayout的拓展而已，因此几乎不会影响UI的绘制速度，而且能通过简单的布局来实现良好的UI动画，这也是使用Material Design的原因。

        接下来我们来简单的了解一下这些控件的作用。

  • DrawerLayout

        DrawerLayout控件是为了侧边滑动导航而设计的。它往往有两个直接子布局，第一个是正常情况下屏幕显示的部分，如图1中CoordinatorLayout所包裹的部分。而第二部分作为用户在从一侧横向滑动时弹出的菜单，如图1中NavigationView部分。

        DrawerLayout中一个重要的属性是layout_gravity。通过设置不同的值可以改变滑动导航出来的方向。举个例子，layout_gravity="start"表示滑动导航出来的方向跟随系统语言方向。例如系统语言为汉语时，导航栏从左边出现，当语言为阿拉伯语时从右边出现。

  • NavigationView

        NavigationView是Google官方根据Material Design设计理念设计的支持库控件。它可以很简单的实现精美的导航栏效果，如图二所示：

图2 导航效果图

​

         使用该控件是很简单的，只需要设置两个属性app:headerLayout以及app:menu即可。其中第一个属性的值是你自定义头部布局的引用，即图2的头像个人信息部分布局。第二个属性的值是菜单布局，即图二菜单项部分。

  • CoordinatorLayout

        CoordinatorLayout是一个可以统一管理子控件的事件的布局。试想一下，如果你使用Snackbar弹出一条提示，挡住了用户正在阅读的信息，既不美观还影响用户体验，这个时候，CoordinatorLayout就祈祷作用了。它可以轻松的管理所有子控件对某个事件的反应，例如在提示时让显示内容的控件上升。

  • FloatingActionButton

        FloatingActionButton是Material Design风格的代表控件之一，看名字就知道它是悬浮着的。它默认具有Z轴高度，并且具有阴影效果，使用户感觉到立体感。但是它的使用和普通按钮基本一致。

  • SwipeRefreshLayout

        SwipeRefreshLayout是一个帮助你简单实现下拉刷新的布局。你只要将需要上拉刷新的控件作为它的子控件放入即可。然后在代码中获取该布局对象，通过方法setColorSchemeResource来设置刷新进度条的颜色，通过方法setOnRefreshListener设置具体刷新的操作即可。

  • AppBarLayout

        AppBarLayout是用来解决CoordinatorLayout中内容和标题栏的问题。CoordinatorLayout实际上就是一个加强版的FrameLayout，因此将标题栏和内容放入其中就会发生覆盖的行为。传统的做法我们可以使用偏移量来解决这个问题。但是这种方法拓展性不好，因此官方提供了AppBarLayout控件。这个控件在内部做了很多滚动事件的封装，用来解决这个问题很方便。我们只要将ToolBar放入其中，然后通过属性layout_behavior给显示内容的控件指定一个行为即可，例如"@string/appbar_scrolling_view_behavior"。

  • CollapsingToolBarLayout

        CollapsingToolBarLayout是一个让标题栏功能更加强大的控件，它能够实现折叠标题栏的效果。例如我们可以使用带有大图片的标题栏，并且在用户滑动时折叠成普通的标题栏，效果如图3所示。

 图3 未折叠标题栏效果图 ​

图4 折叠标题栏效果图 ​

         我们只要使用属性app:layout_scrollFlags来指定CollapsingToolBarLayout的行为，并且用app:layout_collapseMode来指定图片和标题栏具体行为即可实现这种效果。

        注意，CollapsingToolBarLayout只能作为AppBarLayout的直接子控件使用，而AppBarLayout只能作为CoordinatorLayout的子控件使用。

  • ToolBar

        ToolBar是一个十分强大的标题栏控件，它可以完全替代ActionBar并且实现后者所不能实现的效果。例如它可以实现非常漂亮的菜单效果，如图5所示。

图5 菜单效果

​

  • CardView

        CardView是一种可以实现卡片化UI的控件，它使得呈现的内容具有立体感、结构感，而且执行动画时十分流畅，具有非常好的体验。

  • 测试demo的MainActivity的布局xml

<?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/main_draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:id="@+id/main_abl"
            android:fitsSystemWindows="true">
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/main_toolbar_ctl"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"
                    android:id="@+id/main_ctl_img"
                    android:src="@mipmap/girl"
                    android:fitsSystemWindows="true"/>
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/main_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/Theme.AppCompat.Light"
                    app:layout_collapseMode="pin"/>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/main_srl"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/main_recycler"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/caidan"
            android:layout_gravity="end|bottom"
            android:layout_margin="10dp"
            android:id="@+id/main_fabtn"
            app:layout_anchor="@id/main_abl"
            app:layout_anchorGravity="bottom|end"
            android:contentDescription="@string/app_name"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_navigation"
        app:headerLayout="@layout/app_include_main_navhead"
        app:menu="@menu/app_menu_main_navigtion"
        android:layout_gravity="start"/>

</androidx.drawerlayout.widget.DrawerLayout>

  • 实际运行效果

图6 初始效果 ​\

图7 滑动菜单效果 ​

图8 下拉折叠效果  ​

图9 请求数据效果

 ​

本BLOG为原创文章未经本人许可，不得用于商业用途。转载请注明出处并告知本人，否则保留追究法律责任的权利。

avatar
文章
阅读
粉丝