自定义六角形头像图片控件

效果图

最近笔者的一个朋友又委托我帮忙写一个六角形展示，公司给出的效果图，朋友在网上找不到相应的Demo，于是向笔者求助，笔者最近又不是太忙，所以就欣然答应。于是笔者就随便在网上找了一个圆形头像显示图片随意改了一下，下面是效果图 Demo下载地址这里是六角形图片下载的地址 参考项目的地址这里是参考项目的地址 其实该起来也是非常的简单，下面就由笔者交单介绍一下项目的关键代码

项目的关键代码

声明一个画笔并设置BitmapShader

首先声明一个画图片的画笔，再给画笔设置shader

//用于画图片的画笔 private BitmapShader mBitmapShader; //创建一个BitmapShader对象，并从布局文件的src中获取图片对象，即mBitmap，并传递给BitmapShader mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); mBitmapPaint.setAntiAlias(true); //把BitmapShader设置给画笔 mBitmapPaint.setShader(mBitmapShader);

计算绘图的区域

计算绘图的区域，是一个矩形，后期会根据矩形来确定六角形六个点的坐标

//计算绘制图片的区域，并设置给mBorderRect /**计算绘图的区域及绘图的中心坐标*/ private final RectF mDrawableRect = new RectF(); mDrawableRect.set(calculateBounds()); mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f); /** * 计算绘制图片的区域 * @return */ private RectF calculateBounds() {int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight(); int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom(); int sideLength = Math.min(availableWidth, availableHeight); float left = getPaddingLeft() + (availableWidth - sideLength) / 2f; float top = getPaddingTop() + (availableHeight - sideLength) / 2f; return new RectF(left, top, left + sideLength, top + sideLength); }

绘制六边形

只要给画笔设置BitmapShader ，我们画什么样字的图形，图形所在位置的图片部分就可以显示出来，这时我们如果画个圆，图片就会成圆形，画个弧。图片就会成弧形，画个六角形，图片就会成六角形，所以你要更改图形的话就更改这里的代码 画六角形的话就用到path和canvas的drawpath方法了

//声明path对象 Path path=new Path(); //移动到定点 path.moveTo(mDrawableRect.centerX(),0); //下面是点与点之间的连线 path.lineTo((float) (mDrawableRadius*(1.0f-Math.sin(Math.PI/3.0f))),mDrawableRadius/2.0f); path.lineTo((float) (mDrawableRadius*(1.0f-Math.sin(Math.PI/3.0f))),mDrawableRadius*3/2.0f); path.lineTo(mDrawableRect.centerX(),mDrawableRadius*2); path.lineTo((float) (mDrawableRadius*(1.0f+Math.sin(Math.PI/3.0f))),mDrawableRadius*3/2.0f); path.lineTo((float) (mDrawableRadius*(1.0f+Math.sin(Math.PI/3.0f))),mDrawableRadius/2.0f); //连到第六个线时闭合路线 path.close(); //画六角形，就显示六角形图像 canvas.drawPath(path,mBitmapPaint);

添加一些自定义的属性

声明属性

在res文件夹下的values文件夹下创建一个attrs.xml文件 内容如下

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="HexagonImageView"> <attr name="civ_border_width" format="dimension" /> <attr name="civ_border_color" format="color" /> <attr name="civ_border_overlay" format="boolean" /> <attr name="civ_fill_color" format="color" /> </declare-styleable> </resources>

定义命名空间

使用时在布局文件的布局声明一下命名空间，即添加一下代码

xmlns:app="http://schemas.android.com/apk/res-auto"

末尾res-auto的意思在apk的res文件夹下自动寻找属性，这样我们就可以在控件里使用了

app:civ_border_color="@color/dark" app:civ_border_width="2dp"

下面是布局文件的代码

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/light" android:padding="@dimen/base_padding"> <com.example.hexagonimageview.view.HexagonImageView android:layout_width="160dp" android:layout_height="160dp" android:layout_centerInParent="true" android:src="@drawable/belle" app:civ_border_color="@color/dark" app:civ_border_width="2dp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/dark" android:padding="@dimen/base_padding"> <com.example.hexagonimageview.view.HexagonImageView android:layout_width="160dp" android:layout_height="160dp" android:layout_centerInParent="true" android:src="@drawable/belle" app:civ_border_color="@color/light" app:civ_border_width="2dp" /> </RelativeLayout> </LinearLayout>

在代码里处理属性

以上三步配置的属性并不起作用，我们只有在代码里处理才有用处我们一般会在构造函数里去处理，代码如下

public HexagonImageView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HexagonImageView, defStyle, 0); mBorderWidth=a.getDimensionPixelSize(R.styleable.HexagonImageView_civ_border_width, DEFAULT_BORDER_WIDTH); mBorderColor=a.getColor(R.styleable.HexagonImageView_civ_border_color, DEFAULT_BORDER_COLOR); mBorderOverlay=a.getBoolean(R.styleable.HexagonImageView_civ_border_overlay, DEFAULT_BORDER_OVERLAY); mFillColor=a.getColor(R.styleable.HexagonImageView_civ_fill_color, DEFAULT_FILL_COLOR); a.recycle(); init(); }

这样就可以获取在布局文件里配置的属性并进行处理了，这样一个完整的六角形自定义图片空间就完成了

注意

demo使用时需把res-values-attrs.xml的文件拷贝到对应的项目的res-values文件夹下 app:civ_border_color=”@color/dark”是指图片边框的颜色 app:civ_border_width=”2dp”是指图片边框的高度