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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape=["rectangle" | "oval" | "line" | "ring"]>

<gradient

android:angle="integer"

android:centerX="integer"

android:centerY="integer"

android:centerColor="integer"

android:endColor="color"

android:gradientRadius="integer"

android:startColor="color"

android:type=["linear" | "radial" | "sweep"]

android:usesLevel=["true" | "false"] />

<solid

android:color="color" />

<stroke

android:width="integer"

android:color="color"

android:dashWidth="integer"

android:dashGap="integer" />

<padding

android:left="integer"

android:top="integer"

android:right="integer"

android:bottom="integer" />

<corners

android:radius="integer"

android:topLeftRadius="integer"

android:topRightRadius="integer"

android:bottomLeftRadius="integer"

android:bottomRightRadius="integer" />

</shape>

dr.setBounds(x, y, x + width, y + height);

dr.draw(canvas);

android:shape="rectangle">

<gradient

android:startColor="#FFFF0000"

android:endColor="#FF0000FF"

android:centerColor="#FF00FF00"

android:angle="315"/>

<corners android:topLeftRadius="8dp"

android:bottomLeftRadius="8dp" />

</shape>

这里对ShapeDrawable的属性进行了详细的解释，是因为在手机软件的设计中，APK包的大小和内存的大小一直是困扰我们的问题，图片又是这些问题中的一个重头戏，而一个简单的xml可以实现一张图片的效果，那么我们就可以减少APK包的大小和内存，何乐而不为呢！同时也很方便的修改，这么有用的东西，希望大家用好它。

同时通过上面的例子我们找到一个Android的问题。android:bottomLeftRadius="8dp"，从android的api的说明是左下圆角，而实际设置里却是右下圆角，android:bottomLeftRadius和android:bottomRightRadius是相反的。可能与GradientDrawable.setCornerRadii(float[8] radii)中设置的圆角顺序是相同的，radii是一个长度为8的float数组，设置的是按照顺时针的顺序。

public class ShapeDrawable1 extends GraphicsActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(new SampleView(this));

}

