1. 程式人生 > >Android 5.X的新特性及Material Design

Android 5.X的新特性及Material Design

導語

說來慚愧,Android8.0奧利奧都出了,我還在學5.0的新特性,看來得再努把力了,Material Design動畫確實好看。

主要內容

  • Android5.X UI設計初步
  • Palette
  • 檢視與陰影
  • Tinting和Clipping
  • Android過渡動畫
  • Material Design動畫效果
  • Toolbar
  • Notification

具體內容

Android5.X UI設計初步

Android 5.X開始使用新的設計風格Material Design來統一整個Android系統設計風格,與之前的設計不同,這次的Material Design設計將Android帶來一片全新的高度,同時Google在官網推出了新的設計指南,全面的講解了Material Design的整個實現規範。

Material Design

材料的形態模擬

Google通過模擬自然界的形態變化、關線與陰影、紙與紙之間的空間層級關係,帶來一種真實的空間感。

更加真實的動畫

大色塊的使用

Material Design中採用大量高飽和、適中亮度的大色塊來突出介面的主次。

此外,還有更多的設計風格,比如懸浮按鈕,聚焦大圖,無框按鈕,波紋效果等新特性,希望瞭解更多的Material Design設計風格的讀者可以訪問網站:https://www.google.com/design/#resources

Material Design主題

Material Design提供預設的三種主題:

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

同時也提出了Color Palette的概念,讓開發者自己設定系統區域的顏色。

可以通過使用自定義Style來建立自己的Color Palette顏色主題。

<resources>
    <!-- inherit from the material theme-->
    <style name="AppTheme" parent="android:Theme.Material">
        <!-- Main theme color-->
        <!-- your app branding color
for the app bar--> <item name="colorPrimary">#BEBEBE</item> <!-- derker variant for thr status bar and contextual app bars--> <item name="colorPrimaryDark">#FF5AEBFF</item> <!--theme ui controls like checkBoxs and text fields--> <item name="colorAccent">#FFFF4130</item>
</style> </resources>

效果圖

Palette

Android5.X使用Palette來提取顏色,從而讓主題能夠動態適應當前頁面的色調。

Android內建了幾種提取顏色的種類:
- Vibrant(充滿活力的)
- Vibrant dark(充滿活力的黑)
- Vibrant light(充滿活力的白)
- Muted(柔和的)
- Muted dark(柔和的黑)
- Muted light(柔和的白)

使用Palette需要在Dependencies中新增依賴:

compile 'com.android.support:palette-v7:21.0.2'

這可以給Palette傳進一個Bitmap物件,並呼叫它的Palette.generate()靜態方法或者Palette.generateAsync()方法建立一個Palette。

下面例子演示如何通過載入圖片的柔和色調來改變狀態列和Actionbar的色調:

public class PaletteActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.palette);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.test);
        // 建立Palette物件
        Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                // 通過Palette來獲取對應的色調
                Palette.Swatch vibrant =
                        palette.getDarkVibrantSwatch();
                // 將顏色設定給相應的元件
                getSupportActionBar().setBackgroundDrawable(
                        new ColorDrawable(vibrant.getRgb()));
                Window window = getWindow();
                window.setStatusBarColor(vibrant.getRgb());
            }
        });
    }
}

檢視效果圖:

效果圖

檢視與陰影

Material Design最重要的特點就是擬物扁平化。

陰影效果

Android5.X在以外的View中只有x和y的方向上添加了z方向,看圖。

陰影效果

View的z值由兩部分組成:

Z = elevation + translationZ;

通常可以在XML佈局檔案中設定View的檢視高度:

android:elevation="XXdp"

下面通過例項演示不同檢視高度的效果:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@mipmap/ic_launcher"
        android:elevation="2dp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@mipmap/ic_launcher"
        android:elevation="10dp" />
</LinearLayout>

效果圖:

效果圖

在程式中也可以用程式碼變換檢視高度:

view.setTranslationZ(xxx);

通常和還可以用屬性動畫來改變檢視高度:

if(flag){
    view.animate().translationZ(100);
    flag = false;
}else {
    view.animate().translationZ(0);
    flag = true;
}

