Android自定义View——实现理财类APP七日年化收益折线图效果

最新推荐文章于 2022-05-30 20:36:52 发布
最新推荐文章于 2022-05-30 20:36:52 发布
阅读量4.9k 收藏 48
点赞数 5
分类专栏： Android 文章标签： android 年化收益 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25193681/article/details/51900497
版权

这段时间的自定义View学习，学会了绘制柱状图、绘制折线图、绘制进度控件，那我们今天就来聊聊另外一种自定义的View，这就是我们常见的七日年化收益折线图效果。先看看长什么样。

这里写图片描述

这就是效果图了，元素相对而言还是比较多的，这里有线、柱状图、文字、折线、点等等。看起来好像很复杂，但是呢，只要一步一步的实现，那还是可以达到这种效果的，之前我们说过的， 自定义View，就像是在photo shop里面画图，想要什么就画什么，我们可以有很多的画笔工具，也可以有很多的图层。

先看看我们这一次用到哪些变量。

    private Paint mTextPaint, mLinePaint,mPathPaint,mPointPaint;
    //柱状图的宽度
    private float mPaintRectWidth;
    //路径
    private Path mPath;
    //高跟宽
    private float mWidth, mHeight;
    //柱状图的数量
    private final float mCount = 6;
    //偏移量
    private final float offsets=1;

    private float mRectHeight;
    //x轴的坐标
    private List<Float> xline=new ArrayList<Float>();
    //Y轴的坐标
    private List<Float> yline=new ArrayList<Float>();

    //左边文字
    private float []x={2.46f,2.45f,2.44f,2.43f,2.42f,2.41f,2.40f};
    //底部文字
    private String [] day={"07-01","07-02","07-03","07-04","07-05","07-06","07-07"};

注释标记的也是够详细了，为了大家能够看得懂，也为了提高的博客质量，我们注意到，这里有文字，有数量，基本涵盖了我们这里索要用到的所有的变量。

下面开始初始化操作。


    private void initView() {
        //绘制线和文字的颜色
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.parseColor("#cccccc"));
        mTextPaint.setTextSize(25);
        mTextPaint.setStrokeWidth(1);

        //绘制折线图的点
        mPointPaint= new Paint();
        mPointPaint.setAntiAlias(true);
        mPointPaint.setColor(Color.parseColor("#000000"));
        mPointPaint.setTextSize(25);
        mPointPaint.setStrokeWidth(5);

        //绘制柱状图的画笔
        mLinePaint = new Paint();
        mLinePaint.setAntiAlias(true);

        //绘制折线图的画笔
        mPathPaint= new Paint();
        mPathPaint.setAntiAlias(true);
        mPathPaint.setColor(Color.parseColor("#ff0000"));
        mPathPaint.setStyle(Style.STROKE);

        //折线图的路径
        mPath=new Path();

    }

这里主要就是给画笔初始化，可以看到每一个画笔的颜色、宽度都是不一样的，值的注意的是，这里面的画笔并没有设置镂空样式。

接下来我们看看怎么去赋值，老规矩，我们还是选择在onSizeChange()里面进行赋值，代码如下：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth=(float)(getWidth()-getWidth()*0.1);
        mHeight=(float)(getHeight()-getHeight()*0.1);
        mRectHeight=(float)(getHeight()-getHeight()*0.1);
        mPaintRectWidth=(float) (mWidth*0.8/mCount);
        mLinePaint.setStrokeWidth(mPaintRectWidth);
    }

跟之前的不一样，我们以前所要用的宽度跟高度，直接就是使用方法里的，但是现在我们没有这么做，例如：(float)(getWidth()-getWidth()*0.1);我们进行了一定的处理，这样可以提高页面的舒适性，提高用户体验。

好了，准备工作做好了，接下来看看onDraw方法里面的操作，代码如下：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        onDrawRect(canvas);     
        onDrawLine(canvas);
        canvasPath(canvas);
    }

哟呵，怎么这么简单，就三个东西？对的，就是这么简单粗暴，从名字中也可以看出，第一个是绘制矩形，第二个绘制线，第三个就是绘制折线。是不是很快呢，下面看看具体的实现方式。

