Android 能力图实现

效果

国际惯例，效果奉上

Screenshot_1548296212_看图王.png

思路

1. 首先确定的是所有的参数，三个画笔（画线，画图，画字）
2. 确定画出的形状参数，几边形、几层图形（上图一共为4层显示）、最外圈的半径、每层图形的角度和半径就可以算出来了；
3. 确定该如何画出点（也就是能力值）
4. 最后绘制文字
5. Tips: 好的封装可以实现自定义设置View的各种属性；

实现

• 确定参数
  在构造函数中实现了三个方法，分别初始化相应的参数

  public class AibilitysView extends View {
        private Paint linePaint;//画线的笔
          private Paint textPaint;//画文字的笔
          private Object[] allAbility;
  
          private int n;    //边的数量或者能力的个数
          private float intervalCount;//间隔数量，把半径分为几段
          private float R; //最外圈的半径
          private float angle; //角度
  
  
          private int viewHight;//控件的高度
          private int viewWidth;//控件的宽度
  
          private ArrayList<ArrayList<PointF>> pointArrayList;//存储多边形顶点数组的数组
          private ArrayList<PointF> abilityPoints;//储存能力点的数组
  
          public AibilitysView(Context context) {
              this(context, null);
          }
  
          public AibilitysView(Context context, @Nullable AttributeSet attrs) {
              this(context, attrs, 0);
          }
  
          public AibilitysView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
              super(context, attrs, defStyleAttr);
  
              initSize();
  
              initPoints();
  
              initPaint();
      }
      
      ***
          
  }
  

  • initSize()方法先初始化了相关SIze参数(默认的参数为 10 个边，最外层的半径长度为100dp)

    
        /**
         * 初始化固定数据Size
         * 设置了是几边型；
         * 设置了最外圈的半径
         * 计算出每一边型的角度
         * 获取屏幕方向
         */
        private void initSize() {
            if (allAbility == null) {
                n = 10;//十条辺
            } else {
                n = allAbility.length;
            }
            R = dp2pxF(getContext(), 100);
            intervalCount = 4; //有四层
            angle = (float) ((2 * Math.PI) / n); //2π是一周，除以n是算出平均每一个的角度是多少
    
    
            /**
             *
             * 此方法默认获取的是整个手机的宽度和高度；无论如何调节控件或父控件的宽度都不可能实现，Size的改变
             *
             *
             //拿到屏幕的宽高
             int screenWidth = getResources().getDisplayMetrics().widthPixels;
             //控件设置为正方向
             viewHight = screenWidth;
             viewWidth = screenWidth;
             */
        }
    

  • initPoints()方法初始化点的位置（通过计算算出点的位置）

      /**
         * 初始化点的位置
         */
        private void initPoints() {
            if (pointArrayList == null) {
                pointArrayList = new ArrayList<>();
            } else {
                pointArrayList.clear();
            }
            float x;
            float y;
            for (int i = 0; i < intervalCount; i++) {
                //创建一个存储点的数组
                ArrayList<PointF> points = new ArrayList<>();
                for (int j = 0; j < n; j++) {
                    float r = R * ((float) (intervalCount - i) / intervalCount);//每一圈的半径按比例减少
                    //这里减去Math.PI /2 是为了让段变形逆时针旋转90度，所以后面的所有用到cos,sin的都要减
                    x = (float) (r * Math.cos(j * angle - Math.PI / 2));
                    y = (float) (r * Math.sin(j * angle - Math.PI / 2));
                    points.add(new PointF(x, y));
                }
                pointArrayList.add(points);
            }
        }
    

  • initPaint()方法初始化了画笔

        /**
         * 初始化画笔
         */
        private void initPaint() {
            //画线的笔
            linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    
            //设置线笔的宽度
            linePaint.setStrokeWidth(dp2px(getContext(), 1f));
    
            //画文字的笔
            textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            //设置文字居中
            textPaint.setTextAlign(Paint.Align.CENTER);
            textPaint.setColor(Color.BLACK);
            textPaint.setTextSize(sp2pxF(getContext(), 14f));
        }
    

