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的整個實現規範。
材料的形態模擬
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