Android實現(xiàn)帶圓環(huán)的圓形頭像

更新時間：2020年08月20日 09:52:04 作者：番茄炒蛋不要蛋

這篇文章主要為大家詳細介紹了Android實現(xiàn)帶圓環(huán)的圓形頭像，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在最近寫的一個天氣APP中用到了圓形頭像這樣的一個樣式，中間是圓形的頭像（被圓形切割的圖片），周圍是一個帶顏色的圓環(huán)。如下圖所示，今天就來說一所它的實現(xiàn)過程。

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

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

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

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

（BitmapShader只能在onDraw中實現(xiàn)，在其他外部無法實現(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:id="@+id/activity_circle_weather"
  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:id="@+id/circleWeather"
    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中實現(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);
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: