Android开发使用自定义View将圆角矩形绘制在Canvas上的方法

本文实例讲述了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法。分享给大家供大家参考,具体如下:

前几天,公司一个项目中,头像图片需要添加圆角,这样UI效果会更好看,于是写了一个小的demo进行圆角的定义,该处主要是使用BitmapShader进行了渲染(如果要将一张图片裁剪成椭圆或圆形显示在屏幕上,也可以使用BitmapShader来完成).

BitmapShader类完成渲染图片的基本步骤如下:

1、创建BitmapShader类的对象

 /**
   * Call this to create a new shader that will draw with a bitmap.
   *
   * @param bitmap      The bitmap to use inside the shader
   * @param tileX       The tiling mode for x to draw the bitmap in.
   * @param tileY       The tiling mode for y to draw the bitmap in.
   */
  public BitmapShader(Bitmap bitmap, TileMode tileX, TileMode tileY) {
......
}

其中,Shader.TitleMode类型有三种,CALMP、MIRROR、REPEAT

CALMP:使用边界颜色来填充剩余空间
MIRROR:使用镜像方式
REPEAT:使用重复方式

2、通过Paint的setShader(bitmapShafer)来设置画笔

3、使用已经setShader(bitmapShafer)的画笔来绘制图形

下面展示绘制圆角图片的demo

1、自定义RounderCornerImageView.java类

package com.example.test;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
public class RounderCornerImageView extends View {
  private Bitmap mImage;// source bitmap
  private Paint mBitmapPaint;//paint
  private RectF mBrounds;//rect
  private float mRadius=20.0f;//round
  public RounderCornerImageView(Context context) {
    this(context, null);
  }
  public RounderCornerImageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }
  public RounderCornerImageView(Context context, AttributeSet attrs,
      int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  private void init() {
    mBitmapPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    mBrounds=new RectF();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // TODO Auto-generated method stub
    int height,width;
    height=width=0;
    //obtain bitmap size
    int imageHeight,imageWidth;
    if (null!=mImage) {
      imageHeight=imageWidth=0;
    }else
    {
      imageHeight=mImage.getHeight();
      imageWidth=mImage.getWidth();
    }
    //obtain best measure data and set on View
    width=getMeasurement(widthMeasureSpec,imageWidth);
    height=getMeasurement(heightMeasureSpec, imageHeight);
    //set View last size
    setMeasuredDimension(width, height);
  }
  /**
   * measure width and height by specMode
   **/
  private int getMeasurement(int measureSpec, int contentSize) {
    int specSize=MeasureSpec.getSize(measureSpec);
    switch (MeasureSpec.getMode(measureSpec)) {
    case MeasureSpec.AT_MOST:
      return Math.min(specSize, contentSize);
    case MeasureSpec.UNSPECIFIED:
      return contentSize;
    case MeasureSpec.EXACTLY:
      return specSize;
    default:
      return 0;
    }//switch
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    if (w!=oldw || h!=oldh) {
      int imageWidth,imageHeight;
      if (null==mImage) {
        imageWidth=imageHeight=0;
      }else
      {
        imageWidth=mImage.getWidth();
        imageHeight=mImage.getHeight();
      }
      //center point
      int left=(w-imageWidth)/2;
      int top=(h-imageHeight)/2;
      mBrounds.set(left, top, left+imageWidth, top+imageHeight);
      if (null!=mBitmapPaint.getShader()) {
        Matrix m=new Matrix();
        m.setTranslate(left, top);
        mBitmapPaint.getShader().setLocalMatrix(m);
      }
    }
  }
  public void setImage(Bitmap bitmap) {
    if (mImage!=bitmap) {
      mImage=bitmap;
      if (null!=mImage) {
        BitmapShader shader=new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mBitmapPaint.setShader(shader);
      }else {
        mBitmapPaint.setShader(null);
      }
      requestLayout();//invalidated the layout of this view by onDraw()
    }
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (null!=mBitmapPaint) {
      //draw Round Rect
      canvas.drawRoundRect(mBrounds, mRadius, mRadius, mBitmapPaint);
    }
  }
}

2、显示圆角图片的RoundActivity.java类

package com.example.test;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
public class RoundActivity extends Activity{
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RounderCornerImageView view=new RounderCornerImageView(this);
    Bitmap souBitmap=BitmapFactory.decodeResource(getResources(), R.drawable.sun);
    view.setImage(souBitmap);
    setContentView(view);
  }
}

另外,附注下自定义View的一些基本步骤和必须实现的方法

1、继承view

2、重写自定义View的构造方法

3、如需要对view进行位置进行测量和重写布局,则需要重写onMeasure()onLayout()onDraw()方法

