MaterialDesign介紹和初步使用

MaterialDesign介紹和初步使用

一、關於Material Design
從Android5.0開始引入的,是一種全新的設計語言(翻譯爲“原材料設計”),其實是谷歌提倡的一種設計風格、理念、原則。
擬物設計:IOS最開始使用,是扁平化設計一種結合體驗。還吸取了最新一些科技理念。
層次感:View Z軸 (比如按下去陰影效果,加強3D效果)

  • 1.對於美工:遵循MD的界面設計、圖標合集。
  • 2.對於產品經理:遵循MD界面設計、頁面的跳轉及動畫效果、交互設計。
  • 3.對於開發人員:參與原型設計、輔助美工原型設計的素材準備。開發實現MD的設計—-界面、動畫、轉場動畫等等。

二、MD的使用及開發
谷歌開放以及收集了一些最新的開源的項目(很多是自己開發的),彙集到最新的support兼容支持包以及最新的5.X API裏面。(preference:設置頁面,可以通過配置文件達到界面設計的效果。)
(1)android-support-v4:
最低兼容到Android 1.6系統,裏面有類似ViewPager等控件。

(2)android-support-v7:
appcompat;
CardView;
gridlayout;
mediarouter;
palette;
preference;
recyclerView(最低兼容到3.0)
最低兼容到Android 2.1的系統,這個工程可以讓開發人員統一開發標準,在任何的系統版本下保證兼容性。(比如:Theme,value,佈局,新的控件,新的動畫特效實現)
所以現在ADT、AndrodStudio一般都會直接創建項目的時候就直接幫你新建或者引入了一個叫做appcompat的項目。

可能會碰到很多問題:
1.自動導入的appcompat-v7項目自身就是報錯的,什麼原因?
(1)build的版本太低了,要麼是SDK很新但是兼容包沒有更新(建議編譯的時候採用6.0版本)。
(2).沒有將依賴的項目作爲library,而且也沒有將自己的項目加入該依賴項目。
(3).multiple dex files…
appcompat/res/com.android.v7.R$anim 有文件衝突–一般是代表jar包衝突。解決方法:刪掉重複的jar。

2.appcompat-v7好不容易沒報錯,但是項目報錯,一看控制檯:
報appcompat裏面的某個res/values/theme/xxx屬性不存在 等等問題。
原因:因爲你引入的是很新的appcompat-v7項目,它要求必須很高的版本編譯,然而Eclipse很蛋疼,在引入該項目的主項目編譯的時候也必須要達到這個很高的版本—直接使用最高版本編譯)

現在一般做開發都是最低兼容到4.0。
SDK升級:API升級、兼容包的升級、工具升級。

Android創建項目的時候版本說明:
1.compileSDK 編譯版本;
2.minSDK 兼容到最低版本是多少;
3.targetSDK;
SDK更新的歷史上幾個特別重要的版本:14(4.0)、19(4.4)、21(5.0)

關於Eclipse項目如何導入到AndroidStudio。
1.直接導入沒問題;
2.有問題,導出項目的時候應該選擇gradle模式導出, 再導入到as。(這種情況下都有可能還是報錯,可能是gradle版本太低了 需要升級!)
3.直接在as裏面建個項目,然後把所有的資源和代碼拷貝過去 就可以了!

三、實例
1.MaterialDesign控制項目全局樣式
(1).引入appcompat-v7項目(包括了android-support-v7-appcompat.jar和資源文件)
(2).寫自己的全局樣式:

 <style name="AppBaseTheme"parent="Theme.AppCompat.Light">
       <!-- API 14 theme customizations can go here. -->
 </style>  

     <!-- Application theme. 自定義主題風格的顏色-->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:textColor">@color/mytextcolor</item>
        <item name="colorPrimary">@color/colorPrimary_pink</item>
        <item name="colorPrimaryDark">@color/colorPrimary_pinkDark</item>
        <item name="android:windowBackground">@color/background</item>
    <item name="colorAccent">@color/accent_material_dark</item>
     <!-- 設置虛擬導航欄背景顏色 -->
        <item name="android:navigationBarColor">@color/colorPrimary_pink</item>
    </style>

<!--     colorPrimary:主色,
    colorPrimaryDark:主色--深色,一般可以用於狀態欄顏色、底部導航欄
    colorAccent:(代表各個控件的基調顏色--CheckBox、RadioButton、ProgressBar等等)
    "android:textColor":當前所有的文本顏色 -->

效果圖
在項目中,可以給不同系統版本設置對應的主題風格:
即在項目總監理values的版本:比如values-11、values-14、values-21
這裏寫圖片描述

2.MaterialDesign兼容性控件的使用
尤其是在appcompat-V7裏面有很多爲兼容而生的控件
這樣就可以做到高低版本和不同的ROM之間體驗一致!還可以配合appcompat的主題使用達到體驗一致性
(1).android.support.v7.app.AlertDialog

(2).進度條樣式設置

 style="@style/Widget.AppCompat.ProgressBar.Horizontal"

(3).SwipeRefreshLayout下拉刷新

(4).彈出窗口:
PopupWindow
ListPopupWindow
PopupMenu

(5).android.support.v7.widget.LinearLayoutCompat
給包裹在裏面的所有子

 <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
  app:divider="@drawable/abc_list_divider_mtrl_alpha"
            app:showDividers="beginning|middle"
            android:orientation="vertical" >
發佈了23 篇原創文章 · 獲贊 0 · 訪問量 8532
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章