Android自定義控件仿QQ編輯和選取圓形頭像
android大家都有很多需要用戶上傳頭像的需求,有的是選方形,有的是圓角矩形,有的是圓形。
首先我們要做一個處理圖片的自定義控件,把傳入的圖片,經(jīng)過用戶選擇區(qū)域,處理成一定的形狀。
有的app是通過在圖片上畫一個矩形區(qū)域表示選中的內(nèi)容,有的則是通過雙指放大縮小,拖動圖片來選取圖片。圓形頭像,還是改變圖片比較好
圓形區(qū)域可調(diào)節(jié)大小。
這個自定義View的圖像部分分為三個,背景圖片,半透明蒙層,和亮色區(qū)域……還是直接貼代碼得了
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; // 選區(qū)半徑 private float radius = 150f; // 圓形選區(qū)的邊界 private RectF circleBounds; // 最大放大倍數(shù) 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達(dá)到縮放平移的目的 } // 保存圖層,以免清除時清除了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) { // 判斷長寬比,當(dāng)長寬比太長會太寬是,以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);// 這個矩形僅為保存第一次的狀態(tài) 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;// 標(biāo)志位,記錄兩指事件處理后,抬起一只手也不處理拖動 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(); // 不允許拖過圓形區(qū)域,不能使圓形區(qū)域內(nèi)空白 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; // 不允許拖過圓形區(qū)域,不能使圓形區(qū)域內(nèi)空白 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;// 恢復(fù)標(biāo)志位 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); // 以雙指中心作為圖片縮放的支點(diǎn) 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) { // 無法縮小到比選區(qū)還小,或到達(dá)最大倍數(shù) return; } // 把dst區(qū)域放大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; // 縮放同樣不允許使圓形區(qū)域空白 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))); } // 生成目前選區(qū)指定大小的圓形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的當(dāng)前亮圓形中的圖片 Bitmap result = imageView.extractBitmap(300); //壓縮成png FileOutputStream out = new FileOutputStream(new File(filePath)); result.compress(Bitmap.CompressFormat.PNG, 100, out); //上傳與顯示 ... }
需求是模仿QQ的,本人不太會講解,做著玩玩。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義View之繪制圓形頭像功能
- Android Studio實(shí)現(xiàn)帶邊框的圓形頭像
- Android一行代碼實(shí)現(xiàn)圓形頭像
- Android仿QQ圓形頭像個性名片
- Android利用CircleImageView實(shí)現(xiàn)圓形頭像的方法
- 利用Android中BitmapShader制作自帶邊框的圓形頭像
- Android使用CircleImageView實(shí)現(xiàn)圓形頭像的方法
- Android中使用CircleImageView和Cardview制作圓形頭像的方法
- Android實(shí)現(xiàn)本地上傳圖片并設(shè)置為圓形頭像
- Android實(shí)現(xiàn)帶圓環(huán)的圓形頭像
相關(guān)文章
Android實(shí)現(xiàn)簡單的自定義ViewGroup流式布局
本文我們將一起復(fù)習(xí)一下ViewGroup的測量布局方式。然后會以入門級的 FlowLayout 為例,來看看流式布局是如何測量與布局的,感興趣的可以了解一下2022-12-12ScrollView與ListView合用(正確計(jì)算Listview的高度)的問題解決
最近做項(xiàng)目中用到ScrollView和ListView一起使用的問題,顯示的時候ListView不能完全正確的顯示,查了好多資料終于成功解決:2013-05-05