×

六芒(bian)星(xing)ImageView

96
柴泽建_Jack 595a1b60 08f6 4beb 998f 2bf55e230555
2016.09.09 23:37* 字数 722
六芒星写轮眼

今天突然看到自己的发泥盒(一个六边形的盒子),所以突发奇想想封装一个这样的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)));

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

博客
Web note ad 1