Tinting和Clipping

Android5.X提供了兩個對操作影象的新功能:Tinting和Clipping。

Tinting(著色)

下面有例子說明,注意tint和tintMode屬性:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="5dp"
        android:src="@mipmap/ic_launcher"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply" />

</LinearLayout>

效果圖:

效果圖

Clipping(裁剪)

使用Clipping,首先需要使用ViewOutlineProvider來修改outline,然後再通過setOutlinProvider將outline作用給檢視。

下面通過例子理解Clipping:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_rect"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:elevation="1dp"
        android:gravity="center" />

    <TextView
        android:id="@+id/tv_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:elevation="1dp"
        android:gravity="center" />

</LinearLayout>

在程式碼中:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View v1 = findViewById(R.id.tv_rect);
        View v2 = findViewById(R.id.tv_circle);
        //獲取Outline
        ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定形狀
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        };
        //獲取Outline
        ViewOutlineProvider viewOutlineProvider2 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outline為特定形狀
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
        //重新設定形狀
        v1.setOutlineProvider(viewOutlineProvider1);
        v2.setOutlineProvider(viewOutlineProvider2);
    }
}

效果圖:

效果圖

Android過渡動畫

在Activity之間的跳轉中,通過overridePendingtransition(int inId,int outId)這個方法給Activity新增一些切換動畫,效果也是差強人意。

過渡動畫

Android5.X提供了三種Transition型別的動畫:
- 進入:一個進入的過渡動畫決定Activity中的所有檢視怎麼進入螢幕。
- 退出:一個退出的過渡動畫決定Activity中的所有檢視怎麼退出螢幕。
- 共享元素:一個共享元素過渡動畫決定兩個Activity之間的過渡,怎麼共享他們的檢視。

其中,進入和退出效果包括:
- explode(分解)一一從螢幕中間進或出,移動檢視。
- slide(滑動)——從螢幕邊緣進或出,移動檢視。
- fade(淡出) 一一通過改變螢幕上檢視的不透明度達到新增或者移除檢視。

共享元素包括(簡單的說ActivityA的指定的View不會消失,帶著View跳轉到ActivityB中):
- changeBounds——改變目標檢視的佈局邊界。
- changeClipBounds——裁剪目標檢視邊界。
- changeTransfrom——改變目標檢視的縮放比例和旋轉角度。
- changeImageTransfrom——改變目標圖片的大小和縮放比例。

這裡比如ActivityA跳轉到ActivityB,運用這三種過渡動畫,則在ActivityA中修改:

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

而在ActivityB,只需要設定以下程式碼:

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

或者在ActivityB的樣式檔案設定如下程式碼:

<item name="android:windowContentTransitions">true</item>

那麼接下來可以設定進入ActivityB的動畫效果:

getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());

或者是設定離開ActivityB的動畫效果:

getWindow().setExitTransition(new Explode());
getWindow().setExitTransition(new Slide());
getWindow().setExitTransition(new Fade());

三種普通切換動畫的效果圖:

效果圖

下面是共享元素的使用,首先在ActivityA中設定共享元素的屬性:

android:transitionName="XXX"

同時在ActivityB中設定相同的共享元素的屬性:

android:transitionName="XXX"

在程式碼中使用共享元素,首先是單個共享元素:

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,view,"share").toBundle());

或者一個檢視中有多個共享元素,通過Pair.create()來建立多個共享元素:

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, 
        Pair.create(view,"share"),Pair.create(fab,"fab")).toBundle());

共享元素的效果圖:

效果圖

Material Design動畫效果

Ripple效果

Ripple效果:點選後的波紋效果,可以通過程式碼設定波紋背景。

//波紋有邊界
android:background="?android:attr/selectableItemBackground"
//波紋無邊界
android:background="?android:attr/selectableItemBackgroundBorderless"

下面通過例子來演示一下這兩個效果:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light"
    android:gravity="center"
    android:orientation="vertical">

    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="?android:attr/selectableItemBackground"
        android:text="有界波紋"
        android:textColor="@android:color/white" />


    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:text="無界波紋"
        android:textColor="@android:color/white" />

