本發(fā)明涉及Android應(yīng)用的技術(shù)領(lǐng)域，特別涉及一種基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法。

背景技術(shù)：

目前，隨著智能電視的普及，Android應(yīng)用層出不窮，而那些表現(xiàn)形式單一、傳統(tǒng)的UI顯示界面將不再滿足人們?nèi)找嫣籼薜难酃狻ndroid系統(tǒng)對原生的UI控件的展現(xiàn)方式大多是生硬的矩形，這種單一的展示風(fēng)格，讓用戶審美疲勞。而目前比較廣泛的輪廓裁剪方法，是做畫布裁剪或者整體遮罩，前者對于曲線裁剪，會有無法消除的嚴(yán)重鋸齒，而后者相對來說，不夠通用而且會明顯增加程序運(yùn)行負(fù)擔(dān)。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的是克服上述背景技術(shù)中不足，提供一種基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法，能夠在盡量少的影響UI運(yùn)行效率的情況下，不改變原有界面刷新流程，用盡量少的代碼和資源來實(shí)現(xiàn)控件輪廓剪裁效果美化，具有簡單、高效的特點(diǎn)。

為了達(dá)到上述的技術(shù)效果，本發(fā)明采取以下技術(shù)方案：

一種基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法，包含以下步驟：

A.預(yù)設(shè)剪裁角度，繪制遮罩圖片，并將所述遮罩圖片集成到apk中，或運(yùn)行UI控件時實(shí)時畫一個Bitmap對象作為遮罩圖片，且將該遮罩圖片定義為全局對象；

B.將所述遮罩圖片放置于UI控件上需剪裁的位置，根據(jù)其他需剪裁的位置或及剪裁形狀，重繪新的遮罩圖片或平移、旋轉(zhuǎn)所述遮罩圖片使其成為新的遮罩圖片，并將新的遮罩圖片置于UI控件上需剪裁的對應(yīng)位置；

C.在UI控件上需剪裁的位置均放置好遮罩圖片后，對UI控件進(jìn)行輪廓剪裁，重合部分進(jìn)行下層圖片顯示，并忽略遮罩圖片，進(jìn)行圖像重繪。

進(jìn)一步地，所述步驟B具體包含：

B1.在UI控件的控件構(gòu)造函數(shù)中，更改控件的默認(rèn)參數(shù)，讓系統(tǒng)渲染流程回調(diào)onDraw，其中，系統(tǒng)流程回調(diào)onDraw，onDraw中會自動回調(diào)dispatchDraw方法；

具體為：在控件構(gòu)造函數(shù)中，更改控件的默認(rèn)參數(shù)：

setWillNotDraw(false)；//對于自定義控件，讓系統(tǒng)渲染流程必然回調(diào)onDraw；

setLayerType(View.LAYER_TYPE_HARDWARE,null)；//對于非特定畫布操作的控件，可以用這個代替，使用硬件加速，同時能解決渲染前的默認(rèn)黑底和渲染時的閃爍問題；

其中，系統(tǒng)流程回調(diào)onDraw，onDraw中會自動回調(diào)dispatchDraw方法；

B2.重寫dispatchDraw方法，在dispatchDraw方法中，獲取到遮罩圖片并將遮罩圖片放置于對應(yīng)的UI控件上需剪裁的位置。

進(jìn)一步地，還包含步驟D：

D.在控件構(gòu)造函數(shù)中添加：paint.setAntiAlias(true),控件剪裁后，消除邊緣鋸齒，圖像邊緣清晰。

本發(fā)明與現(xiàn)有技術(shù)相比，具有以下的有益效果：

本發(fā)明的一種基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法，能夠在盡量少的影響UI運(yùn)行效率的情況下，不改變原有界面刷新流程，用盡量少的代碼和資源來實(shí)現(xiàn)控件輪廓剪裁效果美化，具有簡單、高效的特點(diǎn)；

且通過該方法對UI控件進(jìn)行輪廓剪裁效果美化，對應(yīng)用內(nèi)存占用和運(yùn)行效率沒有明顯的影響，控件布局整體一次成型，不影響原有代碼框架和實(shí)現(xiàn)方式，且可實(shí)現(xiàn)任意類型自定義控件任意形狀的輪廓剪裁，讓Android應(yīng)用的UI界面展示不再單一，使用戶能體驗(yàn)多元化的UI風(fēng)格，帶來視覺上的一致享受。

附圖說明

圖1是使用本發(fā)明的一種基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法進(jìn)行UI控件輪廓剪裁的示意圖。

具體實(shí)施方式

下面結(jié)合本發(fā)明的實(shí)施例對本發(fā)明作進(jìn)一步的闡述和說明。

實(shí)施例：

本發(fā)明的一種基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法可用于對UI控件進(jìn)行輪廓剪裁，可以是任意類型的UI控件進(jìn)行任意形狀的輪廓剪裁，達(dá)到UI效果美化的作用。本實(shí)施例中以直角矩形ImageView剪裁為圓角矩形ImageView為例，對本發(fā)明的技術(shù)方案進(jìn)行說明。

Android的UI控件默認(rèn)都是矩形的，因此本實(shí)施例將以矩形圖片剪裁為圓角矩形為例，對本發(fā)明的整個過程進(jìn)行說明，其中，白色的矩形圖片為原始圖片，黑色的圓角圖片為遮罩圖片。

首先介紹剪裁圓角矩形的實(shí)現(xiàn)原理：為保證實(shí)現(xiàn)的效果質(zhì)量(無鋸齒)，我們利用Android系統(tǒng)的圖層混合遮罩繪制機(jī)制，并為使資源效果盡量小，我們采用局部小范圍遮罩，一次繪制多處的方法，實(shí)現(xiàn)圓角矩形的剪裁。而對于任意自定義控件，我們只需要在其每次刷新時，同時繪制一遍遮罩，即可達(dá)到永久的剪裁效果。

