Android高仿支付宝的财富折线图

作者: 落后程序员 | 来源:发表于2019-12-10 21:36 被阅读0次

Android高仿支付宝的财富折线图
android支付宝首页、蚂蚁森林效果、视频背景、校园电台、载入
android高仿全民直播、多窗口管理、图标效果、开发框架，下拉
高仿书旗小说 Flutter版，支持iOS、Android
android多框架实现短视频应用、3D手势旋转、banner控
iOS 仿支付宝首页样式
开源库推荐文章 - 收藏集 - 掘金
2016.6
Flutter入门实战—高仿知乎日报
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝

WechatIMG3.jpeg

WechatIMG4.jpeg

这是支付宝里面的基金的折线图，可以实现左右滑动查看具体一天的情况的图

最近我司业务也遇到需要这样的效果图，趁机自己也撸了一炮写一个类似的view
我做的效果图

不点击的时候

点击的时候

代码写的非常简单，适合新手学习的代码

package mo.wall.org.markerview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.Rect;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Copyright (C), 2018-2019
 * Author: ziqimo
 * Date: 2019-12-06 19:54
 * Description:
 * History:
 * <author> <time> <version> <desc>
 * 作者姓名 修改时间 版本号 描述
 */
public class MarkerView extends View {

    private static final String TAG = MarkerView.class.getSimpleName();

    private int width, height;


    public List<String> yHearts;

    public List<String> xTimes;

    public Map<String, String> datas;


    private Paint yTextPaint = null;


    private Paint yLinePaint = null;

    private Paint xLinePaint = null;

    private Paint xTextPaint = null;

    /**
     * 曲线图的画
     */
    private Paint contentPaint = null;

    private Path contentPath = null;

    private int radius;
    private int radiusCenter;

    private Paint normalPointPaint;

    private Paint normalWhilePointPaint;


    private List<Float> xWeizi = new ArrayList<>();


    private List<PointXY> points = new ArrayList<>();


    public MarkerView(Context context) {
        this(context, null);
    }

    public MarkerView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MarkerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MarkerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = getWidth();
        height = getHeight();
    }

    /**
     * 滑动的线在这2个区间内
     */
    float startX = 0;
    float endX = 0;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制y轴上的文字
        int ySize = yHearts.size();

        int yEqually = height / ySize;


        int textH = -1;

        for (int i = 0; i < ySize; i++) {
            String yText = yHearts.get(i);
            int nextY = yEqually * (ySize - i) - getPaddingBottom() - getPaddingTop();
            float yTextMeasureText = yTextPaint.measureText(yText);
            Rect rect = new Rect();
            yTextPaint.getTextBounds(yText, 0, yText.length(), rect);
            textH = rect.height();
            canvas.drawText(yText, getPaddingLeft(), nextY, yTextPaint);
            //这里画条线
            startX = getPaddingLeft() + yTextMeasureText + dip2px(getContext(), 10);
            endX = width - getPaddingRight();
            canvas.drawLine(startX, nextY - textH / 2, endX, nextY - textH / 2, yLinePaint);
        }
        //绘制x轴上的文字
        int xSize = xTimes.size();
        int xEqually = width / xSize;


        int singleY = -1;
        int minY = -1;
        int maxY = -1;
        try {
            minY = Integer.parseInt(yHearts.get(0));
            maxY = Integer.parseInt(yHearts.get(ySize - 1));
        } catch (Exception e) {

        } finally {
            singleY = (maxY - minY) / ySize;
        }

        //y 每一个等分距离
        //每个等分都要减去文字的一半的高度
        int yUnit = (height - getPaddingBottom() - getPaddingTop()) / ySize - textH / 2;


        points.clear();
        xWeizi.clear();
        for (int i = 0; i < xSize; i++) {
            float nextX = (int) (xEqually * i + startX) + getPaddingLeft();
            //记录滑动线的最大值和最小值
            if (i == 0) {
                startX = Math.max(nextX, startX);
            }
            if (i == xSize - 1) {
                endX = Math.min(nextX, endX);
            }
            String xText = xTimes.get(i);
            xWeizi.add(nextX);
            canvas.drawText(xText, nextX, height - getPaddingBottom(), xTextPaint);

            //记录下线的位置
            PointXY point = new PointXY();
            int y = 0;
            try {
                String content = datas.get(xText);
                y = Integer.parseInt(content);
            } catch (Exception e) {

            } finally {
                point.x = nextX;
                //计算y的位置
                point.y = (height - getPaddingBottom() - getPaddingTop()) - yUnit * (y - minY) / singleY;
            }
            points.add(point);
            if (i == 0) {
                contentPath.moveTo(point.x, point.y);
            } else {
                contentPath.lineTo(point.x, point.y);
            }
        }

        //这是合并的效果，暂时不需要
        //这是合并的效果，暂时不需要
        //这是合并的效果，暂时不需要
