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

By | 08月03日
Advertisement

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 plaincopyAndroid-自定义图像资源的使用(2)

  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 plaincopyAndroid-自定义图像资源的使用(2)

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

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

效果如下:

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

图像级别资源的使用

/05_KindOfDrawableUse/res/drawable/lamp_level.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

  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 plaincopyAndroid-自定义图像资源的使用(2)

  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. <ImageView
  7. android:id="@+id/imageview_lamp"
  8. android:layout_width="fill_parent"
  9. android:layout_height="wrap_content"
  10. android:src="@drawable/lamp_level" />
  11. <Button
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:onClick="onClick_LampOn"
  15. android:text="开灯" />
  16. <Button
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:onClick="onClick_LampOff"
  20. android:text="关灯" />
  21. </LinearLayout>

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

[java] view plaincopyAndroid-自定义图像资源的使用(2)

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

效果图如下:

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

过渡图像资源的使用

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

/05_KindOfDrawableUse/res/drawable/lamp_transition.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

  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 plaincopyAndroid-自定义图像资源的使用(2)

  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. <ImageView
  7. android:id="@+id/imageview_lamp"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:src="@drawable/lamp_transition" />
  11. <Button
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:onClick="onClick_LampOn"
  15. android:text="开灯" />
  16. <Button
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:onClick="onClick_LampOff"
  20. android:text="关灯" />
  21. </LinearLayout>

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

[java] view plaincopyAndroid-自定义图像资源的使用(2)

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

效果图如下:

嵌入图像资源的使用

/05_KindOfDrawableUse/res/drawable/inset.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

  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. </inset>
  9. <!--
  10. android:insetBottom="10dp" 图像距离下边的距离
  11. android:insetLeft="10dp" 图像距离左标的距离
  12. android:insetRight="10dp" 图像距离右边的距离
  13. android:insetTop="10dp" 图像距离上边的距离
  14. -->

/05_KindOfDrawableUse/res/layout/inset_res.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

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

效果图如下:

剪切图像资源的使用

/05_KindOfDrawableUse/res/drawable/clip.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

  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 plaincopyAndroid-自定义图像资源的使用(2)

  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. <ImageView
  8. android:id="@+id/image"
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:background="@drawable/clip" />
  12. </LinearLayout>

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

[java] view plaincopyAndroid-自定义图像资源的使用(2)

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

效果图如下:

比例图像资源的使用

/05_KindOfDrawableUse/res/drawable/scale.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

  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. </scale>

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

外形图像资源的使用

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

/05_KindOfDrawableUse/res/drawable/shape.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

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

/05_KindOfDrawableUse/res/layout/shape_res.xml

[html] view plaincopyAndroid-自定义图像资源的使用(2)

  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. <TextView
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:layout_margin="20dp"
  10. android:background="@drawable/shape"
  11. android:text="Shape Label" />
  12. </LinearLayout>

效果图如下:

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

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

