初步了解Design支持库

初步了解Design支持库

1.开发环境

• API 28
• JAVA 8
• Android Studio 3.4.2
• 导入支持库

 implementation 'com.google.android.material:material:1.0.0-rc01'

2.SnackBar

• 轻量的反馈性提示窗，类似Toast，但比Toast有更好的扩展。

 /**
 * view为当前视图任意的一个View
 * text为提示的文字
 * duration为持续显示的时间
 * setAction为设置点击事件。第一个参数为点击处显示的内容。
 */
 Snackbar.make(view,text,duration)
                .setAction("Click here！", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        //点击后的操作
                })
                .show();

3.TextInputLayout

• 更为友好的显示提示。
• TextInputLayout为容器，只能接受一个EditText子元素。

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tl_example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_example"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="For example!"
         />
        
    </com.google.android.material.textfield.TextInputLayout>

• 更为友好的提示错误信息。

/**
* .setErrorEnabled(boolearn enable) 为是否显示错误提示
* .setError(CharSequence errorText) 为错误提示
*/
tl_example.setErrorEnabled(true);
tl_example.setError("ERROR");

4.FloatingActionButton

• 一个悬浮的按钮。

• 常用配置属性

  • app:backgroundTint ：设置背景颜色
  • app:elevation：设置正常状态下阴影大小
  • app:pressedTranslationZ：设置点击时阴影的大小

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
/>

5.TabLayout

• 可以用AppBarLayout将Toolbar和TabLayout组合成一个整体。
• app:layout_scrollFlags=“scroll” **：**向下滚动时先滚动Scrolling View。
• app:layout_scrollFlags=“scroll|enterAlways” **：**向下滚动时先滚动Child View。
• app:tabMode=“scrollable” **：**使选项可以滑动，避免彼此压缩。

 <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="Toolbar"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tl_example"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"/> 
</com.google.android.material.appbar.AppBarLayout>

6.NavigationView

• 抽屉菜单界面。
• 需要放在Drawerlayout中。

 <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/hearder"
        app:menu="@layout/menu"
/>

7.CoordinatorLayout

• 用于组织其子View协作。
• CoordinatorLayout布局下右下角存在FloatingActionButton时，如果Snackbar弹出，FloatingActionButton会自动上移。(其默认Begavior效果)

8.CollapsingToolbarlayout

• 提供一个可折叠的Toolbar。

• 实际操作中，可将ImageView和Toolbar用CollapsingToolbarlayout包起来作为一个可折叠的Toolbar，再用AppBarlayout包在其外侧，视为一个整体。

• CollapsingToolbarlayout 关键属性：

  • app:contentScrim="" :设置CollapsingToolbarlayout收缩后最顶部的颜色。

  • app:expandedTitleGravity=“left|button” :CollapsingToolbarlayout展开后title所处位置。

  • app:collapsedTitleGravity=“left” :头部衬图消失后，title回归位置。

  • app:layout_scrollFlags=""：

    • 不设置时会一直显示。
    • “scroll|exitUnitlCollapsed” :折叠效果。
    • “scroll|enterAlways” :隐藏效果。

• 定义AppBarlayout与滚动视图之间的联系：

  • 特殊字符串资源 @string/appbar_scrolling_view_behavior 与 AppBarlayout.ScrollingViewBehavior 相匹配，用以AppBarlayout通知滚动事件的发生。
  • 比如：RecycleView要设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" 属性，同时AppBarlayout的子View 设置app:layout_scrollFlags 属性字段。

• 自定义 Behavior：

  • 第一种：定义的View监听CollapsingToolbarlayout的滑动状态。

    • onStartNestedScroll()
    • onNestedPreScroll()

  • 第二种：定义的View监听另一个View的状态变化。

    • layoutDependsOn()
    • onDependentViewChanged()

参考资料

• Android 进阶之光