转载请表明出处：http://blog.csdn.net/lmj623565791/article/details/39761281，本文出自：【张鸿洋的博客】

1、概述

前面已经写了关于检测手势识别的文章，如果不了解可以参考：Android 手势检测实战 打造支持缩放平移的图片预览效果（下）。首先本篇文章，将对之前博客的ZoomImageView代码进行些许的修改与改善，然后用到我们的本篇博客中去，实现仿微信的头像截取功能，当然了，个人觉得微信的截取头像功能貌似做得不太好，本篇博客准备去其糟粕，取其精华；最后还会见识到不一样的自定义控件的方式，也是在本人博客中首次出现，如果有兴趣可以读完本篇博客，希望可以启到抛砖引玉的效果。

2、效果分析

1、效果图：

我们来看看妹子的项链，嗯，妹子项链还是不错的~

2、效果分析

根据上面的效果，我们目测需要自定义两个控件，一个就是我们的可自由缩放移动的ImageView，一个就是那个白色的边框；然后一起放置到一个RelativeLayout中；最后对外公布一个裁剪的方法，返回一个Bitmap；

暂时的分析就这样，下面我们来写代码~

首先是白色框框那个自定义View，我们叫做ClipImageBorderView

3、ClipImageBorderView

分析下这个View，其实就是根据在屏幕中绘制一个正方形，正方形区域以外为半透明，绘制这个正方形需要与屏幕左右边距有个边距。

我们准备按如下图绘制：

按顺序在View的onDraw里面绘制上图中：1、2、3、4，四个半透明的区域，然后在中间正方形区域绘制一个正方形

下面看下代码：

[java] view plain copy

1. packagecom.zhy.view;
3. importandroid.content.Context;
4. importandroid.graphics.Canvas;
5. importandroid.graphics.Color;
6. importandroid.graphics.Paint;
7. importandroid.graphics.Paint.Style;
8. importandroid.util.AttributeSet;
9. importandroid.util.TypedValue;
10. importandroid.view.View;
11. /**
12. *@authorzhy
13. *
14. */
15. publicclassClipImageBorderViewextendsView
16. {
17. /**
18. *水平方向与View的边距
19. */
20. privateintmHorizontalPadding=20;
21. /**
22. *垂直方向与View的边距
23. */
24. privateintmVerticalPadding;
25. /**
26. *绘制的矩形的宽度
27. */
28. privateintmWidth;
29. /**
30. *边框的颜色，默认为白色
31. */
32. privateintmBorderColor=Color.parseColor("#FFFFFF");
33. /**
34. *边框的宽度单位dp
35. */
36. privateintmBorderWidth=1;
38. privatePaintmPaint;
40. publicClipImageBorderView(Contextcontext)
41. {
42. this(context,null);
43. }
45. publicClipImageBorderView(Contextcontext,AttributeSetattrs)
46. {
47. this(context,attrs,0);
48. }
50. publicClipImageBorderView(Contextcontext,AttributeSetattrs,intdefStyle)
51. {
52. super(context,attrs,defStyle);
53. //计算padding的px
54. mHorizontalPadding=(int)TypedValue.applyDimension(
55. TypedValue.COMPLEX_UNIT_DIP,mHorizontalPadding,getResources()
56. .getDisplayMetrics());
57. mBorderWidth=(int)TypedValue.applyDimension(
58. TypedValue.COMPLEX_UNIT_DIP,mBorderWidth,getResources()
59. .getDisplayMetrics());
60. mPaint=newPaint();
61. mPaint.setAntiAlias(true);
62. }
64. @Override
65. protectedvoidonDraw(Canvascanvas)
66. {
67. super.onDraw(canvas);
68. //计算矩形区域的宽度
69. mWidth=getWidth()-2*mHorizontalPadding;
70. //计算距离屏幕垂直边界的边距
71. mVerticalPadding=(getHeight()-mWidth)/2;
72. mPaint.setColor(Color.parseColor("#aa000000"));
73. mPaint.setStyle(Style.FILL);
74. //绘制左边1
75. canvas.drawRect(0,0,mHorizontalPadding,getHeight(),mPaint);
76. //绘制右边2
77. canvas.drawRect(getWidth()-mHorizontalPadding,0,getWidth(),
78. getHeight(),mPaint);
79. //绘制上边3
80. canvas.drawRect(mHorizontalPadding,0,getWidth()-mHorizontalPadding,
81. mVerticalPadding,mPaint);
82. //绘制下边4
83. canvas.drawRect(mHorizontalPadding,getHeight()-mVerticalPadding,
84. getWidth()-mHorizontalPadding,getHeight(),mPaint);
85. //绘制外边框
86. mPaint.setColor(mBorderColor);
87. mPaint.setStrokeWidth(mBorderWidth);
88. mPaint.setStyle(Style.STROKE);
89. canvas.drawRect(mHorizontalPadding,mVerticalPadding,getWidth()
90. -mHorizontalPadding,getHeight()-mVerticalPadding,mPaint);
92. }
94. }

