Android 仿QQ頭像自定義截取功能
看了Android版QQ的自定義頭像功能,決定自己實(shí)現(xiàn),隨便熟悉下android繪制和圖片處理這一塊的知識(shí)。
先看看效果:
思路分析:
這個(gè)效果可以用兩個(gè)View來(lái)完成,上層View是一個(gè)遮蓋物,繪制半透明的顏色,中間挖了一個(gè)圓;下層的View用來(lái)顯示圖片,具備移動(dòng)和縮放的功能,并且能截取某區(qū)域內(nèi)的圖片。
涉及到的知識(shí)點(diǎn):
1.Matrix,圖片的移動(dòng)和縮放
2.Paint的setXfermode方法
3.圖片放大移動(dòng)后,截取一部分
編碼實(shí)現(xiàn):
自定義三個(gè)View:
1.下層View:ClipPhotoView
2.上層遮蓋View:ClipPhotoCircleView
3.布局文件:ClipPhotoLayout,實(shí)現(xiàn)兩層View的布局,且作為整個(gè)功能的facade
ClipPhotoCircleView代碼:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawMask(canvas); } /** * 繪制蒙版 */ private void drawMask(Canvas canvas) { //畫背景顏色 Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas c1 = new Canvas(bitmap); c1.drawARGB(150, 0, 0, 0); Paint strokePaint = new Paint(); strokePaint.setAntiAlias(true); strokePaint.setColor(Color.WHITE); strokePaint.setStyle(Paint.Style.STROKE); strokePaint.setStrokeWidth(STROKE_WIDTH); c1.drawCircle(getWidth() / 2, getHeight() / 2, getRadius(), strokePaint); //畫圓 Bitmap circleBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas c2 = new Canvas(circleBitmap); Paint circlePaint = new Paint(); circlePaint.setStyle(Paint.Style.FILL); circlePaint.setColor(Color.RED); circlePaint.setAntiAlias(true); c2.drawCircle(getWidth() / 2, getHeight() / 2, getRadius(), circlePaint); //兩個(gè)圖層合成 Paint paint = new Paint(); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); c1.drawBitmap(circleBitmap, 0, 0, paint); paint.setXfermode(null); canvas.drawBitmap(bitmap, 0, 0, null); }
使用了setXfermode,Mode為DST_OUT,如下圖:
ClipPhotoView代碼:
/** * Created by caocong on 10/9/16. * 顯示圖片的view,可以托動(dòng)和縮放 */ public class ClipPhotoView extends ImageView implements View.OnTouchListener, ScaleGestureDetector.OnScaleGestureListener { private static final String TAG = ClipPhotoView.class.getSimpleName(); //最大縮放比例 private static final float MAX_SCALE = 4.0f; //最小縮放比例 private static float MIN_SCALE = 1.0f; //matrix array private static final float MATRIX_ARR[] = new float[9]; /** * 狀態(tài) */ private static final class Mode { // 初始狀態(tài) private static final int NONE = 0; //托動(dòng) private static final int DRAG = 1; //縮放 private static final int ZOOM = 2; } //當(dāng)前狀態(tài) private int mMode = Mode.NONE; //縮放手勢(shì) private ScaleGestureDetector mScaleDetector; //矩陣 private Matrix mMatrix = new Matrix(); //托動(dòng)時(shí)手指按下的點(diǎn) private PointF mPrevPointF = new PointF(); //截取的圓框的半徑 private int mRadius; //第一次 private boolean firstTime = true; public ClipPhotoView(Context context) { this(context, null); } public ClipPhotoView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ClipPhotoView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mScaleDetector = new ScaleGestureDetector(context, this); mRadius = Util.getRadius(getContext()); // 必須設(shè)置才能觸發(fā) setOnTouchListener(this); setScaleType(ScaleType.MATRIX); } /** * 初始化 */ private void init() { Drawable drawable = getDrawable(); if (drawable == null) { //throw new IllegalArgumentException("drawable can not be null"); return; } initPosAndScale(); } /** * 初始化縮放比例 */ private void initPosAndScale() { if (firstTime) { Drawable drawable = getDrawable(); int width = getWidth(); int height = getHeight(); //初始化 int dw = drawable.getIntrinsicWidth(); int dh = drawable.getIntrinsicHeight(); float scaleX = 1.0f; float scaleY = 1.0f; //是否已經(jīng)做過(guò)縮放處理 boolean isScaled = false; if (width < getDiameter()) { scaleX = getDiameter() * 1.0f / width; isScaled = true; } if (height < getDiameter()) { scaleY = getDiameter() * 1.0f / height; isScaled = true; } float scale = Math.max(scaleX, scaleY); if (isScaled) { MIN_SCALE = scale; } else { MIN_SCALE = Math.max((getDiameter() * 1.0f) / dw, getDiameter() * 1.0f / dh) + 0.01f; } Log.d(TAG, "scale=" + scale); mMatrix.postScale(scale, scale, getWidth() / 2, getHeight() / 2); mMatrix.postTranslate((width - dw) / 2, (height - dh) / 2); setImageMatrix(mMatrix); firstTime = false; } } @Override public boolean onScale(ScaleGestureDetector detector) { float scale = getScale(); float scaleFactor = detector.getScaleFactor(); if ((scale >= MIN_SCALE && scaleFactor > 1.0f) || (scale <= MAX_SCALE && scaleFactor < 1.0f)) { if (scale * scaleFactor <= MIN_SCALE) { scaleFactor = MIN_SCALE / scale; } else if (scale * scaleFactor >= MAX_SCALE) { scaleFactor = MAX_SCALE / scale; } mMatrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(), detector.getFocusY()); checkTrans(); setImageMatrix(mMatrix); } return true; } @Override public boolean onScaleBegin(ScaleGestureDetector detector) { mMode = Mode.ZOOM; return true; } @Override public void onScaleEnd(ScaleGestureDetector detector) { mMode = Mode.NONE; } @Override public boolean onTouch(View v, MotionEvent event) { if (getDrawable() == null) { return false; } mScaleDetector.onTouchEvent(event); switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: mMode = Mode.DRAG; mPrevPointF.set(event.getX(), event.getY()); break; case MotionEvent.ACTION_UP: mMode = Mode.NONE; break; case MotionEvent.ACTION_MOVE: if (mMode == Mode.DRAG && event.getPointerCount() == 1) { float x = event.getX(); float y = event.getY(); float dx = event.getX() - mPrevPointF.x; float dy = event.getY() - mPrevPointF.y; RectF rectF = getMatrixRectF(); // 如果寬度小于屏幕寬度,則禁止左右移動(dòng) if (rectF.width() <= getDiameter()) { dx = 0; } // 如果高度小雨屏幕高度,則禁止上下移動(dòng) if (rectF.height() <= getDiameter()) { dy = 0; } mMatrix.postTranslate(dx, dy); checkTrans(); //邊界判斷 setImageMatrix(mMatrix); mPrevPointF.set(x, y); } break; } return true; } /** * 移動(dòng)邊界檢查 */ private void checkTrans() { RectF rect = getMatrixRectF(); float deltaX = 0; float deltaY = 0; int width = getWidth(); int height = getHeight(); int horizontalPadding = (width - getDiameter()) / 2; int verticalPadding = (height - getDiameter()) / 2; // 如果寬或高大于屏幕,則控制范圍 ; 這里的0.001是因?yàn)榫葋G失會(huì)產(chǎn)生問(wèn)題 if (rect.width() + 0.01 >= getDiameter()) { if (rect.left > horizontalPadding) { deltaX = -rect.left + horizontalPadding; } if (rect.right < width - horizontalPadding) { deltaX = width - horizontalPadding - rect.right; } } if (rect.height() + 0.01 >= getDiameter()) { if (rect.top > verticalPadding) { deltaY = -rect.top + verticalPadding; } if (rect.bottom < height - verticalPadding) { deltaY = height - verticalPadding - rect.bottom; } } mMatrix.postTranslate(deltaX, deltaY); } /** * 得到直徑 */ public int getDiameter() { return mRadius * 2; } /** * 獲得縮放值 * * @return */ private float getScale() { return getMatrixValue(Matrix.MSCALE_X); } private float getMatrixValue(int index) { mMatrix.getValues(MATRIX_ARR); return MATRIX_ARR[index]; } /** * 獲得Matrix的RectF */ private RectF getMatrixRectF() { Matrix matrix = mMatrix; RectF rect = new RectF(); Drawable d = getDrawable(); if (null != d) { rect.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight()); matrix.mapRect(rect); } return rect; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); init(); } /** * 截取圖片 * * @return */ Bitmap clip() { Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); draw(canvas); int x = (getWidth() - getDiameter()) / 2; int y = (getHeight() - getDiameter()) / 2; return Bitmap.createBitmap(bitmap, x, y, getDiameter(), getDiameter()); } }
縮放和移動(dòng)使用了Matrix的方法postScale()和postTranslate,要注意控制邊界。
截圖的代碼在clip()方法中,原理:新建一個(gè)空白Bitmap,和屏幕一樣大的尺寸,然后將當(dāng)前View繪制的內(nèi)容復(fù)制到到這個(gè)Bitmap中,然后截取該Bitmap的一部分。
ClipPhotoLayout代碼:
public class ClipPhotoLayout extends FrameLayout { private ClipPhotoCircleView mCircleView; private ClipPhotoView mPhotoView; public ClipPhotoLayout(Context context) { this(context, null); } public ClipPhotoLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ClipPhotoLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mCircleView = new ClipPhotoCircleView(getContext()); mPhotoView = new ClipPhotoView(getContext()); android.view.ViewGroup.LayoutParams lp = new LinearLayout.LayoutParams( android.view.ViewGroup.LayoutParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT); addView(mPhotoView, lp); addView(mCircleView, lp); } public void setImageDrawable(Drawable drawable) { mPhotoView.setImageDrawable(drawable); } public void setImageDrawable(int resId) { setImageDrawable(getContext().getDrawable(resId)); } public Bitmap clipBitmap() { return mPhotoView.clip(); } }
測(cè)試MainActivity:
public class MainActivity extends Activity { private ClipPhotoLayout mClipPhotoLayout; private int[] pictures = {R.drawable.mingren, R.drawable.cute, R.drawable.tuxi}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.scale); setTitle("移動(dòng)和縮放"); mClipPhotoLayout = (ClipPhotoLayout) findViewById(R.id.clip_layout); mClipPhotoLayout.setImageDrawable(pictures[0]); } public void doClick(View view) { Bitmap bitmap = mClipPhotoLayout.clipBitmap(); Intent intent = new Intent(this, ResultActivity.class); intent.putExtra("photo", bitmap); startActivity(intent); } }
MainActivity的布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.caocong.image.widget.ClipPhotoLayout android:id="@+id/clip_layout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.0"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="doClick" android:text="clip" /> </LinearLayout>
以上所述是小編給大家介紹的Android 仿QQ頭像自定義截取功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android Bitmap的截取及狀態(tài)欄的隱藏和顯示功能
- Android實(shí)現(xiàn)bitmap指定區(qū)域滑動(dòng)截取功能
- android 手機(jī)截取長(zhǎng)屏實(shí)例代碼
- 解析Android截取手機(jī)屏幕兩種實(shí)現(xiàn)方案
- Android實(shí)現(xiàn)拍照截取和相冊(cè)圖片截取
- Android個(gè)人中心的頭像上傳,圖片編碼及截取實(shí)例
- Android開(kāi)發(fā)獲取短信的內(nèi)容并截取短信
- Android中截取當(dāng)前屏幕圖片的實(shí)例代碼
- Android截取視頻幀并轉(zhuǎn)化為Bitmap示例
- Android截取指定View為圖片的實(shí)現(xiàn)方法
相關(guān)文章
Android中傳遞對(duì)象的三種方法的實(shí)現(xiàn)
本篇文章主要介紹了Android中傳遞對(duì)象的三種方法的實(shí)現(xiàn),可以通過(guò)Bundle、Intent或者JSON字符串,有興趣的可以了解一下。2017-02-02Android實(shí)現(xiàn)網(wǎng)絡(luò)多線程文件下載
這篇文章主要介紹了Android實(shí)現(xiàn)網(wǎng)絡(luò)多線程文件下載的相關(guān)資料,需要的朋友可以參考下2016-03-03詳解Android App中創(chuàng)建ViewPager組件的方法
這篇文章主要介紹了詳解Android App中創(chuàng)建ViewPager組件的方法,ViewPager最基本的功能就是可以使視圖滑動(dòng),需要的朋友可以參考下2016-03-03Android布局控件View?ViewRootImpl?WindowManagerService關(guān)系
這篇文章主要為大家介紹了Android布局控件View?ViewRootImpl?WindowManagerService關(guān)系示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Android4.0平板開(kāi)發(fā)之隱藏底部任務(wù)欄的方法
這篇文章主要介紹了Android4.0平板開(kāi)發(fā)之隱藏底部任務(wù)欄的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android隱藏于顯示底部任務(wù)欄的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Android自定義EditText實(shí)現(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了Android自定義EditText實(shí)現(xiàn)登錄界面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android提高之使用NDK把彩圖轉(zhuǎn)換灰度圖的方法
這篇文章主要介紹了Android使用NDK把彩圖轉(zhuǎn)換灰度圖的方法,在Android項(xiàng)目開(kāi)發(fā)中有一定的實(shí)用價(jià)值,需要的朋友可以參考下2014-08-08Flutter加載圖片流程之ImageProvider源碼示例解析
這篇文章主要為大家介紹了Flutter加載圖片流程之ImageProvider源碼示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04