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();}

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

点此进入下载代码界面

Android自定义view制作lol手游技能板相关推荐

android自定义抽奖,Android自定义view制作抽奖转盘
本文实例为大家分享了Android自定义view制作抽奖转盘的具体代码,供大家参考,具体内容如下效果图 TurntableActivity package com.bawei.myapplicati ...
Android自定义View简单实现手绘折（曲）线滚动图效果
目录一.简介二.实现三.代码四.实现效果一.简介通过安卓自定义View实现根据手指点击或移动轨迹绘制出折(曲)线图并循环滚动. 二.实现获取手指点击和移动的y坐标存入数组,设定好x间隔, ...
Android自定义View实现方位刻度尺（类似于吃鸡手游）
Android自定义View实现方位刻度尺(类似于吃鸡手游) 先上效果图 gif可能看不清,我下面放几张图片原理解析首先,我们应该把看得到的内容从上至下分成三部分:最上面的文字.中间的竖线和最下面 ...
Android 将签名布局旋转90度,Android 自定义View手写签名
Android 自定义View:手写签名最近项目中有个新的需求,就是要实现用户手写签名,然后展示再上传到服务器.看到效果图后,先是面对百度编程搜了一下,很多实现方法,主要就是自定义View实现的,为 ...
Android 自定义View手写签名
Android 自定义View:手写签名最近项目中有个新的需求,就是要实现用户手写签名,然后展示再上传到服务器.看到效果图后,先是面对百度编程搜了一下,很多实现方法,主要就是自定义View实现的,为 ...
Android自定义View(七)_Canvas之图片文字
在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法,本次了解一些绘制图片文字相关的内容.如果你对前几篇文章讲述的内容熟练掌握的话,那么恭喜你,本篇结束之后,大部分的自定义View已经 ...
android 自定义 child,Android自定义View
前言 Android自定义View的详细步骤是我们每一个Android开发人员都必须掌握的技能,因为在开发中总会遇到自定义View的需求.为了提高自己的技术水平,自己就系统的去研究了一下,在这里写下一 ...
android 自定义对号,Android自定义View实现打钩动画功能
先上效果图动图静态图 1. 回顾 [Android自定义View:一个精致的打钩小动画]上一篇文章,我们已经实现了基本上实现了控件的效果了,但是...但是...过了三四天后,仔细看回自己写的代码, ...
Android自定义view之ViewPager指示器——1
Android自定义view之ViewPager指示器--1 在上两篇文章<Android自定义view之measure.layout.draw三大流程>以及<Android自定义v ...

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

Android自定义view制作lol手游技能板相关推荐

最新文章

热门文章