</LinearLayout>

效果圖:

效果圖

同樣的,也可以通過XML來宣告一個ripple,然後在佈局檔案中使用:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorPrimary">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>
<Button
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/ripple" />

效果圖:

效果圖

Circular Reveal

這個動畫效果具體變現為一個View以圓形的形式展開,揭示出來,通過ViewAnimationUtils.createCircularReveal()來建立動畫,程式碼如下:

public static Animator createCircularReveal(View view, int centerX, 
int centerY, float startRadius, float endRadius) {
     return new RevealAnimator(view,centerX,centerY,startRadius,endRadius);
}

RevealAnimator的使用特別簡單,主要就是幾個關鍵的座標點:
- centerX 動畫開始的中心點X
- centerY 動畫開始的中心點Y
- startRadius 動畫開始半徑
- endRadius 動畫結束半徑

接下來我們來看一下例子,瞭解下RevealAnimator的使用,首先用XML建立一個圓和方形:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="#738ffe" />
        </shape>
    </item>
</ripple>
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#738ffe" />
        </shape>
    </item>
</ripple>

然後在佈局檔案中使用這兩個圖形:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/oval"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/oval" />

    <ImageView
        android:id="@+id/rect"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/rect" />

</LinearLayout>

主程式:

public class CircularReveal extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circular_reveal);

        final View oval = findViewById(R.id.oval);
        oval.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animator animator = ViewAnimationUtils.createCircularReveal(oval,
                        oval.getWidth() / 2, oval.getHeight() / 2, oval.getWidth(), 0);
                animator.setInterpolator(new AccelerateDecelerateInterpolator());
                animator.setDuration(2000);
                animator.start();
            }
        });

        final View rect = findViewById(R.id.rect);
        rect.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animator animator = ViewAnimationUtils.createCircularReveal(rect, 0, 0, 0,
                        (float) Math.hypot(rect.getWidth(), rect.getHeight()));
                animator.setInterpolator(new AccelerateInterpolator());
                animator.setDuration(2000);
                animator.start();
            }
        });
    }
}

效果圖:

效果圖

View state changes Animation
  • StateListAnimator:檢視動畫效果,以前的Selector用來修改背景達到反饋效果,現在支援Selector使用動畫效果。

在XML定義一個StateListAnimator,新增到Selector中:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:property="rotationX" 
        android:duration="@android:integer/config_shortAnimTime" 
        android:valueTo="360" 
        android:valuyeType="floatType" />
        </set>
    </item>
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:property="rotationX"
        android:duration="@android:integer/config_shortAnimTime" 
        android:valueTo="0" 
        android:valuyeType="floatType" />
        </set>
    </item>
</selector>

在佈局檔案中直接使用:

<Button
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/anim_change" />

特別要注意:Animator是要開啟的,所以必須在主程式碼中使用AnimatorInflater.loadStateListAnimator()方法,並且通過View.setStateListAnimator()方法分配到檢視中。

  • animated-selector:同樣作為一種狀態改變的動畫效果Selector。
    首先得有一套狀態變換圖:

然後在XML中定義這些圖片組合:

<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/state_on"
        android:state_checked="true">
        <bitmap android:src="@drawable/ic_done_anim_030" />
    </item>
    <item android:id="@+id/state_off">
        <bitmap android:src="@drawable/ic_plus_anim_030" />
    </item>
    <transition
        android:fromId="@+id/state_on"
        android:toId="@+id/state_off">
        <animation-list>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_000" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_001" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_002" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_003" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_004" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_005" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_006" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_007" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_008" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_009" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_010" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_011" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_012" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_013" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_014" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_015" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_016" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_017" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_018" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_019" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_020" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_021" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_022" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_023" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_024" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_025" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_026" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_027" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_028" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_029" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_030" />
            </item>
        </animation-list>
    </transition>
    <transition
        android:fromId="@+id/state_off"
        android:toId="@+id/state_on">
        <animation-list>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_000" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_001" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_002" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_003" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_004" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_005" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_006" />
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_done_anim_007" />
            </item>
            <item android:duration="16">
                <bitmap android:s