Android-自定义图像资源的使用（2）

Android-自定义图像资源的使用

2014年4月29日 

 上一篇博客，介绍前面几种图像资源的使用，本篇博客把剩下的全部介绍完：

• 普通图像资源
• XML图像资源
• Nine-patch图像资源
• XML Nine-patch图像资源
• 图层（Layer）图像资源
• 图像状态（state）资源
• 图像级别（Level）资源
• 淡入淡出（transition）资源
• 嵌入（Inset)图像资源
• 剪切（Clip）图像资源
• 比例（Scale）图像资源
• 外形（Shape）图像资源

代码资源：http://download.csdn.net/detail/wwj_748/7263481

有兴趣的朋友可以加本人创建的群，里面有丰富的学习资源哦：299402133（移动开发狂热者群）

图像状态资源的使用

注：部分例子来源《Android应用实战-李宁》，经由本人整理。

按钮状态变化，大家应该知道了吧。按下一个效果，松开又一个效果，这就是状态的改变。

/05_KindOfDrawableUse/res/drawable/button.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_pressed="true"  
4.           android:drawable="@drawable/pressed" /> <!-- pressed -->  
5.     <item android:state_focused="true"  
6.           android:drawable="@drawable/focused" />   
7.     <item android:drawable="@drawable/normal" />   
8. </selector>  

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true"          android:drawable="@drawable/pressed" /> <!-- pressed -->    <item android:state_focused="true"          android:drawable="@drawable/focused" />     <item android:drawable="@drawable/normal" /> </selector>

在drawable目录下，定义一个selector标签的选择器，并在布局文件中使用

/05_KindOfDrawableUse/res/layout/state_res.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <Button  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:background="@drawable/button"  
11.         android:text="按钮" />  
12.   
13. </LinearLayout>  

<?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" >    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/button"        android:text="按钮" /></LinearLayout>

上面的Button通过设置background来引用我们定义好的selector

效果如下：

图像级别资源的使用

/05_KindOfDrawableUse/res/drawable/lamp_level.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <level-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/lamp_off" android:minLevel="6"  
4.         android:maxLevel="10" />  
5.     <item android:drawable="@drawable/lamp_on" android:minLevel="12"  
6.         android:maxLevel="20" />  
7. </level-list>  

<?xml version="1.0" encoding="utf-8"?><level-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/lamp_off" android:minLevel="6"android:maxLevel="10" /><item android:drawable="@drawable/lamp_on" android:minLevel="12"android:maxLevel="20" /></level-list>

/05_KindOfDrawableUse/res/layout/level_res.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <ImageView  
8.         android:id="@+id/imageview_lamp"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:src="@drawable/lamp_level" />  
12.   
13.     <Button  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content"  
16.         android:onClick="onClick_LampOn"  
17.         android:text="开灯" />  
18.   
19.     <Button  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:onClick="onClick_LampOff"  
23.         android:text="关灯" />  
24.   
25. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ImageView        android:id="@+id/imageview_lamp"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:src="@drawable/lamp_level" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:onClick="onClick_LampOn"        android:text="开灯" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:onClick="onClick_LampOff"        android:text="关灯" /></LinearLayout>

/05_KindOfDrawableUse/src/com/wwj/drawable/LevelDrawableRes.java

[java] view plain copy

print?

1. package com.wwj.drawable;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.widget.ImageView;  
7.   
8. /** 
9.  * 图像级别资源的使用 
10.  *  
11.  * 在res/drawable建立图像级别资源 
12.  *  
13.  * 然后在布局文件的控件中使用 
14.  *  
15.  * @author wwj 
16.  *  
17.  */  
18. public class LevelDrawableRes extends Activity {  
19.   
20.     private ImageView ivLamp;  
21.   
22.     @Override  
23.     public void onCreate(Bundle savedInstanceState) {  
24.         super.onCreate(savedInstanceState);  
25.         setContentView(R.layout.level_res);  
26.   
27.         ivLamp = (ImageView) findViewById(R.id.imageview_lamp);  
28.         // 设置Level为8，显示lamp_off.png  
29.         ivLamp.setImageLevel(8);  
30.     }  
31.   
32.     public void onClick_LampOn(View view) {  
33.         // LevelListDrawable levelListDrawable =  
34.         // (LevelListDrawable)ivLamp.getDrawable();  
35.         // levelListDrawable.setLevel(15);  
36.         // 设置Level为15，显示lamp_on.png  
37.         ivLamp.setImageLevel(15);  
38.   
39.     }  
40.   
41.     public void onClick_LampOff(View view) {  
42.         // 设置Level为6，显示lamp_off.png  
43.         ivLamp.getDrawable().setLevel(6);  
44.   
45.     }  
46. }  

