Android實現(xiàn)自定義曲線圖
更新時間：2022年06月29日 10:35:11 作者：隔壁小王66
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)自定義曲線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一般來說應(yīng)用中比較常見的是折線圖，直方圖這種比較多，今天來寫一個項目中的需求曲線圖，也是在之前的折線圖基礎(chǔ)上改進而來，看效果圖
主要考慮曲線的實現(xiàn)以及陰影部分的實現(xiàn)
先看代碼：
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
?* Created by wangchang on 2019/4/29.
?*/
public class StudyBendLine extends View {
? ? private float sumHeight;//總控件的高度
? ? private float sumWidth;//總空間的寬度
? ? private float maxTime;//最大的時間 用來劃分單位的 最小就是20 X1.2是為了給上方和下方預(yù)留空間
? ? private Paint linePaint;//線的畫筆
? ? private Paint shadowPaint;//陰影的畫筆
? ? private Paint mPaint;//曲線畫筆
? ? private Paint circlePaint;//圓點畫筆
? ? private Paint circlePaint2;//圓點畫筆
? ? private Paint textPaint;//文字的畫筆
? ? private ArrayList<Integer> timeList;//讀書時間
? ? private ArrayList<String> dataList;//底部的時間
? ? private float oneHeight; //每一個小段所要分成的高
? ? private float oneWidth;//每一個小段所要分成的寬
? ? private float buttomHeiht; //給底部一排日期預(yù)留出的時間
? ? private Path baseLinePath;//折線路徑
? ? private float smoothness = 0.36f; //折線的彎曲率
? ? private Paint baseShadow;//折線下的陰影的畫筆
? ? private ArrayList<PointF> xyList;//儲存定好的坐標(biāo)點的集合
? ? public StudyBendLine(Context context) {
? ? ? ? super(context);
? ? ? ? initPaint();
? ? }
? ? public StudyBendLine(Context context, AttributeSet attrs) {
? ? ? ? super(context, attrs);
? ? ? ? initPaint();
? ? }
? ? /**
? ? ?* 初始化畫筆
? ? ?*
? ? ?* @linpaint 線條畫筆
? ? ?* @shadowPaint 陰影畫筆
? ? ?*/
? ? private void initPaint() {
? ? ? ? //畫線的畫筆
? ? ? ? linePaint = new Paint();
? ? ? ? linePaint.setColor(Color.parseColor("#17CAAA"));
? ? ? ? linePaint.setAntiAlias(true);
? ? ? ? linePaint.setTextSize(dp2px(getContext(), 12));
? ? ? ? linePaint.setStrokeWidth(dp2px(getContext(), 1));
? ? ? ? //畫背景的畫筆
? ? ? ? shadowPaint = new Paint();
? ? ? ? shadowPaint.setColor(Color.parseColor("#CBF2ED"));
? ? ? ? shadowPaint.setAntiAlias(true);
? ? ? ? //畫最下方文字的畫筆
? ? ? ? textPaint = new Paint();
? ? ? ? textPaint.setColor(Color.parseColor("#999999"));
? ? ? ? textPaint.setAntiAlias(true);
? ? ? ? textPaint.setTextSize(dp2px(getContext(), 11));
? ? ? ? circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? circlePaint.setColor(Color.parseColor("#8BE4D4"));
? ? ? ? circlePaint.setStrokeWidth(dp2px(getContext(), 2));
? ? ? ? circlePaint.setStyle(Paint.Style.STROKE);
? ? ? ? circlePaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? circlePaint2.setColor(Color.WHITE);
? ? ? ? circlePaint2.setStyle(Paint.Style.FILL);
? ? ? ? baseShadow = new Paint();
? ? ? ? baseShadow.setAntiAlias(true);
? ? ? ? baseShadow.setColor((Color.WHITE & 0x40FFFFFF) | 0x10000000);
? ? ? ? baseShadow.setStyle(Paint.Style.FILL);
? ? ? ? buttomHeiht = dp2px(35);//線距離底部高度
? ? ? ? mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? mPaint.setColor(Color.parseColor("#17CAAA"));
? ? ? ? mPaint.setStrokeWidth(dp2px(getContext(), 2));
? ? ? ? mPaint.setStyle(Paint.Style.STROKE);
? ? ? ? mPaint.setStrokeCap(Paint.Cap.ROUND);
? ? ? ? mPaint.setColor(Color.parseColor("#17CAAA"));
? ? }
? ? @Override
? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
? ? ? ? super.onMeasure(widthMeasureSpec, heightMeasureSpec);
? ? ? ? sumHeight = getMeasuredHeight();
? ? ? ? sumWidth = getMeasuredWidth();
? ? }
? ? @Override
? ? protected void onSizeChanged(int w, int h, int oldw, int oldh) {
? ? ? ? super.onSizeChanged(w, h, oldw, oldh);
? ? }
? ? private void measure() {
? ? ? ? maxTime = 100;//最大分?jǐn)?shù)為100
? ? ? ? for (int i = 0; i < 7; i++) {
? ? ? ? ? ? if (maxTime <= timeList.get(i)) {
? ? ? ? ? ? ? ? maxTime = timeList.get(i);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if (maxTime < 20) {
? ? ? ? ? ? maxTime = 20;
? ? ? ? }
? ? ? ? String text = "分";
? ? ? ? Rect rect = new Rect();
? ? ? ? textPaint.getTextBounds(text, 0, text.length(), rect);
? ? ? ? oneHeight =((sumHeight-buttomHeiht-2*rect.height()) / maxTime);
? ? ? ? oneWidth = sumWidth / 28;
? ? }
? ? /**
? ? ?* 更新閱讀時間
? ? ?*/
? ? public void updateTime(ArrayList<Integer> timeList, ArrayList<String> bottomList) {
? ? ? ? this.timeList = timeList;
? ? ? ? this.dataList = bottomList;
? ? ? ? if (this.timeList!=null&&this.timeList.size()>0&&dataList!=null&&dataList.size()>0) {
? ? ? ? ? ? invalidate();
? ? ? ? }
? ? }
? ? @Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? super.onDraw(canvas);
? ? ? ? if (timeList == null || dataList == null) return;
? ? ? ? maxTime = getMaxTime(timeList);
? ? ? ? measure();
? ? ? ? toGetXy();//獲取x和y的坐標(biāo)
? ? ? ? toDrawLine(canvas);
? ? }
? ? private void toGetXy() {
? ? ? ? int leftWidth = dp2px(13);//距離右邊寬度
? ? ? ? xyList = new ArrayList<>();
? ? ? ? for (int i = 0; i < 7; i++) {
? ? ? ? ? ? float x = oneWidth + i * 4 * oneWidth;
? ? ? ? ? ? float time = timeList.get(i);//每點時間
? ? ? ? ? ? float y = (sumHeight - (oneHeight * time));
? ? ? ? ? ? xyList.add(new PointF(x + leftWidth, y - buttomHeiht));
? ? ? ? }
? ? }
? ? /**
? ? ?* 畫線
? ? ?*/
? ? private void toDrawLine(Canvas canvas) {
? ? ? ? if (xyList == null || xyList.size() == 0) {
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? List<PointF> NewPoints = new ArrayList<>();
? ? ? ? NewPoints.addAll(xyList);
? ? ? ? float lX = 0;
? ? ? ? float lY = 0;
? ? ? ? baseLinePath = new Path();
? ? ? ? baseLinePath.moveTo(NewPoints.get(0).x, NewPoints.get(0).y);
? ? ? ? for (int i = 1; i < NewPoints.size(); i++) {
? ? ? ? ? ? PointF p = NewPoints.get(i);
? ? ? ? ? ? PointF firstPointF = NewPoints.get(i - 1);
? ? ? ? ? ? float x1 = firstPointF.x + lX;
? ? ? ? ? ? float y1 = firstPointF.y + lY;
? ? ? ? ? ? PointF secondPointF = NewPoints.get(i + 1 < NewPoints.size() ? i + 1 : i);
? ? ? ? ? ? lX = (secondPointF.x - firstPointF.x) / 2 * smoothness;
? ? ? ? ? ? lY = (secondPointF.y - firstPointF.y) / 2 * smoothness;
? ? ? ? ? ? float x2 = p.x - lX;
? ? ? ? ? ? float y2 = p.y - lY;
? ? ? ? ? ? if (y1 == p.y) {
? ? ? ? ? ? ? ? y2 = y1;
? ? ? ? ? ? }
? ? ? ? ? ? baseLinePath.cubicTo(x1, y1, x2, y2, p.x, p.y);
? ? ? ? }
? ? ? ? canvas.drawPath(baseLinePath, mPaint);
? ? ? ? for (int i = 0; i < NewPoints.size(); i++) {
? ? ? ? ? ? float x = NewPoints.get(i).x;
? ? ? ? ? ? float y = NewPoints.get(i).y;
? ? ? ? ? ? int time = timeList.get(i);
? ? ? ? ? ? String mThumbText = String.valueOf(time);
? ? ? ? ? ? Rect rect = new Rect();
? ? ? ? ? ? linePaint.getTextBounds(mThumbText, 0, mThumbText.length(), rect);
? ? ? ? ? ? canvas.drawText(mThumbText, x - rect.width() / 2, y - dp2px(6), linePaint);//畫最上面字體
? ? ? ? ? ? canvas.drawCircle(x, y, dp2px(3), circlePaint);
? ? ? ? ? ? canvas.drawCircle(x, y, dp2px(2), circlePaint2);
? ? ? ? ? ? Rect rectf = new Rect();
? ? ? ? ? ? textPaint.getTextBounds(dataList.get(i), 0, dataList.get(i).length(), rectf);
? ? ? ? ? ? canvas.drawText(dataList.get(i), x - rectf.width() / 2, sumHeight - dp2px(2), textPaint);//畫最下方的字體
? ? ? ? }
? ? ? ? drawArea(canvas, NewPoints);
? ? ? ? drawBottomLine(canvas);
? ? ? ? drawLine(canvas);
? ? }
? ? /**
? ? ?* 分割線
? ? ?*
? ? ?* @param canvas
? ? ?*/
? ? private void drawLine(Canvas canvas) {
? ? ? ? mPaint.setColor(Color.parseColor("#DDDDDD"));
? ? ? ? mPaint.setStrokeWidth(dp2px(0.5f));
? ? ? ? //
? ? ? ? String text = "0";
? ? ? ? Rect rect = new Rect();
? ? ? ? mPaint.getTextBounds(text, 0, text.length(), rect);
? ? ? ? //0
? ? ? ? canvas.drawText(text, 0, sumHeight - buttomHeiht - rect.height() / 2, textPaint);
? ? ? ? //60
? ? ? ? text = "60";
? ? ? ? float y = (sumHeight - (oneHeight * 60));
? ? ? ? canvas.drawText(text, 0, y - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
? ? ? ? canvas.drawLine(0, y - buttomHeiht, sumWidth, y - buttomHeiht, mPaint);
? ? ? ? //100
? ? ? ? text = "100(分)";
? ? ? ? float y2 = (sumHeight - (oneHeight * 100));
? ? ? ? canvas.drawText(text, 0, y2 - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
? ? ? ? canvas.drawLine(0, y2 - buttomHeiht, sumWidth, y2 - buttomHeiht, mPaint);
? ? }
? ? /**
? ? ?* 底部標(biāo)線
? ? ?*
? ? ?* @param canvas
? ? ?*/
? ? private void drawBottomLine(Canvas canvas) {
? ? ? ? mPaint.setColor(Color.parseColor("#EBEBEB"));
? ? ? ? mPaint.setStrokeWidth(dp2px(1));
? ? ? ? Rect rect = new Rect();
? ? ? ? mPaint.getTextBounds("0", 0, "0".length(), rect);
? ? ? ? canvas.drawLine(0, sumHeight - dp2px(15) - rect.height() / 2, sumWidth, sumHeight - dp2px(15) - rect.height() / 2, mPaint);//畫底部灰線
? ? }
? ? /**
? ? ?* 陰影層疊
? ? ?*
? ? ?* @param canvas
? ? ?* @param Points
? ? ?*/
? ? private void drawArea(Canvas canvas, List<PointF> Points) {
? ? ? ? LinearGradient mShader = new LinearGradient(0, 0, 0, getMeasuredHeight(), new int[]{Color.parseColor("#BAEFE6"), Color.parseColor("#D7F5F0"), Color.parseColor("#F9FEFD")}, new float[]{0.5f, 0.65f, 0.85f}, Shader.TileMode.REPEAT);
? ? ? ? baseShadow.setShader(mShader);
? ? ? ? if (Points.size() > 0 && xyList != null && xyList.size() > 0) {
? ? ? ? ? ? baseLinePath.lineTo(xyList.get(Points.size() - 1).x, sumHeight - buttomHeiht);
? ? ? ? ? ? baseLinePath.lineTo(xyList.get(0).x, sumHeight - buttomHeiht);
? ? ? ? ? ? baseLinePath.close();
? ? ? ? ? ? canvas.drawPath(baseLinePath, baseShadow);
? ? ? ? }
? ? }
? ? public int dp2px(float dp) {
? ? ? ? final float scale = this.getResources().getDisplayMetrics().density;
? ? ? ? return (int) (dp * scale + 0.5f);
? ? }
? ? /**
? ? ?* 取出時間里面的最大的一個用來計算總長度
? ? ?*
? ? ?* @param timeList
? ? ?* @return
? ? ?*/
? ? public float getMaxTime(List<Integer> timeList) {
? ? ? ? maxTime = 0;
? ? ? ? for (int i = 0; i < 7; i++) {
? ? ? ? ? ? if (maxTime < timeList.get(i)) {
? ? ? ? ? ? ? ? maxTime = timeList.get(i);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if (maxTime <= 10) {
? ? ? ? ? ? maxTime = 10;
? ? ? ? }
? ? ? ? maxTime *= 1.2;
? ? ? ? return maxTime;
? ? }
? ? public ?int dp2px(Context context, float dp) {
? ? ? ? final float scale = context.getResources().getDisplayMetrics().density;
? ? ? ? return (int) (dp * scale + 0.5f);
? ? }
? ? public ?float dp2px(Resources resources, float dp) {
? ? ? ? final float scale = resources.getDisplayMetrics().density;
? ? ? ? return ?dp * scale + 0.5f;
? ? }
? ? public ?float sp2px(Resources resources, float sp){
? ? ? ? final float scale = resources.getDisplayMetrics().scaledDensity;
? ? ? ? return sp * scale;
? ? }
}首先在onMeasure獲取寬高，這里主要說一下getMeasuredHeight，getMeasuredWidth與 getWidth(),getHeight()的區(qū)別，getMeasuredHeight表示view的測量高度，getHeight表示view在屏幕中的高度，當(dāng)屏幕能包含view時，二者大小是一致的，當(dāng)超出屏幕時，getHeight只表示在屏幕中可見部分的高度。
首先將數(shù)據(jù)整理成PointF坐標(biāo)點集合，遍歷坐標(biāo)點集合，通過path.moveto，移動到起始點位置，通過計算貝塞爾曲線的控制點然后調(diào)用cubicTo方法實現(xiàn)貝塞爾曲線。
然后調(diào)用drawpath繪制整個曲線
陰影層疊通過LinearGradient 來實現(xiàn)
private void drawArea(Canvas canvas, List<PointF> Points) {
? ? ? ? LinearGradient mShader = new LinearGradient(0, 0, 0, getMeasuredHeight(), new int[]{Color.parseColor("#BAEFE6"), ? ?Color.parseColor("#D7F5F0"), Color.parseColor("#F9FEFD")}, new float[]{0.5f, 0.65f, 0.85f}, Shader.TileMode.REPEAT);
? ? ? ? baseShadow.setShader(mShader);
? ? ? ? if (Points.size() > 0 && xyList != null && xyList.size() > 0) {
? ? ? ? ? ? baseLinePath.lineTo(xyList.get(Points.size() - 1).x, sumHeight - buttomHeiht);
? ? ? ? ? ? baseLinePath.lineTo(xyList.get(0).x, sumHeight - buttomHeiht);
? ? ? ? ? ? baseLinePath.close();
? ? ? ? ? ? canvas.drawPath(baseLinePath, baseShadow);
? ? ? ? }
}然后你以為這就完了？no，可以看到ondraw方法中為了處理一些問題，在ondraw中進行了實例化的對象創(chuàng)建，這么做是錯誤的。
so，需要把所有的初始化操作都放置在構(gòu)造方法中，因為刷新的時候會調(diào)用ondraw方法，就會導(dǎo)致對象重復(fù)創(chuàng)建，這也是自定義view優(yōu)化的點?？磧?yōu)化之后的代碼
package com.example.android.testviewpager;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
?* Created by wangchang on 2019/4/29.
?*/
public class StudyBendLine extends View {
? ? private float sumHeight;//總控件的高度
? ? private float sumWidth;//總空間的寬度
? ? private float maxTime;//最大的時間 用來劃分單位的 最小就是20 X1.2是為了給上方和下方預(yù)留空間
? ? private Paint linePaint;//線的畫筆
? ? private Paint shadowPaint;//陰影的畫筆
? ? private Paint mPaint;//曲線畫筆
? ? private Paint circlePaint;//圓點畫筆
? ? private Paint circlePaint2;//圓點畫筆
? ? private Paint scorePaint;
? ? private Paint textPaint;//文字的畫筆
? ? private ArrayList<Integer> timeList;//讀書時間
? ? private ArrayList<String> dataList;//底部的時間
? ? private float oneHeight; //每一個小段所要分成的高
? ? private float oneWidth;//每一個小段所要分成的寬
? ? private float buttomHeiht; //給底部一排日期預(yù)留出的時間
? ? private Path baseLinePath;//折線路徑
? ? private float smoothness = 0.36f; //折線的彎曲率
? ? private Paint baseShadow;//折線下的陰影的畫筆
? ? private ArrayList<PointF> xyList;//儲存定好的坐標(biāo)點的集合
? ? public StudyBendLine(Context context) {
? ? ? ? super(context);
? ? ? ? initPaint();
? ? }
? ? public StudyBendLine(Context context, AttributeSet attrs) {
? ? ? ? super(context, attrs);
? ? ? ? initPaint();
? ? }
? ? /**
? ? ?* 初始化畫筆
? ? ?*
? ? ?* @linpaint 線條畫筆
? ? ?* @shadowPaint 陰影畫筆
? ? ?*/
? ? private void initPaint() {
? ? ? ? //畫線的畫筆
? ? ? ? linePaint = new Paint();
? ? ? ? linePaint.setColor(Color.parseColor("#17CAAA"));
? ? ? ? linePaint.setAntiAlias(true);
? ? ? ? linePaint.setTextSize(dp2px(getContext(), 12));
? ? ? ? linePaint.setStrokeWidth(dp2px(getContext(), 1));
? ? ? ? //畫背景的畫筆
? ? ? ? shadowPaint = new Paint();
? ? ? ? shadowPaint.setColor(Color.parseColor("#CBF2ED"));
? ? ? ? shadowPaint.setAntiAlias(true);
? ? ? ? //畫最下方文字的畫筆
? ? ? ? textPaint = new Paint();
? ? ? ? textPaint.setColor(Color.parseColor("#999999"));
? ? ? ? textPaint.setAntiAlias(true);
? ? ? ? textPaint.setTextSize(dp2px(getContext(), 11));
? ? ? ? circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? circlePaint.setColor(Color.parseColor("#8BE4D4"));
? ? ? ? circlePaint.setStrokeWidth(dp2px(getContext(), 2));
? ? ? ? circlePaint.setStyle(Paint.Style.STROKE);
? ? ? ? circlePaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? circlePaint2.setColor(Color.WHITE);
? ? ? ? circlePaint2.setStyle(Paint.Style.FILL);
? ? ? ? baseShadow = new Paint();
? ? ? ? baseShadow.setAntiAlias(true);
? ? ? ? baseShadow.setColor((Color.WHITE & 0x40FFFFFF) | 0x10000000);
? ? ? ? baseShadow.setStyle(Paint.Style.FILL);
? ? ? ? buttomHeiht = dp2px(35);//線距離底部高度
? ? ? ? mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? mPaint.setColor(Color.parseColor("#17CAAA"));
? ? ? ? mPaint.setStrokeWidth(dp2px(getContext(), 2));
? ? ? ? mPaint.setStyle(Paint.Style.STROKE);
? ? ? ? mPaint.setStrokeCap(Paint.Cap.ROUND);
? ? ? ? scorePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? scorePaint.setStyle(Paint.Style.STROKE);
? ? ? ? scorePaint.setStrokeCap(Paint.Cap.ROUND);
? ? ? ? scorePaint.setColor(Color.parseColor("#DDDDDD"));
? ? ? ? scorePaint.setStrokeWidth(dp2px(0.5f));
? ? ? ? baseLinePath = new Path();
? ? }
? ? @Override
? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
? ? ? ? super.onMeasure(widthMeasureSpec, heightMeasureSpec);
? ? ? ? sumHeight = getMeasuredHeight();
? ? ? ? sumWidth = getMeasuredWidth();
? ? }
? ? private void measure() {
? ? ? ? maxTime = 100;//最大分?jǐn)?shù)為100
? ? ? ? for (int i = 0; i < 7; i++) {
? ? ? ? ? ? if (maxTime <= timeList.get(i)) {
? ? ? ? ? ? ? ? maxTime = timeList.get(i);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if (maxTime < 20) {
? ? ? ? ? ? maxTime = 20;
? ? ? ? }
? ? ? ? String text = "分";
? ? ? ? Rect rect = new Rect();
? ? ? ? textPaint.getTextBounds(text, 0, text.length(), rect);
? ? ? ? oneHeight =((sumHeight-buttomHeiht-2*rect.height()) / maxTime);
? ? ? ? oneWidth = sumWidth / 28;
? ? }
? ? /**
? ? ?* 更新閱讀時間
? ? ?*/
? ? public void updateTime(ArrayList<Integer> timeList, ArrayList<String> bottomList) {
? ? ? ? this.timeList = timeList;
? ? ? ? this.dataList = bottomList;
? ? ? ? if (this.timeList!=null&&this.timeList.size()>0&&dataList!=null&&dataList.size()>0) {
? ? ? ? ? ? invalidate();
? ? ? ? }
? ? }
? ? @Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? super.onDraw(canvas);
? ? ? ? if (timeList == null || dataList == null) return;
? ? ? ? maxTime = getMaxTime(timeList);
? ? ? ? measure();
? ? ? ? toGetXy();//獲取x和y的坐標(biāo)
? ? ? ? toDrawLine(canvas);
? ? }
? ? private void toGetXy() {
? ? ? ? int leftWidth = dp2px(13);//距離右邊寬度
? ? ? ? xyList = new ArrayList<>();
? ? ? ? for (int i = 0; i < 7; i++) {
? ? ? ? ? ? float x = oneWidth + i * 4 * oneWidth;
? ? ? ? ? ? float time = timeList.get(i);//每點時間
? ? ? ? ? ? float y = (sumHeight - (oneHeight * time));
? ? ? ? ? ? xyList.add(new PointF(x + leftWidth, y - buttomHeiht));
? ? ? ? }
? ? }
? ? /**
? ? ?* 畫線
? ? ?*/
? ? private void toDrawLine(Canvas canvas) {
? ? ? ? if (xyList == null || xyList.size() == 0) {
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? List<PointF> NewPoints = new ArrayList<>();
? ? ? ? NewPoints.addAll(xyList);
? ? ? ? float lX = 0;
? ? ? ? float lY = 0;
? ? ? ? baseLinePath.reset();
? ? ? ? baseLinePath.moveTo(NewPoints.get(0).x, NewPoints.get(0).y);
? ? ? ? for (int i = 1; i < NewPoints.size(); i++) {
? ? ? ? ? ? PointF p = NewPoints.get(i);
? ? ? ? ? ? PointF firstPointF = NewPoints.get(i - 1);
? ? ? ? ? ? float x1 = firstPointF.x + lX;
? ? ? ? ? ? float y1 = firstPointF.y + lY;
? ? ? ? ? ? PointF secondPointF = NewPoints.get(i + 1 < NewPoints.size() ? i + 1 : i);
? ? ? ? ? ? lX = (secondPointF.x - firstPointF.x) / 2 * smoothness;
? ? ? ? ? ? lY = (secondPointF.y - firstPointF.y) / 2 * smoothness;
? ? ? ? ? ? float x2 = p.x - lX;
? ? ? ? ? ? float y2 = p.y - lY;
? ? ? ? ? ? if (y1 == p.y) {
? ? ? ? ? ? ? ? y2 = y1;
? ? ? ? ? ? }
? ? ? ? ? ? baseLinePath.cubicTo(x1, y1, x2, y2, p.x, p.y);
? ? ? ? }
? ? ? ? canvas.drawPath(baseLinePath, mPaint);
? ? ? ? for (int i = 0; i < NewPoints.size(); i++) {
? ? ? ? ? ? float x = NewPoints.get(i).x;
? ? ? ? ? ? float y = NewPoints.get(i).y;
? ? ? ? ? ? int time = timeList.get(i);
? ? ? ? ? ? String mThumbText = String.valueOf(time);
? ? ? ? ? ? Rect rect = new Rect();
? ? ? ? ? ? linePaint.getTextBounds(mThumbText, 0, mThumbText.length(), rect);
? ? ? ? ? ? canvas.drawText(mThumbText, x - rect.width() / 2, y - dp2px(6), linePaint);//畫最上面字體
? ? ? ? ? ? canvas.drawCircle(x, y, dp2px(3), circlePaint);
? ? ? ? ? ? canvas.drawCircle(x, y, dp2px(2), circlePaint2);
? ? ? ? ? ? Rect rectf = new Rect();
? ? ? ? ? ? textPaint.getTextBounds(dataList.get(i), 0, dataList.get(i).length(), rectf);
? ? ? ? ? ? canvas.drawText(dataList.get(i), x - rectf.width() / 2, sumHeight - dp2px(2), textPaint);//畫最下方的字體
? ? ? ? }
? ? ? ? drawArea(canvas, NewPoints);
? ? ? ? drawBottomLine(canvas);
? ? ? ? drawLine(canvas);
? ? }
? ? /**
? ? ?* 分割線
? ? ?*
? ? ?* @param canvas
? ? ?*/
? ? private void drawLine(Canvas canvas) {
? ? ? ? //
? ? ? ? String text = "0";
? ? ? ? Rect rect = new Rect();
? ? ? ? scorePaint.getTextBounds(text, 0, text.length(), rect);
? ? ? ? //0
? ? ? ? canvas.drawText(text, 0, sumHeight - buttomHeiht - rect.height() / 2, textPaint);
? ? ? ? //60
? ? ? ? text = "60";
? ? ? ? float y = (sumHeight - (oneHeight * 60));
? ? ? ? canvas.drawText(text, 0, y - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
? ? ? ? canvas.drawLine(0, y - buttomHeiht, sumWidth, y - buttomHeiht, scorePaint);
? ? ? ? //100
? ? ? ? text = "100(分)";
? ? ? ? float y2 = (sumHeight - (oneHeight * 100));
? ? ? ? canvas.drawText(text, 0, y2 - buttomHeiht - rect.height() / 2 - dp2px(4), textPaint);
? ? ? ? canvas.drawLine(0, y2 - buttomHeiht, sumWidth, y2 - buttomHeiht, scorePaint);
? ? }
? ? /**
? ? ?* 底部標(biāo)線
? ? ?*
? ? ?* @param canvas
? ? ?*/
? ? private void drawBottomLine(Canvas canvas) {
? ? ? ? Rect rect = new Rect();
? ? ? ? scorePaint.getTextBounds("0", 0, "0".length(), rect);
? ? ? ? canvas.drawLine(0, sumHeight - dp2px(15) - rect.height() / 2, sumWidth, sumHeight - dp2px(15) - rect.height() / 2, scorePaint);//畫底部灰線
? ? }
? ? /**
? ? ?* 陰影層疊
? ? ?*
? ? ?* @param canvas
? ? ?* @param Points
? ? ?*/
? ? private void drawArea(Canvas canvas, List<PointF> Points) {
? ? ? ? LinearGradient mShader = new LinearGradient(0, 0, 0, getMeasuredHeight(), new int[]{Color.parseColor("#BAEFE6"), Color.parseColor("#D7F5F0"), Color.parseColor("#F9FEFD")}, new float[]{0.5f, 0.65f, 0.85f}, Shader.TileMode.REPEAT);
? ? ? ? baseShadow.setShader(mShader);
? ? ? ? if (Points.size() > 0 && xyList != null && xyList.size() > 0) {
? ? ? ? ? ? baseLinePath.lineTo(xyList.get(Points.size() - 1).x, sumHeight - buttomHeiht);
? ? ? ? ? ? baseLinePath.lineTo(xyList.get(0).x, sumHeight - buttomHeiht);
? ? ? ? ? ? baseLinePath.close();
? ? ? ? ? ? canvas.drawPath(baseLinePath, baseShadow);
? ? ? ? }
? ? }
? ? public int dp2px(float dp) {
? ? ? ? final float scale = this.getResources().getDisplayMetrics().density;
? ? ? ? return (int) (dp * scale + 0.5f);
? ? }
? ? /**
? ? ?* 取出時間里面的最大的一個用來計算總長度
? ? ?*
? ? ?* @param timeList
? ? ?* @return
? ? ?*/
? ? public float getMaxTime(List<Integer> timeList) {
? ? ? ? maxTime = 0;
? ? ? ? for (int i = 0; i < 7; i++) {
? ? ? ? ? ? if (maxTime < timeList.get(i)) {
? ? ? ? ? ? ? ? maxTime = timeList.get(i);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if (maxTime <= 10) {
? ? ? ? ? ? maxTime = 10;
? ? ? ? }
? ? ? ? maxTime *= 1.2;
? ? ? ? return maxTime;
? ? }
? ? public ?int dp2px(Context context, float dp) {
? ? ? ? final float scale = context.getResources().getDisplayMetrics().density;
? ? ? ? return (int) (dp * scale + 0.5f);
? ? }
? ? public ?float dp2px(Resources resources, float dp) {
? ? ? ? final float scale = resources.getDisplayMetrics().density;
? ? ? ? return ?dp * scale + 0.5f;
? ? }
? ? public ?float sp2px(Resources resources, float sp){
? ? ? ? final float scale = resources.getDisplayMetrics().scaledDensity;
? ? ? ? return sp * scale;
? ? }
}實現(xiàn)的效果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在canvas中繪制動態(tài)圖的時候，如果使用了一個固定的背景圖片，只有一個小小的精靈在移動！這樣的情況下卻不得不在沒幀中重新繪制背景圖片，使得效率降低,本文章只是記錄一下，并不是解決方法感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了Android Spinner列表選擇框的應(yīng)用的相關(guān)資料,這里對spinner的屬性和常用事件和數(shù)據(jù)綁定都做了介紹，需要朋友可以參考下2017-07-07
本文主要介紹了Android實現(xiàn)人臉支付，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家總結(jié)介紹了關(guān)于Android中傳值Intent與Bundle的關(guān)系，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-11-11
Android編程使用AlarmManager設(shè)置鬧鐘的方法
這篇文章主要介紹了Android編程使用AlarmManager設(shè)置鬧鐘的方法,結(jié)合具體實例分析了Android基于AlarmManager實現(xiàn)鬧鐘功能的設(shè)置、取消、顯示等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
本篇文章主要介紹了Android監(jiān)聽軟鍵盤彈出與隱藏的兩種方法，非常具有實用價值，需要的朋友可以參考下2017-04-04
Android網(wǎng)絡(luò)工具類NetworkUtils詳解
這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)絡(luò)工具類NetworkUtils，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
Android懸浮對話框(即點即關(guān)對話框)實現(xiàn)代碼
本文給大家介紹android懸浮對話框和即點即關(guān)閉對話框，本文介紹非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
Android開發(fā)實現(xiàn)應(yīng)用層面屏蔽狀態(tài)欄的方法小結(jié)
這篇文章主要介紹了Android開發(fā)實現(xiàn)應(yīng)用層面屏蔽狀態(tài)欄的方法,結(jié)合實例形式分析了Android屏蔽狀態(tài)欄的相關(guān)函數(shù)調(diào)用、權(quán)限控制及函數(shù)重寫等相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
先和大家分享下，這個方法不能說萬能的，但是最起碼它解決了分辨率跟密集度的關(guān)系，但是也引來一個問題，就是布局會因為圖片資源小而失真,本文將詳細(xì)介紹android 分辨率適配的方法，需要的朋友可以參考下2012-11-11