Android自定义控件仿QQ编辑和选取圆形头像

android大家都有很多需要用户上传头像的需求,有的是选方形,有的是圆角矩形,有的是圆形。
首先我们要做一个处理图片的自定义控件,把传入的图片,经过用户选择区域,处理成一定的形状。

有的app是通过在图片上画一个矩形区域表示选中的内容,有的则是通过双指放大缩小,拖动图片来选取图片。圆形头像,还是改变图片比较好

圆形区域可调节大小。

这个自定义View的图像部分分为三个,背景图片,半透明蒙层,和亮色区域……还是直接贴代码得了

package com.example.jjj.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class RoundEditImageView extends View {
 private Bitmap bitmap;
 RectF clipBounds, dst, src;
 Paint clearPaint;

 // 控件宽高
 private int w, h;
 // 选区半径
 private float radius = 150f;

 // 圆形选区的边界
 private RectF circleBounds;

 // 最大放大倍数
 private float max_scale = 2.0f;

 // 双指的距离
 private float distance;
 private float x0, y0;
 private boolean doublePoint;

 public RoundEditImageView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  init();
 }

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

 public RoundEditImageView(Context context) {
  super(context);
  init();
 }

 private void init() {
  clearPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  clearPaint.setColor(Color.GRAY);
  clearPaint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (bitmap != null) {
   canvas.drawBitmap(bitmap, null, dst, null);//每次invalidate通过改变dst达到缩放平移的目的
  }
  // 保存图层,以免清除时清除了bitmap
  int count = canvas.saveLayer(clipBounds, null, Canvas.ALL_SAVE_FLAG);
  canvas.drawColor(0x80000000);
  canvas.drawCircle(w / 2, h / 2, radius, clearPaint);// 清除半透明黑色,留下一个透明圆
  canvas.restoreToCount(count);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  this.w = w;
  this.h = h;
  // 记录view所占的矩形
  clipBounds = new RectF(0, 0, w, h);
  float l, r, t, b;
  if (bitmap != null) {
   // 判断长宽比,当长宽比太长会太宽是,以fitCenter的方式初始化图片
   if (w / (float) h > bitmap.getWidth() / (float) bitmap.getHeight()) {
    // 图片太高
    float w_ = h * bitmap.getWidth() / (float) bitmap.getHeight();
    l = w / 2f - w_ / 2f;
    r = w / 2f + w_ / 2f;
    t = 0;
    b = h;
   } else {
    // 图片太长,或跟view一样长
    float h_ = w * bitmap.getHeight() / (float) bitmap.getWidth();
    l = 0;
    r = w;
    t = h / 2f - h_ / 2f;
    b = h / 2f + h_ / 2f;
   }
   dst = new RectF(l, t, r, b);// 这个矩形用来变换
   src = new RectF(l, t, r, b);// 这个矩形仅为保存第一次的状态

   max_scale = Math.max(max_scale, bitmap.getWidth() / src.width());
  }
  circleBounds = new RectF(w / 2 - radius, h / 2 - radius, w / 2 + radius, h / 2 + radius);
 }

 public void setImageBitmap(Bitmap bitmap) {
  this.bitmap = bitmap;
  invalidate();
 }

 @Override
 public boolean dispatchTouchEvent(MotionEvent e) {
  if (e.getPointerCount() > 2) {// 不接受多于两指的事件
   return false;
  } else if (e.getPointerCount() == 2) {
   doublePoint = true;// 标志位,记录两指事件处理后,抬起一只手也不处理拖动
   handleDoubleMove(e);
  } else {
   // 处理单指的拖动
   switch (e.getAction()) {
   case MotionEvent.ACTION_DOWN:
    x0 = e.getX();
    y0 = e.getY();
    break;
   case MotionEvent.ACTION_MOVE:
    if (doublePoint) {
     break;
    }
    float x = e.getX();
    float y = e.getY();
    float w = dst.width();
    float h = dst.height();

    // 不允许拖过圆形区域,不能使圆形区域内空白
    dst.left += x - x0;
    if (dst.left > circleBounds.left) {
     dst.left = circleBounds.left;
    } else if (dst.left < circleBounds.right - w) {
     dst.left = circleBounds.right - w;
    }
    dst.right = dst.left + w;

    // 不允许拖过圆形区域,不能使圆形区域内空白
    dst.top += y - y0;
    if (dst.top > circleBounds.top) {
     dst.top = circleBounds.top;
    } else if (dst.top < circleBounds.bottom - h) {
     dst.top = circleBounds.bottom - h;
    }
    dst.bottom = dst.top + h;

    x0 = x;
    y0 = y;
    invalidate();
    break;
   case MotionEvent.ACTION_UP:
    doublePoint = false;// 恢复标志位
    break;
   }
  }

  return true;
 }

 // 处理双指事件
 private void handleDoubleMove(MotionEvent e) {
  switch (e.getAction() & MotionEvent.ACTION_MASK) {
  case MotionEvent.ACTION_POINTER_DOWN:
   distance = sqrt(e);
   Log.d("px", "down:distance=" + distance);
   break;
  case MotionEvent.ACTION_MOVE:
   scale(e);
   break;
  case MotionEvent.ACTION_UP:
   break;
  default:
   break;
  }
 }

 private void scale(MotionEvent e) {
  float dis = sqrt(e);
  // 以双指中心作为图片缩放的支点
  float pX = e.getX(0) / 2f + e.getX(1) / 2f;
  float pY = e.getY(0) / 2f + e.getY(1) / 2f;
  float scale = dis / distance;
  Log.d("px", "move:distance=" + dis + ",scale to" + scale);
  float w = dst.width();
  float h = dst.height();

  if (w * scale < radius * 2 || h * scale < radius * 2 || w * scale > src.width() * max_scale) {
   // 无法缩小到比选区还小,或到达最大倍数
   return;
  }
  // 把dst区域放大scale倍
  dst.left = (dst.left - pX) * scale + pX;
  dst.right = (dst.right - pX) * scale + pX;
  dst.top = (dst.top - pY) * scale + pY;
  dst.bottom = (dst.bottom - pY) * scale + pY;

  // 缩放同样不允许使圆形区域空白
  if (dst.left > circleBounds.left) {
   dst.left = circleBounds.left;
   dst.right = dst.left + w * scale;
  } else if (dst.right < circleBounds.right) {
   dst.right = circleBounds.right;
   dst.left = dst.right - w * scale;
  }

  if (dst.top > circleBounds.top) {
   dst.top = circleBounds.top;
   dst.bottom = dst.top + h * scale;
  } else if (dst.bottom < circleBounds.bottom) {
   dst.bottom = circleBounds.bottom;
   dst.top = dst.bottom - h * scale;
  }
  invalidate();

  distance = dis;
 }

 private float sqrt(MotionEvent e) {
  return (float) Math.sqrt((e.getX(0) - e.getX(1)) * (e.getX(0) - e.getX(1)) + (e.getY(0) - e.getY(1)) * (e.getY(0) - e.getY(1)));
 }

 // 生成目前选区指定大小的圆形bitmap
 public Bitmap extractBitmap(int width) {
  Bitmap outBitmap = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(outBitmap);
  Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
  p.setColor(Color.GRAY);
  canvas.drawCircle(width / 2, width / 2, width / 2, p);
  float scale = dst.width() / bitmap.getWidth();
  int w = (int) (circleBounds.width() / scale);
  int l = (int) ((circleBounds.left - dst.left) / scale);
  int r = l + w;
  int t = (int) ((circleBounds.top - dst.top) / scale);
  int b = t + w;
  Rect resRect = new Rect(l, t, r, b);
  Paint paint = new Paint();
  paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
  canvas.drawBitmap(bitmap, resRect, canvas.getClipBounds(), paint);
  return outBitmap;
 }
}

