直接拿來用！十大Material Design開源項目

標籤：

介於擬物和扁平之間的Material Design自面世以來，便引起了很多人的關注與思考，就此產生的討論也不絕於耳。本文詳細介紹了在Android開發人員圈子裡頗受青睞的十個Material Design開源項目，從樣本、FAB、菜單、動畫、Ripple到Dialog，看被稱為“Google第一次在設計語言和規範上超越了Apple”的Material Design是如何逐漸成為App的一種全新設計標準。

1. MaterialDesignLibrary

在眾多新晉庫中，MaterialDesignLibrary可以說是頗受開發人員矚目的一個控制項效果庫，能夠讓開發人員在Android 2.2系統上使用Android 5.0才支援的控制項效果，比如扁平、矩形、浮動按鈕，複選框以及各式各樣的進度列指示器等。

除上述之外，MaterialDesignLibrary還擁有SnackBar、Dialog、Color selector組件，可非常便捷地對應用介面進行設定。

進度列指示器樣式效果設定：

 

[xml] view plaincopy 

1. <com.gc.materialdesign.views.ProgressBarCircularIndetermininate    
2.                 android:id="@+id/progressBarCircularIndetermininate"    
3.                 android:layout_width="32dp"    
4.                 android:layout_height="32dp"    
5.                 android:background="#1E88E5" />  

Dialog：

 

 

[java] view plaincopy 

1. Dialog dialog = new Dialog(Context context,String title, String message);  
2. dialog.show();  

 

相關連結：MaterialDesignLibrary的mobilehub首頁

2. RippleEffect

由來自法蘭西的Robin Chutaux開發的RippleEffect基於MIT許可協議開源，能夠在Android API 9+上實現Material Design，為開發人員提供了一種極為簡易的方式來建立帶有可擴充視圖的header視圖，並且允許最大程度上的自定製。

用法（在XML檔案中聲明一個RippleView）：

 

[xml] view plaincopy 

1. <com.andexert.library.RippleView  
2.   android:id="@+id/more"  
3.   android:layout_width="?android:actionBarSize"  
4.   android:layout_height="?android:actionBarSize"  
5.   android:layout_toLeftOf="@+id/more2"  
6.   android:layout_margin="5dp"  
7.   ripple:rv_centered="true">  
8.   
9.   <ImageView  
10.     android:layout_width="?android:actionBarSize"  
11.     android:layout_height="?android:actionBarSize"  
12.     android:src="@android:drawable/ic_menu_edit"  
13.     android:layout_centerInParent="true"  
14.     android:padding="10dp"  
15.     android:background="@android:color/holo_blue_dark"/>  
16.   
17. </com.andexert.library.RippleView>  

 

相關連結：RippleEffect的mobilehub首頁

3. MaterialEditText

隨著Material Design的到來，AppCompat v21也為開發人員提供了Material Design的控制面板支援，其中就包括EditText，但卻並不好用，沒有設定顏色的API，也沒有任何Google Material Design Spec中提到的特性。於是，來自國內的開發人員“扔物線”開發了MaterialEditText庫，直接繼承EditText，無需修改Java檔案即能實現自訂控制項顏色。

自訂Base Color：

 

[xml] view plaincopy 

1. app:baseColor="#0056d3"  

 

自訂Error Color：

 

[xml] view plaincopy 

1. app:maxCharacters="10"  
2. app:errorColor="#ddaa00"  

 

相關連結：MaterialEditText的mobilehub首頁

4. Android-LollipopShowcase

Android-LollipopShowcase是由來自奧地利的移動、後端及Web開發人員Mike Penz所開發的示範應用，集中示範了新Material Design中所有的UI效果，以及Android Lollipop中其他非常酷炫的特性元素，比如Toolbar、RecyclerView、ActionBarDrawerToggle、Floating Action Button（FAB）、Android Compat Theme等。

相關連結：Android-LollipopShowcase的mobilehub首頁

5. MaterialList

MaterialList是一個能夠協助所有Android開發人員擷取GoogleUI設計規範中新增的CardView（卡片視圖）的開源庫，支援Android 2.3+系統。作為ListView的擴充，MaterialList可以接收、儲存卡片列表，並根據它們的Android風格和設計模式進行展示。此外，開發人員還可以建立專屬於自己的卡片布局，並輕鬆將其添加到CardList中。

 

使用過程代碼，在布局中聲明MaterialListView：

 

 

