CN107766038B - 一种基于Android系统对UI控件进行轮廓剪裁及美化的方法 - Google Patents

一种基于Android系统对UI控件进行轮廓剪裁及美化的方法 Download PDF

Info

Publication number
CN107766038B
CN107766038B CN201711002952.7A CN201711002952A CN107766038B CN 107766038 B CN107766038 B CN 107766038B CN 201711002952 A CN201711002952 A CN 201711002952A CN 107766038 B CN107766038 B CN 107766038B
Authority
CN
China
Prior art keywords
control
mask
mask picture
picture
cut
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201711002952.7A
Other languages
English (en)
Other versions
CN107766038A (zh
Inventor
李婷婷
张蛟
喻雅倩
刘姗姗
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Changhong Electric Co Ltd
Original Assignee
Sichuan Changhong Electric Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sichuan Changhong Electric Co Ltd filed Critical Sichuan Changhong Electric Co Ltd
Priority to CN201711002952.7A priority Critical patent/CN107766038B/zh
Publication of CN107766038A publication Critical patent/CN107766038A/zh
Application granted granted Critical
Publication of CN107766038B publication Critical patent/CN107766038B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种基于Android系统对UI控件进行轮廓剪裁及美化的方法，包含以下步骤：A.预设剪裁角度绘制遮罩图片，将所述遮罩图片集成到apk中，或运行UI控件时实时画一个Bitmap对象作为遮罩图片，将该遮罩图片定义为全局对象；B.将所述遮罩图片放置于UI控件上需剪裁的位置；C.在UI控件上需剪裁的位置均放置好遮罩图片后，对UI控件进行轮廓剪裁，重合部分进行下层图片显示，并忽略遮罩图片，进行图像重绘。本发明的一种基于Android系统对UI控件进行轮廓剪裁及美化的方法，能够在尽量少的影响UI运行效率的情况下，不改变原有界面刷新流程，用尽量少的代码和资源来实现控件轮廓剪裁效果美化，具有简单、高效的特点。

Description

一种基于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风格，有利于提升用户的使用感和满意度。
可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。

Claims (1)

1.一种基于Android系统对UI控件进行轮廓剪裁及美化的方法，其特征在于，包含以下步骤：
A.预设剪裁角度，绘制遮罩图片，并将所述遮罩图片集成到apk中，或运行UI控件时实时画一个Bitmap对象作为遮罩图片，且将该遮罩图片定义为全局对象；
B.将所述遮罩图片放置于UI控件上需剪裁的位置，同时，根据其他需剪裁的位置或及剪裁形状，重绘新的遮罩图片或平移、旋转所述遮罩图片使其成为新的遮罩图片，并将新的遮罩图片置于UI控件上需剪裁的其他位置；所述步骤B具体包含：
B1.在UI控件的控件构造函数中，更改控件的默认参数，让系统渲染流程回调onDraw，其中，系统流程回调onDraw，onDraw中会自动回调dispatchDraw方法；
B2.重写dispatchDraw方法，在dispatchDraw方法中，获取到遮罩图片并将遮罩图片放置于对应的UI控件上需剪裁的位置；
C.在UI控件上需剪裁的位置均放置好遮罩图片后，对UI控件进行轮廓剪裁，重合部分进行下层图片显示，并忽略遮罩图片，进行图像重绘；
D.在控件构造函数中添加：paint.setAntiAlias(true),控件剪裁后，消除边缘锯齿，图像边缘清晰。
CN201711002952.7A 2017-10-24 2017-10-24 一种基于Android系统对UI控件进行轮廓剪裁及美化的方法 Active CN107766038B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711002952.7A CN107766038B (zh) 2017-10-24 2017-10-24 一种基于Android系统对UI控件进行轮廓剪裁及美化的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711002952.7A CN107766038B (zh) 2017-10-24 2017-10-24 一种基于Android系统对UI控件进行轮廓剪裁及美化的方法

Publications (2)

Publication Number Publication Date
CN107766038A CN107766038A (zh) 2018-03-06
CN107766038B true CN107766038B (zh) 2021-06-29

Family

ID=61269994

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711002952.7A Active CN107766038B (zh) 2017-10-24 2017-10-24 一种基于Android系统对UI控件进行轮廓剪裁及美化的方法

Country Status (1)

Country Link
CN (1) CN107766038B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108647024A (zh) * 2018-04-16 2018-10-12 北京酷我科技有限公司 一种滑动开关按钮的实现方法
CN109800783A (zh) * 2018-12-11 2019-05-24 中新金桥数字科技(北京)有限公司 基于Android Pad实现超大图片叠加对比的方法及其系统
CN109688457B (zh) * 2018-12-28 2021-07-23 武汉斗鱼网络科技有限公司 一种视频防遮挡方法、装置、电子设备及介质
WO2020215207A1 (zh) * 2019-04-23 2020-10-29 华为技术有限公司 处理图层的方法和装置
CN113641437B (zh) * 2021-08-16 2023-06-16 深圳技德智能科技研究院有限公司 一种Linux兼容Android的应用界面旋转方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101944027A (zh) * 2010-09-26 2011-01-12 北京神州泰岳软件股份有限公司 一种用户界面生成方法
CN102663791A (zh) * 2012-03-20 2012-09-12 上海量明科技发展有限公司 一种针对截图区域进行剪辑的方法及客户端
CN103903292A (zh) * 2012-12-27 2014-07-02 北京新媒传信科技有限公司 一种实现头像编辑界面的方法和系统
CN104767939A (zh) * 2015-04-03 2015-07-08 广州市久邦数码科技有限公司 一种形状取景拍照的实现方法及其系统

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9792702B2 (en) * 2015-11-16 2017-10-17 Adobe Systems Incorporated Enhanced precision background shading for digitally published text

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101944027A (zh) * 2010-09-26 2011-01-12 北京神州泰岳软件股份有限公司 一种用户界面生成方法
CN102663791A (zh) * 2012-03-20 2012-09-12 上海量明科技发展有限公司 一种针对截图区域进行剪辑的方法及客户端
CN103903292A (zh) * 2012-12-27 2014-07-02 北京新媒传信科技有限公司 一种实现头像编辑界面的方法和系统
CN104767939A (zh) * 2015-04-03 2015-07-08 广州市久邦数码科技有限公司 一种形状取景拍照的实现方法及其系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
"RoundAngleFrameLayout";Y-bao;《https://github.com/Y-bao/RoundAngleFrameLayout/blob/master/app/src/main/java/com/ybao/rf/RoundAngleFrameLayout.java?from=singlemessage》;20160420;代码第52行，100-168行 *

Also Published As

Publication number Publication date
CN107766038A (zh) 2018-03-06

Similar Documents

Publication Publication Date Title
CN107766038B (zh) 一种基于Android系统对UI控件进行轮廓剪裁及美化的方法
US9916676B2 (en) 3D model rendering method and apparatus and terminal device
CN110163832B (zh) 人脸融合方法、装置和终端
JP2003271125A (ja) 画像表示装置、画像表示方法、及び画像表示プログラム
Eck Introduction to Computer Graphics
WO2023093291A1 (zh) 图像处理方法、装置、计算机设备和计算机程序产品
EP3254283B1 (en) User sliders for simplified adjustment of images
WO2018103418A1 (zh) 应用图标的生成方法和装置
CN110502205B (zh) 图片显示边缘处理方法、装置、电子设备和可读存储介质
WO2020001022A1 (zh) 图片展示方法、计算设备及计算机存储介质
CN106846454A (zh) 镜头光晕绘制方法及装置
CN111754607A (zh) 图片处理方法及装置、电子设备、计算机可读存储介质
WO2020078290A1 (zh) 圆角屏幕的显示方法、计算机设备以及存储介质
CN108519894B (zh) 一种音乐盒加载初始化的方法
CN112686939B (zh) 景深图像的渲染方法、装置、设备及计算机可读存储介质
CN109302629B (zh) 一种用于为图片切换画框的方法及显示终端
CN109242761B (zh) 一种图片显示方法及装置
CN115170709A (zh) 动态图像的编辑方法、装置和电子设备
CN107424136B (zh) 一种Mac下图片高斯模糊的处理方法
CN113763526B (zh) 一种头发高光渲染方法、装置、设备及存储介质
CN109859258B (zh) 界面处理方法及装置、电子设备
CN102737394A (zh) 一种绘制windows系统软件不规则皮肤的方法
WO2018040613A1 (zh) 一种终端界面的图标显示方法及装置
CN115131260A (zh) 图像处理方法、装置、设备、计算机可读存储介质及产品
CN106648623A (zh) 一种安卓系统中字符的显示方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant