Android自定义View旋转圆形图片

一个自定义View,记录一下思路和代码以备以后使用。

思路:

1.首先要画一个圆形图片和一个圆形背景图(通过自定义View);
2.自定义View基本步骤初始化属性,测量宽高和中心点,然后绘制图片;
3.通过handler实现图片的角度旋转.然后然后就慢慢撸.

效果图:

1、废话不多直接上代码

public class MusicPlayerView extends View {
 private static final long ROTATE_DELAY = 5;//旋转动作时间
 private int mRotateDegrees;//旋转的角度
 private Handler mRotate;
 private int mWidth;
 private int mHeight;
 private float mCenterX;
 private float mCenterY;
 private RectF rectF;
 private Bitmap mBitmapCover;
 private float mCoverScale;
 private BitmapShader mShader;
 private Paint paint;
 private boolean isRotating;
 private final Runnable mRunnableRotate = new Runnable() {
  @Override
  public void run() {
   if (isRotating) {
    updateCoverRotate();
    mRotate.postDelayed(mRunnableRotate, ROTATE_DELAY);
   }
  }
 };

 /**
  * 更新封面角度,重新绘制图片
  */

 private void updateCoverRotate() {
  mRotateDegrees += 1;
  mRotateDegrees = mRotateDegrees % 360;
  postInvalidate();
 }

 /**
  * 判读是否在旋转
  * @return
  */
 public boolean isRotating() {
  return isRotating;
 }

 /**
  * 开始旋转图片
  */
 public void start(){
  isRotating=true;
  mRotate.removeCallbacksAndMessages(null);
  mRotate.postDelayed(mRunnableRotate,ROTATE_DELAY);
  postInvalidate();
 }

 /**
  * 停止图片旋转
  */
 public void stop(){
  isRotating = false;
  postInvalidate();
 }

 /**
  * 通过本地图片设置封面图
  */
 public void setCoverDrawable(int coverDrawable) {
  Drawable drawable = getContext().getResources().getDrawable(coverDrawable);
  mBitmapCover = drawableToBitmap(drawable);
  createShader();
  postInvalidate();
 }
 /**
  * 网络图片加载使用Picasso图片加载工具
  *
  * @param imageUrl
  */
 public void setCoverURL(String imageUrl) {
  Picasso.with(getContext()).load(imageUrl).into(target);
 }

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

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

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

 /**
  * 初始化View资源
  *
  * @param context
  * @param attrs
  */
 private void init(Context context, AttributeSet attrs) {
  setWillNotDraw(false);
  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.play_view);
  Drawable mDrawableCover = a.getDrawable(R.styleable.play_view_cover);
  if (mDrawableCover != null) {
   mBitmapCover = drawableToBitmap(mDrawableCover);
  }
  a.recycle();
  mRotateDegrees = 0;
  //通过handler更新图片角度
  mRotate = new Handler();
  rectF = new RectF();
 }

 /**
  * 测量宽高,设置中心点中心点位置,创建阴影
  *
  * @param widthMeasureSpec
  * @param heightMeasureSpec
  */

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  mWidth = MeasureSpec.getSize(widthMeasureSpec);
  mHeight = MeasureSpec.getSize(heightMeasureSpec);
  int minSide = Math.min(mWidth, mHeight); //取宽高最小值设置图片宽高
  mWidth = minSide;
  mHeight = minSide;
  setMeasuredDimension(mWidth, mHeight);  //重新设置宽高
  //中心点位置
  mCenterX = mWidth / 2f;
  mCenterY = mHeight / 2f;
  //设置图片显示位置
  rectF.set(20.0f, 20.0f, mWidth - 20.0f, mHeight - 20.0f);
  createShader();
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (mShader == null) {
   return;
  }
  //画封面图片 判读图片的中心距离xy,算出边角大小,然后画圆
  float radius = mCenterX <= mCenterY ? mCenterX - 75.0f : mCenterY - 75.0f;
  canvas.rotate(mRotateDegrees, mCenterX, mCenterY);
  canvas.drawCircle(mCenterX, mCenterY, radius, paint);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:

    break;
  }
  return super.onTouchEvent(event);
 }

 private Target target = new Target() {
  @Override
  public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
   mBitmapCover = bitmap;
   createShader();
   postInvalidate();
  }

  @Override
  public void onBitmapFailed(Drawable errorDrawable) {

  }

  @Override
  public void onPrepareLoad(Drawable placeHolderDrawable) {

  }
 };
 private int mCoverColor = Color.YELLOW;

 private void createShader() {
  if (mWidth == 0) {
   return;
  }
  if (mBitmapCover == null) { //如果封面为为创建默认颜色
   mBitmapCover = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
   mBitmapCover.eraseColor(mCoverColor);
  }
  mCoverScale = ((float) mWidth) / (float) mBitmapCover.getWidth();
  //创建缩放后的bitmap
  mBitmapCover = Bitmap.createScaledBitmap(mBitmapCover,
    (int) (mBitmapCover.getWidth() * mCoverScale), (int) (mBitmapCover.getHeight() * mCoverScale), true);
  mShader = new BitmapShader(mBitmapCover, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setShader(mShader);
 }

 /**
  * 将drawable转换为位图 为BitmapShader准备
  *
  * @param drawable
  * @return
  */
 private Bitmap drawableToBitmap(Drawable drawable) {
  if (drawable instanceof BitmapDrawable) {
   return ((BitmapDrawable) drawable).getBitmap();
  }
  int width = drawable.getIntrinsicWidth();
  width = width > 0 ? width : 1;
  int height = drawable.getIntrinsicHeight();
  height = height > 0 ? height : 1;
  Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
  drawable.draw(canvas);
  return bitmap;
 }
}