第一个方法：

    //绘制6个矩形
    private void onDrawRect(Canvas canvas) {
        for (int i = 0; i < 7; i++) {
            if (i%2==0) {
                mLinePaint.setColor(Color.parseColor("#eeeeee"));
            }else {
                mLinePaint.setColor(Color.parseColor("#ece1f3"));
            }   
            float left  =(float) (mWidth * 0.4 / 2 + mPaintRectWidth * i + offsets);
            float right=(float) (mWidth * 0.4 / 2 + mPaintRectWidth* (i + 1));

            canvas.drawRect(left,(float)(mRectHeight*0.01),right, mHeight, mLinePaint);
        }

    }

第二个：

    //绘制网格线
    private void onDrawLine(Canvas canvas){
        //第一条线
        canvas.drawLine(mPaintRectWidth-mPaintRectWidth/2, (float)(mRectHeight*0.01), getWidth(),  (float)(mRectHeight*0.01), mTextPaint);
        //定义这里高度
        float height;
        //横七条
        for (float i = 0; i < 7; i++) {
            //从上到下
            if (i==0) {
                height=i;
            }else {
                height=mRectHeight*(i/6);
                float size=mTextPaint.measureText(x[(int)i]+"");
                //绘制线
                canvas.drawLine(mPaintRectWidth+mPaintRectWidth/2, height, getWidth(),  height, mTextPaint);
                //绘制左边Y轴的文字
                canvas.drawText(x[(int)i]+"", (float)(mPaintRectWidth-mPaintRectWidth*0.35), height+size/5, mTextPaint);
            }

        }
        //竖七条
        canvas.drawLine((float) (mPaintRectWidth-mPaintRectWidth/2),0, (float) (mPaintRectWidth-mPaintRectWidth/2),  mHeight, mTextPaint);
        for (float i = 0; i < 7; i++) {
            //从左到右
            canvas.drawLine((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),0, (float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),  mHeight, mTextPaint);
            //绘制底边的日期文字
            canvas.drawText(day[(int) i], (float) (mWidth * 0.34 / 2 + mPaintRectWidth * i), (float)(mHeight+mHeight*0.1), mTextPaint);
            //准备好下面折线图的X轴坐标
            xline.add((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i));
        }
        //折线图的第一个点
        xline.add((float) (mPaintRectWidth-mPaintRectWidth/2));



    }

这里的代码相对较多，我专门加了许多的注释，可以用心的看看。

第三个绘制折线：

    //绘制折线路径
    public void canvasPath(Canvas canvas){


        for (int j = 0; j < yline.size(); j++) {

            float x=xline.get(j);
            float y =yline.get(j);
            float aftery=Math.initData(y);
            if (j==0) {
                mPath.moveTo(x,aftery );
            }else{

                mPath.lineTo(x,aftery );
            }
            canvas.drawPoint(x, aftery, mPointPaint);
            float size=mPointPaint.measureText(y+"");
            canvas.drawText(y+"", (float)(x-size/2), (float)(aftery+size*0.25), mPointPaint);
        }
        canvas.drawPath(mPath, mPathPaint);
    }

这里的绘制折线包括绘制线、点、文字、还有文字的转换、但是这个转换可以根据自己的需求来进行定制。

最后向外面暴露一个方法，用于更新坐标。

    //用于设置Y轴的坐标值
    public void setDataY( List<Float> yline) {
        this.yline.clear();
        this.yline=yline;
    }
    //一个更新UI的方法
    public void invalidata(){
        invalidate();
    }

文字的转换我这里用一个自己的类去处理了，代码如下：

    public static float initData(float a){

        if (2.40f<=a&&a<2.41f) {
            a=540f-540f/(a/0.01f);
        }else if(2.41f<=a&&a<2.42f){
            a=480f-480f/(a/0.01f);
        }else if (2.42f<=a&&a<2.43f) {
            a=360f-360f/(a/0.01f);
        }else if (2.43f<=a&&a<2.44f) {
            a=270f-270f/(a/0.01f);
        }else if (2.44f<=a&&a<2.45f) {
            a=180f-180f/(a/0.01f);
        }else if (2.45f<=a&&a<2.46f) {
            a=90f-90f/(a/0.01f);
        }

        return a;

    }

以上就是逻辑的实现过程了。最后，我把所有代码贴上来：

AnnualyieldView.java

/**
 * 小瓶盖 2016年7月13日18:08:28
 * 
 * @author Android自定义View——实现理财类APP七日年化收益折线图效果
 *
 *相关博客地址 http://blog.csdn.net/qq_25193681
 */
public class AnnualyieldView extends View {

