【學習筆記】Android 5.X UI 設計初識

Android 5.x系列開始使用新的設計風格Material Design來統一整個Android系統的界面設計風格。

一、材料的形態模擬

     材料的形態模擬是Material Design中最核心也是改變最大的一個設計，Google經過模擬天然界紙墨的形態變化、光線與陰影、紙與紙之間

的空間層級關係，帶來一種真實的空間感。

二、Android5.X中大量加入了各類新的動畫效果，讓整個設計風格更加天然、和諧。而各類新的轉場動畫，能更加有效地指引用戶的視覺焦點，

不至於由於複雜佈局的界面重排而對總體效果產生影響，讓使用者達到一個視覺連貫性。

三、大色塊的使用

Material Design中用大量高飽和度、適中亮度的大色塊來突出界面的主次，並一掃Android4.X系列Holo主題的沉重感，讓界面更加富有時尚感

和視覺衝擊力。

此外，還有不少新的設計風格，好比懸浮按鈕、聚焦大圖、無框按鈕、波紋效果等新特性。

http://www.google.com/design/#resources

四、Material Design主題

默認有三種主題可設置：

@android:style/Theme.Material(dark version)

@android:style/Theme.Material.Light(light version)

@android:style/Theme.Material.Light.DarkActionBar

同時，Android5.X提出了Color Palette的概念，

如圖所示，讓開發者能夠本身設定系統區域的顏色，使整個App的顏色風格和系統的顏色風格保持統一。

<style name="AppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <!--actionbar background-->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <!--status bar-->
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <!---->
        <item name="android:navigationBarColor">#FFFF4130</item>
    </style>

Palette:可使用它來提取顏色，從而讓主題可以動態適應當前頁面的色調，作到整個App顏色基調和諧統一。

內置的提取色調的種類：

• Vibrant(充滿活力的)
• Vibrant dark(充滿活力的黑)
• Vibrant light(充滿活力的亮)
• Muted(柔和的)
• Muted dark(柔和的黑)
• Muted light(柔和的亮)

使用Palette的API,能夠從Bitmap中獲取對應的色調，修改當前主題色調。

需引用的依賴：com.android.support:palette-v******

能夠經過傳遞一個Bitmap對象給Palette，並調用它的Palette.generate()靜態方法或者Palette.generateAsync()方法建立一個Palette.

接下來就可使用getter方法來檢索相應的色調。

示例：（圖片僅爲喜愛，妹子不要告我侵權哦）

     

代碼以下：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.a);
        //建立Palette對象
        Palette.generateAsync(bitmap,
                new Palette.PaletteAsyncListener() {
                    @Override
                    public void onGenerated(Palette palette) {
                        //經過Palette來獲取對應的色調
                        Palette.Swatch vibrant = palette.getDarkVibrantSwatch();
                        //將顏色設置給相應的組件
                        //actionbar的背景色
                        getActionBar().setBackgroundDrawable(new ColorDrawable(vibrant.getRgb()));
                        Window window = getWindow();
                        //statusbar背景色
                        window.setStatusBarColor(vibrant.getRgb());
                    }
                });

經過如下方法來提取不一樣色調的顏色：

                       palette.getVibrantSwatch();
                        palette.getDarkVibrantSwatch();
                        palette.getLightVibrantSwatch();
                        
                        palette.getMutedSwatch();
                        palette.getDarkMutedSwatch();
                        palette.getLightMutedSwatch();

視圖與陰影

在Android5.X中，View引入了一個新的屬性-----> Z,對應垂直方向上的高度變化，

Z值由兩部分組成，elevation和translationZ(都是Android5.X新引入的屬性)。

elevation是靜態的成員，translationZ能夠在代碼中使用來實現動畫效果，

它們的關係：Z=elevation + translationZ

經過在XML佈局中使用以下代碼來靜態設置View的視圖高度：

android:elevation="**dp"

示例：（看哪呢，看哪呢，讓你看陰影了，不要分散注意力啊）

代碼以下：

<ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"
        android:elevation="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"
        android:elevation="10dp"
        android:layout_marginTop="10dp"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/a"
        android:scaleType="centerCrop"
        android:elevation="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"/>

在程序中，一樣可使用以下代碼來動態改變視圖高度：

mImageView.setTranslationZ(15);

效果：（吼，再來！！！）

使用屬性動畫來爲視圖高度改變的時候增長一個動畫效果：

代碼：

boolean flag = true;
mImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(flag){
                    mImageView.animate().translationZ(100);
                    flag = false;
                }else {
                    mImageView.animate().translationZ(0);
                    flag = true;
                }
            }
        });

Tinting 和 Clipping

Android5.X在對圖像的操做上有了更多的功能------->Tinting(着色) 和 Clipping(剪裁)

着色 Tinting

示例：

代碼：

<ImageView
        android:id="@+id/mImageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"
        android:tint="@android:color/holo_blue_bright"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"
        android:layout_marginTop="10dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:scaleType="centerCrop"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="100dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"/>

Tint經過修改圖像的Alpha遮罩來修改圖像的顏色，從而達到從新着色的目的。

剪裁 Clipping：能夠改變一個視圖的外形

要使用Clipping，首先須要使用ViewOutlineProvider來修改outline，而後再經過setOutlineProvider將outline做用給視圖

  

代碼以下：

TextView tvtest = (TextView)findViewById(R.id.tvtest);
        //獲取Outline
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline爲特定形狀
//                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);

                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
        tvtest.setOutlineProvider(viewOutlineProvider);