我们直接预设了一个水平方向的边距，根据边距计算出正方形的边长，接下来就是按照上图分别会1、2、3、4四个区域，最后就是绘制我们的正方形~~

代码还是很简单的~~我们的ClipImageBorderView就搞定了，我们决定来测试一下：

布局文件：

[html] view plain copy

1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="@drawable/a">
7. <com.zhy.view.ClipImageBorderView
8. android:id="@+id/id_clipImageLayout"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent"/>
12. </RelativeLayout>

效果图：

故意放了个背景，没撒用，就是为了能看出效果，可以看到我们的框框绘制的还是蛮不错的~~嗯，这个框框距离屏幕左右两侧的距离应该抽取出来，嗯，后面再说~

4、ClipZoomImageView

我们准备对我们原先的ZoomImageView进行简单的修改，修改的地方：
1、在onGlobalLayout方法中，如果图片的宽或者高只要一个小于我们的正方形的边长，我们会直接把较小的尺寸放大至正方形的边长；如果图片的宽和高都大于我们的正方形的边长，我们仅仅把图片移动到我们屏幕的中央，不做缩放处理；

2、根据步骤1，我们会获得初始的缩放比例（默认为1.0f），然后SCALE_MID ， 与SCALE_MAX 分别为2倍和4倍的初始化缩放比例。

3、图片在移动过程中的边界检测完全根据正方形的区域，图片不会在移动过程中与正方形区域产生内边距

4、对外公布一个裁切的方法

部分代码：

[java] view plain copy