    private Paint mTextPaint, mLinePaint,mPathPaint,mPointPaint;
    //柱状图的宽度
    private float mPaintRectWidth;
    //路径
    private Path mPath;
    //高跟宽
    private float mWidth, mHeight;
    //柱状图的数量
    private final float mCount = 6;
    //偏移量
    private final float offsets=1;

    private float mRectHeight;
    //x轴的坐标
    private List<Float> xline=new ArrayList<Float>();
    //Y轴的坐标
    private List<Float> yline=new ArrayList<Float>();

    //左边文字
    private float []x={2.46f,2.45f,2.44f,2.43f,2.42f,2.41f,2.40f};
    //底部文字
    private String [] day={"07-01","07-02","07-03","07-04","07-05","07-06","07-07"};

    public AnnualyieldView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView();

    }

    public AnnualyieldView(Context context, AttributeSet attrs) {
        super(context, attrs);

        initView();
    }

    public AnnualyieldView(Context context) {
        super(context);

        initView();
    }

    private void initView() {
        //绘制线和文字的颜色
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.parseColor("#cccccc"));
        mTextPaint.setTextSize(25);
        mTextPaint.setStrokeWidth(1);

        //绘制折线图的点
        mPointPaint= new Paint();
        mPointPaint.setAntiAlias(true);
        mPointPaint.setColor(Color.parseColor("#000000"));
        mPointPaint.setTextSize(25);
        mPointPaint.setStrokeWidth(5);

        //绘制柱状图的画笔
        mLinePaint = new Paint();
        mLinePaint.setAntiAlias(true);

        //绘制折线图的画笔
        mPathPaint= new Paint();
        mPathPaint.setAntiAlias(true);
        mPathPaint.setColor(Color.parseColor("#ff0000"));
        mPathPaint.setStyle(Style.STROKE);

        //折线图的路径
        mPath=new Path();

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth=(float)(getWidth()-getWidth()*0.1);
        mHeight=(float)(getHeight()-getHeight()*0.1);
        mRectHeight=(float)(getHeight()-getHeight()*0.1);
        mPaintRectWidth=(float) (mWidth*0.8/mCount);
        mLinePaint.setStrokeWidth(mPaintRectWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        onDrawRect(canvas);     
        onDrawLine(canvas);
        canvasPath(canvas);
    }
    //绘制6个矩形
    private void onDrawRect(Canvas canvas) {
        for (int i = 0; i < 7; i++) {
            if (i%2==0) {
                mLinePaint.setColor(Color.parseColor("#eeeeee"));
            }else {
                mLinePaint.setColor(Color.parseColor("#ece1f3"));
            }   
            float left  =(float) (mWidth * 0.4 / 2 + mPaintRectWidth * i + offsets);
            float right=(float) (mWidth * 0.4 / 2 + mPaintRectWidth* (i + 1));

            canvas.drawRect(left,(float)(mRectHeight*0.01),right, mHeight, mLinePaint);
        }

    }
    //绘制网格线
    private void onDrawLine(Canvas canvas){
        //第一条线
        canvas.drawLine(mPaintRectWidth-mPaintRectWidth/2, (float)(mRectHeight*0.01), getWidth(),  (float)(mRectHeight*0.01), mTextPaint);
        //定义这里高度
        float height;
        //横七条
        for (float i = 0; i < 7; i++) {
            //从上到下
            if (i==0) {
                height=i;
            }else {
                height=mRectHeight*(i/6);
                float size=mTextPaint.measureText(x[(int)i]+"");
                //绘制线
                canvas.drawLine(mPaintRectWidth+mPaintRectWidth/2, height, getWidth(),  height, mTextPaint);
                //绘制左边Y轴的文字
                canvas.drawText(x[(int)i]+"", (float)(mPaintRectWidth-mPaintRectWidth*0.35), height+size/5, mTextPaint);
            }

        }
        //竖七条
        canvas.drawLine((float) (mPaintRectWidth-mPaintRectWidth/2),0, (float) (mPaintRectWidth-mPaintRectWidth/2),  mHeight, mTextPaint);
        for (float i = 0; i < 7; i++) {
            //从左到右
            canvas.drawLine((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),0, (float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),  mHeight, mTextPaint);
            //绘制底边的日期文字
            canvas.drawText(day[(int) i], (float) (mWidth * 0.34 / 2 + mPaintRectWidth * i), (float)(mHeight+mHeight*0.1), mTextPaint);
            //准备好下面折线图的X轴坐标
            xline.add((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i));
        }
        //折线图的第一个点
        xline.add((float) (mPaintRectWidth-mPaintRectWidth/2));



    }
    //绘制折线路径
    public void canvasPath(Canvas canvas){


        for (int j = 0; j < yline.size(); j++) {

            float x=xline.get(j);
            float y =yline.get(j);
            float aftery=Math.initData(y);
            if (j==0) {
                mPath.moveTo(x,aftery );
            }else{

                mPath.lineTo(x,aftery );
            }
            canvas.drawPoint(x, aftery, mPointPaint);
            float size=mPointPaint.measureText(y+"");
            canvas.drawText(y+"", (float)(x-size/2), (float)(aftery+size*0.25), mPointPaint);
        }
        canvas.drawPath(mPath, mPathPaint);
    }
    //用于设置Y轴的坐标值
    public void setDataY( List<Float> yline) {
        this.yline.clear();
        this.yline=yline;
    }
    //一个更新UI的方法
    public void invalidata(){
        invalidate();
    }
}

