在你的Android應用中使用Material Design

譯自 http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html —— By NashLegend

原譯文在我的github上:https://github.com/NashLegend/ProjectBabel/blob/master/Implementing%20Material%20Design%20in%20Your%20Android%20app.md

關於如何在低版本Android上使用Material Design,可以看上篇:在低版本Android上使用Material Design

Material Design對於多屏幕的視覺、交互和動作設計作了很大的改進。Android 5.0和最新的支持包可以幫助你創建Material風格的UI。這裏將概述新的Material Design風格設計、新的API和組件,你可以將它們用在你的app中。

Tangible surfaces

在Material Design的世界中,UI是由電子紙和電子墨水構建起來的。這些UI的表面和陰影爲應用程序的結構提供視覺線索(也就是根據樣式能看出層次關係等等,比如下圖),你看他的樣子就知道哪裏是可觸摸的部分、就可以知道它將以何種方式運動(同樣如下圖)。這種Didital Material可以移動、擴張和變形以創建靈活的UI界面。

陰影

一個surface的位置和深度決定了其光影的微妙變化。你可以使用新的elevation屬性設置view在Z軸的位置,系統會依此在view後自動繪製出實時的動態陰影。你可以在layout XML裏面設置elevation屬性,單位是dip:

<ImageView …
    android:elevation="8dp" />

你也可以在代碼中通過getElevation()/setElevation()(with shims in ViewCompat)方法操作elevation屬性。View投身的陰影是由其輪廓決定的,而默認情況下這個輪廓是由background產生的。舉個栗子:如果你爲一個浮動按鈕設置了一個圓形的shape drawable背景,那麼它的陰影就是圓形的。如果你想能對陰影進行更詳細的控制,你可以使用ViewOutlineProvider來自定義其輪廓,通過getOutline()方法可以取得這個輪廓。

卡片

要顯示一些不同的信息,使用卡片是一個常用模式。你可以使用新的支持包中的CardView輕鬆創建卡片式佈局,新的CardView在低版本Android上也支持輪廓和陰影。

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- Your card content -->
</android.support.v7.widget.CardView>

CardView繼承了FrameLayout並提供了默認的elevation和圓角,這樣卡片在不同版本的系統上就擁有統一的表現。如有必要,你還可以通過設置cardElevationcardCornerRadius自定義這些屬性。但是卡片並不是實現維度效果的不二法門,所以別濫用。

印刷樣式的設計(Print-like Design)

Material Design借鑑了印刷設計以創建簡明清晰的佈局,將你的內容部分突出在前面和中間。大膽的配色、刻意的留白、精緻的排版和強大的基線網格(a strong baseline grid)產生了具有層次感、有意義、突出重點的佈局.

字體排版

Android 5.0升級了系統Roboto字體,現在無論字體大小,都可以漂亮整潔地顯示字體。系統還新增了一個新的適用於中等字號(android:fontFamily=”sans-serif-medium”),新的文本顯示樣式使用了備受好評的字體排版縮放以平衡內容密度的閱讀舒適度。舉個栗子:你可以通過設置android:textAppearance=”@android:style/TextAppearance.Material.Title”輕鬆地使用"Title"樣式,可以通過AppCompat支持包在舊版本的Android系統上使用這種樣式,舉個栗子:“@style/TextAppearance.AppCompat.Title”

顏色

應用的色調(color palette)會爲你的應用帶來品牌辨識度和個性化(比如一看見紅色就想到可口可樂),現在你們可以通過設置下面的屬性使得這些變得更加簡單。

  • colorPrimary. 應用的主色調、品牌顏色,用於ActionBar背景、最近運行任務界面標題以及邊緣效果(比如說MIUI系統中可滾動元素滾動到邊緣時出現的橙黃色)。

  • colorAccent. 主色調的鮮亮補充色(Vibrant complement to the primary branding color),用於框架控件比如說EditText和Switch。(前面幾句真彆扭,因此注:colorAccent,不知道專業術語是啥,直譯應該是突出的顏色,因此,EditText的顏色並不是colorAccent,它得到焦點後的顏色纔是colorAccent,還有Switch在打開時的顏色也是colorAccent,如上圖)。

  • colorPrimaryDark. 主色調的暗色版本,用於狀態欄。

除了上面這些之外,你還可以對顏色進行更深入精細的控制,參見colorControlNormal, colorControlActivated, colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColornavigationBarColor

AppCompat支持上面功能的絕大部分,因此你可以將此應用在Android 5.0之前的系統中。

Dynamic color —— 動態顏色

Material Design鼓勵使用動態顏色,尤其是你的應用中有很多圖片時。新的Palette支持庫可以提取圖片中的一部分顏色來設置你的UI的樣式來使界面顏色互相搭配以提供一種沉浸式體驗。提取出來的調色板(palette)包括突出的和柔和的色調(vibrant and muted tones,參見下圖文字後面變化的背景色),同時可取得最佳閱讀體驗的文本前景色(參見下圖的變化的文字顏色)。舉個栗子:

