android 画布裁剪,一种基于Android系统对UI控件进行轮廓剪裁及美化的方法与流程...

本发明涉及Android应用的技术领域，特别涉及一种基于Android系统对UI控件进行轮廓剪裁及美化的方法。

背景技术：

目前，随着智能电视的普及，Android应用层出不穷，而那些表现形式单一、传统的UI显示界面将不再满足人们日益挑剔的眼光。Android系统对原生的UI控件的展现方式大多是生硬的矩形，这种单一的展示风格，让用户审美疲劳。而目前比较广泛的轮廓裁剪方法，是做画布裁剪或者整体遮罩，前者对于曲线裁剪，会有无法消除的严重锯齿，而后者相对来说，不够通用而且会明显增加程序运行负担。

技术实现要素：

本发明的目的是克服上述背景技术中不足，提供一种基于Android系统对UI控件进行轮廓剪裁及美化的方法，能够在尽量少的影响UI运行效率的情况下，不改变原有界面刷新流程，用尽量少的代码和资源来实现控件轮廓剪裁效果美化，具有简单、高效的特点。

为了达到上述的技术效果，本发明采取以下技术方案：

一种基于Android系统对UI控件进行轮廓剪裁及美化的方法，包含以下步骤：

A.预设剪裁角度，绘制遮罩图片，并将所述遮罩图片集成到apk中，或运行UI控件时实时画一个Bitmap对象作为遮罩图片，且将该遮罩图片定义为全局对象；

B.将所述遮罩图片放置于UI控件上需剪裁的位置，根据其他需剪裁的位置或及剪裁形状，重绘新的遮罩图片或平移、旋转所述遮罩图片使其成为新的遮罩图片，并将新的遮罩图片置于UI控件上需剪裁的对应位置；

C.在UI控件上需剪裁的位置均放置好遮罩图片后，对UI控件进行轮廓剪裁，重合部分进行下层图片显示，并忽略遮罩图片，进行图像重绘。

进一步地，所述步骤B具体包含：

B1.在UI控件的控件构造函数中，更改控件的默认参数，让系统渲染流程回调onDraw，其中，系统流程回调onDraw，onDraw中会自动回调dispatchDraw方法；

具体为：在控件构造函数中，更改控件的默认参数：

setWillNotDraw(false)；//对于自定义控件，让系统渲染流程必然回调onDraw；

setLayerType(View.LAYER_TYPE_HARDWARE,null)；//对于非特定画布操作的控件，可以用这个代替，使用硬件加速，同时能解决渲染前的默认黑底和渲染时的闪烁问题；

其中，系统流程回调onDraw，onDraw中会自动回调dispatchDraw方法；

B2.重写dispatchDraw方法，在dispatchDraw方法中，获取到遮罩图片并将遮罩图片放置于对应的UI控件上需剪裁的位置。

进一步地，还包含步骤D：

D.在控件构造函数中添加：paint.setAntiAlias(true),控件剪裁后，消除边缘锯齿，图像边缘清晰。

本发明与现有技术相比，具有以下的有益效果：

本发明的一种基于Android系统对UI控件进行轮廓剪裁及美化的方法，能够在尽量少的影响UI运行效率的情况下，不改变原有界面刷新流程，用尽量少的代码和资源来实现控件轮廓剪裁效果美化，具有简单、高效的特点；

且通过该方法对UI控件进行轮廓剪裁效果美化，对应用内存占用和运行效率没有明显的影响，控件布局整体一次成型，不影响原有代码框架和实现方式，且可实现任意类型自定义控件任意形状的轮廓剪裁，让Android应用的UI界面展示不再单一，使用户能体验多元化的UI风格，带来视觉上的一致享受。

附图说明

图1是使用本发明的一种基于Android系统对UI控件进行轮廓剪裁及美化的方法进行UI控件轮廓剪裁的示意图。

具体实施方式

下面结合本发明的实施例对本发明作进一步的阐述和说明。

实施例：

本发明的一种基于Android系统对UI控件进行轮廓剪裁及美化的方法可用于对UI控件进行轮廓剪裁，可以是任意类型的UI控件进行任意形状的轮廓剪裁，达到UI效果美化的作用。本实施例中以直角矩形ImageView剪裁为圆角矩形ImageView为例，对本发明的技术方案进行说明。

Android的UI控件默认都是矩形的，因此本实施例将以矩形图片剪裁为圆角矩形为例，对本发明的整个过程进行说明，其中，白色的矩形图片为原始图片，黑色的圆角图片为遮罩图片。

