當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Material Design

發布時間：2025/4/16 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 Material Design 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Android之Design Support Library整理
Android漂亮的UI庫集合
Android的材料設計兼容庫（Design Support Library）
Android Design Support Library使用
TextInputLayout
FloatingActionButton
Snackbar
TabLayout
NavigationView
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout

1. 前言

Google IO 2015的Design Support Library的控件進行效果展示。代碼

就看天氣這個應用已經集成了最新的效果，原作者已經開源，請支持并star

2. Design Support Library使用介紹

2.1 綜述

支持Android 2.1以上設備。

Gradle build script dependency：

compile 'com.android.support:design:22.2.0' //可修改版本號為自己匹配

Design Support Library包含8個控件，具體如下：

Widget NameDescription

android.support.design.widget.TextInputLayout	強大帶提示的MD風格的EditText
android.support.design.widget.FloatingActionButton	MD風格的圓形按鈕，來自于ImageView
android.support.design.widget.Snackbar	類似Toast，添加了簡單的單個Action
android.support.design.widget.TabLayout	選項卡
android.support.design.widget.NavigationView	DrawerLayout的SlideMenu
android.support.design.widget.CoordinatorLayout	超級FrameLayout
android.support.design.widget.AppBarLayout	MD風格的滑動Layout
android.support.design.widget.CollapsingToolbarLayout	可折疊MD風格ToolbarLayout

下面詳細說說這些控件的特性和使用注意項。

2.2 TextInputLayout控件

在MD中，使用TextInputLayout將EditText進行了封裝，提示信息會變成一個顯示在EditText之上的floating label，這樣用戶就始終知道他們現在輸入的是什么，而且過度動畫是平滑的。還可以在下方通過setError設置Error提示，使用比較簡單，所以不做過多說明，詳情見Demo源碼。

注意項：TextInputLayout中至少嵌套一個EditText。

2.3 FloatingActionButton控件

一個負責顯示界面基本操作的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色為主題中colorAccent的懸浮操作按鈕。除了一般大小的懸浮操作按鈕，它還支持mini size（fabSize=”mini”）。FloatingActionButton繼承自ImageView，你可以使用android:src或者 ImageView的任意方法，比如setImageDrawable()來設置FloatingActionButton里面的圖標。

無特別注意項，和普通控件類似。

2.4 Snackbar控件

Snackbar為一個操作提供輕量級、快速的反饋。Snackbar顯示在屏幕的底部（有MD動畫效果浮現和消失），包含了文字信息與一個可選的操作按鈕。在指定時間結束之后自動消失。另外，用戶還可以在超時之前將它滑動刪除。Snackbar被看作是比Toast更強大的快速反饋機制，你會發現他們的API非常相似。你應該注意到了make()方法中把一個View作為第一個參數（Snackbar試圖找到一個合適的父親以確保自己是被放置于底部）。

無特殊注意項，和Toast類似。

2.5 TabLayout控件

通過選項卡的方式切換View并不是MD中才有的新概念，它們和頂層導航模式或者組織app中不同分組內容（比如，不同風格的音樂）是同一個概念。 Design library的TabLayout 既實現了固定的選項卡（View的寬度平均分配），也實現了可滾動的選項卡（View寬度不固定同時可以橫向滾動）。如果你使用ViewPager在 tab之間橫向切換，你可以直接從PagerAdapter的getPageTitle() 中創建選項卡，然后使用setupWithViewPager()將兩者聯系在一起。它可以使tab的選中事件能更新ViewPager,同時 ViewPager 的頁面改變能更新tab的選中狀態。

注意項：如果你使用ViewPager在tab之間橫向切換，切記可以直接從PagerAdapter的getPageTitle() 中創建選項卡，然后使用setupWithViewPager()將兩者聯系在一起。

2.6 NavigationView控件

抽屜導航是app識別度與內部導航的關鍵，保持這里設計上的一致性對app的可用性至關重要，尤其是對于第一次使用的用戶。 NavigationView 通過提供抽屜導航所需的框架讓實現更簡單，同時它還能夠直接通過菜單資源文件直接生成導航元素。把NavigationView作為 DrawerLayout的內容視圖來使用。NavigationView處理好了和狀態欄的關系，可以確保NavigationView在API21+ 設備上正確的和狀態欄交互。

