×

Android中绘制圆角矩形图片及任意形状图片

Kalet Kalet 发表于2014-01-02 20:07:40 浏览285 评论0

抢沙发发表评论

圆角矩形图片在苹果的产品中很流行，相比于普通的矩形，很多人都喜欢圆角矩形的图片，因为它避开了直角的生硬，带来更好的用户体验，下面是几个设计的例子：

下面在Android中实现将普通的矩形图片绘制成圆角矩形。首先看最终效果：

代码清单：

  1. package com.example.phototest; 
  2.  
  3. import android.os.Bundle; 
  4. import android.app.Activity; 
  5. import android.graphics.Bitmap; 
  6. import android.graphics.BitmapFactory; 
  7. import android.graphics.Canvas; 
  8. import android.graphics.Color; 
  9. import android.graphics.Paint; 
  10. import android.graphics.Path; 
  11. import android.graphics.PorterDuffXfermode; 
  12. import android.graphics.PorterDuff; 
  13. import android.graphics.RectF; 
  14. import android.graphics.drawable.BitmapDrawable; 
  15. import android.graphics.drawable.Drawable; 
  16. import android.view.Menu; 
  17. import android.widget.ImageView; 
  18.  
  19. public class MainActivity extends Activity { 
  20.  
  21.     private ImageView myImageView; 
  22.     @Override 
  23.     public void onCreate(Bundle savedInstanceState) { 
  24.         super.onCreate(savedInstanceState); 
  25.         setContentView(R.layout.activity_main); 
  26.         myImageView=(ImageView)findViewById(R.id.imageView1); 
  27.         Bitmap photo = BitmapFactory.decodeResource(getResources(), R.drawable.photo1); 
  28.         myImageView.setImageBitmap(createFramedPhoto(500,400,photo,20)); 
  29.         //myImageView.setImageBitmap(createStarPhoto(500,400,photo));  
  30.     } 
  31.  
  32.     @Override 
  33.     public boolean onCreateOptionsMenu(Menu menu) { 
  34.         getMenuInflater().inflate(R.menu.activity_main, menu); 
  35.         return true; 
  36.     } 
  37.     private Bitmap createFramedPhoto(int x, int y, Bitmap image, float outerRadiusRat) { 
  38.         //根据源文件新建一个darwable对象  
  39.         Drawable imageDrawable = new BitmapDrawable(image); 
  40.  
  41.         // 新建一个新的输出图片  
  42.         Bitmap output = Bitmap.createBitmap(x, y, Bitmap.Config.ARGB_8888); 
  43.         Canvas canvas = new Canvas(output); 
  44.  
  45.         // 新建一个矩形  
  46.         RectF outerRect = new RectF(0, 0, x, y); 
  47.  
  48.         // 产生一个红色的圆角矩形  
  49.         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
  50.         paint.setColor(Color.RED); 
  51.         canvas.drawRoundRect(outerRect, outerRadiusRat, outerRadiusRat, paint); 
  52.  
  53.  
  54.         // 将源图片绘制到这个圆角矩形上  
  55.         //详解见http://lipeng88213.iteye.com/blog/1189452  
  56.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 
  57.         imageDrawable.setBounds(0, 0, x, y); 
  58.         canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG); 
  59.         imageDrawable.draw(canvas); 
  60.         canvas.restore(); 
  61.  
  62.         return output; 
  63.     } 
  64. } 

      常用控件说了不少，现在说说手机开发中也常用到的画图。要掌握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的源码：

 

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

 

 

程序的源码：

 

  1. package com.testDraw;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.res.Resources;  
  5. import android.graphics.Bitmap;  
  6. import android.graphics.Bitmap.Config;  
  7. import android.graphics.BitmapFactory;  
  8. import android.graphics.Canvas;  
  9. import android.graphics.Color;  
  10. import android.graphics.Paint;  
  11. import android.graphics.Typeface;  
  12. import android.graphics.drawable.BitmapDrawable;  
  13. import android.graphics.drawable.Drawable;  
  14. import android.os.Bundle;  
  15. import android.view.View;  
  16. import android.widget.Button;  
  17. import android.widget.ImageView;  
  18.   
  19. public class testDraw extends Activity {  
  20.       
  21.     ImageView iv;  
  22.     Button btn1,btn2,btn3,btn4;  
  23.     Resources r;  
  24.     @Override  
  25.     public void onCreate(Bundle savedInstanceState) {  
  26.         super.onCreate(savedInstanceState);  
  27.         setContentView(R.layout.main);  
  28.         iv=(ImageView)this.findViewById(R.id.ImageView01);  
  29.         btn1=(Button)this.findViewById(R.id.Button01);  
  30.         btn2=(Button)this.findViewById(R.id.Button02);  
  31.         btn3=(Button)this.findViewById(R.id.Button03);  
  32.   
  33.         btn1.setOnClickListener(new ClickEvent());  
  34.         btn2.setOnClickListener(new ClickEvent());  
  35.         btn3.setOnClickListener(new ClickEvent());  
  36.           
  37.         r = this.getResources();  
  38.   
  39.     
  40.     }  
  41.     class ClickEvent implements View.OnClickListener {  
  42.   
  43.         public void onClick(View v) {  
  44.             if(v==btn1)//显示资源图片  
  45.             {//功能等效  
  46.                 //iv.setBackgroundResource(R.drawable.icon);//打开资源图片  
  47.                 Bitmap bmp=BitmapFactory.decodeResource(r, R.drawable.icon);//打开资源图片  
  48.                 iv.setImageBitmap(bmp);  
  49.             }  
  50.             else if(v==btn2)//显示并绘画资源图片  
  51.             {  
  52.                 Bitmap bmp=BitmapFactory.decodeResource(r, R.drawable.icon);//只读,不能直接在bmp上画  
  53.                 Bitmap newb = Bitmap.createBitmap( 300, 300, Config.ARGB_8888 );  
  54.                   
  55.                 Canvas canvasTemp = new Canvas( newb );  
  56.                 canvasTemp.drawColor(Color.TRANSPARENT);  
  57.                   
  58.                 Paint p = new Paint();  
  59.                 String familyName ="宋体";  
  60.                 Typeface font = Typeface.create(familyName,Typeface.BOLD);  
  61.                 p.setColor(Color.RED);  
  62.                 p.setTypeface(font);  
  63.                 p.setTextSize(22);  
  64.                 canvasTemp.drawText("写字。。。",50,50,p);  
  65.                 canvasTemp.drawBitmap(bmp, 50, 50, p);//画图  
  66.                 iv.setImageBitmap(newb);  
  67.             }  
  68.             else if(v==btn3)//直接在Button上绘图  
  69.             {  
  70.                 Bitmap newb = Bitmap.createBitmap( btn3.getWidth(), btn3.getHeight(), Config.ARGB_8888 );  
  71.                 Canvas canvasTemp = new Canvas( newb );  
  72.                 canvasTemp.drawColor(Color.WHITE);  
  73.                 Paint p = new Paint();  
  74.                 String familyName = "宋体";  
  75.                 Typeface font = Typeface.create(familyName, Typeface.BOLD);  
  76.                 p.setColor(Color.RED);  
  77.                 p.setTypeface(font);  
  78.                 p.setTextSize(20);  
  79.                 canvasTemp.drawText("写字。。。", 30, 30, p);  
  80.                 Drawable drawable = new BitmapDrawable(newb);  
  81.                 btn3.setBackgroundDrawable(drawable);  
  82.             }  

 

群贤毕至

访客