[翻譯]Android 5.0之應用中實現材料設計—Material Design

標籤：des   android   style   blog   http   color   io   os   ar   

上午的時候在刷Google+，看到了Abraham Williams轉寄了一篇強文，是Android Developers網站新發的一篇部落格—Implementing Material Design in your Android App。覺得很前衛，對於新發布的Android版本號碼Android 5.0是一個很好的學習和瞭解的機會，所以就花了些時間把它翻譯了下來，希望對自己、對其它人有所啟發。

因為翻譯Android開發部落格和API也只是業餘愛好，水平有限，其中不免有不準確的地方，所以把原文地址也一併貼過來，不清楚的地方，可以查看原文。

http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html?m=1，不幸的是，要查看這篇文章，得FQ。

好，下面是翻譯的詳情：

 

 

對於多屏世界，材料設計(Material Design)是一種實現可視化、互動和動作設計的綜合途徑。Android 5.0 Lollipop和更新的支援包能夠了幫你建立材料UI。下面簡要簡介一下在應用中能夠實現的材料設計、API和控制項的一些主要元素。

 有形的surface

在材料設計中，UI由數字“紙&墨”片段構成。surface及其投射的陰影對應用的結構，即所能觸摸到的介面和感知到的移動，提供了可見的提示。材料設計可以通過移動、擴充和重組來建立靈活的UI。

 陰影 

Surface的位置和深度導致光線和陰影上面的輕微改變。新的elevation屬性使你能夠精確的設定視圖在Z軸上的位置，由此，framework在該視圖後面的子項上面投射出即時動態陰影。你可以以dip為單位在布局中聲明設定elevation：

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

View Code

還可以通過代碼getElevation()/setElevation()來設定(ViewCompat中也有相仿的實現)。視圖投射的陰影由其輪廓決定，而輪廓預設情況下源自於視圖的背景。例如，把FAB(floating action button)的背景設定為圓形drawable，然後，FAB就會投射恰當的陰影。如果想更精細的控制視圖的陰影，可以設定ViewOutlineProvider，它能夠自訂getOutline()裡面的Outline。

 卡片

 卡片是一種通用模式，用來建立持有清晰資訊片段的surface。新的CardView支援包通過提供輪廓和陰影，允許你更隨意的建立CardView(在之前平台上有相同的效果)。

1 <android.support.v7.widget.CardView2     android:layout_width="match_parent"3     android:layout_height="wrap_content">4     <!-- Your card content -->5  6 </android.support.v7.widget.CardView>

View Code

CardView擴充自FrameLayout，並且提供了預設的elevation和圓角半徑，以使卡片在不同的平台上面擁有一致的外觀。如果需要的話，可以通過cardElevation和cardCornerRadius屬性來設定。記住，卡片並不是實現維度惟一方式，你應該提防UI過度卡片化！

 類列印設計

 材料利用源於列印設計的經典規則來建立乾淨、簡單的布局，以放置內容在其前面或者中心。粗體權衡了顏色選擇、有意而為的空格、雅緻的排版和濃烈的底線方格，建立了有層次的、意義明了的和重點突出的效果。

 排版

 Android 5.0更新了系統字型Roboto以忽略字型大小限制的方式來美觀且清晰地展示文本。新的中等權重添加了進來(android:fontFamily=”sans-serif-medium”)，新的文本外觀風格實現了廣為推薦的typographic scale，用來平衡內容的密度和閱讀的舒適感。例如，可以通過設定”android:textAppearance=’@android:style/TextAppearance.Material.Title’”來使用Title風格。這些風格可能通過AppCompat支援包來在較老版本上使用，如”@style/TextAppearance.AppCompat.Title”.

 色彩

應用的調色盤給應用帶來了印跡和人格，以致我們可以通過以下主題屬性來實現UI控制的彩色化。