private static class SampleView extends View {

private ShapeDrawable[] mDrawables;

private static Shader makeSweep() {

/* *

* 创建SweepGradient并设置渐变的颜色数组

* 第一个 中心点的x坐标

* 第二个 中心点的y坐标

* 第三个 这个也是一个数组用来指定颜色数组的相对位置

* 如果为null 就沿坡度线均匀分布

* 第四个 设置一个位置数组相对应的颜色数组,从0到1.0。

* 如果位置是null,就将颜色自动均匀的分布。

*/

return new SweepGradient(150, 25,

new int[] { 0xFFFF0000, 0xFF00FF00, 0xFF0000FF, 0xFFFF0000 }, null);

}

private static Shader makeLinear() {

/* *

* 创建LinearGradient并设置渐变的颜色数组

* 第一个 起始的x坐标

* 第二个 起始的y坐标

* 第三个 结束的x坐标

* 第四个 结束的y坐标

* 第五个 颜色数组

* 第六个 这个也是一个数组用来指定颜色数组的相对位置

* 如果为null 就沿坡度线均匀分布

* 第七个 渲染模式

*/

return new LinearGradient(0, 0, 50, 50,

new int[] { 0xFFFF0000, 0xFF00FF00, 0xFF0000FF },null,

Shader.TileMode.MIRROR);

}

private static Shader makeTiling() {

int[] pixels = new int[] { 0xFFFF0000, 0xFF00FF00, 0xFF0000FF, 0};

Bitmap bm = Bitmap.createBitmap(pixels, 2, 2, Bitmap.Config.ARGB_8888);

/* 创建一个重复绘画的BitmapShader * */

return new BitmapShader(bm, Shader.TileMode.REPEAT,

Shader.TileMode.REPEAT);

}

/* 自定义一个ShapeDrawable  重写onDraw()方法 * */

private static class MyShapeDrawable extends ShapeDrawable {

private Paint mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

public MyShapeDrawable(Shape s) {

super(s);

mStrokePaint.setStyle(Paint.Style.STROKE);

}

public Paint getStrokePaint() {

return mStrokePaint;

}

@Override

protected void onDraw(Shape s, Canvas c, Paint p) {

s.draw(c, p);

s.draw(c, mStrokePaint);

}

}

public SampleView(Context context) {

super(context);

setFocusable(true);

float[] outerR = new float[] { 12, 12, 12, 12, 0, 0, 0, 0 };

RectF   inset = new RectF(6, 6, 6, 6);

float[] innerR = new float[] { 12, 12, 0, 0, 12, 12, 0, 0 };

Path path = new Path();

path.moveTo(50, 0);

path.lineTo(0, 50);

path.lineTo(50, 100);

path.lineTo(100, 50);

path.close();

mDrawables = new ShapeDrawable[7];

mDrawables[0] = new ShapeDrawable(new RectShape());

mDrawables[1] = new ShapeDrawable(new OvalShape());

mDrawables[2] = new ShapeDrawable(new RoundRectShape(outerR, null, null));

mDrawables[3] = new ShapeDrawable(new RoundRectShape(outerR, inset, null));

mDrawables[4] =new ShapeDrawable(new RoundRectShape(outerR, inset, innerR));

/**

* 创建一个PathShape，参数说明：

* 第一个 PathShape的路径

* 第二个 x坐标缩放的原始比例,例如： ShapeDrawable实际大小为200，

* 那么显示出来的Path图形的x轴是原始的200/100倍

* 第三个 y坐标缩放的原始比例

*/

mDrawables[5] = new ShapeDrawable(new PathShape(path, 100, 100));

/**

* 创建一个弧形ArcShape，参数说明：

* 第一个 开始的角度（注意起始角度在右侧水平为0°角，顺时针增大）

* 第二个 弧度延伸的角度，正数为顺时针延伸

*/

mDrawables[6] = new MyShapeDrawable(new ArcShape(45, -270));

mDrawables[0].getPaint().setColor(0xFFFF0000);

mDrawables[1].getPaint().setColor(0xFF00FF00);

mDrawables[2].getPaint().setColor(0xFF0000FF);

mDrawables[3].getPaint().setShader(makeSweep());

mDrawables[4].getPaint().setShader(makeLinear());

mDrawables[5].getPaint().setShader(makeTiling());

mDrawables[6].getPaint().setColor(0x88FF8844);

PathEffect pe = new DiscretePathEffect(10, 4);

PathEffect pe2 = new CornerPathEffect(4);

mDrawables[3].getPaint().setPathEffect(new ComposePathEffect(pe2, pe));

MyShapeDrawable msd = (MyShapeDrawable)mDrawables[6];

msd.getStrokePaint().setStrokeWidth(4);

}

@Override protected void onDraw(Canvas canvas) {

int x = 10;

int y = 10;

int width = 300;

int height = 50;

// 画出所有Drawable

for (Drawable dr : mDrawables) {

dr.setBounds(x, y, x + width, y + height);

dr.draw(canvas);

y += height + 5;

}

}

}

}

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

android:oneshot="false" >

<item android:drawable="@drawable/a1" android:duration="500"></item>

<item android:drawable="@drawable/a2" android:duration="500"></item>

</animation-list>

mButton.setBackgroundResource(R.drawable. animation_1);

AnimationDrawable mAnimationDrawable

= (AnimationDrawable) mButton.getBackground();

// 或当做AnimationDrawable单独拿出来：

AnimationDrawable mAnimationDrawable

= (AnimationDrawable) getResources().getDrawable(R.drawable.animation_1);

if (mAnimationDrawable.isRunning()) {

// 停止动画播放

mAnimationDrawable.stop();

} else {

// 开始或者继续动画播放

mAnimationDrawable.start();

}

默认情况下，在onCreate()中执行animation.start();是无效的，因为在onCreate()中AnimationDrawable还没有完全的与Button绑定，在onCreate()中启动动画，就只能看到第一张图片。

解决的办法，在其它事件中响应触发动画。