圆形图片

原创 2016年06月01日 19:42:28

自定义imageview

package com.bwei.view;


import com.bwei.main.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

/**
 * Created by Administrator on 2015/4/30.
 */
public class MLImageView extends ImageView {
    private Paint mPressPaint;

    private int mWidth;
    private int mHeight;

    private int mPressAlpha;
    private int mPressColor;
    private int mRadius;
    private int mShapeType;
    private int mBorderWidth;
    private int mBorderColor;

    public MLImageView(Context context) {
        super(context);
        init(context, null);
    }

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

    public MLImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }


    private void init(Context context, AttributeSet attrs) {
        //鍒濆鍖栭粯璁ゅ�
        mPressAlpha = 64;
        mPressColor = getResources().getColor(R.color.ml_gray);
        mRadius = 16;
        mShapeType = 1;
        mBorderWidth = 0;
        mBorderColor = getResources().getColor(R.color.ml_red);

        // 鑾峰彇鎺т欢鐨勫睘鎬у�
        if (attrs != null) {
            TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MLImageView);
            mPressColor = array.getColor(R.styleable.MLImageView_press_color, mPressColor);
            mPressAlpha = array.getInteger(R.styleable.MLImageView_press_alpha, mPressAlpha);
            mRadius = array.getDimensionPixelSize(R.styleable.MLImageView_radius, mRadius);
            mShapeType = array.getInteger(R.styleable.MLImageView_shape_type, mShapeType);
            mBorderWidth = array.getDimensionPixelOffset(R.styleable.MLImageView_border_width, mBorderWidth);
            mBorderColor = array.getColor(R.styleable.MLImageView_border_color, mBorderColor);
            array.recycle();
        }

        // 鎸変笅鐨勭敾绗旇缃�        
        mPressPaint = new Paint();
        mPressPaint.setAntiAlias(true);
        mPressPaint.setStyle(Paint.Style.FILL);
        mPressPaint.setColor(mPressColor);
        mPressPaint.setAlpha(0);
        mPressPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

        setClickable(true);
        setDrawingCacheEnabled(true);
        setWillNotDraw(false);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        // 鑾峰彇褰撳墠鎺т欢鐨�drawable
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }
        // 杩欓噷 get 鍥炴潵鐨勫搴﹀拰楂樺害鏄綋鍓嶆帶浠剁浉瀵瑰簲鐨勫搴﹀拰楂樺害锛堝湪 xml 璁剧疆锛�       
        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        // 鑾峰彇 bitmap锛屽嵆浼犲叆 imageview 鐨�bitmap
        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
        drawDrawable(canvas, bitmap);
        drawPress(canvas);
        drawBorder(canvas);

    }

    private void drawDrawable(Canvas canvas, Bitmap bitmap) {
        // 鐢荤瑪
        Paint paint = new Paint();
        // 棰滆壊璁剧疆
        paint.setColor(0xffffffff);
        // 鎶楅敮榻�        
        paint.setAntiAlias(true);
        //Paint 鐨�Xfermode锛孭orterDuff.Mode.SRC_IN 鍙栦袱灞傚浘鍍忕殑浜ら泦閮ㄩ棬, 鍙樉绀轰笂灞傚浘鍍忋�
        PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
        // 鏍囧織
        int saveFlags = Canvas.MATRIX_SAVE_FLAG
                | Canvas.CLIP_SAVE_FLAG
                | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
                | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
                | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
        canvas.saveLayer(0, 0, mWidth, mHeight, null, saveFlags);

        if (mShapeType == 0) {
            // 鐢婚伄缃╋紝鐢诲嚭鏉ュ氨鏄竴涓拰绌洪棿澶у皬鐩稿尮閰嶇殑鍦�           
            canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, paint);
        } else {
            // 褰揝hapeType = 1 鏃�鍥剧墖涓哄渾瑙掔煩褰�           
            RectF rectf = new RectF(0, 0, getWidth(), getHeight());
            canvas.drawRoundRect(rectf, mRadius, mRadius, paint);
        }

        paint.setXfermode(xfermode);

        // 绌洪棿鐨勫ぇ灏�/ bitmap 鐨勫ぇ灏�= bitmap 缂╂斁鐨勫�鏁�      
        float scaleWidth = ((float) getWidth()) / bitmap.getWidth();
        float scaleHeight = ((float) getHeight()) / bitmap.getHeight();

        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);

        //bitmap 缂╂斁
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);

        //draw 涓婂幓
        canvas.drawBitmap(bitmap, 0, 0, paint);
        canvas.restore();
    }

    private void drawPress(Canvas canvas) {

        if(mShapeType == 0){
            canvas.drawCircle(mWidth/2, mHeight/2, mWidth/2, mPressPaint);
        }else if (mShapeType == 1) {
            RectF rectF = new RectF(0, 0, mWidth, mHeight);
            canvas.drawRoundRect(rectF, mRadius, mRadius, mPressPaint);
        }
    }
    private void drawBorder(Canvas canvas){
        if(mBorderWidth > 0){
            Paint paint = new Paint();
            paint.setStrokeWidth(mBorderWidth);
            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(mBorderColor);
            paint.setAntiAlias(true);
            if (mShapeType == 0) {
                canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, paint);
            } else {
                // 褰揝hapeType = 1 鏃�鍥剧墖涓哄渾瑙掔煩褰�                
                RectF rectf = new RectF(0, 0, getWidth(), getHeight());
                canvas.drawRoundRect(rectf, mRadius, mRadius, paint);
            }
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPressPaint.setAlpha(mPressAlpha);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                mPressPaint.setAlpha(0);
                invalidate();
                break;
            default:
                invalidate();
                break;
        }
        return super.onTouchEvent(event);
    }

}
values中创建attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--自定义MLImageView的属性-->
    <declare-styleable name="MLImageView">
        <attr name="press_alpha" format="integer" />
        <attr name="press_color" format="color" />
        <attr name="radius" format="dimension"/>
        <attr name="border_width" format="dimension" />
        <attr name="border_color" format="color"/>
        <attr name="shape_type" format="enum">
            <enum name="round" value="0"/>
            <enum name="rectangle" value="1" />
        </attr>
    </declare-styleable>