Activity中用法

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_select_header);
  RoundEditImageView imageView = (RoundEditImageView) findViewById(R.id.roundEditImageView1);
  bitmap = BitmapFactory.decodeFile(imagePath);
  imageView.setImageBitmap(bitmap);
 }

 @Override
 public void onClick(View v) {
   //生成一个300*300的当前亮圆形中的图片
   Bitmap result = imageView.extractBitmap(300);
   //压缩成png
   FileOutputStream out = new FileOutputStream(new File(filePath));
   result.compress(Bitmap.CompressFormat.PNG, 100, out);
   //上传与显示
   ...
 }

需求是模仿QQ的,本人不太会讲解,做着玩玩。

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

(0)

相关推荐

  • Android使用CircleImageView实现圆形头像的方法

    有时我们在应用中会用到圆形头像,下面是利用CircleImageView实现圆形头像的演示,下面效果和代码,效果如图 实现起来也比较简单,先在项目中建一个circleimageview包用来存放CircleImageView类,待会直接把CircleImageView类复制到包里就可以使用了 然后,再建一个attrs.xml,其代码相当简单,定义了圆形边框宽度和颜色 <?xml version="1.0" encoding="utf-8"?> <r

  • Android仿QQ圆形头像个性名片

    先看看效果图: 中间的圆形头像和光环波形讲解请看:http://www.jb51.net/article/96508.htm 周围的气泡布局,因为布局RatioLayout是继承自ViewGroup,所以布局layout就可以根据自己的需求来布局其子view,view.layout(int l,int t,int r,int b);用于布局子view在父ViewGroup中的位置(相对于父容器),所以在RatioLayout中计算所有子view的left,top,right,bottom.那么头

  • Android应用中绘制圆形头像的方法解析

    要画这种圆形带阴影的头像,个人分解成三个图层 1,先画头像边缘的渐变 RadialGradient gradient = new RadialGradient(j/2,k/2,j/2,new int[]{0xff5d5d5d,0xff5d5d5d,0x00ffffff},new float[]{0.f,0.8f,1.0f}, Shader.TileMode.CLAMP); paint.setShader(gradient); canvas.drawCircle(j/2,k/2,j/2,paint

  • Android Studio实现带边框的圆形头像

    本文实例为大家分享了Android Studio实现带边框的圆形头像的具体代码,供大家参考,具体内容如下 效果显示: (没有边框的) (有边框的) 1.创建自定义ImagView控件 (1).没有边框的 package chenglong.activitytest.pengintohospital.utils; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitma

  • Android一行代码实现圆形头像

    效果图 在开发APP中,经常要实现圆形头像,那么该如何实现呢? 要裁剪吗,要重写draw函数吗?不用,只用一行代码就可以实现 Glide实现圆形图像 Glide.with(mContext) .load(R.drawable.iv_image_header) .error(R.drawable.ic_error_default) .transform(new GlideCircleTransform(mContext)) .into(mImage); 其中load后为载入的图像,error后为出

  • 利用Android中BitmapShader制作自带边框的圆形头像

    效果如下: BitmapShader 的简单介绍 关于 Shader是什么,Shader的种类有哪几种以及如何使用不属于本文范畴,对这方面不是很了解的同学,建议先去学习一下 Shader 的基本使用. BitmapShader主要的作用就是 通过Paint对象,对 画布进行指定的Bitmap填充,实现一系列效果,可以有以下三种模式进行选择 1.CLAMP - 拉伸,这里拉伸的是图片的最后一个元素,不断地重复,这个效果,在图片比较小,而所要画的面积比较大的时候会比较明显. 2.REPEAT - 重

  • Android 自定义圆形头像CircleImageView支持加载网络图片的实现代码

    在Android开发中我们常常用到圆形的头像,如果每次加载之后再进行圆形裁剪特别麻烦.所以在这里写一个自定义圆形ImageView,直接去加载网络图片,这样的话就特别的方便. 先上效果图 主要的方法 1.让自定义 CircleImageView 继承ImageView /** * 自定义圆形头像 * Created by Dylan on 2015/11/26 0026. */ public class CircleImageView extends ImageView { } 2.在构造方法中

  • Android利用CircleImageView实现圆形头像的方法

    CircleImageView实现圆形头像代码分享,供大家参考,具体内容如下 一.创建属性文件(attrs.xml) 具体操作: 1.在项目的values文件底下创建一新的属性文件,文件名为attrs:New->XML->Values XML File:  2.补充attrs.xml代码: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleabl

  • Android实现本地上传图片并设置为圆形头像

    先从本地把图片上传到服务器,然后根据URL把头像处理成圆形头像. 因为上传图片用到bmob的平台,所以要到bmob(http://www.bmob.cn)申请密钥. 效果图: 核心代码: 复制代码 代码如下: public class MainActivity extends Activity {         private ImageView iv;         private String appKey="";                //填写你的Applicatio

  • Android中使用CircleImageView和Cardview制作圆形头像的方法

    圆形头像在我们的日常使用的app中很常见,因为圆形的头像比较美观. 使用圆形图片的方法可能有我们直接将图片裁剪成圆形再在app中使用,还有就是使用自定义View对我们设置的任何图片自动裁剪成圆形. 效果图: 这里使用github上CircleImageView github:https://github.com/hdodenhof/CircleImageView CardView顾名思义卡片式的View,CardView继承的是FrameLayout,所以摆放内部控件的时候需要注意一下 可以设置

随机推荐