第七章 实现炫酷效果—图像和动画(2)

7.3变化多端—Drawable(绘图类)

Drawable资源是Android系统中使用最广泛、最灵活的资源,可以直接使用png、jpg、gif、9.png等图片做为资源文件,也可以使用多种XML文件做为资源文件。

下面详细介绍下各种Drawable资源。

7.3.1Drawable的一些常用子类

Android平台的Drawable代表可以绘制在屏幕上的资源,可以使用getDrawable(int)从资源文件中获取Drawable资源,或者在XML资源文件中采用@drawable方式来引用一个drawable资源。Drawable是一个通用的抽象类,这里有几种Drawable类扩展出的绘图的类:

l  BitmapDrawable—Bitmap File,一个Bitmap图像文件(.png、.jpg或.gif)。

l  NinePatchDrawable—Nine-Patch File,一个带有伸缩区域的PNG文件,可以基于content伸缩图片(.9.png)。

l  StateListDrawable—State List,一个XML文件,为不同的状态引用不同的Bitmap图像(例如,当按钮按下时使用不同的图片)。

l  PaintDrawable—Color,定义在XML中的资源,指定一个矩形(圆角可以有)的颜色。

l  ShapeDrawable—Shape,一个XML文件,定义了一个几何形状,包括颜色和渐变。

l  AnimationDrawable—Animation动画。


经验分享:

Android中不允许图片资源的文件名中出现大写字母,并且不能以数字开头。否则将无法为该图片在R中生成资源索引。这点需要特别注意一下。

7.3.2BitmapDrawable

BitmapDrawable是位图转换而成,一般它的资源文件放在res/drawable/目录下,文件名会被当作资源ID使用。例如:

在res/drawable/myimage.png位置保存了一张图片,在LayoutXML中可以应用这个图片到一个View上:


<ImageView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:src="@drawable/myimage" />;

下面的代码可以以Drawable方式得到图片:


Resources res = getResources();

Drawable drawable = res.getDrawable(R.drawable.myimage);

7.3.3点九图片—NinePatchDrawable

NinePatchDrawable绘画的是一个可以伸缩的位图图像,Android会自动调整大小来容纳显示的内容。NinePatch常被用在设置View的背景。NinePatch与一般图片被设置为背景最大的区别就是NinePatch可以有一段图片不被拉伸。

NinePatchDrawable是一个标准的PNG图像,它包括额外的1个像素的边界,你必须保存它后缀为.9.png,并且保持到工程的res/drawable目录中。你可以使用Android自带的工具(\android-sdk\tools\draw9patch.bat)来进行NinePatch的制作。这个1个像素的边界是用来确定图像的可伸缩和静态区域。

左边那条黑色线代表图片垂直拉伸的区域。

上边的那条黑色线代表水平拉伸区域。

他们的交集就区域代表就垂直拉伸和水平拉伸都可以进行的区域。

右边的黑色线代表内容绘制的垂直区域。

下边的黑色线代表内容绘制的水平区域。

他们交集的区域就是内容所要绘制到的区域(android:padding的效果)。

下面的示意图7-1可能更方便理解。

图7-1 九图工具效果图


经验分享:

制作点九图片的时候,如果下边和右边的黑线不是连续的,那它将按最左端(上端)和最右端(下端)组成的线段来算内容区域。右边和下边的线是可选的,左边和上边的线不能省略。

点九图片是用在拉伸的情况下,需要注意拉伸的部分会变形。那么如果我们不需要拉伸,只需要重复的平铺怎么办?可以使用BitmapDrawable来实现:

// 获取出图片

Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resID);

// 转换成BitmapDrawable

BitmapDrawable bd = new BitmapDrawable(bitmap);

// 设置平铺的方向为X、Y(横、竖)两个方向

bd.setTileModeXY(TileMode.REPEAT , TileMode.REPEAT );

// 设置平铺的方向为X(横)方向

// bd.setTileModeX(TileMode.REPEAT );

// 设置图片的抖动为true。抖动可以使渐变更平滑,使原来会有间断线或色块的问题解决,但是不会使一个透明渐变的黑线消失。

bd.setDither(true);

// 设置为背景,就能达到自动平铺的效果。

view.setBackgroundDrawable(bd);

7.3.4会动的图片—StateListDrawable

StateListDrawable是定义在XML中的Drawable对象,能根据状态来呈现不同的图像。例如,Button存在多种不同的状态(pressed、focused或other)。使用StateListDrawable,你可以为Button的每个状态提供不同的按钮图像。也可以在XML文件中描述状态列表。在<selector>元素里的每个<item>代表每个图像,每个<item>使用不同的特性来描述使用的时机。当每次状态改变时,StateList都会从上到下遍历一次,第一个匹配当前状态的item将被使用——选择的过程不是基于“最佳匹配”,只是符合state的最低标准的第一个item。

