Android入门第十四篇之画图

来源：互联网发布：阿里云免费体验邀请码编辑：程序博客网时间：2024/05/01 09:06

常用控件说了不少，现在说说手机开发中也常用到的画图。要掌握Android的画图，首先就要了解一下，基本用到的图形接口：

1.Bitmap，可以来自资源/文件，也可以在程序中创建，实际上的功能相当于图片的存储空间；

2.Canvas，紧密与Bitmap联系，把Bitmap比喻内容的话，那么Canvas就是提供了众多方法操作Bitamp的平台；

3.Paint，与Canvas紧密联系，是"画板"上的笔刷工具，也用于设置View控件上的样式；

4.Drawable，如果说前三者是看不见地在内存中画图，那么Drawable就是把前三者绘图结果表现出来的接口。Drawable多个子类，例如：位图(BitmapDrawable)、图形(ShapeDrawable)、图层(LayerDrawable)等。

本文主要讲解如何在ImageView画图，以及如何直接在Button(继承View的控件)上面绘制自定义图像。

直接把资源图片画出来

在ImageView上画图以及绘字

直接在控件背景上画图

main.xml的源码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="@+id/Button01" android:layout_width="fill_parent" android:layout_height="44px" android:text="显示资源图片"></Button>
<Button android:id="@+id/Button02" android:layout_width="fill_parent" android:layout_height="44px" android:text="显示并绘画资源图片"></Button>
<Button android:id="@+id/Button03" android:layout_height="44px" android:layout_width="fill_parent" android:text="在控件上绘图"></Button>
<ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</LinearLayout>

复制代码

程序的源码：

package com.testDraw;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class testDraw extends Activity {
ImageView iv;
Button btn1,btn2,btn3,btn4;
Resources r;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
iv=(ImageView)this.findViewById(R.id.ImageView01);
btn1=(Button)this.findViewById(R.id.Button01);
btn2=(Button)this.findViewById(R.id.Button02);
btn3=(Button)this.findViewById(R.id.Button03);
btn1.setOnClickListener(new ClickEvent());
btn2.setOnClickListener(new ClickEvent());
btn3.setOnClickListener(new ClickEvent());
r = this.getResources();
}
class ClickEvent implements View.OnClickListener {
public void onClick(View v) {
if(v==btn1)//显示资源图片
{//功能等效
//iv.setBackgroundResource(R.drawable.icon);//打开资源图片
Bitmap bmp=BitmapFactory.decodeResource(r, R.drawable.icon);//打开资源图片
iv.setImageBitmap(bmp);
}
else if(v==btn2)//显示并绘画资源图片
{
Bitmap bmp=BitmapFactory.decodeResource(r, R.drawable.icon);//只读,不能直接在bmp上画
Bitmap newb = Bitmap.createBitmap( 300, 300, Config.ARGB_8888 );
Canvas canvasTemp = new Canvas( newb );
canvasTemp.drawColor(Color.TRANSPARENT);
Paint p = new Paint();
String familyName ="宋体";
Typeface font = Typeface.create(familyName,Typeface.BOLD);
p.setColor(Color.RED);
p.setTypeface(font);
p.setTextSize(22);
canvasTemp.drawText("写字。。。",50,50,p);
canvasTemp.drawBitmap(bmp, 50, 50, p);//画图
iv.setImageBitmap(newb);
}
else if(v==btn3)//直接在Button上绘图
{
Bitmap newb = Bitmap.createBitmap( btn3.getWidth(), btn3.getHeight(), Config.ARGB_8888 );
Canvas canvasTemp = new Canvas( newb );
canvasTemp.drawColor(Color.WHITE);
Paint p = new Paint();
String familyName = "宋体";
Typeface font = Typeface.create(familyName, Typeface.BOLD);
p.setColor(Color.RED);
p.setTypeface(font);
p.setTextSize(20);
canvasTemp.drawText("写字。。。", 30, 30, p);
Drawable drawable = new BitmapDrawable(newb);
btn3.setBackgroundDrawable(drawable);
}
}
}
}

ImageView控件开发效果总结（边框效果，滤镜效果）
1 ImageView添加圆角边框  下面是示例效果图

实现过程说明：
Step  One  设置ImageView 带一定宽度的Padding，同时设置android:adjustViewBounds 为True
<imageview
                              android:background="@drawable/img_on"
                              android:id="@+id/imageViewt"
                              android:adjustViewBounds="true"
                              android:padding="2dp"
                              android:layout_width="fill_parent"
                              android:layout_height="wrap_content"
                              android:src="@drawable/icon" />
复制代码
Step Two 设置图片背景

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false">

<corners
   android:radius="5dp"
/>

<gradient
   android:startColor="#848484"
   android:centerColor="#848484"
   android:useLevel="false"
   android:type="linear"
   android:angle="90"
   android:endColor="#848484">


复制代码
2 设置ImageView 带有滤镜效果，下面例子是其中的变灰效果

实现过程说明：
使用设置图片对象的ColorFilter属性，把ColorMatrixColorFilter设置灰度通道，传递到ColorFilter属性中
注意两点：1 图片滤镜效果，只是在图层上面加了一层效果，不是对图片的实际修改
            2 如果对单个图片加滤镜效果后，其他地方使用到这个图片也会变成带滤镜效果。