1. /**
2. *水平方向与View的边距
3. */
4. privateintmHorizontalPadding=20;
5. /**
6. *垂直方向与View的边距
7. */
8. privateintmVerticalPadding;
10. @Override
11. publicvoidonGlobalLayout()
12. {
13. if(once)
14. {
15. Drawabled=getDrawable();
16. if(d==null)
17. return;
18. Log.e(TAG,d.getIntrinsicWidth()+","+d.getIntrinsicHeight());
19. //计算padding的px
20. mHorizontalPadding=(int)TypedValue.applyDimension(
21. TypedValue.COMPLEX_UNIT_DIP,mHorizontalPadding,
22. getResources().getDisplayMetrics());
23. //垂直方向的边距
24. mVerticalPadding=(getHeight()-(getWidth()-2*mHorizontalPadding))/2;
26. intwidth=getWidth();
27. intheight=getHeight();
28. //拿到图片的宽和高
29. intdw=d.getIntrinsicWidth();
30. intdh=d.getIntrinsicHeight();
31. floatscale=1.0f;
32. if(dw<getWidth()-mHorizontalPadding*2
33. &&dh>getHeight()-mVerticalPadding*2)
34. {
35. scale=(getWidth()*1.0f-mHorizontalPadding*2)/dw;
36. }
38. if(dh<getHeight()-mVerticalPadding*2
39. &&dw>getWidth()-mHorizontalPadding*2)
40. {
41. scale=(getHeight()*1.0f-mVerticalPadding*2)/dh;
42. }
44. if(dw<getWidth()-mHorizontalPadding*2
45. &&dh<getHeight()-mVerticalPadding*2)
46. {
47. floatscaleW=(getWidth()*1.0f-mHorizontalPadding*2)
48. /dw;
49. floatscaleH=(getHeight()*1.0f-mVerticalPadding*2)/dh;
50. scale=Math.max(scaleW,scaleH);
51. }
53. initScale=scale;
54. SCALE_MID=initScale*2;
55. SCALE_MAX=initScale*4;
56. Log.e(TAG,"initScale="+initScale);
57. mScaleMatrix.postTranslate((width-dw)/2,(height-dh)/2);
58. mScaleMatrix.postScale(scale,scale,getWidth()/2,
59. getHeight()/2);
60. //图片移动至屏幕中心
61. setImageMatrix(mScaleMatrix);
62. once=false;
63. }
65. }
67. /**
68. *剪切图片，返回剪切后的bitmap对象
69. *
70. *@return
71. */
72. publicBitmapclip()
73. {
74. Bitmapbitmap=Bitmap.createBitmap(getWidth(),getHeight(),
75. Bitmap.Config.ARGB_8888);
76. Canvascanvas=newCanvas(bitmap);
77. draw(canvas);
78. returnBitmap.createBitmap(bitmap,mHorizontalPadding,
79. mVerticalPadding,getWidth()-2*mHorizontalPadding,
80. getWidth()-2*mHorizontalPadding);
81. }
83. /**
84. *边界检测
85. */
86. privatevoidcheckBorder()
87. {
89. RectFrect=getMatrixRectF();
90. floatdeltaX=0;
91. floatdeltaY=0;
93. intwidth=getWidth();
94. intheight=getHeight();
96. //如果宽或高大于屏幕，则控制范围
97. if(rect.width()>=width-2*mHorizontalPadding)
98. {
99. if(rect.left>mHorizontalPadding)
100. {
101. deltaX=-rect.left+mHorizontalPadding;
102. }
103. if(rect.right<width-mHorizontalPadding)
104. {
105. deltaX=width-mHorizontalPadding-rect.right;
106. }
107. }
108. if(rect.height()>=height-2*mVerticalPadding)
109. {
110. if(rect.top>mVerticalPadding)
111. {
112. deltaY=-rect.top+mVerticalPadding;
113. }
114. if(rect.bottom<height-mVerticalPadding)
115. {
116. deltaY=height-mVerticalPadding-rect.bottom;
117. }
118. }
119. mScaleMatrix.postTranslate(deltaX,deltaY);
121. }

这里贴出了改变的代码，完整的代码就不贴了，太长了，如果大家学习过前面的博客应该也会比较熟悉，若没有也没事，后面会提供源码。

贴代码的目的，第一让大家看下我们改变了哪些；第二，我想暴露出我们代码中的问题，我们设置了一个这样的变量：mHorizontalPadding = 20;这个是手动和ClipImageBorderView里面的成员变量mHorizontalPadding写的一致，也就是说这个变量，两个自定义的View都需要使用且需要相同的值，目前我们的做法，写死且每个View各自定义一个。这种做法不用说，肯定不好，即使抽取成自定义属性，两个View都需要进行抽取，且用户在使用的时候，还需要设置为一样的值，总觉得有点强人所难~~

5、不一样的自定义控件

现在我们考虑下：易用性。目前为止，其实我们的效果已经实现了，但是需要用户这么写布局文件：

[html] view plain copy

1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#aaaaaa">
7. <com.zhy.view.ZoomImageView
8. android:id="@+id/id_zoomImageView"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent"
11. android:scaleType="matrix"
12. android:src="@drawable/a"/>
14. <com.zhy.view.ClipImageView
15. android:layout_width="fill_parent"
16. android:layout_height="fill_parent"/>
18. </RelativeLayout>

然后这两个类中都有一个mHorizontalPadding变量，且值一样，上面也说过，即使抽取成自定义变量，也需要在布局文件中每个View中各写一次。so， we need change . 这样的耦合度太夸张了，且使用起来蹩脚。

于是乎，我决定把这两个控件想办法整到一起，用户使用时只需要声明一个控件：