package com.wwj.drawable;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.ImageView;/** * 图像级别资源的使用 *  * 在res/drawable建立图像级别资源 *  * 然后在布局文件的控件中使用 *  * @author wwj *  */public class LevelDrawableRes extends Activity {private ImageView ivLamp;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.level_res);ivLamp = (ImageView) findViewById(R.id.imageview_lamp);// 设置Level为8，显示lamp_off.pngivLamp.setImageLevel(8);}public void onClick_LampOn(View view) {// LevelListDrawable levelListDrawable =// (LevelListDrawable)ivLamp.getDrawable();// levelListDrawable.setLevel(15);// 设置Level为15，显示lamp_on.pngivLamp.setImageLevel(15);}public void onClick_LampOff(View view) {// 设置Level为6，显示lamp_off.pngivLamp.getDrawable().setLevel(6);}}

效果图如下：

过渡图像资源的使用

这个图像资源是用来展示图像过渡的，比如一盏灯从不亮到亮的缓慢过渡。

/05_KindOfDrawableUse/res/drawable/lamp_transition.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <transition xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/lamp_off" />  
4.     <item android:drawable="@drawable/lamp_on" />  
5. </transition>  

<?xml version="1.0" encoding="utf-8"?><transition xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/lamp_off" /><item android:drawable="@drawable/lamp_on" /></transition>

/05_KindOfDrawableUse/res/layout/cross_fade_res.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <ImageView  
8.         android:id="@+id/imageview_lamp"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:src="@drawable/lamp_transition" />  
12.   
13.     <Button  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content"  
16.         android:onClick="onClick_LampOn"  
17.         android:text="开灯" />  
18.   
19.     <Button  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:onClick="onClick_LampOff"  
23.         android:text="关灯" />  
24.   
25. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ImageView        android:id="@+id/imageview_lamp"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/lamp_transition" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:onClick="onClick_LampOn"        android:text="开灯" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:onClick="onClick_LampOff"        android:text="关灯" /></LinearLayout>

/05_KindOfDrawableUse/src/com/wwj/drawable/CrossFadeDrawableRes.java

[java] view plain copy

print?

1. package com.wwj.drawable;  
2.   
3. import android.app.Activity;  
4. import android.graphics.drawable.TransitionDrawable;  
5. import android.os.Bundle;  
6. import android.view.View;  
7. import android.widget.ImageView;  
8.   
9. /** 
10.  * 淡入淡出资源的使用 
11.  *  
12.  * @author wwj 
13.  *  
14.  */  
15. public class CrossFadeDrawableRes extends Activity {  
16.     private ImageView ivLamp;  
17.   
18.     @Override  
19.     public void onCreate(Bundle savedInstanceState) {  
20.         super.onCreate(savedInstanceState);  
21.         setContentView(R.layout.cross_fade_res);  
22.   
23.         ivLamp = (ImageView) findViewById(R.id.imageview_lamp);  
24.     }  
25.   
26.     public void onClick_LampOn(View view) {  
27.         // 从第一个图像切换到第二个图像。其中使用1秒的时间完成淡入淡出效果  
28.         TransitionDrawable drawable = (TransitionDrawable) ivLamp.getDrawable();  
29.         drawable.startTransition(1000);  
30.     }  
31.   
32.     public void onClick_LampOff(View view) {  
33.         // 从第二个图像切换第一个图像。其中使用1秒的时间完成淡入淡出效果  
34.         TransitionDrawable drawable = (TransitionDrawable) ivLamp.getDrawable();  
35.         drawable.reverseTransition(1000);  
36.     }  
37. }  