下面是实际实现代码
public final float[] BT_SELECTED = new float[] {1,0,0,0,99,0,1,0,0,99,0,0,1,0,99,0,0,0,1,0};
   public final float[] BT_NOT_SELECTED = new float[]  {1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0};;
   public final static float[] BT_SELECTED1 = new float[] {
.338f, 0.339f, 0.332f, 0, 0,
.338f, 0.339f, 0.332f, 0, 0,
.338f, 0.339f, 0.332f, 0, 0,
, 0, 0, 1, 0
      };

@Override
public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      ImageView  ib2;
      ib1 = (ImageView) findViewById(R.id.imageViewt);
      ib2 = (ImageView) findViewById(R.id.imageView2);

      ib1.setOnTouchListener(new  ImageView.OnTouchListener()
      {
         @Override
         public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {

                  ib1.setImageResource(R.drawable.icon1);
                  ib1.getDrawable().setColorFilter(
                              new ColorMatrixColorFilter(BT_SELECTED));

            ib1.setImageDrawable(ib1.getDrawable());
            } else if (event.getAction() == MotionEvent.ACTION_UP) {
                  ib1.getDrawable().clearColorFilter();

                  ib1.getDrawable().setColorFilter(new ColorMatrixColorFilter(BT_NOT_SELECTED));
                  ib1.setImageResource(R.drawable.icon2);
            }
            return false;
         }
      });


}
复制代码

Android画图学习总结（三）——Drawable

[复制链接]

Daisy

该用户从未签到

电梯直达

楼主

发表于 2011-6-25 19:12:38 | 只看该作者 |只看大图回帖奖励

Android SDK提供了一个强大的类Drawable，Drawable这个抽象类到底代表了什么，如何使用？Drawable是个很抽象的概念，通过简单的例子程序来学习它，理解它。先看个简单的例子，使用Drawable的子类ShapeDrawable来画图，如下：
public class testView extends View {
private ShapeDrawable mDrawable;
public testView(Context context) {
super(context);
int x = 10;
int y = 10;
int width = 300;
int height = 50;
mDrawable = new ShapeDrawable(new OvalShape());
mDrawable.getPaint().setColor(0xff74AC23);
mDrawable.setBounds(x, y, x + width, y + height);
}

protected void onDraw(Canvas canvas)
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);//画白色背景
mDrawable.draw(canvas);
}
}
程序的运行结果，显示如下：

简要解析：

创建一个OvalShape（一个椭圆）；
使用刚创建的OvalShape构造一个ShapeDrawable对象mDrawable
设置mDrawable的颜色；
设置mDrawable的大小；
将mDrawable画在testView 的画布上；

这个简单的例子可以帮我们理解什么是Drawable，Drawable就是一个可画的对象，其可能是一张位图（BitmapDrawable），也可能是一个图形（ShapeDrawable），还有可能是一个图层（LayerDrawable），我们根据画图的需求，创建相应的可画对象，就可以将这个可画对象当作一块“画布（Canvas）”，在其上面操作可画对象，并最终将这种可画对象显示在画布上，有点类似于“内存画布“。

上面只是一个简单的使用Drawable的例子，完全没有体现出Drawable的强大功能。Android SDK中说明了Drawable主要的作用是：在XML中定义各种动画，然后把 XML当作Drawable资源来读取，通过Drawable显示动画。下面举个使用TransitionDrawable 的例子，创建一个Android工程，然后再这个工程的基础上修改，修改过程如下：
1、去掉layout/main.xml中的TextView，增加ImagView，如下：
<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:tint=”#55ff0000″
android:src=”@drawable/my_image”/>

2、创建一个XML文件，命名为expand_collapse.xml，内容如下：
<?xml version=”1.0″ encoding=”UTF-8″?>
<transition xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:drawable=”@drawable/image_expand”/>
<item android:drawable=”@drawable/image_collapse”/>
</transition>
需要3张png图片，存放到res\drawable目录下，3张图片分别命名为：my_image.png、image_expand.png、image_collapse.png。

3、修改Activity中的代码，内容如下：
LinearLayout mLinearLayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mLinearLayout = new LinearLayout(this);
ImageView i = new ImageView(this);
i.setAdjustViewBounds(true);
i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
mLinearLayout.addView(i);
setContentView(mLinearLayout);
Resources res = getResources();
TransitionDrawable transition =
(TransitionDrawable) res.getDrawable(R.drawable.expand_collapse);
i.setImageDrawable(transition);
transition.startTransition(10000);
}

4、如果修改的没有错误，运行程序，结果显示如下：
初始图片

过渡中的图片

最后的图片

屏幕上动画显示的是：从图片image_expand.png过渡到image_collapse.png，也就是我们在expand_collapse.xml中定义的一个transition动画。看完这个例子，你对Drawable的理解是否又深入些？这里提供这个程序的源代码，供大家下载，可以在这个例子的基础上去体会其他的Drawable，来加深对Drawable的理解。

总结说明

通过以上2个例子程序，相信对Drawable会有一定的认识了，在以后的篇幅中会介绍更多的例子，更加深入的学习和理解Drawable。具体还有哪些Drawable，大家到Android SDK去深入学习吧。