Android Drawable詳解-思維導圖版
阿新 • • 發佈：2019-02-07
Drawable(67題)
版本：2018/5/11-1(0:44)
思維導圖
基本知識點
1.Drawable是什麼
1、Drawable是什麼？
- Android中Drawable是一個抽象類(一種可以在Canvas上進行繪製的抽象的概念)，每個具體的Drawable都是其子類。
- Drawable提供一種比自定義View更輕量級的解決辦法，用於實現特定的效果.
- Drawable能實現縮放、漸變、動畫等效果。顏色、圖片等都可以是一個Drawable。
- Drawable可以通過XML定義，或者通過程式碼建立
2.Drawable的優點
2、Drawable的優點
- 使用簡單，比自定義View成本低
- 非圖片類的Drawable所佔空間小，能減小apk大小
3.Drawable的內部寬/高
3、Drawable的內部寬/高
- 一般
getIntrinsicWidth/Height能獲得內部寬/高- 圖片Drawable其內部寬高就是圖片的寬高
- 顏色Drawable沒有內部寬高的概念
- 內部寬高不等同於它的大小，一般Drawable沒有大小概念(作為View背景時，會被拉伸至View的大小)
Drawable分類
1-ColorDrawable(color)
4、ColorDrawable的作用
- 純色Drawable
- 標籤為
color
5、ColorDrawable的例項
<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorPrimary">
</color>2-BitmapDrawable(xml標籤:bitmap)
6、BitmapDrawable的作用
- 表示為一種圖片
- 標籤為
bitmap
7、BitmapDrawable可以直接引用原始圖片(如ImageView)
android:src="@drawable/ic_launcher" //引用原始圖片imageView.getDrawable(); //獲取src指定的Drawable，本身就是BitmapDrawable8、BitmapDrawable也可以通過XML進行描述
//mybitmap.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@color/colorPrimary"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="center"
android:mipMap="false"
android:tileMode="disabled"
android:tint="@color/colorPrimaryDark"
android:tintMode="screen"
/>android:src="@drawable/bitmap" //引用xml描述的BitmapDrawable屬性
9、BitmapDrawable具有的基本屬性
| 屬性 | 作用 | 備註 |
|---|---|---|
| android:src | 圖片資源ID | |
| android:antialias | 圖片抗鋸齒-圖片平滑，清晰度降低 | 應該開啟 |
| android:dither | 開啟抖動效果-用於高質量圖片在低質量螢幕上儲存較好的顯示效果(不會失真) | 應該開啟 |
| android:filter | 開啟過濾-在圖片尺寸拉伸和壓縮時保持較好的顯示效果 | 應該開啟 |
| android:mipMap | 紋理對映-影象處理技術 | 預設false |
| android:tileMode | 平鋪模式-repeat單純重複、mirror鏡面反射、clamp圖片四周畫素擴散 | 預設disable關閉 |
android:tint和android:tintMode
9、BitmapDrawable的屬性android:tint的作用
android:tint="@color/colorPrimary"- 會將所有有顏色的地方都著色為指定顏色，且保留透明度。
10、android:tintMode=”xxx”有哪些著色模式
- android:tint指定的顏色就是
src源，原來的內容屬於dst目標- 著色模式按照
PorterDuffMode進行混合，可以參考View繪製詳解
11、著色模式的分類
| 著色模式 | 作用 |
|---|---|
| src_in | 【預設】著色有顏色區域 |
| src_over | |
| src_atop | |
| add | 相加 |
| multiply | 混合相乘 |
| screen | 混合變淡 |
12、著色模式的設定(Java)
View bitmapView = findViewById(R.id.bitmap_view);
BitmapDrawable bitmapDrawable = (BitmapDrawable) bitmapView.getBackground();
bitmapDrawable.setTintMode(PorterDuff.Mode.SCREEN);android:gravity
13、android:gravity屬性的作用
圖片小於容器尺寸時，對圖片進行定位-選項之間用‘|’來組合使用
| 可選項 | 含義 |
|---|---|
| top/bottom/left/right | 將圖片放在容器上/下/左/右，不改變圖片大小 |
| center_vertical/horizontal | 垂直居中/水平居中，不改變圖片大小 |
| center | 水平和垂直方向同時居中，不改變圖片大小 |
| fill_vertical/horizontal | 垂直/水平方向填充容器 |
| fill | 水平和垂直方向同時填充容器 |
| clip_vertical/horizontal | 垂直/水平方向的裁剪-較少使用 |
3-NinePatchDrawable(nine-patch)
14、NinePatchDrawable的作用
- 自動根據寬高進行縮放且不會失真
- 使用：可以直接引用圖片或者通過XML描述
- 也具有
tint和tintMode屬性。
15、NinePatchDrawable的例項
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@color/colorPrimary"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="center"
android:mipMap="false"
android:tileMode="disabled"
/>4-GradientDrawable(shape)
16、GradientDrawable的作用
- 能構造出純色、漸變、圓角等效果的圖形。
shape標籤建立的Drawable實體是GradientDrawable
17、GradientDrawable的例項
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"/>
<gradient
android:angle="45"
android:centerX="30"
android:centerY="30"
android:centerColor="@color/colorAccent"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorPrimaryDark"
android:gradientRadius="20"
android:type="linear"
android:useLevel="true" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<size
android:width="200dp"
android:height="200dp" />
<solid
android:color="@color/colorPrimary"/>
<stroke
android:width="10dp"
android:color="@color/colorAccent"
android:dashWidth="5dp"
android:dashGap="3dp"/>
</shape>屬性
18、GradientDrawable的屬性
| 屬性/標籤 | 作用 | 備註 |
|---|---|---|
| android:shape | 圖形的形狀：rectangle矩形、oval橢圓、line橫線、ring圓環 | corners標籤對應於矩形；line和ring通過stroke指定線的寬度和顏色; ring圓環有五個特殊的shape屬性 |
corners標籤 |
四個角的角度 | |
gradient標籤 |
漸變效果-android:angle表示漸變角度，必須為45的倍數 | android:type指明漸變型別：linear線性，radial徑向、sweep掃描 |
solid標籤 |
純色填充 | 與gradient標籤排斥 |
stroke標籤 |
描邊 | 有描邊線和虛線 |
size標籤 |
表示shape的固有大小，並非最終顯示的大小 | 沒有時getIntrinsicWidth返回-1；能指明Drawable的固有寬高，但如果作為View背景還是會被拉伸 |
5-LayerDrawable(layer-list)
19、LayerDrawable的作用
- 層次化的Drawable合集.
- 可以包含多個
item，每個item表示一個Drawable, 後者覆蓋在前者Item之上。- item中可以通過
android:drawable直接引用資源。android:top等表示Drawable相當於View上下左右的偏移量。
20、LayerDrawable的例項
1、微信文字輸入框:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid
android:color="#0ac39e"/>
</shape>
</item>
<item
android:bottom="6dp">
<shape android:shape="rectangle">
<solid
android:color="#FFFFFF"/>
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<shape android:shape="rectangle">
<solid
android:color="#FFFFFF"/>
</shape>
</item>
</layer-list>2、圖片的預設圖片-不會被拉伸
6-StateListDrawable(selector)
21、StateListDrawable的作用
- 用於View根據不同狀態選擇不同的
Drawable- 標籤為
selector
22、與AnimatedStateListDrawable的區別
StateListDrawable瞬間切換圖片，顯得比較突兀。AnimatedStateListDrawable是根據不同狀態選擇不同的動畫效果，更平滑流暢。
23、StateListDrawable的例項
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="false" //StateListDrawable的固有大小是否根據狀態而改變，預設false=根據狀態而改變
android:dither="true" //是否開啟抖動-讓高質量圖片在低質量螢幕上依舊效果好，預設true開啟
android:variablePadding="false" //padding是否根據狀態的改變而改變，不建議開啟(false)
>
<item android:state_pressed="true" //Button被按下後卻沒有鬆開的狀態
android:drawable="@color/colorAccent"/>
<item android:state_focused="true" //View獲取了焦點
android:drawable="@color/colorPrimary"/>
<item android:state_selected="true" //使用者選擇了View
android:drawable="@color/colorPrimary"/>
<item android:state_checked="true" //使用者選中了View，一般用於CheckBox這類在選中和沒有選中狀態之間切換的View
android:drawable="@drawable/ic_launcher_background"/>
<item android:state_enabled="true" //View處於可用狀態
android:drawable="@drawable/ic_launcher_foreground"/>
<item android:drawable="#FFFFFF"/> //預設Drawable: 按順序向下匹配，需要放在最下方，因為可以匹配任何狀態
</selector>補充Item狀態：
state_checkable: 是否可以設定checked狀態的效果
7-LevelListDrawable(level-list)
24、LevelListDrawable的作用
LevelListDrawable根據level選擇對應的Drawable- 能用於實現進度條、音量調節等場景。
25、LevelListDrawable的Level等級
- 每個item都有
maxLevel和minLevelLevel的範圍為0~10000- Item的level一定要降序或者升序—給定level後，會按
從上至下的順序匹配，直到找到範圍合適的Drawable。
26、LevelListDrawable的例項
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:minLevel="0" android:maxLevel="10" android:drawable="@drawable/d1" />
<item android:minLevel="11" android:maxLevel="20" android:drawable="@drawable/d2" />
<item android:minLevel="21" android:maxLevel="30" android:drawable="@drawable/d3" />
<item android:minLevel="31" android:maxLevel="40" android:drawable="@drawable/d4" />
</level-list>//1. 一般View: 獲取Drawable並指定level登記
view.getBackground().setLevel(xxx);
//2. ImageView
imageView.setImageLevel(xxx);8-TransitionDrawable(transition)
27、TransitionDrawable的作用
- 實現兩個Drawable之間的淡入淡出效果
- 標籤為
transition
28、TransitionDrawable的例項
// 1、src/drawable/transition.xml---指定兩個item
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/transition_drawable"
android:bottom="10dp"
android:drawable="@drawable/beauty1"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<item android:drawable="@drawable/beauty2" />
</transition>
// 2、將該drawable作為背景
<View
xxxxxx
android:background="@drawable/transition"/>// 1. 獲取Drawable
TransitionDrawable drawable = (TransitionDrawable)view.getBackground();
// 2. 第一個Item漸變到第二個item
drawable.startTransition(1000);
// 3. 逆向動畫
drawable.reverseTransition(1000);9-InsetDrawable(inset)
28、InsetDrawable的作用
- 將其他Drawable內嵌到自身，並在四周留出間距
- View需要背景比自己實際區域要小的時候，可以使用
inset，layer-list也可以實現該需求
29、InsetDrawable的例項
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/watch_dog1"
android:insetTop="10dp"
android:insetBottom="10dp"
android:insetLeft="10dp"
android:insetRight="10dp">
</inset>10-ScaleDrawable(scale)
30、ScaleDrawable的作用
- 縮放圖片，根據屬性
android:scaleHeight/Width以及level共同決定縮放比例。android:scaleWidth/Height="70%"用於指定寬高的縮放比例=為原來的30%。level取值範圍為：0~10000android:scaleGravity屬性和gravity屬性完全一致(請參考BitmapDrawable的gravity屬性)。
31、ScaleDrawable的level等級
- level=0：不可見。(預設值)
- level=1: 按照屬性指定的比例縮放。(一般情況推薦)
- level=10000時: 不縮放。
- level=2~99999：在屬性縮放基礎上進行縮放。
32、ScaleDrawable的例項
1、xml定義ScaleDrawable
//src/drawable/scaledrawable.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/call_of_duty"
android:scaleGravity="center"
android:scaleHeight="70%"
android:scaleWidth="70%">
</scale>
2、引用Drawable
<View
android:id="@+id/scale_view"
xxx
android:background="@drawable/scaledrawable"/>3、Java中設定Level
// 必須要設定level等級，不然會不顯示。
View scaleView = findViewById(R.id.scale_view);
ScaleDrawable scaleDrawable = (ScaleDrawable) scaleView.getBackground();
scaleDrawable.setLevel(1);11-ClipDrawable(clip)
33、ClipDrawable的作用
- 用於裁剪圖片。
- 根據自己當前的等級
level(0~10000)來裁剪另一個Drawable。- 裁剪方向由
clipOrientation和gravity屬性共同控制。level為0，Drawable不可見；10000表示不裁剪；為8000，表示裁減了2000；為1，表示裁剪了9999。
gravity屬性
34、ClipDrawable的屬性gravity
| 可選項 | 含義 |
|---|---|
| top/bottom | 將圖片放在容器上/下。若為垂直裁剪，從另一頭開始裁剪；若為水平裁剪，則從水平方向左/右兩頭開始裁剪 |
| left/right | 將圖片放在容器左/右。若為水平裁剪，從另一頭開始裁剪；若為垂直裁剪，則從垂直方向上/下兩頭開始裁剪 |
| center_vertical/horizontal/center | 垂直居中/水平居中/兩個方向均居中。效果只與clipOrientation有關：水平裁剪，左右兩頭開始裁剪；垂直裁剪，上下兩頭開始裁剪 |
| fill_vertical/horizontal | 垂直/水平方向填充容器。gravity和orientation方向相同時，不裁剪；方向不同時，按照orientation的方向，從兩頭開始裁剪 |
| fill | 水平和垂直方向同時填充容器，沒有裁剪效果 |
| clip_vertical/horizontal | 效果類似center_center |
35、ClipDrawable的例項
1、XML定義
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_launcher"
android:clipOrientation="horizontal"
android:gravity="top"
android:level="10000">
</clip>2、使用
<ImageView
android:id="@+id/clip_imgaeview"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/clipdrawable"/> ImageView imageView = findViewById(R.id.clip_imgaeview);
imageView.setImageLevel(10000); //不裁剪，=8000表示裁剪掉200012-RotateDrawable(rotate)
36、RotateDrawable的作用
- 用於旋轉圖片
android:fromDegrees="0"和android:toDegrees="180":旋轉範圍android:pivotX="50%"和android:pivotY="50%": 旋轉中心- 通過
level設定旋轉角度。範圍：0~10000。
37、RotateDrawable的例項
1、xml定義RotateDrawable
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_launcher"
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%">
</rotate>2、引用drawable
<Button
android:id="@+id/rotate_btn"
xxx
android:background="@drawable/rotatedrawable"/>3、使用
mRotateButton = findViewById(R.id.rotate_btn);
mRotateDrawable = (RotateDrawable) mRotateButton.getBackground();
//1. 不旋轉
mRotateDrawable.setLevel(0);
//2. 完全旋轉
mRotateDrawable.setLevel(10000);
//3. 旋轉50%
mRotateDrawable.setLevel(5000);13-AnimationDrawable(animation-list)
38、AnimationDrawable的作用
- 用於實現
逐幀動畫效果。item中設定一幀一幀的Drawable以及持續時間。
屬性
39、AnimationDrawable的屬性
| 屬性 | 作用 | Java程式碼設定 |
|---|---|---|
| android:oneshot=”true” | 是否迴圈一次：false=迴圈播放；true=播放一次。 | setOneShot(boolean flag) |
| android:variablePadding=”true” | ||
| android:visible=”true” |
40、AnimationDrawable的例項
1、xml定義AnimationDrawable
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"
android:variablePadding="true"
android:visible="true">
<item android:drawable="@drawable/ic_battery_charging_0_black_24dp" android:duration="200"/>
<item android:drawable="@drawable/ic_battery_charging_20_black_24dp" android:duration="200"/>
<item android:drawable="@drawable/ic_battery_charging_30_black_24dp" android:duration="400"/>
<item android:drawable="@drawable/ic_battery_charging_50_black_24dp" android:duration="200"/>
<item android:drawable="@drawable/ic_battery_charging_60_black_24dp" android:duration="400"/>
<item android:drawable="@drawable/ic_battery_charging_80_black_24dp" android:duration="200"/>
<item android:drawable="@drawable/ic_battery_charging_90_black_24dp" android:duration="200"/>
<item android:drawable="@drawable/ic_battery_charging_full_black_24dp" android:duration="400"/>
</animation-list>2、引用
<ImageView
android:id="@+id/animation_imageview"
android:layout_width="100dp"
android:layout_height="50dp"
android:src="@drawable/animationdrawable"/>3、使用
ImageView animationImageView = findViewById(R.id.animation_imageview);
AnimationDrawable animationDrawable = (AnimationDrawable) animationImageView.getDrawable();
//1. 開啟動畫 or 繼續播放
animationDrawable.start();
//2. 停止動畫(會停留在當前一幀畫面上)
animationDrawable.stop();
//3. 動態的新增一個圖片進入該動畫中。
animationDrawable.addFrame(Drawable frame, int duration);14-ShapeDrawable(無標籤)
41、ShapeDrawable的作用
- 用於獲得具有形狀的
Drawable- 需要通過具體的
RectShape、PathShape等賦予ShapeDrawable來獲得具有對應形狀的DrawablePaintDrawable更通用，本身繼承自ShapeDrawable。
1-RectShape
42、矩形RectShape
//1. 建立Shape
RectShape rectShape = new RectShape();
//2. 建立ShapeDrawable
ShapeDrawable shapeDrawable = new ShapeDrawable(rectShape);
//3. 設定顏色等內容
shapeDrawable.getPaint().setColor(Color.BLUE);
shapeDrawable.getPaint().setStyle(Paint.Style.FILL);
//4. 使用ShapeDrawable
shapeImageView.setBackground(shapeDrawable);OvalShape、ArcShape、RoundRectShape均為RectShape的子類。
OvalShape
43、橢圓形-OvalShape
OvalShape ovalShape = new OvalShape();
shapeDrawable.setShape(rectShape);ArcShape
44、扇形-ArcShape
/**
* startAngle: 初始角度-x軸正方向為0
* sweepAngle：順時針方向劃過的度數
*/
ArcShape arcShape = new ArcShape(0, 100);
shapeDrawable.setShape(arcShape);RoundRectShape
45、圓角矩形-RoundRectShape
// 外部矩形弧度-外部圓角矩陣的四個角弧度(兩兩一組)
float[] outerR = new float[] { 8, 8, 8, 8, 8, 8, 8, 8 };
// 內部矩形與外部矩形的距離
RectF inset = new RectF(100, 100, 50, 50);
// 內部矩形弧度
float[] innerRii = new float[] { 20, 20, 20, 20, 20, 20, 20, 20 };
RoundRectShape roundRectShape = new RoundRectShape(outerR, inset, innerRii);
shapeDrawable.setShape(roundRectShape);2-PathShape
46、PathShape的使用
Path path = new Path();
path.moveTo(50, 0);
path.lineTo(0, 50);
path.lineTo(50, 100);
path.lineTo(100, 50);
path.lineTo(50, 0);
PathShape pathShape = new PathShape(path, 200, 100);
shapeDrawable.setShape(pathShape);標準寬高的作用
47、PathShape構造方法中標準寬高的作用
- 如果
標準寬高和View的實際寬高都相等不會出現縮放。- 如果
標準寬高<實際寬高，會按照比例進行放大(比例=實際/標準)。- 如果
標準寬高>實際寬高，會按照比例進行縮小(比例=實際/標準)。
3-PaintDrawable
48、PaintDrawable的使用
PaintDrawable paintDrawable = new PaintDrawable(Color.GREEN);
//1. 圓角, 所有角的半徑相同。
paintDrawable.setCornerRadius(30);
//2. 為四個角的每一個指定半徑。 對於每個角落，陣列包含2個值[X_radius，Y_radius].
paintDrawable.setCornerRadii (new float[]{20,20,8,8,12,12,12,12});
mShapeImageView.setBackground(paintDrawable);ShapeDrawable如何與Bitmap相結合？
49、ShapeDrawable如何與Bitmap相結合？
- 需要結合
BitmapShader
/**
* 已經設定過ShapDrawable基礎上：
* 1. 獲取Bitmap，並構造BitmapShader
* 2. 對BitmapShader用Matrix進行縮放
* 3. getShapeDrawable的Paint設定Shader
*/
Bitmap bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.beauty1)).getBitmap();
BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.REPEAT);
Matrix matrix = new Matrix();
//根據View控制元件的寬高進行縮放
matrix.preScale(100f / bitmap.getWidth(),
100f / bitmap.getHeight());//view:w=100,h=100
bitmapShader.setLocalMatrix(matrix);
shapeDrawable.getPaint().setShader(bitmapShader);15-RippleDrawable(ripple)
50、RippleDrawable的作用
Material Design的觸控反饋動畫(波紋效果)- API 21(Andorid 5.0)-推出
- 要實現波紋效果，可以直接給
控制元件指定特殊的背景，也可以自定義RippleDrawable。- xml的標籤為
ripple，android:color=屬性指定的是波紋顏色。- xml中
item標籤內指定的是背景色，且多個item存在時，以最後一個為準。
51、通過背景設定波紋效果
//有界波紋(控制元件的大小)
android:background="?android:attr/selectableItemBackground"
//無界波紋(圓形波紋)
android:background="?android:attr/selectableItemBackgroundBorderless"52、RippleDrawable的自定義(xml)
1、無界波紋
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorPrimary">
</ripple>2、有界波紋，item中直接引用drawable
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#f7ef07" //波紋色
android:radius="145dp" //波紋半徑
>
<item android:drawable="@color/colorPrimary"/> //背景色
</ripple>3、有界波紋，item中用shape標籤
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#f7ef07"//波紋色
android:radius="145dp" //波紋半徑
>
<item>
<shape android:shape="rectangle">
<solid android:color="#cc0000"/> //背景色
</shape>
</item>
</ripple>16-AnimatedStateListDrawable
53、AnimatedStateListDrawable的作用
- 【動畫型StateListDrawable】在View狀態改變時，展示動畫
- API 21(Android 5.0)-推出。
item用於定義不同狀態所用的Drawable。transition用於定義從fromId到toId之間幀動畫的具體內容。
54、AnimatedStateListDrawable的使用
// animated_statelist_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 為每種狀態提供不同的圖片 -->
<item android:id="@+id/pressed" android:drawable="@drawable/ic_battery_charging_full_black_24dp"
android:state_pressed="true"/>
<item android:id="@+id/unpressed" android:drawable="@drawable/ic_battery_charging_0_black_24dp"
android:state_pressed="false"/>
<item android:id="@+id/mydefault"
android:drawable="@drawable/ic_launcher"/>
<!-- 指定轉場效果 -->
<transition android:fromId="@+id/unpressed" android:toId="@+id/pressed">
<animation-list>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_20_black_24dp"/>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_30_black_24dp"/>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_50_black_24dp"/>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_60_black_24dp"/>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_80_black_24dp"/>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_90_black_24dp"/>
<item android:duration="15" android:drawable="@drawable/ic_battery_charging_full_black_24dp"/>
</animation-list>
</transition>
</animated-selector>使用：
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/animated_statelist_drawable"/>SVG向量圖
55、SVG是什麼?(Scalable Vetor Graphics)
- 可伸縮向量圖(Android 5.0推出)
- 定義用於網路的基於向量的圖形(在Web上應用非常廣泛)
- 使用XML格式定義圖形
- 影象縮放不會影響質量
- 全球資訊網聯盟標準(與DOM和XSL之類的W3C標準是一個整體）
56、SVG和Bitmap區別
- SVG是一個繪圖標準。
- Bitmap是通過每個畫素點上儲存色彩資訊來表示影象。
- SVG放大不會失真, Bitmap會失真。
- Bitmap需要為不同解析度設計多套圖表，SVG繪製一張圖就能適配不同解析度。
17-VectorDrawable(vector)
57、VectorDrawable的作用
- 是靜態向量圖(基於XML)
- API 21(Android 5.0)-推出
vector中path是最小單位，用於建立SVG-用指令繪製SVG圖形vector中group將不同path組合起來
58、VectorDrawable的具體例項(繪製一個圓角直線)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="100"
android:viewportWidth="100">
<group>
<path
android:name="path1"
android:pathData="M 20,80 L 50,80 80,80"
android:strokeColor="@color/colorAccent"
android:strokeLineCap="round"
android:strokeWidth="3" />
</group>
</vector>VectorDrawable的屬性
59、VectorDrawable的屬性
| 屬性 | 作用 |
|---|---|
| android:width=”200dp” | 寬度 |
| android:height=”200dp” | 高度 |
| android:viewportWidth=”100” | 將寬度分為多少份，與path配合(50份等於100dp) |
| android:viewportHeight=”100” | 將高度200dp分為100份，50時=100dp |
| android:tintMode=”src_in” | 著色模式-參考BitmapDrawable |
| android:tint=”@color/colorPrimary” | 著色 |
| android:name=”vector” | 名字 |
| android:alpha=”233” | 透明度，範圍0~255，0-完全可見；255-完全不可間 |
| android:autoMirrored=”false” | 指示當佈局方向是RTL(從右向左)時drawable是否需要映象，預設為false |
group
60、VectorDrawable的中group標籤的作用
- 用於將不同
path組合起來
61、group的屬性
| 屬性 | 作用 |
|---|---|
| android:name=”menu_group” | 名稱-用於附加動畫和變化效果 |
| android:pivotX=”45” | 軸點X-相對於viewportWidth(寬度的份) |
| android:pivotY=”37.5” | 軸點Y-相對於viewportHeight(高度的份) |
| android:rotation=”180” | 旋轉-相對於軸點，0~360 |
| android:scaleX=”0.5” | 縮放-相對於軸點 |
| android:scaleY=”0.8” | 縮放-相對於軸點 |
| android:translateX=”10” | 平移 |
| android:translateY=”10” | 平移 |
path
62、VectorDrawable的中path標籤的作用和屬性
path是最小單位，用於通過指令繪製SVG向量圖。
| 屬性 | 作用 | 取值 |
|---|---|---|