MainActivity.java

/**
 * 小瓶盖 2016年7月13日18:08:28
 * 
 * @author Android自定义View——实现理财类APP七日年化收益折线图效果
 *
 *相关博客地址 http://blog.csdn.net/qq_25193681
 */
public class MainActivity extends Activity {
    private AnnualyieldView annualyieldView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        annualyieldView=(AnnualyieldView) findViewById(R.id.line);
        initdata();
    }
    private void initdata() {
        List<Float> yline=new ArrayList<Float>();
        yline.add(2.420123f);
        yline.add(2.444122f);
        yline.add(2.45359f);
        yline.add(2.4206f);
        yline.add(2.4357f);
        yline.add(2.4228f);
        yline.add(2.4350f);
        annualyieldView.setDataY(yline);

    }

}

布局文件activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.annualyield.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
         android:layout_margin="10dip"
        android:orientation="vertical" >

        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#888888"
            android:textSize="18sp"
            android:text="七日年化收益率(%)"
            />

        <com.example.annualyield.AnnualyieldView
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="200dip"
            android:layout_marginTop="10dip"
            android:layout_marginBottom="10dip" />
    </LinearLayout>

</RelativeLayout>

还有一个用于转换的类，Math.java

/**
 * 小瓶盖 2016年7月13日18:08:28
 * 
 * @author Android自定义View——实现理财类APP七日年化收益折线图效果
 *
 *相关博客地址 http://blog.csdn.net/qq_25193681
 */
public class Math {

    public static float initData(float a){

        if (2.40f<=a&&a<2.41f) {
            a=540f-540f/(a/0.01f);
        }else if(2.41f<=a&&a<2.42f){
            a=480f-480f/(a/0.01f);
        }else if (2.42f<=a&&a<2.43f) {
            a=360f-360f/(a/0.01f);
        }else if (2.43f<=a&&a<2.44f) {
            a=270f-270f/(a/0.01f);
        }else if (2.44f<=a&&a<2.45f) {
            a=180f-180f/(a/0.01f);
        }else if (2.45f<=a&&a<2.46f) {
            a=90f-90f/(a/0.01f);
        }

        return a;

    }
}

以上就是代码的全部内容，我记得我大学的老实说，不懂的地方就自己多敲代码，多了就懂了，虽然那时候我不认同，但是现在觉得还是有一定道理，都是一样过来的，现在希望能够跟大家一起进步。

最后我附上源码：

