Android实现带圆环的圆形头像

所属分类: 软件编程 / Android 阅读数: 63
收藏 0 赞 0 分享

在最近写的一个天气APP中用到了圆形头像这样的一个样式,中间是圆形的头像(被圆形切割的图片),周围是一个带颜色的圆环。如下图所示,今天就来说一所它的实现过程。

它的实现也不是特别困难,其实就是用到了BitmapShader这个用法,然后包装成一个paint,最后画出一个圆。

1>实现一个Paint画出以圆形背景的圆。

2>以同样的圆形画出一个稍微小一点的圆,作为它的有色圆环。(此圆和上一个圆颜色不同)。

3>用BitmapShader实现一个新的圆,和第二个圆的大小圆心一致。

(BitmapShader只能在onDraw中实现,在其他外部无法实现)

具体代码如下:

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中实现在外部不可以
    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);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Android 自定义球型水波纹带圆弧进度效果(实例代码)

最近小编接到一个这样的需求,需要实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度。今天小编给大家分享实例代码,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

Flutter 实现下拉刷新上拉加载的示例代码

这篇文章主要介绍了Flutter 实现下拉刷新上拉加载的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Windows实现Flutter环境搭建及配置这一篇就够了

这篇文章主要介绍了Windows实现Flutter环境搭建及配置这一篇就够了,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Android利用碎片fragment实现底部标题栏(Github模板开源)

Fragment可以作为Activity的组成部分,一个Activity可以有多个Fragment,这篇文章主要介绍了Android利用碎片fragment实现底部标题栏(Github模板开源),需要的朋友可以参考下
收藏 0 赞 0 分享

android studio 的下拉菜单Spinner使用详解

这篇文章主要介绍了android studio 的下拉菜单Spinner使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解析Android 8.1平台SystemUI 导航栏加载流程

这篇文章主要介绍了Android 8.1平台SystemUI 导航栏加载流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Android仿微信录音功能

这篇文章主要为大家详细介绍了Android仿微信录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿微信键盘切换效果

这篇文章主要为大家详细介绍了Android仿微信键盘切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android超清晰6.0权限申请AndPermission

这篇文章主要介绍了Android超清晰6.0权限申请AndPermission,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿微信录制语音功能

这篇文章主要介绍了Android仿微信录制语音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多