最近遇到新需求 不论用户上传什么形状的头像 展示的时候都要显示成圆形 且头像背后是有背景图的 。
于是想到了 将控件变圆 这样可以任意适配了
先上效果图
下图为方形头像
而此处展示为圆形
下面展示下 重写的imageview 实质是用canvas去画控件的四个角
- /*
- * 文 件 名: MyImageView.java
- * 版 权: Linkage Technology Co., Ltd. Copyright 2010-2011, All rights reserved
- * 描 述: <描述>
- * 版 本: <版本号>
- * 创 建 人: Wuhq
- * 创建时间: 2013-12-11
- */
- package com.suo.myimage;
- import android.content.Context;
- import android.content.res.TypedArray;
- import android.graphics.Bitmap;
- import android.graphics.Canvas;
- import android.graphics.Color;
- import android.graphics.Paint;
- import android.graphics.Path;
- import android.graphics.PorterDuff;
- import android.graphics.PorterDuffXfermode;
- import android.graphics.RectF;
- import android.graphics.Bitmap.Config;
- import android.util.AttributeSet;
- import android.widget.ImageView;
- /**
- * <一句话功能简述>
- * <功能详细描述>
- *
- * @author Wuhq
- * @version [版本号, 2013-12-11]
- * @see [相关类/方法]
- * @since [产品/模块版本]
- */
- public class MyImageView extends ImageView
- {
- private Paint paint;
- private int roundWidth = 180; //这里的宽高很关键
- private int roundHeight = 180; //这里的宽高很关键
- private Paint paint2;
- public MyImageView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- init(context, attrs);
- }
- public MyImageView(Context context, AttributeSet attrs) {
- super(context, attrs);
- init(context, attrs);
- }
- public MyImageView(Context context) {
- super(context);
- init(context, null);
- }
- private void init(Context context, AttributeSet attrs) {
- if(attrs != null) {
- TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundAngleImageView);
- roundWidth= a.getDimensionPixelSize(R.styleable.RoundAngleImageView_roundWidth, roundWidth);
- roundHeight= a.getDimensionPixelSize(R.styleable.RoundAngleImageView_roundHeight, roundHeight);
- }else {
- float density = context.getResources().getDisplayMetrics().density;
- roundWidth = (int) (roundWidth*density);
- roundHeight = (int) (roundHeight*density);
- }
- paint = new Paint();
- paint.setColor(Color.WHITE);
- paint.setAntiAlias(true);
- paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
- paint2 = new Paint();
- paint2.setXfermode(null);
- }
- @Override
- public void draw(Canvas canvas) {
- Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
- Canvas canvas2 = new Canvas(bitmap);
- super.draw(canvas2);
- drawLiftUp(canvas2);
- drawRightUp(canvas2);
- drawLiftDown(canvas2);
- drawRightDown(canvas2);
- canvas.drawBitmap(bitmap, 0, 0, paint2);
- bitmap.recycle();
- }
- private void drawLiftUp(Canvas canvas) {
- Path path = new Path();
- path.moveTo(0, roundHeight);
- path.lineTo(0, 0);
- path.lineTo(roundWidth, 0);
- path.arcTo(new RectF(
- 0,
- 0,
- roundWidth*2,
- roundHeight*2),
- -90,
- -90);
- path.close();
- canvas.drawPath(path, paint);
- }
- private void drawLiftDown(Canvas canvas) {
- Path path = new Path();
- path.moveTo(0, getHeight()-roundHeight);
- path.lineTo(0, getHeight());
- path.lineTo(roundWidth, getHeight());
- path.arcTo(new RectF(
- 0,
- getHeight()-roundHeight*2,
- 0+roundWidth*2,
- getHeight()),
- 90,
- 90);
- path.close();
- canvas.drawPath(path, paint);
- }
- private void drawRightDown(Canvas canvas) {
- Path path = new Path();
- path.moveTo(getWidth()-roundWidth, getHeight());
- path.lineTo(getWidth(), getHeight());
- path.lineTo(getWidth(), getHeight()-roundHeight);
- path.arcTo(new RectF(
- getWidth()-roundWidth*2,
- getHeight()-roundHeight*2,
- getWidth(),
- getHeight()), 0, 90);
- path.close();
- canvas.drawPath(path, paint);
- }
- private void drawRightUp(Canvas canvas) {
- Path path = new Path();
- path.moveTo(getWidth(), roundHeight);
- path.lineTo(getWidth(), 0);
- path.lineTo(getWidth()-roundWidth, 0);
- path.arcTo(new RectF(
- getWidth()-roundWidth*2,
- 0,
- getWidth(),
- 0+roundHeight*2),
- -90,
- 90);
- path.close();
- canvas.drawPath(path, paint);
- }
- }
这是类文件 注意我将控件宽高置为了屏幕宽度的一半 由于我机型分辨率是1280*720 所以一半便是360 所以在上面的自定义imageview里宽高再取一半便是180 这也就是变成圆形的关键 你们可以动态去获取 我就偷懒写死了。
- package com.suo.myimage;
- import android.os.Bundle;
- import android.app.Activity;
- import android.content.Context;
- import android.view.Menu;
- import android.view.WindowManager;
- import android.widget.ImageView;
- import android.widget.LinearLayout;
- import android.widget.RelativeLayout;
- public class MainActivity extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- MyImageView image = (MyImageView) findViewById(R.id.image);
- WindowManager wm = (WindowManager)getSystemService(Context.WINDOW_SERVICE);
- int width = wm.getDefaultDisplay().getWidth()/2;//这里我将控件宽高设为屏幕一半 正方形
- int height = width;
- //更改该imageview的宽高并重构实现圆角
- RelativeLayout.LayoutParams linearParams =(RelativeLayout.LayoutParams) image.getLayoutParams();
- linearParams.width = width;
- linearParams.height = height;
- image.invalidate();
- }
- }
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context=".MainActivity"
- android:background="@drawable/aa" >
- <com.suo.myimage.MyImageView
- android:id="@+id/image"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:src="@drawable/bb"
- android:layout_margin="5dp"/>
- </RelativeLayout>