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
  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>  

在drawable目录下,定义一个selector标签的选择器,并在布局文件中使用
/05_KindOfDrawableUse/res/layout/state_res.xml
[html]  view plain copy
  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>  

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

效果如下:

Android-自定义图像资源的使用(2)_第1张图片


图像级别资源的使用

/05_KindOfDrawableUse/res/drawable/lamp_level.xml
[html]  view plain copy
  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>  


/05_KindOfDrawableUse/res/layout/level_res.xml
[html]  view plain copy
  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>  

/05_KindOfDrawableUse/src/com/wwj/drawable/LevelDrawableRes.java
[java]  view plain copy
  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. }  


效果图如下:
Android-自定义图像资源的使用(2)_第2张图片


过渡图像资源的使用

这个图像资源是用来展示图像过渡的,比如一盏灯从不亮到亮的缓慢过渡。
/05_KindOfDrawableUse/res/drawable/lamp_transition.xml
[html]  view plain copy
  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>  


/05_KindOfDrawableUse/res/layout/cross_fade_res.xml
[html]  view plain copy
  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>  

/05_KindOfDrawableUse/src/com/wwj/drawable/CrossFadeDrawableRes.java
[java]  view plain copy
  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. }  

效果图如下:
Android-自定义图像资源的使用(2)_第3张图片


嵌入图像资源的使用

/05_KindOfDrawableUse/res/drawable/inset.xml
[html]  view plain copy
  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. -->  


/05_KindOfDrawableUse/res/layout/inset_res.xml
[html]  view plain copy
  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>  

效果图如下:
Android-自定义图像资源的使用(2)_第4张图片


剪切图像资源的使用

/05_KindOfDrawableUse/res/drawable/clip.xml
[html]  view plain copy
  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" />  


/05_KindOfDrawableUse/res/layout/clip_res.xml
[html]  view plain copy
  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>  

/05_KindOfDrawableUse/src/com/wwj/drawable/ClipDrawableRes.java
[java]  view plain copy
  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. }  

效果图如下:
Android-自定义图像资源的使用(2)_第5张图片


比例图像资源的使用

/05_KindOfDrawableUse/res/drawable/scale.xml
[html]  view plain copy
  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>  

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

外形图像资源的使用

外形图像是用得比较多,可以实现自己想要的效果,比如一个文本框
/05_KindOfDrawableUse/res/drawable/shape.xml
[html]  view plain copy
  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>  

/05_KindOfDrawableUse/res/layout/shape_res.xml
[html]  view plain copy
  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>  


效果图如下:
Android-自定义图像资源的使用(2)_第6张图片


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

你可能感兴趣的:(资源文件)