Android自定义view制作lol手游技能板

在Android的学习之路上，有时看到别人能够轻易的画出漂亮的界面，顿时心生一股膜拜之感。然后就希望自己也能达到这种程度，但是在接下来的日子发现，这个目标似乎有点难实现，尤其是在没有大神带路的情况下，靠自己去摸索。因此，我只能慢慢去学习别人的东西，然后，把它变成自己的。
好了，说这么多废话，回到正题了。本偏博客接下来主要介绍lol手游版的技能熟练度分析板的绘制步骤详情。如下图所示。

要实现这样的一个自定义view，首先得知道其大致的绘制步骤，接下来咱们先来捋一捋。
1.首先把画布的默认原点(左上角)迁移到坐标为x坐标为屏幕宽度一半，y坐标可以自己定义，我这里定义为400.如下所示。

 canvas.save();
//移动画布原点到这个位置
  canvas.translate(getWidth()/2,400);
  canvas.restore();

2.绘制最外面那层的多边形。首先得知道这个七边形的七个角的坐标分别是多少，然后利用path.lineTo()方法，把它绘制成一个七边形。

a点坐标：
x坐标：由于是原点，因此其x坐标为0；
y坐标：这个可以自己定义，我这里定义的线条的长度是260。即
private float mLineWidth = 260;因此其坐标为-mLineWidth 。
ps：右下才是正坐标。

b点坐标：
x坐标：a与b之间的夹角弧度是double mAngle = Math.toRadians(360/7)，因此其坐标为Math.sin(mAngle)*mWidth。
y坐标：-Math.cos(mAngle)*mWidth。

c点坐标：
x坐标：c到x坐标线的夹角度数为(360*2/7-90),因此其弧度为double mAngle1 = Math.toRadians(360*2/7-90);坐标为Math.cos(mAngle1)*mWidth
y坐标：Math.sin(mAngle1)*mWidth

d点坐标：
x坐标：d到x坐标线的夹角度数为(360*3/7-90),因此其弧度为double mAngle2 = Math.toRadians(360*3/7-90);坐标为Math.cos(mAngle2)*mWidth
y坐标：Math.sin(mAngle2)*mWidth

ps：efg与dcb坐标对称
e点坐标：
x坐标：-Math.cos(mAngle2)*mWidth
y坐标：Math.sin(mAngle2)*mWidth

f点坐标：
x坐标：-Math.cos(mAngle1)*mWidth
y坐标：Math.sin(mAngle1)*mWidth

g点坐标：
x坐标：-Math.sin(mAngle)*mWidth
y坐标：-Math.cos(mAngle)*mWidth

到此为止，7个点的坐标已经明确了。接下来就是把它再界面上画出来了。初始化一支画笔。Paint mBorderPaint;

mBorderPaint = new Paint();
        mBorderPaint.setColor(Color.parseColor("#CF8840"));
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.FILL);

要实现这四个七边形其实很简单，把它们的线长改变成不同长度就ok。然后画笔的颜色也跟着改变，其代码如下：

/**
     * 画四个多边形边框
     * @param canvas
     */
    private void drawBorder(Canvas canvas) {
        for(int i =0;i<4;i++){
            Path path = new Path();
            float mWidth = mLineWidth*(4-i)/4;
            mBorderPaint.setColor(mColors[i]);
            path.moveTo(0,-mWidth);
            path.lineTo((float)Math.sin(mAngle)*mWidth,
                    -(float)Math.cos(mAngle)*mWidth);
            path.lineTo((float)Math.cos(mAngle1)*mWidth,
                    (float)Math.sin(mAngle1)*mWidth);
            path.lineTo((float)Math.cos(mAngle2)*mWidth,
                    (float)Math.sin(mAngle2)*mWidth);

            path.lineTo(-(float)Math.cos(mAngle2)*mWidth,
                    (float)Math.sin(mAngle2)*mWidth);

            path.lineTo(-(float)Math.cos(mAngle1)*mWidth,
                    (float)Math.sin(mAngle1)*mWidth);


            path.lineTo(-(float)Math.sin(mAngle)*mWidth,
                    -(float)Math.cos(mAngle)*mWidth);
            path.close();
            canvas.drawPath(path,mBorderPaint);
        }
    }

到这里的话，四个多边形就完全能够展示出来了。

3.画七条线。
画线的话，其实是比较简单的。首先画出第一条线就是原点到a坐标的线，然后旋转360/7角度的画布，重复旋转7次，就可以画出七条大小长度一致的线了。其具体代码如下：

/**
     * 画线
     * @param canvas
     */
    private void drawLine(Canvas canvas) {
        canvas.save();
        for(int i = 0;i<7;i++){
            canvas.drawLine(0,0,0,-mLineWidth,mCenterPaint);
            canvas.rotate((float)360/7);
        }
        canvas.restore();
    }

4.描字
我这里为了追求方便，直接跟画线的方法一致。也是通过旋转画布的方式进行绘制文字。这样画出来的字，可能效果不是很好看。其代码如下：

/**
     * 画字
     */
    private void drawText(Canvas canvas) {
        canvas.save();
        for(int i =0;i<7;i++){

            canvas.drawText(mTexts[i],-20,-(mLineWidth+30),mTextPaint);
            //画布旋转的角度
            canvas.rotate((float)360/7);
        }

        canvas.restore();
    }

5.绘制熟练等级进度

这个其实主要是改变mWidth的大小就可以实现这种效果。

 //各个类型的不同进度,可以自己随便定义
    float mKill = mLineWidth*3/4,mSave = mLineWidth*2/4,mHelp=mLineWidth*4/7,
            mPhysisc=mLineWidth*4/9,mMagic=mLineWidth*3/10,mPlague=mLineWidth*5/6,mMoney=mLineWidth*6/7;


/**
     * 绘制等级进度
     */
    private void drawProcess(Canvas canvas) {
        Path path = new Path();
        path.moveTo(0,-mKill);
        path.lineTo((float)Math.sin(mAngle)*mSave,
                -(float)Math.cos(mAngle)*mSave);
        path.lineTo((float)Math.cos(mAngle1)*mHelp,
                (float)Math.sin(mAngle1)*mHelp);
        path.lineTo((float)Math.cos(mAngle2)*mPhysisc,
                (float)Math.sin(mAngle2)*mPhysisc);

        path.lineTo(-(float)Math.cos(mAngle2)*mMagic,
                (float)Math.sin(mAngle2)*mMagic);

        path.lineTo(-(float)Math.cos(mAngle1)*mPlague,
                (float)Math.sin(mAngle1)*mPlague);


        path.lineTo(-(float)Math.sin(mAngle)*mMoney,
                -(float)Math.cos(mAngle)*mMoney);
        path.close();
        canvas.drawPath(path,mProcessPaint);
    }

6.seekbar是我在主程序布局中的控件，用来控制“击杀”这一技能的熟练度。其实现的代码如下：

 /**
     * 击杀熟练度
     * @param f
     */
    public void setKillProcess(float f){
        mKill = f*mLineWidth;
        //刷新画布
        invalidate();
    }

到此为止，整个技能板的绘制已经完成了。接下来的时间，我还会继续学习自定义控件的使用。希望能够越来越厉害，加油！！！！

点此进入下载代码界面