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風格,有利于提升用戶的使用感和滿意度。
可以理解的是,以上實施方式僅僅是為了說明本發明的原理而采用的示例性實施方式,然而本發明并不局限于此。對于本領域內的普通技術人員而言,在不脫離本發明的精神和實質的情況下,可以做出各種變型和改進,這些變型和改進也視為本發明的保護范圍。
總結
以上是生活随笔為你收集整理的android 画布裁剪,一种基于Android系统对UI控件进行轮廓剪裁及美化的方法与流程...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GIS基础软件及操作(二)
- 下一篇: flutter获取Android照片地址