听说谷歌Baba更新了 Material UI ...

贺biubiu

发布于 2019-06-10 22:51:50

2.9K0

发布于 2019-06-10 22:51:50

文章被收录于专栏：HLQ_StruggleHLQ_Struggle

本文预计阅读：10分钟

听说谷歌Baba的IO大会更新了一些新奇的小玩意~

新东西忒多，这里先重点关注下有关：Material UI。

最近的状态啊，真是千万头草泥马奔腾而过。。。

来瓶哇哈哈，精神抖擞来一波~

简单回顾

Material Design，是谷歌在14年的IO大会上提出的一种新的理念，也被称为新的设计语言(也被称为“原材料设计”)，称它为设计语言不为过，但是实际上，这仅仅是谷歌提倡的一种新的设计风格、理念以及设计基本原则。

脑图呈现文本重点

前期配置

当初LZ前期配置遇了不少坑，这里我们一起回顾下：

Step 1：打开工程目录下的build.gradle文件，并添加maven引用

allprojects {
    repositories {
        google()
        jcenter()
        // 1.添加Google Maven地址
        maven {
            url "https://maven.google.com"
        }
    }
}

Step 2：修改编译版本

// 2.修改编译版本为 android - P
compileSdkVersion 'android-P'

Step 3：移除项目工程中依赖的v7包以及添加material依赖

dependencies {
    // 3.移除项目工程中依赖的v7包
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    // 4.添加material依赖
    implementation 'com.google.android.material:material:1.0.0-alpha1'
}

当然，你可以使用

com.android.support:design:28.0.0-alpha1

但是主要注意的是design包和material二者只能选一。

Step 4：使用 androidx.appcompat.app.AppCompatActivity

注意：使用的是androidx。

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

本文说明

由于阅读在公众号内，在此LZ简单挑出几个比较有意思的说明一下，具体详情可点击原文大屏观看，怎一个爽字了得~

举几个栗子

首先放个小姐姐镇楼~

1. Bottom App Bar

Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为，So，BottomAppBar是一个从标准物质指导的演变。它更注重功能，增加参与度，并可视化地锚定UI。

先来一个什么鬼样式都没有的：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimaryDark" // 设置背景色
        app:navigationIcon="@android:drawable/ic_menu_call" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果当然比较Low咯~

下面引用一个官方内置样式：

style=”@style/Widget.MaterialComponents.BottomAppBar”：

相对来说，效果还是不错的~

当然下面还有一些其他的属性：

可以通过FabAlignmentMode，FabAttached，FabCradleMargin，FabCradleRoundedCornerRadius和FabCradleVerticalOffset来控制FAB的放置；

（FabAlignmentMode）可以设置为中心或结束。如果FabAttached设置为True，那么Fab将被布置为连接到BottomAppBar；
FabCradleMargin是设置FAB和BottomAppBar之间的间距，改变这个值会增加或减少FAB和BottomAppBar之间的间距；
FabCradleRoundedCornerRadius指定切口周围角的圆度；
FabCradleVerticalOffset指定FAB和BottomAppBar之间的垂直偏移量。如果fabCradleVerticalOffset为0，则FAB的中心将与BottomAppBar的顶部对齐。

当然，我们还可以通过fabAttached属性去设置FloatingActionButton以及BottomAppBar是否粘合，效果如下：

app:fabAttached=”false”：

app:fabAttached=”true”：

2. Bottom Navigation

BottomNavigationView创建底部导航栏，用户只需轻点一下即可轻松浏览和切换顶级内容视图。

当项目有3到5个顶层（底部）目的地导航到时，可以使用此模式。

使用也是很Easy，如下：

创建一个菜单资源，最多5个导航目标（BottomNavigationView不支持超过5个项目）；
在内容下面放置BottomNavigationView；
将BottomNavigationView上的app：menu属性设置为菜单资源；
设置选择监听事件setOnNavigationItemSelectedListener(…)。

那下面按照步骤操作一次：

Step 1：在布局中添加BottomNavigationView：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimaryDark"
    app:menu="@menu/bottom_navigation_menu" />

Step 2：定义menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:icon="@android:drawable/ic_menu_info_details"
        android:orderInCategory="100"
        android:title="你" />
    <item
        android:icon="@android:drawable/ic_menu_info_details"
        android:orderInCategory="100"
        android:title="我" />
    <item
        android:icon="@android:drawable/ic_menu_help"
        android:orderInCategory="100"
        android:title="他" />

</menu>

Step 3：运行一波，走起~

当然，内置了一些其他样式，感兴趣可原文查阅~

3. Bottom Sheets

BottomSheetBehavior应用于CoordinatorLayout的一个子类，使其成为持久的底部工作表。

持久性底部页面是从屏幕底部出现的视图，在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。

注意：如果要使用模态（对话框）的底页，请使用 BottomSheetDialogFragment。

下面着撸起实现：

Step 1：搞个布局玩玩

外层使用CoordinatorLayout包裹，底部导航栏采用BottomNavigationView，中间内容区域，很Easy咯~

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/cl_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:onClick="showBehavior"
        android:text="测试" />

    <androidx.core.widget.NestedScrollView
        android:id="@+id/show_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:behavior_peekHeight="300dp"
        app:behavior_skipCollapsed="true"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                app:cardBackgroundColor="@color/colorAccent" />

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                app:cardBackgroundColor="@color/colorPrimaryDark" />

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                app:cardBackgroundColor="@color/colorAccent" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        style="@style/Widget.Design.BottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimaryDark"
        app:menu="@menu/bottom_navigation_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 2：实现效果，主要是BottomSheetBehavior使用

package com.hlq.materialstudy;

import android.os.Bundle;
import android.view.View;

import com.google.android.material.bottomsheet.BottomSheetBehavior;

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;

public class MainActivity extends AppCompatActivity {

    private CoordinatorLayout mCoordinatorLayout;
    BottomSheetBehavior behavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mCoordinatorLayout = findViewById(R.id.cl_layout);
        View bottomSheetView = mCoordinatorLayout.findViewById(R.id.show_list);
        behavior = BottomSheetBehavior.from(bottomSheetView);
        behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View view, int i) {
                // 这里是bottomSheet 状态的改变，根据slideOffset可以做一些动画
            }

            @Override
            public void onSlide(View view, float v) {
                // 这里是拖拽中的回调，根据slideOffset可以做一些动画
            }
        });
    }

    public void showBehavior(View view) {
        behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
    }

}

Step 3：效果如下

俩步走，666没毛病。

这里再次简单描述相关细节：

Bottom Sheets具有五种状态：

STATE_COLLAPSED： Bottom Sheets是可见的，但只显示可视（部分）高度。此状态通常是底部工作表的“静止位置”。可视高度由开发人员选择，应足以表明有额外的内容，允许用户触发某个动作或扩展Bottom Sheets；
STATE_EXPANDED： Bottom Sheets是可见的并且它的最大高度并且不是拖拽或沉降；
STATE_DRAGGING：用户主动向上或向下拖动Bottom Sheets；
STATE_SETTLING：拖动/轻扫手势后，Bottom Sheets将调整到特定高度。这将是可视高度，展开高度或0，以防用户操作导致底部表单隐藏；
STATE_HIDDEN： Bottom Sheets隐藏。

如果已经在Activity使用CoordinatorLayout，添加底部表单很简单：