怎么做呢，我们使用组合的思想来自定义控件，我们再声明一个控件，继承子RelativeLayout，然后在这个自定义RelativeLayout中通过代码添加这两个自定义的布局，并且设置一些公用的属性，具体我们就开始行动。

1、ClipImageLayout

我们自定义一个RelativeLayout叫做ClipImageLayout，用于放置我们的两个自定义View，并且由ClipImageLayout进行设置边距，然后传给它内部的两个View，这样的话，跟用户交互的就一个ClipImageLayout，用户只需要设置一次边距即可。

完整的ClipImageLayout代码：

[java] view plain copy

1. packagecom.zhy.view;
3. importandroid.content.Context;
4. importandroid.graphics.Bitmap;
5. importandroid.util.AttributeSet;
6. importandroid.util.TypedValue;
7. importandroid.widget.RelativeLayout;
9. importcom.zhy.clippic.R;
10. /**
11. *zhy
12. *@authorzhy
13. *
14. */
15. publicclassClipImageLayoutextendsRelativeLayout
16. {
18. privateClipZoomImageViewmZoomImageView;
19. privateClipImageBorderViewmClipImageView;
21. /**
22. *这里测试，直接写死了大小，真正使用过程中，可以提取为自定义属性
23. */
24. privateintmHorizontalPadding=20;
26. publicClipImageLayout(Contextcontext,AttributeSetattrs)
27. {
28. super(context,attrs);
30. mZoomImageView=newClipZoomImageView(context);
31. mClipImageView=newClipImageBorderView(context);
33. android.view.ViewGroup.LayoutParamslp=newLayoutParams(
34. android.view.ViewGroup.LayoutParams.MATCH_PARENT,
35. android.view.ViewGroup.LayoutParams.MATCH_PARENT);
37. /**
38. *这里测试，直接写死了图片，真正使用过程中，可以提取为自定义属性
39. */
40. mZoomImageView.setImageDrawable(getResources().getDrawable(
41. R.drawable.a));
43. this.addView(mZoomImageView,lp);
44. this.addView(mClipImageView,lp);
47. //计算padding的px
48. mHorizontalPadding=(int)TypedValue.applyDimension(
49. TypedValue.COMPLEX_UNIT_DIP,mHorizontalPadding,getResources()
50. .getDisplayMetrics());
51. mZoomImageView.setHorizontalPadding(mHorizontalPadding);
52. mClipImageView.setHorizontalPadding(mHorizontalPadding);
53. }
55. /**
56. *对外公布设置边距的方法,单位为dp
57. *
58. *@parammHorizontalPadding
59. */
60. publicvoidsetHorizontalPadding(intmHorizontalPadding)
61. {
62. this.mHorizontalPadding=mHorizontalPadding;
63. }
65. /**
66. *裁切图片
67. *
68. *@return
69. */
70. publicBitmapclip()
71. {
72. returnmZoomImageView.clip();
73. }
75. }

可以看到，现在用户需要使用头像裁切功能只需要声明下ClipImageLayout即可，完全避免了上述我们描述的问题，我们对用户屏蔽了两个真正实现的类。这个也是自定义控件的一种方式，希望可以借此抛砖引玉，大家能够更加合理的设计出自己的控件~~

好了，我们的ClipImageLayout搞定以后，下面看下如何使用~

6、用法

1、布局文件

[html] view plain copy

1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#aaaaaa">
7. <com.zhy.view.ClipImageLayout
8. android:id="@+id/id_clipImageLayout"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent"/>
12. </RelativeLayout>

2、MainActivity

[java] view plain copy