• 确定位置 通过继承View ，可重写相应的方法onMeasure()和onSizeChanged()方法；
  如果View中的Size改变的话，会重新初始化 initSize()和initPoints()

      @Override
      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
          super.onMeasure(widthMeasureSpec, heightMeasureSpec);
          viewWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
          viewHight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
          //        设置控件的最终视图大小
          setMeasuredDimension(viewWidth, viewHight);
  
      }
  
      @Override
      protected void onSizeChanged(int w, int h, int oldw, int oldh) {
          super.onSizeChanged(w, h, oldw, oldh);
          initSize();
          initPoints();
      }
  

• 重写OnDraw()方法，开始画图

     @Override
      protected void onDraw(Canvas canvas) {
          super.onDraw(canvas);
  
          //把画布的原点移动到控件的中心点
          canvas.translate(viewWidth / 2, viewHight / 2);
  
          //绘制形状
          drawPolygon(canvas);
  
          //画出边框线
          drawOutLine(canvas);
  
          //画出能力线
          drawAbilityLine(canvas);
  
          //画出文字
          drawAbilityText(canvas);
      }
  

  • 在画布上画出形状

    /**
         * 在画布上绘制画出的形状
         *
         * @param canvas
         */
        private void drawPolygon(Canvas canvas) {
            //保存画布当前状态（平移，缩放、旋转、裁剪）和canvas.restore()配合使用
            canvas.save();
            //填充且描边
            linePaint.setStyle(Paint.Style.FILL_AND_STROKE);
            //设置路径
            Path path = new Path();
            //循环、一层一层的绘制
            for (int i = 0; i < intervalCount; i++) {
                //每一层的颜色更改
                switch (i) {
                    case 0:
                        linePaint.setColor(Color.parseColor("#D4F0F3"));
                        break;
                    case 1:
                        linePaint.setColor(Color.parseColor("#99DCE2"));
                        break;
                    case 2:
                        linePaint.setColor(Color.parseColor("#56C1C7"));
                        break;
                    case 3:
                        linePaint.setColor(Color.parseColor("#278891"));
                        break;
                }
                //每一层都有n个点
                for (int j = 0; j < n; j++) {
                    float x = pointArrayList.get(i).get(j).x;
                    float y = pointArrayList.get(i).get(j).y;
                    if (j == 0) {
                        //如果是每层的第一个点，就把它设置为path的起始点
                        path.moveTo(x, y);
                    } else {
                        path.lineTo(x, y);
                    }
                }
                //关闭路径
                path.close();
                //在画布上画出路径
                canvas.drawPath(path, linePaint);
                //清除Path存储的路径
                path.reset();
            }
            canvas.restore();
        }
    

  • 画出边框线

     /**
         * 绘制多边形的辺，轮廓线
         *
         * @param canvas
         */
        private void drawOutLine(Canvas canvas) {
            //遇上一个方法中的用意一样
            canvas.save();
    
            //设置画笔的颜色
            linePaint.setColor(Color.parseColor("#99DCC2"));
            //设置画笔的样式为空心
            linePaint.setStyle(Paint.Style.STROKE);
    
            //先画出最外面的多边形轮库
            Path path = new Path();
            for (int i = 0; i < n; i++) {
                //只需要第一组的点
                float x = pointArrayList.get(0).get(i).x;
                float y = pointArrayList.get(0).get(i).y;
                if (i == 0) {
                    //如果是第一个点就把path的起点设置为这个点
                    path.moveTo(x, y);
                } else {
                    path.lineTo(x, y);
                }
            }
            //闭合路径
            path.close();
            canvas.drawPath(path, linePaint);
    
            //再画顶点到中心的线
            for (int i = 0; i < n; i++) {
                float x = pointArrayList.get(0).get(i).x;
                float y = pointArrayList.get(0).get(i).y;
                canvas.drawLine(0, 0, x, y, linePaint); //起点都是中心点
            }
    
            canvas.restore();
        }
    

  • 画出能力线

  /**
       * 画出能力线
       *
       * @param canvas
       */
      private void drawAbilityLine(Canvas canvas) {
  
          if (allAbility == null) {
              return;
          }
  
          canvas.save();
  
          //先把能力点初始化出来
          abilityPoints = new ArrayList<>();
          for (int i = 0; i < n; i++) {
              float r = R * (Float.valueOf("" + allAbility[i]) / 100.0f);  //能力值/100再乘以半径就是所占的比例
              float x = (float) (r * Math.cos(i * angle - Math.PI / 2));
              float y = (float) (r * Math.sin(i * angle - Math.PI / 2));
              abilityPoints.add(new PointF(x, y));
          }
  
          linePaint.setStrokeWidth(dp2px(getContext(), 2f));
          linePaint.setColor(Color.parseColor("#E96153"));
          linePaint.setStyle(Paint.Style.STROKE);  //设置空心的
  
          Path path = new Path();  //路径
          for (int i = 0; i < n; i++) {
              float x = abilityPoints.get(i).x;
              float y = abilityPoints.get(i).y;
              if (i == 0) {
                  path.moveTo(x, y);
              } else {
                  path.lineTo(x, y);
              }
          }
          path.close();   //别忘了闭合
  
          canvas.drawPath(path, linePaint);
  
          canvas.restore();
  
      }
  

  • 画出文字

      private void drawAbilityText(Canvas canvas) {
          canvas.save();
  
          ArrayList<PointF> textPoints = new ArrayList<>();
          for (int i = 0; i < n; i++) {
              float r = R + dp2pxF(getContext(), 15f);
              float x = (float) (r * Math.cos(i * angle - Math.PI / 2));
              float y = (float) (r * Math.sin(i * angle - Math.PI / 2));
              textPoints.add(new PointF(x, y));
          }
          //拿到字体测量器
          Paint.FontMetrics metrics = textPaint.getFontMetrics();
          for (int i = 0; i < n; i++) {
              float x = textPoints.get(i).x;
              //ascent:上坡度，是文字的基线到文字的最高处的距离
              //descent:下坡度,，文字的基线到文字的最低处的距离
              float y = textPoints.get(i).y - (metrics.ascent + metrics.descent) / 2;
              canvas.drawText(allAbility[i] + "", x, y, textPaint);
          }
          canvas.restore();
      }
  