小瓶盖_tl
关注
专栏目录
Android探索之旅（第十四篇）Android中实现炫酷效果的Demo（持续收录中......）
移动开发Android
04-26 1620
Android 炫酷多重水波纹 MultiWaveHeader 利用SpannableString富文本方式设置圆角标签背景 MPAndroidChart 自定义绘制最高点标识 浪起来！使用 drawBitmapMesh 实现仿真水波纹效果 简书传送门 什么，你居然说这种效果不好，那么再来一发→传送门 三十秒实现QQ首页动画特效 简书传送门...
Android开源经典项目
Tamic （大白）
09-13 5777
Android开源项目大全，包括经典个人博客，组织和开源项目
android 实现淘宝收益图的折线
weixin_33795743的博客
03-27 139
实现的效果我一会贴上，我先说下原理，我们知道要实现在canvas上画线，不就是要搞一个paint嘛，然后首先肯定要设置下paint的属性，那么画文字呢，不就是Textpaint吗， 对，就是这么简单，接下来怎么画，折线图主要分为X轴和y轴，x轴表示日期，y表示收益，好，说道这里，大家应该知道怎么去做了，下面直接贴代码， 这个方法是，画x,y坐标系的，以...
Android 支付宝收益（折线）图、淘宝收益图
Android_my的博客
09-26 3872
Android 支付宝收益（折线）图、淘宝收益图 话不多说，先上图 最近看了一个博文，个人觉得不错，大家能在开发中获取会用到这样的东西，所以我把这位大神的文章给粘贴过来，希望这个大哥看见之后，不要见怪哈！这是他的博客地址http://blog.csdn.net/xiangzhihong8/article/details/50990788 我们知道要实现在canvas上画线，不就是要搞一个
Android自定义7日年化收益率图表
04-25
文档介绍：http://blog.csdn.net/li_y_w/article/details/70767630
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5101
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
基于Android的理财app
11-28
功能包含：新增账务，房贷计算器，提醒设置，数据统计报表，用户反馈调研，账户管理。
Android 自定义View之能力分析图
weixin_30197685的博客
12-20 361
MainActivity //能力分析图 AbilityAnalysisView abilityView = (AbilityAnalysisView) findViewById(R.id.abilityAnalysisView_id) analysisView.setDataCount(5) .setTit...
易语言个人理财软件，带柱状图、折线图表分析显示，稍加修改即可商用。
02-14
人理财软件，带柱状图、折线图表分析显示，稍加修改即可商用
Android 自定义View，实现折线图
06-10
Android 自定义View，实现折线图 ，可参考博客http://blog.csdn.net/yifei1989/article/details/29891211
Android 折线图(模仿支付宝月账单的折线图)
11-25
通过Android自带的path类自定义的一个仿支付宝的折线图，X,Y轴是写死的，需要重新赋值
Android 实时动态折线图Linechart
07-07
实现了折线图的实时动态更新，可以自定义X轴坐标，可是设置Y坐标的最大值和最小值，android 绘制折线图（AChartEngine）Linechart 动态更新横轴为获取的当前时间
七日年化收益率优化版
07-26
该包为七日年化收益率的折线图，在原先的基础上，优化了可能存在的浮点数除不尽问题，以及部分手机出现的内存泄漏问题
android+自定义折现图,Android自定义折线图
weixin_39793319的博客
05-26 331
效果图:imageimage设计图标注:image1.自定义折线图LineChartView的属性,可以参照上面给出的标注图:2.在布局文件使用自定义的属性值画图,自定义一个LineChartView嵌套在HorizontalScrollView下面,让LineChartView可以左右滑动;android:layout_width="match_parent"android:layout_hei...
金融类自定义View（一）--仿蚂蚁财富基金收益曲线图
高远的博客
11-04 6217
仿蚂蚁金服基金收益曲线图自定义View 该自定义View模仿了蚂蚁金服的基金收益曲线图走势。大致包含以下功能：x轴绘制等分时间坐标；y轴绘制等分收益值；中间绘制等分虚线；收益变化折线图；上方默认显示最后收益值；长按显示当前距离最近按下点的时间坐标以及对应收益值的十字线，同时上方显示对应时间与收益。看似简单的一个收益曲线图，包含很多细节技术点需要处理。虽然该自定义View比较简单，但是和金融类复杂
Android中MPAndroidChart之（柱形图、饼形图、折线图等）
迷茫的小亮仔的博客
03-23 2321
众所周知，现在手机App是越来越活了，样式也是千变万化，电商类、旅游类、医疗类、服务类，当然金融类也是不可少的~~~说道金融类有些人就会想到股票，股票呢就会涉及到趋势问题，那么我们如何才能让他的趋势在App中显示出来呢，接下来我就来教大家如何做的吧！！！一、MPAndroidChartMPAndroidChart 是一款专门用于Android绘制图表的库，相当强大，当然也有IOS的版本。GitHu...
Android自定义控件之《折线图的绘制》
知足常乐
01-03 4049
金融软件里的行情分时图，这是我们最常见的折线图，当然了，折线图的用途并不仅仅局限于此，像一般在一定区间内，为了更好的能显示出幅度的变化，那么用折线图来展示无疑是最符合效果的，当然了，网上也有很多的第三方开源，这篇文章呢，对开源的不做过多描述，想要了解请关注后续文章，好了，废话不多说，让我们从0来一步步绘制折线图吧。 先来看一下我们最终要实现的效果：         
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值