1. packagecom.zhy.clippic;
3. importjava.io.ByteArrayOutputStream;
5. importandroid.app.Activity;
6. importandroid.content.Intent;
7. importandroid.graphics.Bitmap;
8. importandroid.os.Bundle;
9. importandroid.view.Menu;
10. importandroid.view.MenuItem;
12. importcom.zhy.view.ClipImageLayout;
14. publicclassMainActivityextendsActivity
15. {
16. privateClipImageLayoutmClipImageLayout;
18. @Override
19. protectedvoidonCreate(BundlesavedInstanceState)
20. {
21. super.onCreate(savedInstanceState);
22. setContentView(R.layout.activity_main);
24. mClipImageLayout=(ClipImageLayout)findViewById(R.id.id_clipImageLayout);
26. }
28. @Override
29. publicbooleanonCreateOptionsMenu(Menumenu)
30. {
31. getMenuInflater().inflate(R.menu.main,menu);
32. returntrue;
33. }
35. @Override
36. publicbooleanonOptionsItemSelected(MenuItemitem)
37. {
38. switch(item.getItemId())
39. {
40. caseR.id.id_action_clip:
41. Bitmapbitmap=mClipImageLayout.clip();
43. ByteArrayOutputStreambaos=newByteArrayOutputStream();
44. bitmap.compress(Bitmap.CompressFormat.JPEG,100,baos);
45. byte[]datas=baos.toByteArray();
47. Intentintent=newIntent(this,ShowImageActivity.class);
48. intent.putExtra("bitmap",datas);
49. startActivity(intent);
51. break;
52. }
53. returnsuper.onOptionsItemSelected(item);
54. }
55. }

我们在menu里面体检了一个裁切的按钮，点击后把裁切好的图片传递给我们的ShowImageActivity

看一下眼menu的xml

[html] view plain copy

1. <menuxmlns:android="http://schemas.android.com/apk/res/android">
3. <item
4. android:id="@+id/id_action_clip"
5. android:icon="@drawable/actionbar_clip_icon"
6. android:showAsAction="always|withText"
7. android:title="裁切"/>
9. </menu>

3、ShowImageActivity

[java] view plain copy

1. packagecom.zhy.clippic;
4. importandroid.app.Activity;
5. importandroid.graphics.Bitmap;
6. importandroid.graphics.BitmapFactory;
7. importandroid.os.Bundle;
8. importandroid.widget.ImageView;
11. publicclassShowImageActivityextendsActivity
12. {
13. privateImageViewmImageView;
16. @Override
17. protectedvoidonCreate(BundlesavedInstanceState)
18. {
19. super.onCreate(savedInstanceState);
20. setContentView(R.layout.show);
23. mImageView=(ImageView)findViewById(R.id.id_showImage);
24. byte[]b=getIntent().getByteArrayExtra("bitmap");
25. Bitmapbitmap=BitmapFactory.decodeByteArray(b,0,b.length);
26. if(bitmap!=null)
27. {
28. mImageView.setImageBitmap(bitmap);
29. }
30. }
31. }

layout/show.xml

[html] view plain copy

1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffffff">
7. <ImageView
8. android:id="@+id/id_showImage"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_centerInParent="true"
12. android:src="@drawable/tbug"
13. />
15. </RelativeLayout>

好了，到此我们的高仿微信头像截取功能 就已经结束了~~希望大家可以从本篇博客中可以领悟到something~

最后我们把ClipImageLayout里面的mHorizontalPadding设置为50，贴个静态效果图~

ok ~~

源码点击下载

更多相关文章

1. Android篮球计分器App
2. Android(安卓)Studio目录结构浅析
3. Android用代码完成颜色渐变处理
4. 《Android第一行代码》书籍划重点记录
5. 布局之六GridLayout,Space
6. Xamrin开发安卓笔记（一）
7. Android(安卓)弹出框LemonBubble提示控件
8. Android(安卓)Studio Tips（OSX）
9. [置顶] 声波通信（声波传输）在iOS、Android中的应用场景深入分析（含

随机推荐

1. c++如何获取数值极值的办法
2. ADO调用分页查询存储过程的实例讲解_实用
3. 关于c++中的引用总结
4. asp.net部署到IIS常见问题的解决方法_实
5. 实例详解sort()函数的原理和使用方法
6. 基于MVC5中的Model层开发数据注解_实用技
7. 代码详解AVL树的插入
8. 厌倦写代码的人是如何做软件开发的
9. 用户管理和权限和设置——mysql
10. asp.net core封装layui组件的示例详解