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

1. MaterialDesignLibrary

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


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

進度指示器樣式效果設置:

  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在CODE上查看代碼片派生到我的代碼片
  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):

  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:

  1. app:baseColor="#0056d3"  


自定義Error Color:

  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開發者獲取谷歌UI設計規範中新增的CardView(卡片視圖)的開源庫,支持Android 2.3+系統。作爲ListView的擴展,MaterialList可以接收、存儲卡片列表,並根據它們的Android風格和設計模式進行展示。此外,開發者還可以創建專屬於自己的卡片佈局,並輕鬆將其添加到CardList中。

使用過程代碼,在佈局中聲明MaterialListView:

  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在CODE上查看代碼片派生到我的代碼片
  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在CODE上查看代碼片派生到我的代碼片
  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)

發佈了45 篇原創文章 · 獲贊 9 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章