UI控件默認(rèn)都是矩形的，裁剪成圓角時，依據(jù)預(yù)設(shè)的圓角弧度，僅重繪四個角的正方形區(qū)域即可。本實(shí)施例中，選用制作一張非常小的圓角遮罩圖片(圓弧半徑為邊長的正方形，內(nèi)繪一個四分之一圓，圓內(nèi)有色彩填充，圓外像素全透明)，然后將在程序初始化時加載為全局對象，以減小內(nèi)存占用，并在需要做圓角裁剪的控件中，覆寫渲染回調(diào)函數(shù)，在其中將圓角小遮罩圖片繪制到控件畫布的四個角上，就完成了此控件的圓角剪裁。

如圖1所示，本實(shí)施例的基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法，其具體包含以下步驟：

第一步：將左上角的遮罩圖片集成到apk中，或運(yùn)行時實(shí)時畫一個Bitmap對象作為遮罩圖片，且將該遮罩圖片定義為全局對象。

第二步：在控件構(gòu)造函數(shù)中，更改控件的默認(rèn)參數(shù)：

setWillNotDraw(false)；//對于自定義控件，讓系統(tǒng)渲染流程必然回調(diào)onDraw；

setLayerType(View.LAYER_TYPE_HARDWARE,null)；//對于非特定畫布操作的控件，可以用這個代替，使用硬件加速，同時能解決渲染前的默認(rèn)黑底和渲染時的閃爍問題；

其中，系統(tǒng)流程回調(diào)onDraw，onDraw中會自動回調(diào)dispatchDraw方法。

第三步：重寫dispatchDraw方法，在dispatchDraw方法中，獲取到遮罩圖片；

首先，將左上角的遮罩圖片放到矩形的左上角位置上：具體在控件構(gòu)造函數(shù)中做如下設(shè)置：

matrix.reset()；

canvas.drawBitmap(mask,matrix,paint)；

然后，將該遮罩圖片順時針旋轉(zhuǎn)90°后放到矩形右上角位置上，具體在控件構(gòu)造函數(shù)中做如下設(shè)置：

matrix.reset()；

matrix.postRotate(90)；

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

canvas.drawBitmap(mask,matrix,paint)；

然后，將該遮罩圖片順時針旋轉(zhuǎn)180°后，放到矩形右下角位置上，具體在控件構(gòu)造函數(shù)中做如下設(shè)置：

matrix.reset()；

matrix.postRotate(180)；

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

canvas.drawBitmap(mask,matrix,paint)；

最后，將該遮罩圖片順時針旋轉(zhuǎn)270°后，放到矩形左下角位置上，具體在控件構(gòu)造函數(shù)中做如下設(shè)置：

matrix.reset()；

matrix.postRotate(270)；

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

canvas.drawBitmap(mask,matrix,paint)；

其中，dispatchDraw(Canvas canvas)方法是Android系統(tǒng)在刷新渲染一個UI控件時，必被調(diào)用的一個方法。

Android中的Matrix是一個3*3的矩陣，Matrix對圖像的處理有四種基本變換，其中，本實(shí)施例中用到的postRotate是旋轉(zhuǎn)變化，postTranslate是平移變換。

Canvas是Android的一個對象，相當(dāng)于一個畫布(在在本實(shí)施例中是指矩形圖片)，canvas.getWidth()與canvas.getHeight()的作用是獲取當(dāng)前畫布的寬和高。將遮罩圖片水平或垂直移動畫布的寬度或高度，即可將遮罩圖片放置到矩形的四個角上。

第四步，在控件構(gòu)造函數(shù)中添加如下設(shè)置：

mDuffXfermode＝new PorterDuffXfermode(Mode.DST_IN)；

paint.setXfermode(mDuffXfermode)；

其中，Android中的Paint相當(dāng)于一只畫筆，Mode.DST_IN即：顯示原始圖片的與遮罩圖片重合部分，在本實(shí)施例中即取下層圖片，忽略遮罩圖片。

第五步，進(jìn)行效果美化，制作出需求的UI控件形狀：

在控件構(gòu)造函數(shù)中添加：paint.setAntiAlias(true)；

其中，paint.setAntiAlias(true)；使控件剪裁后，消除邊緣鋸齒，圖像邊緣清晰。

由上可知，本發(fā)明的基于Android系統(tǒng)對UI控件進(jìn)行輪廓剪裁及美化的方法，可對任意類型的UI控件進(jìn)行任意形狀的輪廓剪裁，并達(dá)到UI效果美化的作用，其利用旋轉(zhuǎn)、平移等手段對遮罩圖片進(jìn)行處理，并只進(jìn)行一次渲染多處局部小區(qū)域，大大降低美化效果帶來的內(nèi)存增長及運(yùn)行效率損失，使得Android應(yīng)用的UI界面展示不再單一，使用戶能體驗(yàn)多元化的UI風(fēng)格，有利于提升用戶的使用感和滿意度。

可以理解的是，以上實(shí)施方式僅僅是為了說明本發(fā)明的原理而采用的示例性實(shí)施方式，然而本發(fā)明并不局限于此。對于本領(lǐng)域內(nèi)的普通技術(shù)人員而言，在不脫離本發(fā)明的精神和實(shí)質(zhì)的情況下，可以做出各種變型和改進(jìn)，這些變型和改進(jìn)也視為本發(fā)明的保護(hù)范圍。

總結(jié)

以上是生活随笔為你收集整理的android 画布裁剪,一种基于Android系统对UI控件进行轮廓剪裁及美化的方法与流程...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。