Android5.0-Material Design(done)

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 {
        @Overrideprotected 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屬性,來修改它和它所有子控件的主題。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章