android中drawable資源的解釋及例子
阿新 • • 發佈:2019-01-23
文章中的內容參考Dev Guide中的Drawable Resources,英文好的朋友可以直接去讀英文。總結這篇文章的目的是自己在使用drawable資源遇到一些問題跟大家分享下,同時整理下自己對drawable的理解。
drawable資源共有10種,包括Bitmap檔案、Nine-Path檔案、Layer List、State List、Level list、Transition Drawable、Inset Drawable、Clip Drawable、Scale Drawable、Shape Drawable。下面分別介紹下各種檔案的用法和其中主要屬性的作用:
一、Bitmap檔案:就是普通的jpg、png和gif圖片檔案;
二、Nine-Path檔案:以.9.png結尾的圖片檔案,其中圖片中有夠伸縮的區域,可以根據內容改變圖片大小。在android sdk的tools目錄下有一個draw9patch.bat可以製作9.png圖片;
三、Layer List: 可以用於把多張圖片組合成一張圖片,例如:
四、State List:作用是在相同的圖形中展示不同的圖片,比如ListView中的子項背景,可以設定點選時是一種背景,沒有焦點時是另一種背景。例如:
<?xml version="1.0" encoding="utf-8"?><transitionxmlns:android="http://schemas.android.com/apk/res/android"> <itemandroid:drawable="@drawable/on"/> <itemandroid:drawable="@drawable/off"/></transition>在XML中的引用:
<inset
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/test_img"
android:clipOrientation="horizontal"
android:gravity="left" /> 第二步,在ImageView中引用: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/clipimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/clip_drawable"/>
</LinearLayout> Dev Guide中在ImageView中設定的是android:background="@drawable/clip_drawable",但是我使用background的時,會在程式中報空指標的錯誤。 最後,使用程式控制: ImageView imageView=(ImageView)findViewById(R.id.clipimage); ClipDrawable clipDrawable=(ClipDrawable)imageView.getDrawable(); clipDrawable.setLevel(5000); level的值為0到10000 。當值為10000時圖全部顯示。 九、Scale Drawable:在原圖的基礎上改變圖片的大小。例子: 第一步:drawable檔案中建立scale_drawable.xml <?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/test_img"
android:scaleGravity="center_vertical|center_horizontal"
android:scaleHeight="50%"
android:scaleWidth="80%" /> 第二步:在xml中引用 <ImageView android:id="@+id/scaleimage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/scale_drawable"/> 第三步,在程式中設定level ImageView scaleImage=(ImageView)findViewById(R.id.scaleimage); ScaleDrawable scale=(ScaleDrawable)scaleImage.getDrawable(); scale.setLevel(10000); 這裡設定level為10000表示可以整個顯示圖片。 十、Shape Drawable:在xml中定義圖形。可以自定義一個圖形,包括邊框、漸變、圓角等。例子: 第一步:shape_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="@drawable/android_red"
android:gravity="center" />
</item>
<item android:top="10dp" android:left="10dp">
<bitmap android:src="@drawable/android_green"
android:gravity="center" />
</item>
<item android:top="20dp" android:left="20dp">
<bitmap android:src="@drawable/android_blue"
android:gravity="center" />
</item>
</layer-list>
四、State List:作用是在相同的圖形中展示不同的圖片,比如ListView中的子項背景,可以設定點選時是一種背景,沒有焦點時是另一種背景。例如:
-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_hovered=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_checkable=["true" | "false"]
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_window_focused=["true" | "false"] />
</selector>
<?xml version="1.0" encoding="utf-8"?>五、Level list:可以通過程式imageView.getDrawable().setImageLevel(value)來設定需要在ImageView中顯示的圖片(在xml中宣告的圖片)。例子:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
<?xml version="1.0" encoding="utf-8"?>可以在程式中設定imageView.getDrawable().setImageLevel(0)或imageView.getDrawable().setImageLevel(1)來切換圖片。 六、Transition Drawable:可以通過呼叫startTransition()和reverseTransition()實現兩張圖片的切換。例子: XML檔案存放在res/drawable/transition.xml
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/status_off"
android:maxLevel="0" />
<item
android:drawable="@drawable/status_on"
android:maxLevel="1" />
</level-list>
<?xml version="1.0" encoding="utf-8"?><transitionxmlns:android="http://schemas.android.com/apk/res/android"> <itemandroid:drawable="@drawable/on"/> <itemandroid:drawable="@drawable/off"/></transition>在XML中的引用:
<ImageButton在程式中的使用
android:id="@+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/transition" />
-
ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);
<inset
android:drawable="@drawable/photo2" android:insetTop="100dp" android:insetRight="100dp" android:insetBottom="200dp" android:insetLeft="100dp" />
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/inset_drawable">八、Clip Drawable:可以剪載圖片顯示,例如,可以通過它來做進度度。你可以選擇是從水平或垂直方向剪載。其中的gravity設定從整個部件的哪裡開始。例子: 第一步,在drawable檔案中建立:clip_drawable.xml <?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/test_img"
android:clipOrientation="horizontal"
android:gravity="left" /> 第二步,在ImageView中引用: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/clipimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/clip_drawable"/>
</LinearLayout> Dev Guide中在ImageView中設定的是android:background="@drawable/clip_drawable",但是我使用background的時,會在程式中報空指標的錯誤。 最後,使用程式控制: ImageView imageView=(ImageView)findViewById(R.id.clipimage); ClipDrawable clipDrawable=(ClipDrawable)imageView.getDrawable(); clipDrawable.setLevel(5000); level的值為0到10000 。當值為10000時圖全部顯示。 九、Scale Drawable:在原圖的基礎上改變圖片的大小。例子: 第一步:drawable檔案中建立scale_drawable.xml <?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/test_img"
android:scaleGravity="center_vertical|center_horizontal"
android:scaleHeight="50%"
android:scaleWidth="80%" /> 第二步:在xml中引用 <ImageView android:id="@+id/scaleimage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/scale_drawable"/> 第三步,在程式中設定level ImageView scaleImage=(ImageView)findViewById(R.id.scaleimage); ScaleDrawable scale=(ScaleDrawable)scaleImage.getDrawable(); scale.setLevel(10000); 這裡設定level為10000表示可以整個顯示圖片。 十、Shape Drawable:在xml中定義圖形。可以自定義一個圖形,包括邊框、漸變、圓角等。例子: 第一步:shape_drawable.xml
android:shape="rectangle"> <gradient
android:startColor="#FFFF0000"android:endColor="#80FF00FF"android:angle="45"/>
<padding
android:left="7dp"android:top="7dp"android:right="7dp"android:bottom="7dp" />
<corners
</shape> 第二步:xml中引用 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="shape例子" android:background="@drawable/shape_drawable"/>android:radius="8dp" />