使用


SlbSyView slbView;
slbView = (SlbSyView) findViewById(R.id.slbView);
slbView.setHeights(new float[]{2.1112f, 2.2311f, 2.3001f, 2.1234f, 2.3421f, 2.0015f, 2.3256f});
slbView.setVisibility(View.VISIBLE);

<com.bcb.presentation.view.custom.SlbSyView
android:id="@+id/slbView"
android:layout_width="wrap_content"
android:layout_height="125dp"
android:layout_below="@+id/title"
android:visibility="invisible"/>

自定义View

package com.bcb.presentation.view.custom;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
/**
 * 描述:生利宝收益
 * 作者:baicaibang
 * 时间:2016/8/15 09:34
 */
public class SlbSyView extends View {
    Context context;
    Paint paint;
    Path path;//用于绘制复杂的图形轮廓,比如折线,圆弧以及各种复杂图案
    int width, height;//表格的宽高
    int widthBlank, heightBlank;//表格距离左侧、顶部的空白距离
    static final int WIDTH_MAX = 6;//View的相对宽高(7个);WIDTH_MAX是不会变的
    float heightMax = 7.0f;//heightMax是根据需要随便改变;
    float[] heights = new float[WIDTH_MAX + 1];//高度值
    float heightOffset = 0.1f;//偏差,根据需要设置
    float y6Value;//最后一个坐标的值
    public SlbSyView(Context context) {
        this(context, null);
    }
    public SlbSyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }
    private void init() {
        paint = new Paint();
        path = new Path();
        paint.setAntiAlias(true);
        paint.setDither(true);
        heightBlank = dp2px(20);
        widthBlank = dp2px(35);
        width = getScreenWidth(context) - widthBlank*2;
        height = dp2px(100);
    }
    public void setHeights(float[] heights) {
        if (heights.length != 7) throw new RuntimeException("长度不对");
        y6Value = heights[6];
        heightMax = getMaxValue(heights) - getMinValue(heights) + heightOffset * 2;//根据需要设置
        for (int i = 0; i < heights.length; i++) {
            this.heights[i] = getMaxValue(heights) + heightOffset - heights[i];//根据需要设置
        }
        invalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        //1、画背景
        paint.setColor(0x1adb3838);//10%透明度
        paint.setStyle(Paint.Style.FILL);
        path.moveTo(widthBlank, height + heightBlank);//指定初始轮廓点,若没指定默认从(0,0)点开始
        for (int i = 0; i < heights.length; i++) {
            path.lineTo(widthBlank + width * i / WIDTH_MAX, //中间的点
                    heightBlank + height * heights[i] / heightMax);
        }
        path.lineTo(widthBlank + width, heightBlank + height);//最后的一个点
        path.close(); // 回到初始点形成封闭的曲线
        canvas.drawPath(path, paint);
        //2、画基准线条。每条线都需要两个坐标(注意,是每两个值组成一个坐标)
        paint.setStrokeWidth(dp2px(0.5f));//设置画笔粗细,单位为像素
        paint.setColor(0xff999999);
        float[] points = new float[7 * 4];//坐标
        //画7条竖线
        for (int i = 0; i < points.length; i += 4) {
            points[i] = widthBlank + width * i / (4 * WIDTH_MAX);
            points[i + 1] = heightBlank;
            points[i + 2] = points[i];
            points[i + 3] = heightBlank + height;
        }
        canvas.drawLines(points, paint);
        //画2条横线
        canvas.drawLine(widthBlank, heightBlank, //
                widthBlank + width, heightBlank, paint);
        canvas.drawLine(widthBlank, heightBlank + height,//
                widthBlank + width, heightBlank + height, paint);
        //3、画利率线
        paint.setColor(0xffdb3838);
        paint.setStrokeWidth(dp2px(2));
        for (int i = 0; i < heights.length - 1; i++) {//注意遍历条件 heights.length - 1
            canvas.drawLine(widthBlank + width * i / WIDTH_MAX, //
                    heightBlank + height * heights[i] / heightMax, //
                    widthBlank + width * (i + 1) / WIDTH_MAX, //
                    heightBlank + height * heights[i + 1] / heightMax, paint);
        }
        //4、画圆形
        float x6Point = widthBlank + width * 6 / WIDTH_MAX;
        float y6Point = heightBlank + height * heights[6] / heightMax;
        //画白色的实心圆圆
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.WHITE);
        canvas.drawCircle(x6Point, y6Point, dp2px(4), paint);
        //画空心圆
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(0xffdb3838);
        canvas.drawCircle(x6Point, y6Point, dp2px(4), paint);//圆心坐标,半径
        //5、画文本(今天的年利率)
        //画圆角矩形
        paint.setStyle(Paint.Style.FILL);
        RectF rect = new RectF(x6Point - dp2px(25), y6Point - dp2px(30), //左上角坐标
                x6Point + dp2px(25), y6Point - dp2px(10));//右下角坐标
        canvas.drawRoundRect(rect, dp2px(3), dp2px(3), paint);//两侧圆角弧度的大小
        //画文字
        paint.setColor(Color.WHITE);
        paint.setTextSize(dp2px(13));//单位是px,只在绘制文字时有效
        paint.setTextAlign(Paint.Align.CENTER);//绘制的文字以drawText时指定的 float x 水平居中,默认值是Align.LEFT
        canvas.drawText(y6Value + "", rect.centerX(),//
                rect.centerY() + dp2px(4.5f), paint);//注意 float y 代表的是 baseline 的值,也即e和f的下边界,而非g的下边界
    }
    private int dp2px(float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
    /**
     * 获取屏幕宽
     */
    public static int getScreenWidth(Context context) {
        DisplayMetrics metric = new DisplayMetrics();
        ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getMetrics(metric);
        return metric.widthPixels;
    }
    /**
     * 取最大值
     */
    public static float getMaxValue(float[] a) {
        float temp = a[0];
        for (int i = 0; i < a.length; i++) {
            if (a[i] > temp) temp = a[i];
        }
        return temp;
    }
    /**
     * 取最小值
     */
    public static float getMinValue(float[] a) {
        float temp = a[0];
        for (int i = 0; i < a.length; i++) {
            if (a[i] < temp) temp = a[i];
        }
        return temp;
    }
}

画年利率 画图 自定义 View的更多相关文章

  1. android画虚线的自定义VIew

    package com.yesway.ycarplus.view; import android.annotation.SuppressLint; import android.content.Con ...

  2. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  3. Android -- 自定义View小Demo,动态画圆(一)

    1,转载:(http://blog.csdn.NET/lmj623565791/article/details/24500107),现在如下图的效果: 由上面的效果图可以看到其实是一个在一个圆上换不同 ...

  4. 28 自定义View画坐标和柱状图

    自定义View类 RectView.java package com.qf.sxy.day29_customview.widget; import android.content.Context; i ...

  5. 手把手带你画一个漂亮蜂窝view Android自定义view

    上一篇做了一个水波纹view  不知道大家有没有动手试试呢点击打开链接 这个效果做起来好像没什么意义,如果不加监听回调 图片就能直接替代.写这篇博客的目的是锻炼一下思维能力,以更好的面多各种自定义vi ...

  6. 手把手带你画一个 时尚仪表盘 Android 自定义View

    拿到美工效果图,咱们程序员就得画得一模一样. 为了不被老板喷,只能多练啊. 听说你觉得前面几篇都so easy,那今天就带你做个相对比较复杂的. 转载请注明出处:http://blog.csdn.ne ...

  7. Android之自定义View以及画一个时钟

    https://www.2cto.com/kf/201509/443112.html 概述: 当Android自带的View满足不了开发者时,自定义View就发挥了很好的作用.建立一个自定义View, ...

  8. [原] Android 自定义View步骤

    例子如下:Android 自定义View 密码框 例子 1 良好的自定义View 易用,标准,开放. 一个设计良好的自定义view和其他设计良好的类很像.封装了某个具有易用性接口的功能组合,这些功能能 ...

  9. Android -- 自定义View小Demo,绘制钟表时间(一)

    1,昨天刚看了hongyang大神推荐的自定义时钟效果(传动门:http://www.jianshu.com/users/a45d19d680af/),效果还是不错的,自己又在github上找了找,发 ...

随机推荐

  1. Shell 脚本编程笔记(一) Hello Shell

    最近不断在接触Linux操作系统,对它一个终端走天下的特性感到十分新奇和伟大.同时也被各种命令折磨的死去活来...公司的一个老同事给我讲,在公司的极品geek宅都是只用一个黑黑的框完成一切的.结果我一 ...

  2. [Head First设计模式笔记]----命令模式

    命令模式定义:将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 类图: 适用设计方案举例:实现一种遥控器,该遥控器具有七个可编程的插槽(每个都可以指 ...

  3. 【USACO 2.3.3】零数列

    [题目描述] 请考虑一个由1到N(N=3, 4, 5 ... 9)的数字组成的递增数列:1 2 3 ... N. 现在请在数列中插入“+”表示加,或者“-”表示减,“ ”表示空白(例如1-2 3就等于 ...

  4. javascript获得浏览器工作区域的大小

    浏览器的窗口发生变化时会执行window.onresize方法,通过这个方法我们可以获得到浏览器工作区域的大小: window.onresize=function(){ bodyHeight = wi ...

  5. js 实现 C# 的 format 方法

    2014-11-08 12:18:51 更新,修复原形链方法被当作关键词的bug,其实之前是想用全局关键词的,不过还是算了,array里有太多单词了.                          ...

  6. css 属性之绝对定位

    <html><head><style type="text/css">h2.pos_abs{position:absolute;left:100 ...

  7. Windows下Apache部署Django过程记录

    Win7/Apache/Python2.7/Django1.9部署Web   环境: Windows7 Apache httpd-2.4.16-win64-VC14 Python2.7.11 Djan ...

  8. 01:Hello, World!

    描述 对于大部分编程语言来说,编写一个能够输出“Hello, World!”的程序往往是最基本.最简单的.因此,这个程序常常作为一个初学者接触一门新的编程语言所写的第一个程序,也经常用来测试开发.编译 ...

  9. MVC linq语法分页

    分页效果图: 表格下面的分页按钮样式是我自己做的一个样式,这4个按钮都是用同一张图片:这张图片是用ps做的. 接下来我们说一下怎么去做这个样式 第一css代码: ._HomePage,._Previo ...

  10. linux下tomcat配置APR方式HTTPS

    一.安装APR 创建/usr/local/apr tar zxvf apr-1.4.5.tar.gz cd apr-1.4.5 ./configure --prefix=/usr/local/apr/ ...