下面举个简单的例子.

先看XML文件,此文件保存在res/drawable/selecter_btn.xml。


<?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/button_pressed" /> <!-- pressed -->

<item android:state_focused="true"

android:drawable="@drawable/button_focused" /> <!-- focused -->

<item android:drawable="@drawable/button_normal" /> <!-- default -->

</selector>

将这个Drawable应用到一个View上,使用的方法和使用Drawable一样。


<ImageView

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:src="@drawable/selecter_btn" />

7.3.5颜色填充的另一种方法—PaintDrawable

PaintDrawable是定义在XML中的color,可以当作Drawable使用,来填充矩形区域(圆角可以有)。这种Drawable的行为很像是颜色填充。

下面我们来看个简单的例子。

XML文件保存在res/drawable/color_name.xml。


<?xml version="1.0" encoding="utf-8"?>

<resources>

<drawable name="solid_red">#f00</drawable>

<drawable name="solid_blue">#0000ff</drawable>

</resources>

将这个Drawable应用到一个View上。


<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@drawable/solid_blue" />


经验分享:

Color Drawable是一种简单的资源,可以使用name特性来引用其值(不再是XML文件的名)。因此,你可以在一个XML文件中的<resources>元素下添加多个Color Drawable。

时间: 2024-10-11 20:13:31

第七章 实现炫酷效果—图像和动画(2)的相关文章

第七章 实现炫酷效果—图像和动画(1)

第七章实现炫酷效果-图像和动画 学完上一章,相信读者对Android画图核心部分有了一定的了解.为了实现更加炫酷的效果,我们可能会在我们的应用中使用大量的图像和动画效果. 本章我们将详细介绍Android中的各种图像对象的使用,以及动画的使用.学习完本章,相信读者可以独立开发出有着绚丽的视觉效果的Android应用了. 7.1 Android的几种常用图像类型 Android中的图像对象,主要有android.graphics.Bitmap(位图).android.graphics.drawab

第七章 实现炫酷效果—图像和动画(3)

7.3.6超炫的特效-ShapeDrawable 当你想去使用一些常用的图形,ShapeDrawable对象可能会对你有很大的帮助.当然通过ShapeDrawable,你可以通过编程画出任何你想到的图像与样式,因为ShapeDrawable有自己的draw()方法. ShapeDrawable继承了Drawable,所以你可以调用Drawable里有的函数,使用方法和其他的Drawable的子类差不多.下面我们来介绍它的特色. 通过ShapeDrawable的XML构造文件来了解ShapeDra

第七章 实现炫酷效果—图像和动画(5)

7.7渐变动画-Tween Animation 7.7.1Tween Animation简介 一个Tween动画将对视图对象中的内容进行一系列简单的转换(位置,大小,旋转,透明性).如果你有一个文本视图对象,你可以移动它,旋转它,让它变大或让它变小,如果文字下面还有背景图像,背景图像也会随着文件进行转换. 可以使用XML来定义Tween Animation.首先将动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <t

第七章 实现炫酷效果—图像和动画(6)

7.8渐变动画-Frame Animation FrameAnimation是按顺序播放事先做好的图像,跟播放电影类似.可以参考前面的7.3.7章节--<简单的帧动画-AnimationDrawable>. 经验分享: AnimationDrawable也可以通过代码来生成AnimationDrawable对象: AnimationDrawable mAnimationDrawable = new AnimationDrawable(); mAnimationDrawable.addFrame

10大炫酷的HTML5文字动画特效欣赏

文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HTML5和CSS3的强大之处就在于此.本文分享的10款炫酷的HTML5文字动画特效非常不错,一起来看看吧. 1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

开源分享三(炫酷的Android Loading动画)

开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用户注意力,不会显得那么烦躁,所以你可以看到市面上一些App中的各种各样的Loading动画,从这些实现思路上可以打开你们自己的思维,没准也会有创新的Loading动画出现. android-shapeLoadingView 新版58同城加载页面动画. CircleProgress 一个效果很酷炫很创

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

经典炫酷的HTML5/jQuery动画应用示例及源码

jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富多彩,因为利用HTML5,我们可以制作更加绚丽动感的动画特效,HTML5结合jQuery,真是我们开发者的福利啊.本文分享了一些经典炫酷的HTML5/jQuery动画应用,喜欢的朋友可以分享和收藏. jquery视差滑块幻灯特效 很传统的一款jQuery焦点图插件,但是该焦点图插件是宽屏的,整体看起