Android实现带圆环的圆形头像

 更新时间:2020年08月20日 09:52:04   作者:番茄炒蛋不要蛋  
这篇文章主要为大家详细介绍了Android实现带圆环的圆形头像,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在最近写的一个天气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 Webview重定向问题解决方法

    Android Webview重定向问题解决方法

    在Android开发过程中,使用过WebView的童鞋可能难免会遇到URL重定向问题。这篇文章主要介绍了Android Webview重定向问题解决方法,非常具有实用价值,需要的朋友可以参考下
    2018-05-05
  • Android 获取实时网速实现详解

    Android 获取实时网速实现详解

    这篇文章主要为大家介绍了Android 获取实时网速实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android自定义View——扇形统计图的实现代码

    Android自定义View——扇形统计图的实现代码

    本篇文章主要介绍了Android自定义View——扇形统计图的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Android 轻松实现图片倒影效果实例代码

    Android 轻松实现图片倒影效果实例代码

    这篇文章主要介绍了Android 轻松实现图片倒影效果实例代码,有需要的朋友可以参考一下
    2014-01-01
  • Android基于PhotoView实现的头像/圆形裁剪控件

    Android基于PhotoView实现的头像/圆形裁剪控件

    这篇文章主要给大家介绍了关于Android基于PhotoView实现的头像/圆形裁剪控件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • html5在android中的使用问题及技巧解读

    html5在android中的使用问题及技巧解读

    本文将详细介绍下html5在android中的使用:特效按钮的进展/在html5中有关于触摸屏的事件,感兴趣的你可以参考下,或许对你有所帮助
    2013-03-03
  • Android JNI 调用时缓存字段和方法ID示例

    Android JNI 调用时缓存字段和方法ID示例

    这篇文章主要介绍了Android JNI 调用时缓存字段和方法ID示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Android 自定义View的使用介绍

    Android 自定义View的使用介绍

    本篇文章小编为大家介绍,Android 自定义View的使用。需要的朋友参考下
    2013-04-04
  • Android调节屏幕亮度实现代码

    Android调节屏幕亮度实现代码

    这篇文章主要介绍了Android调节屏幕亮度实现代码,调节屏幕亮度时,先设置当前activity亮度,再并保存为系统亮度即可,本文分别给出两个步骤的实现代码,需要的朋友可以参考下
    2015-05-05
  • Android Studio 下载视频到本地

    Android Studio 下载视频到本地

    这篇文章主要介绍了Android Studio 下载视频到本地,利用GreenDao实现多线程断点续传,这样的话,下次用户再次下载时,将继续上次数据库的接着下载,这样用户体验就会很好,也大大节省了成本.具体实现代码大家参考下本文
    2018-03-03

最新评论