美文网首页
可以显示文字的圆形ImageView(头像)

可以显示文字的圆形ImageView(头像)

作者: 三天过去了 | 来源:发表于2019-06-13 18:39 被阅读0次

    一般常见的应用场景是用来显示用户的头像,如通讯录

    效果图.jpg
    /**
     * Author: Alex.ylj
     * 2019-06-13 17:14 Thursday
     * Description: 具有显示文字功能的圆形ImageView
     */
    public class CharCircleView extends AppCompatImageView {
    
        //定义背景、文字画笔
        private Paint mBackgroundPaint;
        private Paint mTextPaint;
        private Rect mRect;
    
        //文字、画笔颜色
        private String mText;
        private int mBackgroundColor;
        private int mTextColor;
        private int mTextSize;
    
        public CharCircleView(Context context) {
            this(context, null);
        }
    
        public CharCircleView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public CharCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
    
        private void init() {
            //初始化颜色
            mBackgroundColor = Color.parseColor("#E7CE86");
            mTextColor = Color.parseColor("#FFFFFF");
            mTextSize = DensityUtils.dp2px(getContext(), 18);
    
            //初始化画笔
            mBackgroundPaint = new Paint();
            mTextPaint = new Paint();
            mRect = new Rect();
    
            //设置画笔
            mBackgroundPaint.setColor(mBackgroundColor);
            mBackgroundPaint.setAntiAlias(true);//抗锯齿
            mTextPaint.setColor(mTextColor);
            mTextPaint.setAntiAlias(true);//抗锯齿
            mTextPaint.setTextSize(mTextSize);
            mTextPaint.setFakeBoldText(true);//加粗
            mTextPaint.setTextAlign(Paint.Align.CENTER);//文字居中
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            //不做任何处理
        }
    
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            //不做任何处理
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (!TextUtils.isEmpty(mText)) {
                //开始绘制
                canvas.drawCircle(getWidth() / 2f, getWidth() / 2f, getWidth() / 2f, mBackgroundPaint);
                mTextPaint.getTextBounds(mText, 0, 1, mRect);
                Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
                int y = (getMeasuredHeight() - fontMetricsInt.top - fontMetricsInt.bottom) / 2;
                canvas.drawText(mText, getWidth() / 2f, y, mTextPaint);
            }
        }
    
        public void setText(String text) {
            if (TextUtils.isEmpty(text)) {
                mText = "";
            }
            //取出第一个字符,并且转大写
            char[] chars = text.toCharArray();
            mText = String.valueOf(chars[0]).toUpperCase();
            invalidate();
        }
    
        public void setBackground(int color) {
            mBackgroundColor = color;
            invalidate();
        }
    
        public void setTextColor(int color) {
            mTextColor = color;
            invalidate();
        }
    
        public void setTextSize(int textSize) {
            mTextSize = textSize;
            invalidate();
        }
    }
    

    使用

    CharCircleView charCircleView = findViewById(R.id.char_circle_view);
    charCircleView.setText("叶某某");
    charCircleView.setText("Alex.xxx");
    String imageUrl = "http://b-ssl.duitang.com/uploads/item/201608/21/20160821230024_MyCYK.thumb.700_0.jpeg";
    Glide.with(context).load(imageUrl).into(charCircleView);
    

    相关文章

      网友评论

          本文标题:可以显示文字的圆形ImageView(头像)

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