美文网首页
Android开发——圆形头像

Android开发——圆形头像

作者: 我想放假休息 | 来源:发表于2019-12-02 16:10 被阅读0次

两种方法,自己写代码实现,用第三方开源库

一、第三方开源控件RoundedImageView
RoundedImageView可以改控件支持圆形、椭圆、圆角矩形等,使用非常方便。
在Moudle的build.gradle中添加如下代码,

    compile 'com.makeramen:roundedimageview:2.2.1'
添加完之后在点击下图的小象图标使添加的依赖生效。 QQ截图20191103235425.png

添加代码(圆形)如下:

<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tupian"
app:riv_oval="true" />

其他属性的写法

    <com.makeramen.roundedimageview.RoundedImageView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:scaleType="fitCenter"
          android:src="@mipmap/avatar"
          app:riv_border_color="#333333"
          app:riv_border_width="2dp"
          app:riv_corner_radius_top_left="25dp"
          app:riv_corner_radius_bottom_right="25dp"
          app:riv_mutate_background="true"
          app:riv_oval="false"
          app:riv_tile_mode="repeat" />

控件属性:

riv_border_width: 边框宽度
riv_border_color: 边框颜色
riv_oval: 是否圆形
riv_tile_mode:有三种clamp,repeat,mirror,分别是指缩放、重复、镜像,实现后两种的效果,是src的分辨率小于RoundedImageView的分辨率才比较直观显示
riv_corner_radius: 圆角弧度(是指圆角的大小,简单来说,等于宽度一半时,就是圆形了;小于宽度的一半就是圆角矩形了。)
riv_corner_radius_top_left:左上角弧度
riv_corner_radius_top_right: 右上角弧度
riv_corner_radius_bottom_left:左下角弧度
riv_corner_radius_bottom_right:右下角弧度
scaleType:scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXY 后面详解

scaleType的属性

ImageView的scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXY

android:scaleType="center"
保持原图的大小,显示在ImageView的中心。当原图的size大于ImageView的size,超过部分裁剪处理。

android:scaleType="centerCrop"
以填满整个ImageView为目的,将原图的中心对准ImageView的中心,等比例放大原图,直到填满ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理。

android:scaleType="centerInside"
以原图完全显示为目的,将图片的内容完整居中显示,通过按比例缩小原图的size宽(高)等于或小于ImageView的宽(高)。如果原图的size本身就小于ImageView的size,则原图的size不作任何处理,居中显示在ImageView。

android:scaleType="matrix"
不改变原图的大小,从ImageView的左上角开始绘制原图,原图超过ImageView的部分作裁剪处理。

android:scaleType="fitCenter"
把原图按比例扩大或缩小到ImageView的ImageView的高度,居中显示

android:scaleType="fitEnd"
把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的下部分位置

android:scaleType="fitStart"
把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的上部分位置
android:scaleType="fitXY"

把原图按照指定的大小在View中显示,拉伸显示图片,不保持原比例,填满ImageView.

下面附一个在网上找了一个代码(不推荐用,有第三方开源就用咯,何必麻烦自己写啊)


import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 *
 * 带边框的圆形图片
 * Created by LICHENGLONG on 2017-10-09.
 */

@SuppressLint("AppCompatCustomView")
public class ImageViewPlus extends ImageView {
    private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);//
    private Bitmap mRawBitmap;
    private BitmapShader mShader;
    private Matrix mMatrix = new Matrix();
    private float mBorderWidth = dip2px(15);
    private int mBorderColor = 0xFF0080FF;//外边框的颜色

    public ImageViewPlus(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Bitmap rawBitmap = getBitmap(getDrawable());
        if (rawBitmap != null){
            int viewWidth = getWidth();
            int viewHeight = getHeight();
            int viewMinSize = Math.min(viewWidth, viewHeight);
            float dstWidth = viewMinSize;
            float dstHeight = viewMinSize;
            if (mShader == null || !rawBitmap.equals(mRawBitmap)){
                mRawBitmap = rawBitmap;
                mShader = new BitmapShader(mRawBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            }
            if (mShader != null){
                mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
                mShader.setLocalMatrix(mMatrix);
            }
            mPaintBitmap.setShader(mShader);
            mPaintBorder.setStyle(Paint.Style.STROKE);
            mPaintBorder.setStrokeWidth(mBorderWidth / 5.0f);//外边框的大小
            mPaintBorder.setColor(mBorderColor);//添加外边框
            float radius = viewMinSize / 2.0f;
            canvas.drawCircle(radius, radius, radius - mBorderWidth / 6.0f, mPaintBorder);
            canvas.translate(mBorderWidth, mBorderWidth);
            canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius, mPaintBitmap);
        } else {
            super.onDraw(canvas);
        }
    }

    private Bitmap getBitmap(Drawable drawable){
        if (drawable instanceof BitmapDrawable){
            return ((BitmapDrawable)drawable).getBitmap();
        } else if (drawable instanceof ColorDrawable){
            Rect rect = drawable.getBounds();
            int width = rect.right - rect.left;
            int height = rect.bottom - rect.top;
            int color = ((ColorDrawable)drawable).getColor();
            Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
            return bitmap;
        } else {
            return null;
        }
    }

    private int dip2px(int dipVal) {
        float scale = getResources().getDisplayMetrics().density;
        return (int)(dipVal * scale + 0.5f);
    }
}

相关文章

  • Android开发圆形头像

    目前在应用开发中,矩形的头像基本没有了,大多是圆形或圆角矩形,本文简简单单轻轻松松帮你搞定圆形或圆角矩形的头像。 ...

  • Android开发——圆形头像

    两种方法,自己写代码实现,用第三方开源库 一、第三方开源控件RoundedImageViewRoundedImag...

  • Android实现头像上传

    Android实现本地上传图片并设置为圆形头像 Android实现类似换QQ头像功能(图片裁剪) android上...

  • Android圆形头像

    现在基本上很多APP会用到圆形头像,而关于这方面也有很多的示例。今天我也把我的分享一下给大家,也是新手一枚,不好的...

  • android ------ 登录圆形头像之网络加载与缓存到本地

    Android开发中常常有用户头像显示,似乎大多数都是圆形显示,如果每次加载网络头像,会频繁的请求网络,所以本文主...

  • Android 加载圆形头像

    在 Android 中,加载网络图片还是本地图片,三方库Glide必不可少 1、导入依赖 implementati...

  • android圆形头像实现

    今天我们学习圆形头像的实现原理,先上图 基本上能满足一般的圆形头像功能实现其中包括控件的大小,控件四个角的弧度控制...

  • Xamarin.iOS 圆形图片裁剪

    本文主要讲解在实际开发过程中圆形图片的实现过程 在项目开发中我们经常会使用圆形头像图片,例如登陆页面的头像,个人页...

  • iOS开发——制作圆形头像

    在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形...

  • Android实现圆形头像效果

    效果截图 实现原理 对于圆形头像的实现,其实就是对方形图像做某些处理,以达到圆形头像的效果。一般我们会通过Canv...

网友评论

      本文标题:Android开发——圆形头像

      本文链接:https://www.haomeiwen.com/subject/svfrbctx.html