//        contentPath.lineTo(points.get(points.size() - 1).x, height - getPaddingBottom() - getPaddingTop() - textH / 2);
//        contentPath.lineTo(startX + getPaddingLeft(), height - getPaddingBottom() - getPaddingTop() - textH / 2);
//        contentPath.close();
        //这是合并的效果，暂时不需要
        //这是合并的效果，暂时不需要
        //这是合并的效果，暂时不需要

        canvas.drawPath(contentPath, contentPaint);

        //画点
        for (int i = 0; i < points.size(); i++) {
            canvas.drawCircle(points.get(i).x, points.get(i).y, radius, normalPointPaint);
            canvas.drawCircle(points.get(i).x, points.get(i).y, radiusCenter, normalWhilePointPaint);//用于消除交际部分，我菜只能这样做了
        }
        //垂直的线
        canvas.drawLine(currentX, height, currentX, 0, xLinePaint);
    }

    private void init(AttributeSet attrs) {
        if (attrs != null) {

        }

        yTextPaint = new Paint();
        yTextPaint.setColor(Color.parseColor("#333333"));
        yTextPaint.setTextSize(23);
        yTextPaint.setTextAlign(Paint.Align.LEFT);

        xTextPaint = new Paint();
        xTextPaint.setColor(Color.parseColor("#333333"));
        xTextPaint.setTextSize(24);
        xTextPaint.setTextAlign(Paint.Align.CENTER);

        yLinePaint = new Paint();
        yLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        yLinePaint.setColor(Color.parseColor("#333333"));


        xLinePaint = new Paint();
        xLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        xLinePaint.setColor(Color.parseColor("#333333"));
        xLinePaint.setStrokeWidth(dip2px(getContext(), 1));


        contentPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        contentPaint.setColor(Color.parseColor("#303F9F"));
        contentPaint.setStrokeWidth(dip2px(getContext(), 3));
        contentPaint.setStyle(Paint.Style.STROKE);


        contentPath = new Path();

        radius = dip2px(getContext(), 3);//圆半径

        radiusCenter = radius - dip2px(getContext(), 1);//圆半径


        normalPointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        normalPointPaint.setColor(Color.parseColor("#303F9F"));
        normalPointPaint.setStrokeWidth(dip2px(getContext(), 3));
        normalPointPaint.setStyle(Paint.Style.STROKE);

        normalWhilePointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        normalWhilePointPaint.setColor(Color.parseColor("#FFFFFF"));
        normalWhilePointPaint.setStrokeWidth(dip2px(getContext(), 3));
        normalWhilePointPaint.setStyle(Paint.Style.FILL);


        yHearts = new ArrayList<>();
        xTimes = new ArrayList<>();

        datas = new HashMap<>();


        yHearts.add("300");
        yHearts.add("400");
        yHearts.add("500");
        yHearts.add("600");
        yHearts.add("700");
        yHearts.add("800");

        xTimes.add("11-13");
        xTimes.add("11-14");
        xTimes.add("11-15");
        xTimes.add("11-16");
        xTimes.add("11-17");
        xTimes.add("11-18");

        datas.put("11-13", "309");
        datas.put("11-14", "510");
        datas.put("11-15", "760");
        datas.put("11-16", "390");
        datas.put("11-17", "620");
        datas.put("11-18", "590");
    }


    private float currentX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                currentX = (int) event.getX();
                if (currentX > endX) {
                    currentX = endX;
                }
                if (currentX < startX) {
                    currentX = startX;
                }
                int pos = 0;
                for (int i = 0; i < xWeizi.size(); i++) {
                    //每个点的x与touch的x求绝对值……
                    //哪个最小就是哪个点近。。
                    float curX = xWeizi.get(i);
                    if (i == 0 && currentX < xWeizi.get(i + 1) / 2) {
                        pos = i;
                        break;
                    } else if (currentX < curX) {
                        pos = i;
                        break;
                    }
                }
                float curX = xWeizi.get(pos);
                currentX = curX;

//                boolean contains = xWeizi.contains(currentX);
//                if (contains) {
//                    Log.i(TAG, "currentX：" + currentX);
//                    Log.i(TAG, "startX：" + startX);
//                    Log.i(TAG, "endX：" + endX);
//                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                currentX = -100;
                invalidate();
                break;
        }
        return true;
    }


    static class PointXY {
        float x;
        float y;
    }

    /**
     * 将dp转换成px
     *
     * @param context
     * @param dpValue
     * @return
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 将像素转换成dp
     *
     * @param context
     * @param pxValue
     * @return
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

先前这个画的一般般，后面优化了很多细节的东西放在这里

image.png

上面这个是新增的类

image.png

最后github地址：https://github.com/moz1q1/WalleLibrary

Android高仿支付宝的财富折线图
这是支付宝里面的基金的折线图，可以实现左右滑动查看具体一天的情况的图最近我司业务也遇到需要这样的效果图，趁机自己...
android支付宝首页、蚂蚁森林效果、视频背景、校园电台、载入
Android精选源码 android实现蚂蚁森林效果源码 android仿支付宝首页应用管理(拖拽排序，添加删除...
android高仿全民直播、多窗口管理、图标效果、开发框架，下拉
Android精选源码 android仿UC浏览器多窗口管理界面 android高仿全民直播项目源码 androi...
高仿书旗小说 Flutter版，支持iOS、Android
高仿书旗小说 Flutter版，支持iOS/Android 高仿书旗小说 Flutter 版 Github地址ht...
android多框架实现短视频应用、3D手势旋转、banner控
Android精选源码 android智能管家app源码 Android高仿拼多多分类列表 Android百度地图...
iOS 仿支付宝首页样式
iOS 仿支付宝首页样式 iOS 仿支付宝首页样式
开源库推荐文章 - 收藏集 - 掘金
高仿微信语音库 --LQRAudioRecord - Android - 掘金LQRAudioRecord 本库集...
2016.6
6.1 Retrofit2源码分析（一） Android JNI原理分析扫清Android面试障碍高仿网易新闻...
Flutter入门实战—高仿知乎日报
Flutter版高仿知乎日报高仿知乎日报，UI基本和Android端的知乎日报一致。新手小白的练习demo，代码...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝
Android精选源码仿支付宝记账本功能，饼状图；数字键盘 android一款功能完善的电子书应用源码 Andr...