Android利用Xfermode剪裁圓角
通常的圖片圓角一般是對單獨的圖片進行切圓角操作,但是像下圖的效果就沒那么合適了,雖然對單張圖片切圓角也能實現(xiàn),但更為繁瑣、不簡潔,因為數(shù)據(jù)內(nèi)容是動態(tài)的,要根據(jù)數(shù)據(jù)源分很多種情況判斷哪張圖片該切哪個角。
所以,我在想能不能就在外層容器的四個角切圓角而不用管內(nèi)部圖片的圓角情況呢?答案顯然是能!主要思路就是自定義一個layout,在dispatchDraw的時候?qū)?shù)據(jù)圖片的canvas與圓角bitmap混合,設置Xfermode為PorterDuff.Mode.DST_IN使交集部分展示即可達到圖示的效果

關鍵代碼(根據(jù)后臺數(shù)據(jù)生成里面的每個item相關代碼沒有貼,根據(jù)業(yè)務場景改變即可):
public class HotCityView extends LinearLayout {
? ? private LinearLayout ll_item_container1, ll_item_container2;
? ? private int itemH, itemSpace;
? ? private int padding;
? ? private Paint clipPaint;
? ? private RectF clipRect;
? ? private Bitmap maskBitmap;
? ? private int cornerSize;
? ? public HotCityView(@NonNull Context context) {
? ? ? ? this(context, null);
? ? }
? ? public HotCityView(@NonNull Context context, @Nullable AttributeSet attrs) {
? ? ? ? this(context, attrs, 0);
? ? }
? ? public HotCityView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {
? ? ? ? super(context, attrs, defStyle);
? ? ? ? setOrientation(VERTICAL);
? ? ? ? inflate(context, R.layout.m_layout_hot_city, this);
? ? ? ? padding = (int) getResources().getDimension(R.dimen.list_lr_margin1);
? ? ? ? setPadding(padding, 0, padding, 0);
? ? ? ? itemH = PixelUtil.dp2px(109);
? ? ? ? itemSpace = (int) getResources().getDimension(R.dimen.hot_item_space);
? ? ? ? cornerSize = PixelUtil.dp2px(8);
? ? ? ? ll_item_container1 = findViewById(R.id.m_hot_city_item_container1);
? ? ? ? ll_item_container2 = findViewById(R.id.m_hot_city_item_container2);
? ? ? ? clipPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? clipPaint.setStyle(Paint.Style.FILL);
? ? }
? ? @Override
? ? protected void dispatchDraw(Canvas canvas) {
? ? ? ? if (clipRect == null || getMeasuredWidth() == 0) {
? ? ? ? ? ? clipRect = new RectF(padding, 0, getMeasuredWidth() - padding, getMeasuredHeight());
? ? ? ? ? ? maskBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_4444);
? ? ? ? ? ? Canvas c = new Canvas(maskBitmap);
? ? ? ? ? ? //在蒙版上畫需要覆蓋的圖形
? ? ? ? ? ? c.drawRoundRect(clipRect, cornerSize, cornerSize, clipPaint);
? ? ? ? }
? ? ? ? //保存還沒有繪制之前的圖層
? ? ? ? int layerId = canvas.saveLayer(clipRect, clipPaint, Canvas.ALL_SAVE_FLAG);
? ? ? ? //繪制底部圖層
? ? ? ? super.dispatchDraw(canvas);
? ? ? ? //設置混合模式,實現(xiàn)view的四個圓角
? ? ? ? clipPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
? ? ? ? canvas.drawBitmap(maskBitmap, 0, 0, clipPaint);
? ? ? ? clipPaint.setXfermode(null);
? ? ? ? //恢復之前的圖層,要不然背景是黑色的
? ? ? ? canvas.restoreToCount(layerId);
? ? }
? ? //這種方式也可以實現(xiàn)裁剪效果,但是需要5.0以上
? ? private void clipRoundView() {
? ? ? ? if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
? ? ? ? ? ? ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
? ? ? ? ? ? ? ? @Override
? ? ? ? ? ? ? ? public void getOutline(View view, Outline outline) {
? ? ? ? ? ? ? ? ? ? //修改outline為特定形狀
? ? ? ? ? ? ? ? ? ? outline.setRoundRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), cornerSize);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? //重新設置形狀
? ? ? ? ? ? setOutlineProvider(viewOutlineProvider);
? ? ? ? ? ? //添加背景或者是ImageView的時候失效,添加如下設置
? ? ? ? ? ? setClipToOutline(true);
? ? ? ? }
? ? }
}附各種Xfermode的效果(這張圖太經(jīng)典了,按照命名規(guī)則其實很容易理解,無需記住,到用的時候查閱即可):

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- android 實現(xiàn)圓角圖片解決方案
- Android中TextView顯示圓圈背景或設置圓角的方法
- Android關于Glide的使用(高斯模糊、加載監(jiān)聽、圓角圖片)
- Android圖片特效:黑白特效、圓角效果、高斯模糊
- Android開發(fā)使用自定義View將圓角矩形繪制在Canvas上的方法
- Android中實現(xiàn)EditText圓角的方法
- Android中Glide加載圓形圖片和圓角圖片實例代碼
- android 設置圓角圖片實現(xiàn)代碼
- Android自定義控件之圓形、圓角ImageView
- Android實現(xiàn)圓角矩形和圓形ImageView的方式
相關文章
Android監(jiān)聽滑動控件實現(xiàn)狀態(tài)欄顏色切換
這篇文章給大家分享一個平時在滑動頁面經(jīng)常遇到的效果:滑動過程動態(tài)修改狀態(tài)欄顏色,文中有詳細的示例代碼,對我們的學習或工作有一定的幫助,感興趣的小伙伴自己動手試試吧2023-08-08
Android自定義多節(jié)點進度條顯示的實現(xiàn)代碼(附源碼)
這篇文章主要介紹了Android自定義多節(jié)點進度條顯示的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03
Android 如何使用SQLite保存數(shù)據(jù)
對于重復數(shù)據(jù)或結(jié)構(gòu)化數(shù)據(jù)(例如聯(lián)系信息),將數(shù)據(jù)保存到數(shù)據(jù)庫是理想選擇,SQL 數(shù)據(jù)庫的主要原則之一是架構(gòu),即數(shù)據(jù)庫組織方式的正式聲明,本篇文章介紹在 Android 上使用 SQLite 數(shù)據(jù)庫,感興趣的朋友一起看看吧2024-03-03
Android通過ViewModel保存數(shù)據(jù)實現(xiàn)多頁面的數(shù)據(jù)共享功能
這篇文章主要介紹了Android通過ViewModel保存數(shù)據(jù)實現(xiàn)多頁面的數(shù)據(jù)共享功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
Flutter之Timer實現(xiàn)短信驗證碼獲取60s倒計時功能的代碼
這篇文章主要介紹了Flutter之Timer實現(xiàn)短信驗證碼獲取60s倒計時功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07