Similar Posts:

  • Android-用你自己的自定义图像资源(2)

    Android-自己定义图像资源的使用 2014年4月29日 上一篇博客.介绍前面几种图像资源的使用,本篇博客把剩下的所有介绍完: 普通图像资源 XML图像资源 Nine-patch图像资源 XML Nine-patch图像资源 图层(Layer)图像资源 图像状态(state)资源 图像级别(Level)资源 淡入淡出(transition)资源 嵌入(Inset)图像资源 剪切(Clip)图像资源 比例(Scale)图像资源 外形(Shape)图像资源 代码资源:http://downloa

  • Android自定义图形图像,可实现圆角背景

    简介 手机应用程序开发,用户体验是极其重要的,他的重要性甚至要高于手机应用软件的功能.很多情况下使用圆角矩形作为视图的背景,能给用户带来极佳的视觉体验,Android中圆角矩形可以通过shape标记来实现. 原理 Android中的所有资源图像都放在res/drawable目录下,然后以R.drawable.xxx形式引用.图形定义也类似,需要在drawable目录下创建自定义xml文件,根元素为shape,shape元素内定义solid.stroke.corners.padding等子元素并为

  • Android资源之图像资源(图像级别资源)

    图像状态资源只能定义有限的几种状态.如果需要更多的状态,就要使用图像级别资源.在该资源文件中可以定义任意多个图像级别.每个图像级别是一个整数区间,可以通过ImageView.setImageLevel或Drawable.setLevel方法切换不同状态的图像. 图像级别资源是XML格式的文件,必须将<level-list>标签作为XML的根节点.<level-list>标签中可以有任意多个<item>标签,每一个<item>标签表示一个级别区间.级别区间用a

  • Android自定义View之资源Attr

    Android开发中自定义View时会经常使用到自定义属性,或者在常规开发中也会经常用到各种控件的属性进行样式及不同效果的开发,下面是定义一个属性时需要知道的东西. 1 定义: 1 文件定义,在res/values/目录下定义一个Android资源xml,一般命名为attrs.xml; 内容如下: <?xml version="1.0" encoding="utf-8"?> <resources> </resources> 2 属

  • Android自定义播放器控件VideoView

    介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于播放视频

  • Android应用程序资源的查找过程分析

    我们知道,在Android系统中,每一个应用程序一般都会配置很多资源,用来适配不同密度.大小和方向的屏幕,以及适配不同的国家.地区和语言等等.这些资源是在应用程序运行时自动根据设备的当前配置信息进行适配的.这也就是说,给定一个相同的资源ID,在不同的设备配置之下,查找到的可能是不同的资源.这个资源查找过程对应用程序来说,是完全透明的.在本文中,我们就详细分析资源管理框架是如何根据ID来查找资源的. 从前面Android应用程序资源管理器(Asset Manager)的创建过程分析一文可以知道,A

  • android - 自定义(组合)控件 + 自定义控件外观

    Android自定义View实现很简单 继承View,重写构造函数.onDraw,(onMeasure)等函数. 如果自定义的View需要有自定义的属性,需要在values下建立attrs.xml.在其中定义你的属性. 在使用到自定义View的xml布局文件中需要加入xmlns:前缀="http://schemas.android.com/apk/res/你的自定义View所在的包路径". 在使用自定义属性的时候,使用前缀:属性名,如my:textColor="#FFFFFF

  • 25.Android之图像的平移、旋转及缩放学习

    在Android中,项目目录下的res\drawable用来放置该项目的图片资源. Android中提供了Bitmap类来获取图像文件信息,进行图像的平移.旋转及缩放等操作,并可以指定格式保存图像文件. 1.图像绘制 在绘制图像之前,需要从项目目录下的res\drawable中获取所需的图片资源.我们可以通过资源索引来获得该图像对象Bitmap.具体方法如下(在项目目录下的res\drawable中放置了一张名为fuwa.png的图片): mBitmap = ((BitmapDrawable)

  • Android自定义View(二、深入解析自定义属性)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51468648 本文出自:[openXu的博客] 目录: 为什么要自定义属性 怎样自定义属性 属性值的类型format 类中获取属性值 Attributeset和TypedArray以及declare-styleable   在上一篇博客<Android自定义View(一.初体验)>中我们体验了自定义控件的基本流程: 继承View,覆盖构造方法 自定义属性 重写onMeasure方法测量宽

  • Android: 自定义Tab样式,一种简单的方式。

    之前看到过论坛里已经有人发过自定义Tab样式的帖子,感觉有些复杂了,这里分享个简单的方法. 1.制作4个9patch的tab样式,可参考android默认的资源 tab_unselected.9.png tab_selected.9.png tab_press.9.png tab_focus.9.png 这4个资源分别代表Tab的4种状态. 2.定义Tab的selector样式(就叫它tab_indicator.xml好了),将其放入drawable文件夹下,代码如下: <?xml versio

Tags: