Android 能力图实现

效果

国际惯例,效果奉上

Android 能力图实现_第1张图片
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> pointArrayList;//存储多边形顶点数组的数组
            private ArrayList 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 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 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主页视图



    


  • 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;感谢

你可能感兴趣的:(Android 能力图实现)