在最近寫(xiě)的一個(gè)天氣APP中用到了圓形頭像這樣的一個(gè)樣式，中間是圓形的頭像（被圓形切割的圖片），周?chē)且粋€(gè)帶顏色的圓環(huán)。如下圖所示，今天就來(lái)說(shuō)一所它的實(shí)現(xiàn)過(guò)程。

它的實(shí)現(xiàn)也不是特別困難，其實(shí)就是用到了BitmapShader這個(gè)用法，然后包裝成一個(gè)paint，最后畫(huà)出一個(gè)圓。

1>實(shí)現(xiàn)一個(gè)Paint畫(huà)出以圓形背景的圓。

2>以同樣的圓形畫(huà)出一個(gè)稍微小一點(diǎn)的圓，作為它的有色圓環(huán)。（此圓和上一個(gè)圓顏色不同）。

3>用BitmapShader實(shí)現(xiàn)一個(gè)新的圓，和第二個(gè)圓的大小圓心一致。

（BitmapShader只能在onDraw中實(shí)現(xiàn)，在其他外部無(wú)法實(shí)現(xiàn)）

具體代碼如下：

1、界面代碼

<?xml version='1.0' encoding='utf-8'?><RelativeLayout xmlns:android='http://schemas.android.com/apk/res/android' xmlns:tools='http://schemas.android.com/tools' android: android:layout_width='match_parent' android:layout_height='match_parent' android:paddingBottom='@dimen/activity_vertical_margin' android:paddingLeft='@dimen/activity_horizontal_margin' android:paddingRight='@dimen/activity_horizontal_margin' android:paddingTop='@dimen/activity_vertical_margin' tools:context='com.example.app_switchbutton.CircleWeatherActivity'> <com.example.app_switchbutton.CircleWeather android:layout_width='250dp' android:layout_height='wrap_content' android: android:layout_centerHorizontal='true'/> </RelativeLayout>

2、邏輯java代碼：

package com.example.app_switchbutton; import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.BitmapShader;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View; /** * Created by 盡途 on 2017/5/12. */ public class CircleWeather extends View { private int widthSize; private int heightSize; private Paint mpaint1,mpaint2,mpaint3; private Bitmap mbitmap; private BitmapShader mbitmapshader; public CircleWeather(Context context){ super(context); initView(); } public CircleWeather(Context context, AttributeSet attributeSet){ super(context,attributeSet); initView(); } private void initView(){ mpaint1=new Paint(); mpaint2=new Paint(); mpaint3=new Paint(); mpaint2.setStyle(Paint.Style.FILL); mpaint3.setStyle(Paint.Style.FILL); mpaint2.setAntiAlias(true); mpaint3.setAntiAlias(true); mpaint2.setColor(getResources().getColor(R.color.colorPrimary)); mpaint3.setColor(getResources().getColor(R.color.colorGray)); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { widthSize=MeasureSpec.getSize(widthMeasureSpec); heightSize=widthSize; setMeasuredDimension(widthSize,heightSize); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); } @Override protected void onDraw(Canvas canvas) { mbitmap= BitmapFactory.decodeResource(getResources(),R.drawable.hehua);//bitmapshader只能在onDraw中實(shí)現(xiàn)在外部不可以 int BitmapWidthSize=mbitmap.getWidth(); int BitmapHeightSize=mbitmap.getHeight(); float scale=(float)widthSize/Math.min(BitmapHeightSize,BitmapWidthSize);//獲取最為合適的尺寸 Matrix matrix=new Matrix(); matrix.setScale(scale,scale); Bitmap bitmap=Bitmap.createBitmap(mbitmap,0,0,BitmapWidthSize,BitmapHeightSize,matrix,true); mbitmapshader=new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP); mpaint1.setShader(mbitmapshader); canvas.drawCircle((float)widthSize*0.5f,(float)heightSize*0.5f,(float)heightSize*0.5f,mpaint2); canvas.drawCircle((float)widthSize*0.5f,(float)heightSize*0.5f,(float)heightSize*0.47f,mpaint3); canvas.drawCircle((float)widthSize*0.5f,(float)heightSize*0.5f,(float)heightSize*0.47f,mpaint1); super.onDraw(canvas); }}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。