package com.wwj.drawable;import android.app.Activity;import android.graphics.drawable.TransitionDrawable;import android.os.Bundle;import android.view.View;import android.widget.ImageView;/** * 淡入淡出资源的使用 *  * @author wwj *  */public class CrossFadeDrawableRes extends Activity {private ImageView ivLamp;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.cross_fade_res);ivLamp = (ImageView) findViewById(R.id.imageview_lamp);}public void onClick_LampOn(View view) {// 从第一个图像切换到第二个图像。其中使用1秒的时间完成淡入淡出效果TransitionDrawable drawable = (TransitionDrawable) ivLamp.getDrawable();drawable.startTransition(1000);}public void onClick_LampOff(View view) {// 从第二个图像切换第一个图像。其中使用1秒的时间完成淡入淡出效果TransitionDrawable drawable = (TransitionDrawable) ivLamp.getDrawable();drawable.reverseTransition(1000);}}

效果图如下：

嵌入图像资源的使用

/05_KindOfDrawableUse/res/drawable/inset.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:drawable="@drawable/logo"  
4.     android:insetBottom="10dp"  
5.     android:insetLeft="10dp"  
6.     android:insetRight="10dp"  
7.     android:insetTop="10dp" >  
8.   
9. </inset>  
10. <!--  
11.      android:insetBottom="10dp" 图像距离下边的距离  
12.     android:insetLeft="10dp" 图像距离左标的距离  
13.     android:insetRight="10dp" 图像距离右边的距离  
14.     android:insetTop="10dp" 图像距离上边的距离  
15. -->  

<?xml version="1.0" encoding="utf-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/logo"    android:insetBottom="10dp"    android:insetLeft="10dp"    android:insetRight="10dp"    android:insetTop="10dp" ></inset><!--     android:insetBottom="10dp" 图像距离下边的距离    android:insetLeft="10dp" 图像距离左标的距离    android:insetRight="10dp" 图像距离右边的距离    android:insetTop="10dp" 图像距离上边的距离-->

/05_KindOfDrawableUse/res/layout/inset_res.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <ImageView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:background="@drawable/inset" />  
11.   
12. </LinearLayout>  

<?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" >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/inset" /></LinearLayout>

效果图如下：

剪切图像资源的使用

/05_KindOfDrawableUse/res/drawable/clip.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <clip xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:clipOrientation="horizontal"  
4.     android:drawable="@drawable/progress"  
5.     android:gravity="left" />  

<?xml version="1.0" encoding="utf-8"?><clip xmlns:android="http://schemas.android.com/apk/res/android"    android:clipOrientation="horizontal"    android:drawable="@drawable/progress"    android:gravity="left" />

/05_KindOfDrawableUse/res/layout/clip_res.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="@drawable/background"  
6.     android:orientation="vertical" >  
7.   
8.     <ImageView  
9.         android:id="@+id/image"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/clip" />  
13.   
14. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@drawable/background"    android:orientation="vertical" >    <ImageView        android:id="@+id/image"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@drawable/clip" /></LinearLayout>

/05_KindOfDrawableUse/src/com/wwj/drawable/ClipDrawableRes.java

[java] view plain copy

print?

1. package com.wwj.drawable;  
2.   
3. import android.app.Activity;  
4. import android.graphics.drawable.ClipDrawable;  
5. import android.os.Bundle;  
6. import android.widget.ImageView;  
7.   
8. /** 
9.  * 剪切图像的使用 
10.  *  
11.  * 在res/drawable目录下定义clip资源 
12.  *  
13.  * @author wwj 
14.  *  
15.  */  
16. public class ClipDrawableRes extends Activity {  
17.     @Override  
18.     protected void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.clip_res);  
21.         ImageView imageview = (ImageView) findViewById(R.id.image);  
22.         ClipDrawable drawable = (ClipDrawable) imageview.getBackground();  
23.         // 截取30%的图像  
24.         drawable.setLevel(3000);  
25.     }  
26. }  

package com.wwj.drawable;import android.app.Activity;import android.graphics.drawable.ClipDrawable;import android.os.Bundle;import android.widget.ImageView;/** * 剪切图像的使用 *  * 在res/drawable目录下定义clip资源 *  * @author wwj *  */public class ClipDrawableRes extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.clip_res);ImageView imageview = (ImageView) findViewById(R.id.image);ClipDrawable drawable = (ClipDrawable) imageview.getBackground();// 截取30%的图像drawable.setLevel(3000);}}

效果图如下：

比例图像资源的使用

/05_KindOfDrawableUse/res/drawable/scale.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:drawable="@drawable/logo"  
4.     android:scaleGravity="center_vertical|center_horizontal"  
5.     android:scaleHeight="80%"  
6.     android:scaleWidth="80%" >  
7.   
8. </scale>  

<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/logo"    android:scaleGravity="center_vertical|center_horizontal"    android:scaleHeight="80%"    android:scaleWidth="80%" ></scale>

这个比例图片没有效果，不知道为何

外形图像资源的使用

外形图像是用得比较多，可以实现自己想要的效果，比如一个文本框

/05_KindOfDrawableUse/res/drawable/shape.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle" >  
4.   
5.     <gradient  
6.         android:angle="45"  
7.         android:endColor="#80FF00FF"  
8.         android:startColor="#FFFF0000" />  
9.   
10.     <padding  
11.         android:bottom="7dp"  
12.         android:left="7dp"  
13.         android:right="7dp"  
14.         android:top="7dp" />  
15.   
16.     <stroke  
17.         android:width="2dp"  
18.         android:color="#FFF" />  
19.   
20.     <corners android:radius="8dp" />  
21.   
22. </shape>  

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle" >    <gradient        android:angle="45"        android:endColor="#80FF00FF"        android:startColor="#FFFF0000" />    <padding        android:bottom="7dp"        android:left="7dp"        android:right="7dp"        android:top="7dp" />    <stroke        android:width="2dp"        android:color="#FFF" />    <corners android:radius="8dp" /></shape>

/05_KindOfDrawableUse/res/layout/shape_res.xml

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <TextView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_margin="20dp"  
11.         android:background="@drawable/shape"  
12.         android:text="Shape Label" />  
13.   
14. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="20dp"        android:background="@drawable/shape"        android:text="Shape Label" /></LinearLayout>

效果图如下：

关于Android提供的所有图像资源已经通过两篇博文给大家介绍完了，一些具体的参数没有列出来，也没有详细解释，各位想了解更多的话，可以到官网查看具体参数的使用。