六芒(bian)星(xing)ImageView

六芒星写轮眼

今天突然看到自己的发泥盒(一个六边形的盒子)，所以突发奇想想封装一个这样的ImageView控件，之后用，有什么用，不告诉你。发泥盒我就不发照片了，以免认为我在做广告。

PS：我只写干货，如果你发现文中有不是干货的地方，你就当没看见。

题目可能有些不清楚，其实是要实现一个正六边形的ImageView。感觉这个也没什么好写的。圆形呀，圆角矩形呀，类似的这些基本都写烂了，你就随便看看好了。

实现这个东西，本人想到两种方法：

1. Xformode
2. Shader

Xformode可以说是处理这种万能的方法。用过的应该都懂。但是它的性能不高，因为每次都它要画两次，一个蒙板一个原图，然后两个图叠加做相应的计算。所以如果不是其他方法都不行，我是绝对不会用它的。

那么Shader貌似是一个好的方案，但是Shader就是需要自己想办法画出一个正六边形了。这个时候我内心OS了一下。靠，我要是画不出个正六边形，我就不做Android了!

正六边形画法

正六边形

在Android中的画法和现实中的画法基本差不多。这个其实看成一个简单的多边形，使用Android中的Path就好了。只是需要确定几个关键点的坐标。这里我们假设宽度撑满。高度居中。那么我们的代码基本就是这个样子：

正六边形的边长l就是宽的一半，正六边形的高是 Math.sqrt(3)*l ，然后可以算出正六边形顶部的top值，之后只要依次遍历连接每个点，即可画出正六边形。

代码如下：

float l = (float) (getWidth() / 2);
float h = (float) (Math.sqrt(3)*l);
float top = (getHeight() - h) / 2  ;
mPath.reset();
mPath.moveTo(l/2,top);
mPath.lineTo(0,h/2+top);
mPath.lineTo(l/2,h+top);
mPath.lineTo((float) (l*1.5),h+top);
mPath.lineTo(2*l,h/2+top);
mPath.lineTo((float) (l*1.5),top);
mPath.lineTo(l/2,top);
mPath.close();

设置Shader

对于Shader还不了解的人，可以去搜一搜其他博客，讲这个的已经很多了，我就不再讲一遍了。这里我们使用的是BitmapShader，这个类名副其实，它可以把一个Bitmap做为我们的渲染对象，在设置Bitmap的时候把Bitmap初始化BitmapShader，然后设置给Paint。直接上代码了。

// 先把要设置的bitmap设置给一个BitmapShader
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP) ;
// 然后给Paint设置shader
mPaint.setShader(shader) ;

使用Shader绘制正六边形

我们重写onDraw方法：

@Override
public void onDraw(Canvas canvas) {
    canvas.drawPath(mPath,mPaint);
}

看下效果：

效果图

封装到Drawable中

写完之后，发现功能简单相对独立，没有使用自定义View的必要，因此将其封装成Drawable，使用起来也将更加方便。代码如下：

public class HiveDrawable extends Drawable {
    // 用于记录边界信息的Rect
    Rect mRect = new Rect();
    Paint mPaint;
    Path mPath ;
    BitmapShader mShader;
    Bitmap mBitmap ;

    public HiveDrawable() {
        this(null) ;
    }

    public HiveDrawable(Bitmap bitmap) {
        init();
        setBitmap(bitmap);
    }

    private void init() {
        initPaint() ;
        initPath() ;
    }

    private void ensurePaint(){
        if (mPaint == null) {
            mPaint = new Paint() ;
        }
    }

    private void ensurePath(){
        if (mPath == null) {
            mPath = new Path() ;
        }
    }

    private void initPaint() {
        ensurePaint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3f);
    }

    public Bitmap getBitmap() {
        return mBitmap;
    }

    // 设置Bitmap的时候初始化shader，并设置给paint
    public void setBitmap(Bitmap bitmap) {
        this.mBitmap = bitmap;
        if (bitmap == null) {
            mShader =null ;
        } else {
            mShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP) ;
            mPaint.setShader(mShader) ;
        }
    }

    // 初始化好Path要走的路径
    private void initPath() {
        ensurePath();
        float l = (float) (mRect.width() / 2);
        float h = (float) (Math.sqrt(3)*l);
        float top = (mRect.height() - h) / 2  ;
        mPath.reset();
        mPath.moveTo(l/2,top);
        mPath.lineTo(0,h/2+top);
        mPath.lineTo(l/2,h+top);
        mPath.lineTo((float) (l*1.5),h+top);
        mPath.lineTo(2*l,h/2+top);
        mPath.lineTo((float) (l*1.5),top);
        mPath.lineTo(l/2,top);
        mPath.close();
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawPath(mPath,mPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        if (mPaint != null) {
            mPaint.setAlpha(alpha);
        }
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        if (mPaint != null) {
            mPaint.setColorFilter(colorFilter) ;
        }
    }

    @Override
    public int getOpacity() {
        return 0 ;
    }

    // 设置边界信息
    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        mRect.set(left, top, right, bottom);
        initPath();
    }

    @Override
    public int getIntrinsicWidth() {
        if (mBitmap != null) {
            return mBitmap.getWidth();
        } else {
            return super.getIntrinsicWidth() ;
        }
    }

    @Override
    public int getIntrinsicHeight() {
        if (mBitmap != null) {
            return mBitmap.getHeight() ;
        }
        return super.getIntrinsicHeight();
    }
}

HiveDrawable 的使用：

// imageView是一个ImageView直接通过ImageDrawable方法设置一个HiveDrawable进来即可。
imageView.setImageDrawable(new HiveDrawable(BitmapFactory.decodeResource(getResources(),R.drawable.img_1)));

运行效果是一样的，就不展示了。