本人所有文章首先釋出于個人部落格,歡迎關注,位址:http://blog.isming.me
Material Design真的很好看,動畫效果真的很實用。前面也寫了一些文章介紹如何編寫Material風格的程式,但是很多都是一些新的api,低版本上面沒有這些api,我們沒辦法使用。但是不用氣餒,google官方,以及一些大牛,給我們提供了一些程式,讓我們在低版本上面可以實作Material風格的程式,這裡就給大家介紹一下。
妹子圖截屏
妹子圖截屏
使用support library
使用support library最新的版本,appcomt21,可以在較低版本上面實作部分風格,在之前的文章我已經說過了,這裡在系統的說一下。
應用主題
這部分的話之前的文章說過,連結在這裡:http://blog.isming.me/2014/10/18/creating-android-app-with-material-design-one-theme/
使用gralde進行建構的話,在依賴中添加v7包:
dependencies {
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
使用eclipse建構的話,加入最新的appcompat包即可。
另外在style檔案中加入:
<!-- extend one of the Theme.AppCompat themes -->
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- customize the color palette -->
<item name="colorPrimary">@color/material_blue_500</item>
<item name="colorPrimaryDark">@color/material_blue_700</item>
<item name="colorAccent">@color/material_green_A200</item>
</style>
在appliaction中使用我們的這個Theme.MyTheme,上一次的文章中有個錯誤,這種情況下不需要在valus-v21中建立一個同名的繼承自Material的theme,否則會報錯。這樣我們就可以使用Material風格了。不過低版本上面還是有很多地方不可以實作這種效果的。
使用Toolbar代替ActionBar。
android 5.0增加了ToolBar,可以用其代替ActionBar,在更低版本中,推薦使用,這樣,動畫特效更友善實作。
在布局檔案中增加Toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
在代碼中,使用Toolbar代替ActionBar(Activity必須是繼承自ActionBarActivity的):
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
}
使用CardView
不詳說了,參看我之前的部落格吧http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/。
使用動畫
對于低版本,在support v7包中,提供了一些相容,可以使用activity過渡動畫(不過效果沒有5.0的好)。
首先聲明主題的時候,建立一個AppTheme.Base用來聲明主題,在其上增加動畫屬性:
以下放在values/themes.xml中,用于适配低版本:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimary</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
</resources>
以下放在values-v21/themes.xml中
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>
在代碼中啟動新Activity的時候,使用v7包中的方法,具體過渡方法跟5.0一樣,可以看我之前的部落格:
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
activity, transitionView, DetailActivity.EXTRA_IMAGE);
ActivityCompat.startActivity(activity, new Intent(activity, DetailActivity.class),
options.toBundle());
使用開源控件
對于很多的控件樣式,動畫,對話框等,使用相容包無法完成,我們可以使用一些大神開發的第三方包來實作.
元件: https://github.com/navasmdc/MaterialDesignLibrary
https://github.com/keithellis/MaterialWidget
上面兩個主要是一些實作了Material的元件
Material Design的對話框: https://github.com/afollestad/material-dialogs
這個github倉庫收集了很多的開源實作,大家可以過來看看。https://github.com/lightSky/MaterialDesignCenter
其他
根據提供的規範,自己來實作相應的ui界面以及動畫效果等等。
這裡提供一下谷歌的規範位址:
谷歌設計規範:http://www.google.com/design/spec/material-design/introduction.html需要翻牆、http://design.1sters.com(中文)
圖示素材:https://github.com/google/material-design-icons、https://github.com/Templarian/MaterialDesign
谷歌IO2014,Material Design的诠釋:https://github.com/google/iosched
其他人寫的應用:https://github.com/afollestad/cabinet
我寫的一個應用,從之前的版本改過來,還沒完成,大家随便看看就行了,也是Material Design:https://github.com/sangmingming/Meizitu
原文位址:http://blog.isming.me/2014/11/17/material-design-for-pre-lollipop-android/,轉載請注明出處。