Material Design簡介
Material Design是谷歌新的設計語言,谷歌希望寄由此來統一各種平臺上的用戶體驗,Material Design的特點是乾淨的排版和簡單的佈局,以此來突出內容。
Material Design對排版、材質、配色、光效、間距、文字大小、交互方式、動畫軌跡都做出了建議,以幫助設計者設計出符合Material Design風格的應用。
更多詳情請見Material Design文檔:
中文版網站 http://design.1sters.com/
英文版 http://www.google.com/design/spec/material-design/introduction.html
Material Design使用
作爲我們開發者,最關心的還是如何在項目中使用Material Design風格:
1 設置應用的 targetSdkVersion 和 targetSdkVersion 爲21
2 在values目錄下的style資源文件中創建一個style,讓其繼承自 android:Theme.Material
3 在AndroidManifest中指定應用的主題或者Activity的主題爲我們設定的樣式
演示:android_sample(5.0綜合demo)-debug.apk
在低版本android系統上實現Material設計應用 碼農明明桑
1.主題樣式
谷歌官方我們提供了三種配色風格的Material Design樣式
1 黑色主題 Theme.Material
<style name="AppTheme" parent="android:Theme.Material.Light">
2 明亮主題 Theme.Material.Light
在as中src目錄下有vlaue-v21的文件夾 對應21版的5.0顯示,默認是這個主題
3 明亮主題黑色ActionBar
Theme.Material.Light.DarkActionBar
我們也可以繼承系統提供的Material Design樣式,進行配色修改:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:colorPrimaryDark">#2e56cd</item>
<item name=“android:colorPrimary”>#3b73f1</item>
<item name="android:navigationBarColor">#0c0c0c</item>
<item name=“android:windowBackground">@color/windowbg
</item>
</style>
</resources>
1 android:colorPrimaryDark 應用的主要暗色調,statusBarColor默認使用該顏色
2 android:statusBarColor 狀態欄顏色,默認使用colorPrimaryDark
3 android:colorPrimary 應用的主要色調,actionBar默認使用該顏色
4 android:windowBackground 窗口背景顏色
5 android:navigationBarColor 底部欄顏色
6 android:colorForeground 應用的前景色,ListView的分割線,switch滑動區默認使用該顏色
7 android:colorBackground 應用的背景色,popMenu的背景默認使用該顏色
8 android:colorAccent 一般控件的選種效果默認採用該顏色
9 android:colorControlNormal 控件的默認色調
10 android:colorControlHighlight 控件按壓時的色調
11 android:colorControlActivated 控件選中時的顏色,默認使用colorAccent
12 android:colorButtonNormal 默認按鈕的背景顏色
13 android:textColor Button,textView的文字顏色
14 android:textColorPrimaryDisableOnly RadioButton checkbox等控件的文字
15 android:textColorPrimary 應用的主要文字顏色,actionBar的標題文字默認使用該顏色
多種主題的選擇
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int ThemeId = getIntent().getIntExtra("ThemeId", -1);
if (ThemeId == R.style.AppTheme_Red) {
setTheme(R.style.AppTheme_Red);
} else if (ThemeId == R.style.AppTheme_Pink) {
setTheme(R.style.AppTheme_Pink);
}
setContentView(R.layout.activity_main);
}
public void red(View view) {
//每次打開一個intent的時候都有動畫去重動畫
finish();
overridePendingTransition(0, 0);//Activity的切換動畫
/*
這個函數有兩個參數,一個參數是第一個activity進入時的動畫,另外一個參數則是第二個activity退出時的動畫。
這裏需要特別說明的是,關於overridePendingTransition這個函數,有兩點需要主意
1.它必需緊挨着startActivity()或者finish()函數之後調用"
2.它只在android2.0以及以上版本上適用
*/
//重啓自己
Intent intent = new Intent(MainActivity.this, MainActivity.class);
//告知要切換的主題
intent.putExtra("ThemeId", R.style.AppTheme_Red);
startActivity(intent);
Toast.makeText(this, "red", Toast.LENGTH_SHORT).show();
overridePendingTransition(0, 0);
}
public void pink(View view) {
// setTheme(R.style.AppTheme_Pink); 運行沒顯示
Intent intent = new Intent(MainActivity.this, MainActivity.class);
intent.putExtra("ThemeId", R.style.AppTheme_Pink);
startActivity(intent);
Toast.makeText(this, "pink", Toast.LENGTH_SHORT).show();
overridePendingTransition(0, 0);
}
}
value-v21/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--紅色主題-->
<style name="AppTheme_Red" parent="android:Theme.Material.Light.DarkActionBar">
<!--應用的主要暗色調-->
<item name="android:colorPrimaryDark">
@color/red_colorPrimaryDark</item>
<!--actionBar默認使用該顏色-->
<item name="android:colorPrimary">@color/red_colorPrimary</item>
<!--窗口背景顏色-->
<item name="android:windowBackground">@color/red_windowBackground</item>
<!--底部欄顏色-->
<item name="android:navigationBarColor">@color/red_navigationBarColor</item>
</style>
<!--粉色主題-->
<style name="AppTheme_Pink" parent="android:Theme.Material.Light.DarkActionBar">
<!--應用的主要暗色調-->
<item name="android:colorPrimaryDark">
@color/pink_colorPrimaryDark</item>
<!--actionBar默認使用該顏色-->
<item name="android:colorPrimary">@color/pink_colorPrimary</item>
<!--窗口背景顏色-->
<item name="android:windowBackground">@color/pink_windowBackground</item>
<!--底部欄顏色-->
<item name="android:navigationBarColor">@color/pink_navigationBarColor</item>
</style>
</resources>
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--紅色-->
<color name="red_colorPrimaryDark">#ffb0120a</color>
<color name="red_colorPrimary">#ffe51c23</color>
<color name="red_windowBackground">#fff36c60</color>
<color name="red_navigationBarColor">#ffd01716</color>
<!--粉色-->
<color name="pink_colorPrimaryDark">#ff880e4f</color>
<color name="pink_colorPrimary">#ffe91e63</color>
<color name="pink_windowBackground">#fff06292</color>
<color name="pink_navigationBarColor">#ffc2185b</color>
</resources>
主題不僅可以對Application和Activity使用,也可以對某一個控件單使用,或者是在xml佈局中給一個根節點控件設置android:theme屬性,來修改它和它所有子控件的主題。