注意項：你可以通過設置一個OnNavigationItemSelectedListener，使用其 setNavigationItemSelectedListener()來獲得元素被選中的回調事件。它為你提供被點擊的菜單元素，讓你可以處理選擇事件、改變復選框狀態、加載新內容、關閉導航菜單，以及其他任何你想做的操作。你會注意到NavigationView的兩個新自定義屬性如下：

new attrdescription

app:headerLayout	控制頭部的布局
app:menu	導航菜單的資源文件（也可以在運行時配置）

2.7 CoordinatorLayout控件

手勢,及滾動布局，MD的手勢有很多組成部分，包括touch ripples和meaningful transitions。Design library引入了CoordinatorLayout，一個從另一層面去控制子view之間觸摸事件的布局，Design library中的很多控件都利用了它。一個很好的例子就是當你將FloatingActionButton作為一個子View添加進 CoordinatorLayout并且將CoordinatorLayout傳遞給 Snackbar.make()，在3.0及其以上的設備上，Snackbar不會顯示在懸浮按鈕的上面，而是FloatingActionButton 利用CoordinatorLayout提供的回調方法，在Snackbar以動畫效果進入的時候自動向上移動讓出位置，并且在Snackbar動畫地消失的時候回到原來的位置，不需要額外的代碼。

CoordinatorLayout的另一個用例是ActionBar與滾動技巧。你可能已經在自己的布局中使用了Toolbar ，它允許你更加自由的自定義其外觀與布局的其余部分融為一體。Design library把這種設計帶到了更高的水平，使用AppBarLayout可以讓你的Toolbar與其他View（比如TabLayout的選項卡）能響應被標記了ScrollingViewBehavior的View的滾動事件。

注意項：

當用戶滾動RecyclerView，AppBarLayout可以這樣響應滾動事件：

根據子view的滾動標志（scroll flag）來控制它們如何進入（滾入屏幕）與退出（滾出屏幕）。

Flag包括：

scroll：所有想滾動出屏幕的View都需要設置這個flag，沒有設置這個flag的View將被固定在屏幕頂部。
enterAlways：這個flag讓任意向下的滾動都會導致該View變為可見，啟用快速“返回模式”。
enterAlwaysCollapsed：當你的視圖已經設置minHeight屬性又使用此標志時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
exitUntilCollapsed：this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting。

特別注意：所有使用scroll flag的View都必須定義在沒有使用scroll flag的View前面，這樣才能確保所有的View從頂部退出，留下固定的元素。

PS一句：CoordinatorLayout還提供了layout_anchor和layout_anchorGravity屬性一起配合使用，可以用于放置floating view，比如FloatingActionButton與其他View的相對位置。相見Demo中演示。

2.8 AppBarLayout控件

這個沒啥解釋的，就是一個ViewGroup，配合ToolBar與CollapsingToolbarLayout等使用。就是一個純容器類。

無特殊注意項。

2.9 CollapsingToolbarLayout控件

可伸縮折疊的Toolbar （Collapsing Toolbar），直接添加Toolbar到AppBarLayout可以讓你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll標志，但是無法控制不同元素如何響應collapsing的細節。這里使用了 CollapsingToolbarLayout的app:layout_collapseMode=”pin”來確保Toolbar在view折疊的時候仍然被固定在屏幕的頂部。還可以做到更好的效果，當你讓CollapsingToolbarLayout和Toolbar在一起使用的時候，title 會在展開的時候自動變得大些，而在折疊的時候讓字體過渡到默認值。必須注意，在這種情況下你必須在CollapsingToolbarLayout上調用 setTitle()，而不是在Toolbar上。除了固定住View，你還可以使用 app:layout_collapseMode=”parallax”（以及使用 app:layout_collapseParallaxMultiplier=”0.7”來設置視差因子）來實現視差滾動效果（比如 CollapsingToolbarLayout里面的一個ImageView），這中情況和CollapsingToolbarLayout的 app:contentScrim=”?attr/colorPrimary”屬性一起配合更完美。

