Android 5.0之應用中實現材料設計—Material Design


上午的時候在刷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,不幸的是,要查看這篇文章,得翻牆。

好,下面是翻譯的詳情:

 

 

對於多屏世界,材料設計(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.CardView
2     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 TextView
10               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 <ImageView
2 3         android:transitionName="@string/transition_album_cover" />
View Code

album_details.xml

1 <ImageView
2 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 transition
7     transitionName    // The transitionName of the view we’re transitioning to
8     );
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         <objectAnimator
11             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 reveal
3                     centerX,      // x co-ordinate to start the mask from
4                     centerY,      // y co-ordinate to start the mask from
5                     startRadius,  // radius of the starting mask
6                     endRadius);   // radius of the final mask
7 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來達到這個目的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM