解读 Material Design 中 Design Support 库的作用及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是由 Google 推出的一种设计语言，它以平面设计为基础，结合了现代设计的最佳实践。其中，Design Support 库是 Material Design 的一个重要组成部分，它提供了一些常用的 UI 控件和工具，方便开发者快速构建符合 Material Design 规范的应用。本文将详细介绍 Design Support 库的作用、使用技巧以及示例代码。

Design Support 库的作用

Design Support 库包含了许多 UI 控件和工具，可以帮助开发者快速构建符合 Material Design 规范的应用。下面介绍其中一些常用的控件和工具：

1. AppBarLayout

AppBarLayout 是一个可以自动隐藏的 Toolbar，它可以随着用户的滚动而展开和收缩。在使用 AppBarLayout 时，需要将 Toolbar 放在其中，并设置相应的属性，如下所示：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"/>

</android.support.design.widget.AppBarLayout>

其中，app:layout_scrollFlags 属性用于设置 AppBarLayout 的滚动模式，scroll 表示可以随着用户的滚动而滚动，enterAlways 表示当用户向下滚动时，AppBarLayout 会完全展开，而当用户向上滚动时，AppBarLayout 会自动隐藏。

2. TabLayout

TabLayout 是一个可以滑动的 Tab 控件，它可以与 ViewPager 配合使用，实现不同 Tab 之间的切换。在使用 TabLayout 时，需要将其放在布局文件中，并设置相应的 Tab，如下所示：

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="fill">

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 1"/>

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 2"/>

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab 3"/>

</android.support.design.widget.TabLayout>

其中，app:tabMode 属性用于设置 TabLayout 的模式，scrollable 表示可以滑动，fixed 表示固定不变。app:tabGravity 属性用于设置 TabLayout 的重心，fill 表示填充整个布局，center 表示居中显示。

3. FloatingActionButton

FloatingActionButton 是一个浮动按钮，常用于应用的主要操作，如添加、编辑等。在使用 FloatingActionButton 时，需要将其放在布局文件中，并设置相应的属性，如下所示：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/colorAccent"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/bottom_navigation"
    app:layout_anchorGravity="bottom|right|end"/>

其中，android:src 属性用于设置 FloatingActionButton 的图标，app:backgroundTint 属性用于设置背景颜色，app:elevation 属性用于设置阴影大小，app:pressedTranslationZ 属性用于设置点击时的阴影大小，app:layout_anchor 属性用于设置 FloatingActionButton 的锚点，app:layout_anchorGravity 属性用于设置锚点的位置。

Design Support 库的使用技巧

在使用 Design Support 库时，需要注意以下几点：

1. 添加依赖

在使用 Design Support 库之前，需要先添加依赖，如下所示：

implementation 'com.android.support:design:28.0.0'

2. 使用 Theme.AppCompat

在使用 Design Support 库时，需要使用 Theme.AppCompat 主题，如下所示：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
</style>

3. 使用 app 命名空间

在使用 Design Support 库的控件和工具时，需要使用 app 命名空间，如下所示：

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="fill">

示例代码

下面是一个使用 Design Support 库的示例代码，其中包含了 AppBarLayout、TabLayout 和 FloatingActionButton：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabGravity="fill">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 1"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 2"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 3"/>

        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_add"
            app:backgroundTint="@color/colorAccent"
            app:elevation="6dp"
            app:pressedTranslationZ="12dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_anchor="@id/bottom_navigation"
            app:layout_anchorGravity="bottom|right|end"/>

    </android.support.constraint.ConstraintLayout>

</android.support.design.widget.CoordinatorLayout>

总结

Design Support 库是 Material Design 的一个重要组成部分，它提供了一些常用的 UI 控件和工具，方便开发者快速构建符合 Material Design 规范的应用。在使用 Design Support 库时，需要注意添加依赖、使用 Theme.AppCompat 主题和使用 app 命名空间。本文介绍了 AppBarLayout、TabLayout 和 FloatingActionButton 的使用方法，并提供了示例代码，希望能对开发者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c19182add4f0e0ffb8c912