有一件事情必須注意，那就是CoordinatorLayout并不知道FloatingActionButton或者AppBarLayout的內部工作原理，它只是以Coordinator.Behavior的形式提供了額外的API，該API可以使子View更好的控制觸摸事件與手勢以及聲明它們之間的依賴，并通過onDependentViewChanged()接收回調。

可以使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)注解或者在布局中使用app:layout_behavior=”com.example.app.你的View$Behavior”屬性來定義view的默認行為。 framework讓任意View和CoordinatorLayout結合在一起成為了可能。

注意項：注意項上面描述部分已經聲明，不需要額外說明。

3. 總結

到此2015 Google IO的新suppory包控件完全介紹完畢。小伙伴們趕緊用起來吧。下載Demo請點擊：Design Support Library Demo

提示：android.support.v4.widget.NestedScrollView也是新控件，NestedScrollView和ScrollView基本功能一致，只不過NestedScrollView可以兼容新的控件，如：

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">  <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/cheese_2" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>  <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingTop="24dp">  <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/card_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Info" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Friends" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Related" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/cheese_ipsum" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView>  <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" android:clickable="true" android:src="@drawable/ic_discuss" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout>

補充：說說CollapsingToolbarLayout（來自：http://www.open-open.com/lib/view/open1438265746378.html）

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。

使用CollapsingToolbarLayout：

<android.support.design.widget.AppBarLayout android:layout_width="match_parent"android:layout_height="256dp"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout"android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="#30469b"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageView android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/bg"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><android.support.v7.widget.Toolbar android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin" /></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>

我們在CollapsingToolbarLayout中設置了一個ImageView和一個Toolbar。并把這個CollapsingToolbarLayout放到AppBarLayout中作為一個整體。

1、在CollapsingToolbarLayout中：

我們設置了layout_scrollFlags:關于它的值我這里再說一下：

scroll - 想滾動就必須設置這個。
enterAlways - 實現quick return效果, 當向下移動時，立即顯示View（比如Toolbar)。
exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。

其中還設置了一些屬性，簡要說明一下：

contentScrim - 設置當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。
expandedTitleMarginStart - 設置擴張時候(還沒有收縮時)title向左填充的距離。

沒擴張時候如圖：

2、在ImageView控件中：

我們設置了：

layout_collapseMode (折疊模式) - 有兩個值:
- pin - 設置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。
- parallax - 設置為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子，值為：0~1。

3、在Toolbar控件中：

我們設置了layout_collapseMode(折疊模式)：為pin。

綜上分析：當設置了layout_behavior的控件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時，ImageView會有視差效果的向上滾動移除屏幕，當開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變為我們設置好的背景色，Toolbar也一直會固定在最頂端。效果如圖

注意：使用CollapsingToolbarLayout時必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上不會顯示。

mCollapsingToolbarLayout.setTitle("title"); // 該變title的字體顏色 mCollapsingToolbarLayout.setExpandedTitleColor(); // 擴張時候的title顏色 // 收縮后在Toolbar上顯示時的title的顏色 mCollapsingToolbarLayout.setCollapsedTitleTextColor();

這個顏色的過度變化其實CollapsingToolbarLayout已經幫我們做好，它會自動的過度，比如我們把收縮后的title顏色設為綠色，效果如圖：

沒錄好，反正效果出來了。接下來看看代碼怎么實現吧

布局文件

<android.support.design.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"><android.support.design.widget.AppBarLayout android:layout_width="match_parent"android:layout_height="256dp"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout"android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="#30469b"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageView android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/bg"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7"/><android.support.v7.widget.Toolbar android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.v7.widget.RecyclerView android:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbars="none"/></LinearLayout></android.support.design.widget.CoordinatorLayout>

代碼文件：

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mToolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {onBackPressed();} });//使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上則不會顯示 CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");//通過CollapsingToolbarLayout修改字體顏色 mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設置還沒收縮時狀態下字體顏色 mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設置收縮后

總結

以上是生活随笔為你收集整理的Material Design的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。