• colorPrimary：應用的首要印跡顏色；常用作actionbar的背景顏色、最近任務的標題以及邊緣效果中。
• colorAccent：colorPrimary的生動補充。用於諸如EditTex和Switch等架構的控制。
• colorPrimaryDartk：colorPrimary的更暗色補充。用於狀態條。

 更多的屬性給予彩色化控制更細粒度的控制，例如：colorControlNormal, colorControlActivated, colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor和navigationBarColor.

 AppCompat提供了以上功能的更大子集，允許你在Lollipop之前版本上實現彩色化控制。

 動態色彩

 

http://4.bp.blogspot.com/-qX9XNcFEQlQ/VEngSGP2ZyI/AAAAAAAAA6E/PbORZ-3ex-Y/s1600/palette2.gif

材料設計鼓勵色彩的動態使用，尤其是你有許多圖片要處理的時候。新的Palette支援包允許你擷取從圖片到要匹配的UI控制風格的色彩集，以建立擬真的體驗。萃取的顏色版將包含強烈的和輕柔的色調，就像為了實現最佳可讀性的前景文本顏色(forground text color)一樣。例如：

 1 Palette.generateAsync(bitmap, 2         new Palette.PaletteAsyncListener() { 3     @Override 4     public void onGenerated(Palette palette) { 5          Palette.Swatch vibrant = 6                  palette.getVibrantSwatch(); 7           if (swatch != null) { 8               // If we have a vibrant color 9               // update the title TextView10               titleView.setBackgroundColor(11                   vibrant.getRgb());12               titleView.setTextColor(13                   vibrant.getTitleTextColor());14           }15     }16 });

View Code

 可信動作

 有形surface顯示的就像電影中的跳格剪接。他們移動到能夠協助集中注意力的地方，建立空間聯絡並維持連續性。材料對觸摸作出響應，以確認互動以及所觸點發出的波形外向改變。所有的動作都有意義且讓人倍感親切，以協助使用者的理解。

Activity+Fragment轉變特效

通過聲明貫穿兩個螢幕的通用”共用元素”，可以建立兩種狀態間順滑的轉換特效。

 

http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s1600/activity_transitions%2B(1).gif

album_grid.xml:

1 <ImageView2         …3         android:transitionName="@string/transition_album_cover" />

View Code

album_details.xml

1 <ImageView2         …3         android:transitionName="@string/transition_album_cover" />

View Code

AlbumActivity.java:

1 Intent intent = new Intent();2 String transitionName = getString(R.string.transition_album_cover);3 …4 ActivityOptionsCompat options =5 ActivityOptionsCompat.makeSceneTransitionAnimation(activity,6     albumCoverImageView,   // The view which starts the transition7     transitionName    // The transitionName of the view we’re transitioning to8     );9 ActivityCompat.startActivity(activity, intent, options.toBundle());

View Code

兩個螢幕中定義了相同的transitionName。當啟動新的Activity的時候，這個轉換特效自動地賦予生命。除了共用元素之外，現在也可以精心設計進入和退出元素(轉換特效)。

波紋

http://3.bp.blogspot.com/-6UtZxpuhI-Q/VEqCMq6q17I/AAAAAAAAA68/oVt3vMIwJs0/s1600/animation-responsiveinteraction-inkreactions-notouchripplepressandrelease_large_xhdpi.gif

 材料設計通過墨紋surface回應對使用者的觸摸事件作出響應。拿Button為例，當你使用或繼承Theme.Material(android:selectableItemBackground)時，互動控制預設展示這種行為。通過簡單地在ripple元素中包裹drawable元素，你可以將這種反饋添加到自己定義的drawable中：

 1 <ripple 2     xmlns:android="http://schemas.android.com/apk/res/android" 3     android:color="@color/accent_dark"> 4     <item> 5         <shape 6             android:shape="oval"> 7             <solid android:color="?android:colorAccent" /> 8         </shape> 9     </item>10 </ripple>

View Code

自訂視圖應該擴大觸控目標預測直到回調View#drawableHotspotChanged裡面的drawable，由此，波紋可以從觸摸點開始。

StateListAnimator

材料設計也可以通過”升起”以接觸手指來回應觸摸事件，就像磁鐵的吸引力一樣。也可以通過使translationZ屬性產生動畫效果來達到這種效果，其中的translationZ屬性相似於elevation屬性但卻是打算為transient所用；其它是Z=elevation + translationZ。新的StateListAnimator屬性允許很輕易就能實現觸摸上面的translationZ產生動畫(Button預設實現了這種效果)：

layout/yout_layout.xml:

1 <ImageButton …2     android:stateListAnimator="@anim/raise" />

View Code

anim/raise.xml:

 1 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 2     <item android:state_enabled="true" android:state_pressed="true"> 3         <objectAnimator 4             android:duration="@android:integer/config_shortAnimTime" 5             android:propertyName="translationZ" 6             android:valueTo="@dimen/touch_raise" 7             android:valueType="floatType" /> 8     </item> 9     <item>10         <objectAnimator11             android:duration="@android:integer/config_shortAnimTime"12             android:propertyName="translationZ"13             android:valueTo="0dp"14             android:valueType="floatType" />15     </item>16 </selector>

View Code

Reveal

用於展示新內容的典型的材料轉換特效通過擴充的圓形遮罩來實現這種效果。通過外擴的雷達效果，Reveal協助加強了把使用者的觸摸點作為所有轉換特效的起始。可能通過下面的Animator來實現這種效果：

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

View Code

Interpolators

動作應該是審慎的、迅捷的、精確的。不像典型的”易入易出”的轉換特效，在材料設計中，對象常常快速開始，然後緩慢地到達他們的最終位置。在動畫的過程中，對象花費更多的時間在靠近最終位置的地方。最終，使用者不必等待動畫結束，由此，動作的負面效果被最小化。新的”快進慢出”interpolator已被添加進來以實現這種動作。

http://3.bp.blogspot.com/-h1tGDao-XK4/VEqCGLnpyQI/AAAAAAAAA60/LE4NO1X_gzk/s1600/animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.gif

對於元素的進入螢幕，請分別查看”線出慢入”和”快出線入”interpolator。

可適設計

材料設計的最終核心概念是建立適應性的設計，這種設計對於所以尺寸形狀，從手錶到巨型電視，都能夠完好地適應。適應性設計技術幫我們實現了這種願景：在相同的基礎系統下，每一個裝置展示了不同的視圖。每一個視圖對於每一種尺寸都是量身定製，每一種互動對於每一個裝置都恰到好處。色彩、映像、視圖階層和空間聯絡保持恒定。材料設計系統提供了靈活的構件和模式來幫你構建可伸縮的設計。

工具條(Toolbar)

Toolbar是action bar模式的泛化，提供了相似的功能，但卻更加靈活。不像標準的action bar，toolbar在視圖階層中只是一個視圖，和其它的沒有任何區別，所以你可以把它放到任何你喜歡的地方，和其它的視圖交叉布局，產生動畫，回應滑動事件等待。通過調用Activity.setActionBar()，你可以使Toolbar像Activity中的action bar一樣活動。

http://1.bp.blogspot.com/-np39I5VrQTQ/VEnnefqkroI/AAAAAAAAA6c/--kVt_Wi1vk/s1600/contacts_toolbars.png

在這個例子當中，藍色的toolbar高度被擴充，貼在了螢幕內容上面，並提供了一個導覽按鈕。注意：額外的兩個toolbar分別用在列表和細節視圖中。

繼續前行並材料設計化

材料設計助你構建易於理解的、美觀的且可適的應用，其中充滿了動作。我希望這篇部落格能夠激勵你把這些規則應用到你的app中，並指示了一些新的(相容性)API來達到這個目的。

 

[翻譯]Android 5.0之應用中實現材料設計—Material Design