</resources>
values中创建colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ml_white">#ffffffff</color>
    <color name="ml_gray">#ff9e9e9e</color>
    <color name="ml_blue">#ff239efe</color>
    <color name="ml_red">#ffff0000</color>
</resources>

main中引用是加命名空间

 xmlns:melove="http://schemas.android.com/apk/res-auto"

main中引用控件

方形
<com.bwie.yuanxingtupian.MLImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_margin="8dp"
        android:src="@drawable/touxiang"
        melove:radius="8dp"
        melove:shape_type="rectangle" />
圆形
    <com.bwie.yuanxingtupian.MLImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_margin="8dp"
        android:src="@drawable/touxiang"
        melove:shape_type="round" />

方形加边框
    <com.bwie.yuanxingtupian.MLImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_margin="8dp"
        android:src="@drawable/touxiang"
        melove:border_color="@color/ml_white"
        melove:border_width="4dp"
        melove:press_alpha="50"
        melove:press_color="#00ff00"
        melove:radius="8dp"
        melove:shape_type="rectangle" />
圆形加边框
    <com.bwie.yuanxingtupian.MLImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_margin="8dp"
        android:src="@drawable/touxiang"
        melove:border_color="@color/ml_white"
        melove:border_width="4dp"
        melove:shape_type="round" />



Android圆形图片不求人,自定义View实现(BitmapShader使用)

在很多APP当中,圆形的图片是必不可少的元素,美观大方。本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情。 一、先上效果图 二、实现思路 ...
  • a369414641
  • a369414641
  • 2016年11月17日 13:12
  • 1678

Picasso 设置圆形图片

Picasso.with(getContext()).load(getLoginInfo1.getString("headpicurl", "0")).resize(200, 200).transfo...
  • csdndouniwan
  • csdndouniwan
  • 2016年09月06日 08:38
  • 2103

Android自定义圆形图片按钮

自定义圆形图片类: package com.android.login_demo02.plug; import android.content.Context; import android.grap...
  • u014157740
  • u014157740
  • 2015年07月13日 22:50
  • 1318

Android学习(二十)设置自定义圆形图片

在Android的开发过程中往往需要用到显示用户头像的功能,此时就需要进行圆形显示更加的美观,在使用layout布局的使用可以折用drawable进行这是圆角,但是是通过background进行引入的...
  • qq_26894673
  • qq_26894673
  • 2017年07月24日 13:08
  • 419

制作圆形图片,你会以下几种?

说起圆角图片,相信每个人心中都有自己的圆角图片制作方法。但是你是否想知道,除了你所会的那几张方法以外,还什么什么方法制作圆形图片呢?我们一一学习~关于通过使用XferMode方式创建圆形图片,hong...
  • huachao1001
  • huachao1001
  • 2016年06月04日 16:59
  • 9015

Glide加载圆形图片(新版本4.0.0-RC1)

今天封装图片加载框架时,想使用Glide加载圆形图片,发现有几个坑,所以记录一下: Glide的使用方法,这个应该很熟悉了,如下: ImageView image; String url = "图片u...
  • u011866128
  • u011866128
  • 2017年07月13日 17:03
  • 2575

Android开源项目——自定义圆形图片组件CircularImageView

项目github地址: 控件功能:可以将任意图片裁剪成圆形,控件的大小可以自定义,可以指定图片中心点和半径,也可以添加圆形边框并设置边框的颜色。 使用方法:和使用其他自定义控件没什么区别,这里只需要...
  • u010852801
  • u010852801
  • 2015年04月13日 15:03
  • 2835

Android中使用Picasso将图片直接转换为圆形

圆形头像现在很流行了,Github上也有很多开源的库,最经典的是直接使用一个自定义的圆形ImageViwe,比较有代表性的有这个项目:hdodenhof/CircleImageView。但是,如果你的...
  • codezjx
  • codezjx
  • 2016年05月04日 23:10
  • 6508

如何使用GDI+制作圆形图片(类似QQ头像)

一直在CSDN学习,下载了很多资源,没有上传过什么资料,今天也为大家做个小小贡献 很多软件和APP都用了圆形图像,也想当的好看,最近公司项目要用到这个小东西,花了半天时间搞了出来。 (c#只用了几分钟...
  • xjb2006
  • xjb2006
  • 2017年07月29日 15:27
  • 644

Glide使用 加载网络图片 圆形图片 圆角图片

在项目中总结的Glide用法(工具类)。public class Glides { public static Glides instance = new Glides(); public...
  • HandsomeFuHS
  • HandsomeFuHS
  • 2017年03月06日 15:27
  • 1592
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆形图片
举报原因:
原因补充:

(最多只允许输入30个字)