[xml] view plaincopy 

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"  
4.     android:paddingLeft="@dimen/activity_horizontal_margin"  
5.     android:paddingRight="@dimen/activity_horizontal_margin"  
6.     android:paddingTop="@dimen/activity_vertical_margin"  
7.     android:paddingBottom="@dimen/activity_vertical_margin">  
8.   
9.     <com.dexafree.materiallistviewexample.view.MaterialListView  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="fill_parent"  
12.         android:id="@+id/material_listview"/>  
13.   
14. </RelativeLayout>  

相關連結：MaterialList的mobilehub首頁

6. android-floating-action-button

Floating Action Button（FAB）是眾多專家大牛針對Material Design討論比較細化的一個點，通過圓形元素與分割線、卡片、各種Bar的直線形成鮮明對比，並使用色彩設定中鮮豔的輔色，帶來更具突破性的視覺效果。也正因如此，在Github上，有著許多與FAB相關的開源項目，基於Material Design規範的開源Android浮動Action Button控制項android-floating-action-button便是其中之一。

 

其主要特性如下：

 

• 支援常規56dp和最小40dp的按鈕；
• 支援自訂正常、Press狀態以及可拖拽表徵圖的按鈕背景顏色；
• AddFloatingActionButton類能夠讓開發人員非常方便地直接在代碼中寫入加號表徵圖；
• FloatingActionsMenu類支援展開/摺疊顯示動作。

 

相關連結：android-floating-action-button的mobilehub首頁

7. android-ui

android-ui是Android UI組件類庫，支援Android API 14+，包含了ActionView、RevealColorView等UI組件。其中，ActionView可使Action動作顯示動畫效果，而RevealColorView則帶來了Android 5.0中的圓形顯示/隱藏動畫體驗。

相關連結：android-ui的mobilehub首頁

8. Material Menu

Material Menu為開發人員帶來了非常酷炫的Android菜單、返回、刪除以及檢查按鈕變形，完全控制動畫，並為開發人員提供了兩種MaterialMenuDrawable封裝。

自訂色彩等操作：

 

[java] view plaincopy 

1. // change color  
2. MaterialMenu.setColor(int color)  
3.   
4. // change transformation animation duration  
5. MaterialMenu.setTransformationDuration(int duration)  
6.   
7. // change pressed animation duration  
8. MaterialMenu.setPressedDuration(int duration)  
9.   
10. // change transformation interpolator  
11. MaterialMenu.setInterpolator(Interpolator interpolator)  
12.   
13. // set RTL layout support  
14. MaterialMenu.setRTLEnabled(boolean enabled)  

 

相關連結：Material Menu的mobilehub首頁

9. Android-ObservableScrollView

Android-ObservableScrollView是一款用於在滾動視圖中觀測滾動事件的Android庫。它能夠輕而易舉地與Android 5.0 Lollipop引進的工具列（Toolbar）進行互動，還可以協助開發人員實現擁有Material Design應用視覺體驗的介面外觀，支援ListView、ScrollView、WebView、RecyclerView、GridView組件。

互動代碼回調：

 

[java] view plaincopy 

1. @Override  
2.     public void onUpOrCancelMotionEvent(ScrollState scrollState) {  
3.         ActionBar ab = getSupportActionBar();  
4.         if (scrollState == ScrollState.UP) {  
5.             if (ab.isShowing()) {  
6.                 ab.hide();  
7.             }  
8.         } else if (scrollState == ScrollState.DOWN) {  
9.             if (!ab.isShowing()) {  
10.                 ab.show();  
11.             }  
12.         }  
13.     }  

 

相關連結：Android-ObservableScrollView的mobilehub首頁

10. Material Design Icons

最後，再來介紹一下Google Material Design規範的官方開源表徵圖集Material Design Icons。良心Google開源了包括Material Design系統表徵圖包在內的750個字形，涵蓋動作、音視頻、通訊、內容、編輯器、檔案、硬體、映像、地圖、導航、通知、社交等各個方面，適用於Web、Android和iOS應用開發，絕對是開發人員及設計師必備的資源。

表徵圖格式主要包括： 

 

• SVG格式，24px和48px；
• SVG和CSS Sprites；
• 適用於Web平台的1x、2x PNG格式表徵圖；
• 適用於iOS的1x、2x、3x PNG表徵圖；
• 所有表徵圖的Hi-dpi版本（hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi）。

直接拿來用！十大Material Design開源項目