天天看點

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

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

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

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

進度訓示器樣式效果設定: 

Dialog:

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

用法(在XML檔案中聲明一個RippleView):

随着Material Design的到來,AppCompat v21也為開發者提供了Material Design的控件外觀支援,其中就包括EditText,但卻并不好用,沒有設定顔色的API,也沒有任何Google Material Design Spec中提到的特性。于是,來自國内的開發者“扔物線”開發了MaterialEditText庫,直接繼承EditText,無需修改Java檔案即能實作自定義控件顔色。

自定義Base Color:

自定義Error Color:

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

MaterialList是一個能夠幫助所有Android開發者擷取谷歌UI設計規範中新增的CardView(卡片視圖)的開源庫,支援Android 2.3+系統。作為ListView的擴充,MaterialList可以接收、存儲卡片清單,并根據它們的Android風格和設計模式進行展示。此外,開發者還可以建立專屬于自己的卡片布局,并輕松将其添加到CardList中。

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

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

其主要特性如下:

支援正常56dp和最小40dp的按鈕;

支援自定義正常、Press狀态以及可拖拽圖示的按鈕背景顔色;

AddFloatingActionButton類能夠讓開發者非常友善地直接在代碼中寫入加号圖示;

FloatingActionsMenu類支援展開/折疊顯示動作。

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

Material Menu為開發者帶來了非常酷炫的Android菜單、傳回、删除以及檢查按鈕變形,完全控制動畫,并為開發者提供了兩種MaterialMenuDrawable包裝。

自定義顔色等操作:

Android-ObservableScrollView是一款用于在滾動視圖中觀測滾動事件的Android庫。它能夠輕而易舉地與Android 5.0 Lollipop引進的工具欄(Toolbar)進行互動,還可以幫助開發者實作擁有Material Design應用視覺體驗的界面外觀,支援ListView、ScrollView、WebView、RecyclerView、GridView元件。

互動代碼回調:

最後,再來介紹一下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)。

繼續閱讀