Android自定義view實(shí)現(xiàn)圓形、圓角和橢圓圖片(BitmapShader圖形渲染)
一、前言
Android實(shí)現(xiàn)圓角矩形,圓形或者橢圓等圖形,一般主要是個(gè)自定義View
加上使用Xfermode
實(shí)現(xiàn)的。實(shí)現(xiàn)圓角圖片的方法其實(shí)不少,常見(jiàn)的就是利用Xfermode
,Shader
。本文直接繼承ImageView
,使用BitmapShader
方法來(lái)實(shí)現(xiàn)圓形、圓角和橢圓的繪制,等大家看我本文的方法后,其他的類似形狀也就都能舉一反三來(lái)來(lái)畫(huà)出來(lái)了。
二、效果圖:
三、BitmapShader簡(jiǎn)介
BitmapShader
是Shader
的子類,可以通過(guò)Paint.setShader(Shader shader)
進(jìn)行設(shè)置、
我們這里只關(guān)注BitmapShader
,構(gòu)造方法:
mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
參數(shù)1:bitmap
參數(shù)2,參數(shù)3:TileMode;
TileMode的取值有三種:
CLAMP 拉伸
REPEAT 重復(fù)
MIRROR 鏡像
如果大家給電腦屏幕設(shè)置屏保的時(shí)候,如果圖片太小,可以選擇重復(fù)、拉伸、鏡像;
重復(fù):就是橫向、縱向不斷重復(fù)這個(gè)bitmap
鏡像:橫向不斷翻轉(zhuǎn)重復(fù),縱向不斷翻轉(zhuǎn)重復(fù);
拉伸:這個(gè)和電腦屏保的模式應(yīng)該有些不同,這個(gè)拉伸的是圖片最后的那一個(gè)像素;橫向的最后一個(gè)橫行像素,不斷的重復(fù),縱項(xiàng)的那一列像素,不斷的重復(fù);
public BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY)
調(diào)用這個(gè)方法來(lái)產(chǎn)生一個(gè)畫(huà)有一個(gè)位圖的渲染器(Shader)。
bitmap 在渲染器內(nèi)使用的位圖
tileX The tiling mode for x to draw the bitmap in. 在位圖上X方向花磚模式
tileY The tiling mode for y to draw the bitmap in. 在位圖上Y方向花磚模式
TileMode:(一共有三種)
CLAMP :如果渲染器超出原始邊界范圍,會(huì)復(fù)制范圍內(nèi)邊緣染色。
REPEAT :橫向和縱向的重復(fù)渲染器圖片,平鋪。
MIRROR :橫向和縱向的重復(fù)渲染器圖片,這個(gè)和REPEAT 重復(fù)方式不一樣,他是以鏡像方式平鋪。
四、自定義圓形、圓角和橢圓的圖片View的實(shí)現(xiàn)
1. 測(cè)量View的大小
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 如果是繪制圓形,則強(qiáng)制寬高大小一致 if (mType == TYPE_CIRCLE) { mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight()); mRadius = mWidth / 2; setMeasuredDimension(mWidth, mWidth); } }
2、設(shè)置BitmapShader和畫(huà)筆Paint
/** * 設(shè)置BitmapShader */ private void setBitmapShader() { Drawable drawable = getDrawable(); if (null == drawable) { return; } Bitmap bitmap = drawableToBitmap(drawable); // 將bitmap作為著色器來(lái)創(chuàng)建一個(gè)BitmapShader mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP); float scale = 1.0f; if (mType == TYPE_CIRCLE) { // 拿到bitmap寬或高的小值 int bSize = Math.min(bitmap.getWidth(), bitmap.getHeight()); scale = mWidth * 1.0f / bSize; } else if (mType == TYPE_ROUND || mType == TYPE_OVAL) { // 如果圖片的寬或者高與view的寬高不匹配,計(jì)算出需要縮放的比例;縮放后的圖片的寬高,一定要大于我們view的寬高;所以我們這里取大值; scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight()); } // shader的變換矩陣,我們這里主要用于放大或者縮小 mMatrix.setScale(scale, scale); // 設(shè)置變換矩陣 mBitmapShader.setLocalMatrix(mMatrix); mPaint.setShader(mBitmapShader); }
3.最后就是繪制出來(lái)圓角、圓形和橢圓的圖片,肯定在onDraw
里面啦,根本原理就是使用了上面mBitmapShader
渲染的畫(huà)筆來(lái)繪制
@Override protected void onDraw(Canvas canvas) { if (null == getDrawable()) { return; } setBitmapShader(); if (mType == TYPE_CIRCLE) { canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); } else if (mType == TYPE_ROUND) { mPaint.setColor(Color.RED); canvas.drawRoundRect(mRect, mRoundRadius, mRoundRadius, mPaint); }else if(mType == TYPE_OVAL){ canvas.drawOval(mRect, mPaint); } }
五、視圖布局實(shí)現(xiàn)
這個(gè)很簡(jiǎn)單,就是3個(gè)自定義的view
:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:layout_marginTop="5dp" android:layout_marginBottom="25dp" android:orientation="vertical" > <com.czm.viewdrawtest.XCRoundAndOvalImageView android:id="@+id/cicleImageView" android:layout_width="200dp" android:layout_height="200dp" android:src="@drawable/img1" /> <com.czm.viewdrawtest.XCRoundAndOvalImageView android:id="@+id/roundRectImageView" android:layout_width="200dp" android:layout_height="240dp" android:layout_marginTop="5dp" android:src="@drawable/img2" /> <com.czm.viewdrawtest.XCRoundAndOvalImageView android:id="@+id/ovalImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:src="@drawable/img3" /> </LinearLayout> </ScrollView>
六、使用和測(cè)試自定義View
上面直接繪制的自定義View
寫(xiě)完了,下面就是使用這個(gè)View
了,使用方法和普通的ImageView
一樣,當(dāng)作普通控件使用即可。
package com.czm.viewdrawtest; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; /** * 使用自定義ImageView * @author caizhiming * */ public class MainActivity extends Activity { private XCRoundAndOvalImageView circleImageView;//圓形圖片 private XCRoundAndOvalImageView roundRectImageView;//圓角矩形圖片 private XCRoundAndOvalImageView ovalImageView;//橢圓圖片 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //設(shè)置無(wú)標(biāo)題 requestWindowFeature(Window.FEATURE_NO_TITLE); //設(shè)置全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); initViews(); } /** * 初始化Views */ private void initViews(){ circleImageView = (XCRoundAndOvalImageView)findViewById(R.id.cicleImageView); roundRectImageView = (XCRoundAndOvalImageView)findViewById(R.id.roundRectImageView); ovalImageView = (XCRoundAndOvalImageView)findViewById(R.id.ovalImageView); roundRectImageView.setType(XCRoundAndOvalImageView.TYPE_ROUND); roundRectImageView.setRoundRadius(100); ovalImageView.setType(XCRoundAndOvalImageView.TYPE_OVAL); ovalImageView.setRoundRadius(50); } }
七、總結(jié)
以上就是本文的全部?jī)?nèi)容,希望這篇文章的內(nèi)容對(duì)大家開(kāi)發(fā)Android能有所幫助。
- Android實(shí)現(xiàn)圓形圖片或者圓角圖片
- Android將Glide動(dòng)態(tài)加載不同大小的圖片切圓角與圓形的方法
- Android開(kāi)發(fā)使用Drawable繪制圓角與圓形圖案功能示例
- Android自定義Drawable實(shí)現(xiàn)圓形和圓角
- Android中Glide加載圓形圖片和圓角圖片實(shí)例代碼
- Android自定義控件之圓形、圓角ImageView
- Android實(shí)現(xiàn)圓角矩形和圓形ImageView的方式
- Android自定義控件之圓形/圓角的實(shí)現(xiàn)代碼
- android 實(shí)現(xiàn)圓角圖片解決方案
- Android基于Fresco實(shí)現(xiàn)圓角和圓形圖片
相關(guān)文章
Android activity實(shí)現(xiàn)延時(shí)跳轉(zhuǎn)功能
Activity是一個(gè)Android的應(yīng)用組件,它提供屏幕進(jìn)行交互。今天通過(guò)本文給大家介紹Android activity實(shí)現(xiàn)延時(shí)跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2021-06-06Android模擬器實(shí)現(xiàn)手機(jī)添加文件到sd卡的方法
這篇文章主要介紹了Android模擬器實(shí)現(xiàn)手機(jī)添加文件到sd卡的方法,詳細(xì)分析了Android模擬器添加文件到sd卡的步驟與相關(guān)技巧,需要的朋友可以參考下2016-06-06Android中使用socket使底層和framework通信的實(shí)現(xiàn)方法
native和framework的通信是通過(guò)jni,但是這一般只是framework調(diào)用native,native如果有消息要怎樣通知上層 呢?android中GSP模塊提供一種解決思路,但是實(shí)現(xiàn)有些復(fù)雜,這里介紹一種使用socket通信的方法可以使native和framework自由通信,感興趣的朋友一起看看吧2016-11-11Android利用startActivityForResult返回?cái)?shù)據(jù)到前一個(gè)Activity
這篇文章主要介紹了Android利用startActivityForResult返回?cái)?shù)據(jù)到前一個(gè)Activity,幫助大家更好的利用Android進(jìn)行開(kāi)發(fā),感興趣的朋友可以了解下2021-01-01unity3d發(fā)布apk在android虛擬機(jī)中運(yùn)行的詳細(xì)步驟(unity3d導(dǎo)出android apk)
這篇文章主要介紹了unity3d發(fā)布apk在android虛擬機(jī)中運(yùn)行的詳細(xì)步驟,需要的朋友可以參考下2014-05-05基于Android實(shí)現(xiàn)一個(gè)常用的布局吸頂效果
這篇文章給大家介紹一個(gè)布局吸頂效果,一般出現(xiàn)在內(nèi)容較長(zhǎng)頁(yè)面還嵌套著分類頁(yè)面的情況,比如電商的詳情頁(yè)嵌套分類,在頁(yè)面滑動(dòng)到tab的時(shí)候我們希望tab還能保留在頁(yè)面頂部而不被頂上去,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09Android UI設(shè)計(jì)與開(kāi)發(fā)之ViewPager仿微信引導(dǎo)界面以及動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了Android UI設(shè)計(jì)與開(kāi)發(fā)之ViewPager仿微信引導(dǎo)界面以及動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Android進(jìn)程間大數(shù)據(jù)通信LocalSocket詳解
這篇文章主要為大家介紹了Android進(jìn)程間大數(shù)據(jù)通信LocalSocket詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03