• 其他

 /**
     * 传入元数据
     *
     * @param data
     */
    public void setData(Object[] data) {
        if (data == null) {
            return;
        }
        this.allAbility = data;

        //View本身调用迫使view重画
        invalidate();
    }

    /**
     * 下面都是工具类，dp单位转px单位
     */
    public static int dp2px(Context c, float dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, c.getResources().getDisplayMetrics());
    }

    public static int sp2px(Context c, float sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, c.getResources().getDisplayMetrics());
    }

    public static float dp2pxF(Context c, float dp) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, c.getResources().getDisplayMetrics());
    }

    public static float sp2pxF(Context c, float sp) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, c.getResources().getDisplayMetrics());
    }

使用

自定义View的功能实现完毕，那么就看看该怎么使用了；

• XML主页视图

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.administrator.abilityview.view.AibilitysView
        android:id="@+id/aibilitymapview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

• MainActivity 实现

package com.example.administrator.abilityview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.example.administrator.abilityview.view.AibilitysView;

public class MainActivity extends AppCompatActivity {
    private AibilitysView aibilitymapview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.aibilitymapview = (AibilitysView) findViewById(R.id.aibilitymapview);
        aibilitymapview.setData(new Object[]{65, 70, 80, 70, 80, 80 });
    }
}

写在最后

欢迎大家评论吐槽，多给点建议，我会给大家解答的；跪谢！！！！
GitHUb 地址： https://github.com/sikeziji/AbilityView；希望大家可以去Star；感谢