Palette.generateAsync(bitmap,
        new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
         Palette.Swatch vibrant =
                 palette.getVibrantSwatch();
          if (swatch != null) {
              // If we have a vibrant color
              // update the title TextView
              titleView.setBackgroundColor(
                  vibrant.getRgb());
              titleView.setTextColor(
                  vibrant.getTitleTextColor());
          }
    }
});

一圖勝千言。 

Authentic Motion —— 真實的運動

Tangible surfaces不會突兀地出現,他們出現的動作要引導用戶注意力,要建立空間關聯並保持連貫性。Material元素會對你的觸摸事件做出響應以對本次交互進行確認,然後所有的變化將以你點擊的位置爲中心向外擴散。所有的動作都是有意義的和密切相關的,使用戶易於理解。

Activity 和 Fragment 切換

通過聲明兩屏之間通用的共享元素,你可以在兩種狀態間創建流暢的切換。

一圖勝千言:

示例代碼:

album_grid.xml
…
    <ImageView
        …
        android:transitionName="@string/transition_album_cover" />
album_details.xml
…
    <ImageView
        …
        android:transitionName="@string/transition_album_cover" />

AlbumActivity.java
Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
    albumCoverImageView,   // The view which starts the transition
    transitionName    // The transitionName of the view we’re transitioning to
    );
ActivityCompat.startActivity(activity, intent, options.toBundle());

我們在兩屏之間定義了相同的transitionName。當打開新的Activity的時候,切換過程就自動開始了。除了共享元素之外,你也可以定義進入退出元素。

Ripples ——波紋效果

Material風格的元素以一種波紋(ripple)擴散的方式響應用戶的觸摸。如果你使用了Theme.Material或者其派生的主題,那麼交互性控件比如Button默認就會擁有這種效果(as will ?android:selectableItemBackground)。你也可以在你的drawable上使用這種效果——只要把它們放到ripple元素裏,如下:

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent_dark">
    <item>
        <shape
            android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

自定義view通過View#drawableHotspotChanged回調方法將點擊位置傳遞過去,以便從點擊的位置發起ripple效果。

StateListAnimator

當你觸摸Material元素的時候,它也可以擡起(鏈接裏的Lift on touch)以迎合你的手指,就像磁鐵異性相吸一樣。你可以通過translationZ屬性動畫來實現這種效果,translationZ屬性與elevation相似,不過它的主要作用是做這些過渡效果。 Z = elevation + translationZ. 新的stateListAnimator屬性輕鬆創建觸摸時的Z軸動畫(Buttons默認就有這效果):

示例代碼:

layout/your_layout.xml
<ImageButton …
    android:stateListAnimator="@anim/raise" />
anim/raise.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="@dimen/touch_raise"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

Reveal —— 打開內容

Material風格的app顯示新內容的一個典型過渡效果是一個向外擴散的圓形遮罩。過渡動畫以用戶點擊位置爲圓心發起並向外擴散,你可以使用下面這種Animator來實現:

Animator reveal = ViewAnimationUtils.createCircularReveal(
                    viewToReveal, // The new View to reveal
                    centerX,      // x co-ordinate to start the mask from
                    centerY,      // y co-ordinate to start the mask from
                    startRadius,  // radius of the starting mask
                    endRadius);   // radius of the final mask
reveal.start();

Interpolators —— 插值器

動作應該是合理的(deliberate)、迅速的、精確的。與普通的緩動效果不同的是,在Material Design裏,物體傾向於快速開始然後緩動到最終位置。在動畫過程中,物體在最終位置附近時的運動使用了更多的時間,因此用戶不必要爲了等待動畫結束花費更多時間,動畫的負面效果被降到最低。這種動作使用的是一個新的快進慢出的插值器

下面是一圖勝千言時間: 

對於進入和離開屏幕的元素(which should do so at peak velocity),分別使用linear-out-slow-in 分 fast-out-linear-in 插值器。

Adaptive design —— 自適應設計

Material Design最後一個核心概念是創建一個單獨的自適應設計佈局就可以適配小到手錶大到電視的所有尺寸和形狀(手錶有圓有方)。自適應設計設計技術幫助我們實現用同一個系統在不同設備上展示不同的外觀。每個view都會自適應不同設備的尺寸的交互方式。 顏色、iconography,、層次、空間關係保持不變。Material Design系統提供了靈活的組件和模式以幫助你做到這一點。

Toolbar

Toolbar是ActionBar模式的一般化形式,它提供相似的功能以及更高的靈活性。與標準的ActionBar不同,Toolbar就在你的view的結構層次中,你可以像操作其他的view完全一樣的操作它。你可以使用Activity.setActionBar()方法讓它變成你的ActionBar。

在這個例子裏,藍色的Toolbar很高,被屏幕內容覆蓋並且提供了一個導航按鈕。注意另外兩個Toolbar分別用在List和詳細內容界面(說這麼多無非是爲了說明Toolbar很靈活)。

欲知更多Toolbar的使用方式,這裏

開始讓你的應用Material化吧

Material Design幫助你創建易於理解的、漂亮的、自適應的、動起來的活的應用。希望這篇文章能讓你動心並將Material Design應用到你的app裏。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章