首先介绍剪裁圆角矩形的实现原理：为保证实现的效果质量(无锯齿)，我们利用Android系统的图层混合遮罩绘制机制，并为使资源效果尽量小，我们采用局部小范围遮罩，一次绘制多处的方法，实现圆角矩形的剪裁。而对于任意自定义控件，我们只需要在其每次刷新时，同时绘制一遍遮罩，即可达到永久的剪裁效果。

UI控件默认都是矩形的，裁剪成圆角时，依据预设的圆角弧度，仅重绘四个角的正方形区域即可。本实施例中，选用制作一张非常小的圆角遮罩图片(圆弧半径为边长的正方形，内绘一个四分之一圆，圆内有色彩填充，圆外像素全透明)，然后将在程序初始化时加载为全局对象，以减小内存占用，并在需要做圆角裁剪的控件中，覆写渲染回调函数，在其中将圆角小遮罩图片绘制到控件画布的四个角上，就完成了此控件的圆角剪裁。

如图1所示，本实施例的基于Android系统对UI控件进行轮廓剪裁及美化的方法，其具体包含以下步骤：

第一步：将左上角的遮罩图片集成到apk中，或运行时实时画一个Bitmap对象作为遮罩图片，且将该遮罩图片定义为全局对象。

第二步：在控件构造函数中，更改控件的默认参数：

setWillNotDraw(false)；//对于自定义控件，让系统渲染流程必然回调onDraw；

setLayerType(View.LAYER_TYPE_HARDWARE,null)；//对于非特定画布操作的控件，可以用这个代替，使用硬件加速，同时能解决渲染前的默认黑底和渲染时的闪烁问题；

其中，系统流程回调onDraw，onDraw中会自动回调dispatchDraw方法。

第三步：重写dispatchDraw方法，在dispatchDraw方法中，获取到遮罩图片；

首先，将左上角的遮罩图片放到矩形的左上角位置上：具体在控件构造函数中做如下设置：

matrix.reset()；

canvas.drawBitmap(mask,matrix,paint)；

然后，将该遮罩图片顺时针旋转90°后放到矩形右上角位置上，具体在控件构造函数中做如下设置：

matrix.reset()；

matrix.postRotate(90)；

matrix.postTranslate(canvas.getWidth(),0)；

canvas.drawBitmap(mask,matrix,paint)；

然后，将该遮罩图片顺时针旋转180°后，放到矩形右下角位置上，具体在控件构造函数中做如下设置：

matrix.reset()；

matrix.postRotate(180)；

matrix.postTranslate(canvas.getWidth(),canvas.getHeight())；

canvas.drawBitmap(mask,matrix,paint)；

最后，将该遮罩图片顺时针旋转270°后，放到矩形左下角位置上，具体在控件构造函数中做如下设置：

matrix.reset()；

matrix.postRotate(270)；

matrix.postTranslate(0,canvas.getHeight())；

canvas.drawBitmap(mask,matrix,paint)；

其中，dispatchDraw(Canvas canvas)方法是Android系统在刷新渲染一个UI控件时，必被调用的一个方法。

Android中的Matrix是一个3*3的矩阵，Matrix对图像的处理有四种基本变换，其中，本实施例中用到的postRotate是旋转变化，postTranslate是平移变换。

Canvas是Android的一个对象，相当于一个画布(在在本实施例中是指矩形图片)，canvas.getWidth()与canvas.getHeight()的作用是获取当前画布的宽和高。将遮罩图片水平或垂直移动画布的宽度或高度，即可将遮罩图片放置到矩形的四个角上。

第四步，在控件构造函数中添加如下设置：

mDuffXfermode＝new PorterDuffXfermode(Mode.DST_IN)；

paint.setXfermode(mDuffXfermode)；

其中，Android中的Paint相当于一只画笔，Mode.DST_IN即：显示原始图片的与遮罩图片重合部分，在本实施例中即取下层图片，忽略遮罩图片。

第五步，进行效果美化，制作出需求的UI控件形状：

在控件构造函数中添加：paint.setAntiAlias(true)；

其中，paint.setAntiAlias(true)；使控件剪裁后，消除边缘锯齿，图像边缘清晰。

由上可知，本发明的基于Android系统对UI控件进行轮廓剪裁及美化的方法，可对任意类型的UI控件进行任意形状的轮廓剪裁，并达到UI效果美化的作用，其利用旋转、平移等手段对遮罩图片进行处理，并只进行一次渲染多处局部小区域，大大降低美化效果带来的内存增长及运行效率损失，使得Android应用的UI界面展示不再单一，使用户能体验多元化的UI风格，有利于提升用户的使用感和满意度。

可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。