onMeasure():view本身大小多少,可以测量出来
onLayout():view在ViewGroup中的位置可以决定
onDraw():定义了如何绘制该view

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android控件用法总结》、《Android开发入门与进阶教程》、《Android视图View技巧总结》、《Android编程之activity操作技巧总结》、《Android数据库操作技巧总结》及《Android资源操作技巧汇总》

希望本文所述对大家Android程序设计有所帮助。

时间: 2017-10-24

Android使用自定义View绘制渐隐渐现动画

实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: 在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. 在onDraw中绘制线段. 变换LineE

Android自定义view绘制圆环占比动画

一.实现效果图 二.核心代码 1.自定义MyProgressView.java package com.czhappy.effectdemo.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas;

Android自定义View实现绘制虚线的方法详解

前言 说实话当第一次看到这个需求的时候,第一反应就是Canvas只有drawLine方法,并没有drawDashLine方法啊!这咋整啊,难道要我自己做个遍历不断的drawLine?不到1秒,我就放弃这个想法了,因为太恶心了.方法肯定是有的,只不过我不知道而已. 绘制方法 最简单的方法是利用ShapeDrawable,比如说你想用虚线要隔开两个控件,就可以在这两个控件中加个View,然后给它个虚线背景. 嗯,理论上就是这样子的,实现上也很简单. <!-- drawable 文件 --> <

Android使用Canvas绘制圆形进度条效果

前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B

Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

Android自定义View绘制随机生成图片验证码

本篇文章讲的是Android自定义View之随机生成图片验证码,开发中我们会经常需要随机生成图片验证码,但是这个是其次,主要还是想总结一些自定义View的开发过程以及一些需要注意的地方. 按照惯例先看看效果图: 一.先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 其中onMesure方法不一定要重写,但大部分情况下还是需要重写的 二.View 的几个构造函数 1.public CustomV

自定义滑动按钮为例图文剖析Android自定义View绘制

自定义View一直是横在Android开发者面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看,ViewGroup继承View. View的子类,多是功能型的控件,提供绘制的样式,比如imageView,TextView等,而ViewGroup的子类,多用于管理控件的大小,位置,如LinearLayout,RelativeLayout等,从下图可以看出 从实际应用中看,他们又是组合关系,我们在布局中,常常是一个ViewGroup嵌套多个ViewGro

Android自定义View系列之Path绘制仿支付宝支付成功动画

前言 使用支付宝付款时,我们可以看到成功或者失败都会有个动画提示,如果我们需要做这样的效果的话,当然,你可以让设计师给你做个GIF,但是我们知道图像比较耗内存的,我们自己可以用代码实现还是代码实现好点吧. 效果 实现方法 首先我们需要了解PathMeasure这个类,这个类我们可以理解为用来管理Path.我们主要看几个方法. PathMeasure(): 构造方法 ,实例化一个对象 PathMeasure(Path path,boolean isClosed):传入Path对象和是否闭合,pat

Android自定义View实现shape图形绘制

概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源,通过定义drawable中的shape资源能够绘制简单的图形效果,如矩形,椭圆形,线形和圆环等.后来我在项目中正好遇到这样一个需求,要在特定的位置上显示一条垂直的虚线.正当我胸有成竹的把上面的资源文件放入进去的时候,我才发现它并不能符合我的要求.使用shape画出的垂直虚线,其实就是将一条水平的线,旋转90度.但这样做的弊端就是,该View有效区域为旋转90度后与原来位置相重合的区域,还不能随意的改动,这样的效果根

Android自定义View绘制的方法及过程(二)

上一篇<Android 自定义View(一) Paint.Rect.Canvas介绍>讲了最基础的如何自定义一个View,以及View用到的一些工具类.下面讲下View绘制的方法及过程 public class MyView extends View { private String TAG = "--------MyView"; private int width, height; public MyView(Context context, AttributeSet a

Android自定义View之继承TextView绘制背景

本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

Android自定义View之绘制圆形头像功能

前言 做APP应用开发的时候,用户头像肯定是必不可少的,但是90%以上的需求头像都是圆形的.那么,如何通过自定义View的方式实现圆形头像呢,那么,本片博文会告诉你不仅仅是实现过程.一定会有意想不到的收获哦! 最终效果 国际惯例,我们先来看最终实现的效果图 自定义RoundImageView继承自ImageView public class RoundImageView extends ImageView { public RoundImageView(Context context) { su

Android自定义View绘制彩色圆弧

本文实例为大家分享了Android自定义View绘制彩色圆弧的具体代码,供大家参考,具体内容如下 效果如下: 自定义View代码如下: package com.example.yan; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.graphics.RectF; i

Android自定义View实现等级滑动条的实例

 Android自定义View实现等级滑动条的实例 实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候,换小图片为大图片.move的时候跟随手指移动. up的时候根据此时的X计算最近的集合中的点,然后自动吸附回去. 1,自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <de

Android自定义View实现照片裁剪框与照片裁剪功能

本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