2.差点忘记一个attrs属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="play_view">
  <attr name="cover" format="integer"/>
 </declare-styleable>
</resources>

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

您可能感兴趣的文章:

  • Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍
  • Android中利用matrix 控制图片的旋转、缩放、移动
  • Android 图片缩放与旋转的实现详解
  • Android实现图片反转、翻转、旋转、放大和缩小
  • Android UI之ImageView实现图片旋转和缩放
  • 基于Android 实现图片平移、缩放、旋转同时进行
  • android图片处理之让图片一直匀速旋转
  • 解决android有的手机拍照后上传图片被旋转的问题
  • Android部分手机拍照后获取的图片被旋转问题的解决方法
  • Android使用Matrix旋转图片模拟碟片加载过程
(0)

相关推荐

  • Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍

    主要介绍Android中如何使用rotate实现图片不停旋转的效果.Android 平台提供了两类动画,一类是 Tween 动画,即通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果:第二类是 Frame 动画,即顺序播放事先做好的图像,跟电影类似.本文分析 Tween动画的rotate实现旋转效果. 在新浪微博客户端中各个操作进行中时activity的右上角都会有个不停旋转的图标,类似刷新的效果,给用户以操作中的提示.这种非模态的提示方式推荐使用,那么下面就分享下如何实现这种效果

  • 解决android有的手机拍照后上传图片被旋转的问题

    需求:做仿新浪发微博的项目,能够上传图片还有两外一个项目用到手机拍摄图片,这两个都需要把图片上传到服务器 遇到问题:有的手机拍摄的图片旋转90度,有的图片旋转了180度,有的手机是正常的,服务器要求的是正的,这样问题就来了,不能用户发个照片在微博上看到的是被旋转了的啊,另外一个项目里旋转了的图片直接匹配出现问题,这个更严重. 解决:开始的时候在网上没有找到很好的解决办法,谷歌百度的搜了一通,想到第一种解决方式,当手机拍照结束,在返回结果处理里面立即跳转到一个新的页面,在新的页面里让用户自己手动去

  • Android实现图片反转、翻转、旋转、放大和缩小

    ********************************************************************** android 实现图片的翻转 ********************************************************************** Resources res = this.getContext().getResources(); img = BitmapFactory.decodeResource(res, R.

  • Android使用Matrix旋转图片模拟碟片加载过程

    今天实现了一个模拟碟片加载过程的小demo,在此展示一下.由于在公司,不好截取动态图片,因此就在这截取两张静态图片看看效果先. 下面简单的将代码列出来. setp1.准备两张用于旋转的图片,如下:loading_disc.png是第一张图片,loading_light.png是第二张图片.      step2.自定义一个View,用来控制这两个图片的旋转.com.oyp.loadingdisk.LoadingDiscView.java package com.oyp.loadingdisk;

  • Android 图片缩放与旋转的实现详解

    本文使用Matrix实现Android实现图片缩放与旋转.示例代码如下: 复制代码 代码如下: package com.android.matrix;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.graphics.drawable.BitmapDrawable

  • 基于Android 实现图片平移、缩放、旋转同时进行

    前言 之前因为项目需求,其中使用到了图片的单击显示取消,图片平移缩放功能,昨天突然想再加上图片的旋转功能,在网上看了很多相关的例子,可是没看到能同时实现我想要的功能的. 需求: (1)图片平移.缩放.旋转等一系列操作后,图片需要自动居中显示. (2)图片旋转后选自动水平显示或者垂直显示 (3)图片在放大缩小的同时都能旋转 Demo实现部分效果截图 Demo主要代码 Java MainActivity.java package com.practice.noyet.rotatezoomimagev

  • Android中利用matrix 控制图片的旋转、缩放、移动

    本文主要讲解利用android中Matrix控制图形的旋转缩放移动,具体参见一下代码: 复制代码 代码如下: /**  * 使用矩阵控制图片移动.缩放.旋转  */  public class CommonImgEffectView extends View { private Context context ;      private Bitmap mainBmp , controlBmp ;      private int mainBmpWidth , mainBmpHeight , c

  • android图片处理之让图片一直匀速旋转

    本文是在我的文章android图片处理,让图片变成圆形 的基础上继续写的,可以去看看,直接看也没关系,也能看懂 1.首先在res文件夹下创建一个名字为anim的文件夹,名字不要写错  2.在anim里面创建一个xlm文件:img_animation.xml,这个名字随便写都可以,注意不要大写,里面的代码如下: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http:/

  • Android UI之ImageView实现图片旋转和缩放

    这一篇,给大家介绍一下ImageView控件的使用,ImageView主要是用来显示图片,可以对图片进行放大.缩小.旋转的功能. android:sacleType属性指定ImageVIew控件显示图片的方式,例如:center表示图像以不缩放的方式显示在ImageView控件的中心,如果设置为fitCenter,表示图像按照比例缩放至合适的位置,并在ImageView控件的中心. 首先我们开发一个简单的案例,实现图片的放大缩小和旋转: 先看看实现的效果: 缩放截图1: 缩放截图2: 旋转截图1

  • Android部分手机拍照后获取的图片被旋转问题的解决方法

    调用Android系统拍照功能后,三星手机拍摄后的照片被旋转了90度,横着拍给你变成竖的,竖的拍给你变成横的.其它品牌的手机都是正常的,就三星出现这个怪事. 在Android适配上,我原来一直以为国内的小米手机够奇葩了,结果还有更奇葩的!你说你没事旋转照片干啥,实在是猜不透其居心何在,纯粹是在给开发者制造麻烦啊! 解决办法是获取到拍照后照片被旋转的角度,再旋转回去就好了. 具体思路: 1.首先在调用拍照方法时,保存拍照后的相片原图,得到原图路径,(PhotoBitmapUtils是我自己写的一个

随机推荐