Android开发RecyclerView实现折线图效果
更新时间：2022年09月13日 16:35:24 作者：来来走走
这篇文章主要为大家详细介绍了Android开发RecyclerView实现折线图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Android开发RecyclerView实现折线图效果的具体代码，供大家参考，具体内容如下
效果图如下：
实现的关键是自定义的控件：
package com.example.recyclelinechart.test;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
public class LineView extends View {
private int maxValue;//最大值
private int minValue;//最小值
private int currentValue;//当前值
private int lastValue;//上一个值
private int nextValue;//下一个值
private Paint mPaint;
private int viewHeight;//控件高度
private int viewWidth;//控件宽度
private int distance;//文字高度
private int pointX;//所有点的x坐标
private int pointY;//当前点的Y
private boolean drawLeftLine = true;//是否画左边的线
private boolean drawRightLine = true;//是否画右边的线
private float scale;//每一份占多少像素
public LineView(Context context) {
super(context);
init();
}
public LineView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public LineView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void setCurrentValue(int currentValue) {
this.currentValue = currentValue;
invalidate();
}
public void setMaxValue(int maxValue) {
this.maxValue = maxValue;
}
public void setMinValue(int minValue) {
this.minValue = minValue;
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
initValues();
}
private void initValues() {
//计算文字高度
mPaint.setTextSize(40);
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
distance = (int) (fontMetrics.descent + Math.abs(fontMetrics.ascent));
viewHeight = getMeasuredHeight();
viewWidth = getMeasuredWidth();
//lineView的x轴的中心
pointX = viewWidth / 2;
//(viewHeight - 2 * distance 上下各留出文字的高度，防止显示不全
scale = (viewHeight - 2 * distance) / (maxValue - minValue);
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
pointY = (int) (scale * (maxValue - currentValue) + distance);
drawGraph(canvas);
drawPoint(canvas);
drawValue(canvas);
}
/**
* 画数字
*
* @param canvas
*/
private void drawValue(Canvas canvas) {
mPaint.setTextSize(40);
mPaint.setColor(Color.parseColor("#ff333333"));
mPaint.setTextAlign(Paint.Align.CENTER);
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
//取字体高度的三分之一
canvas.drawText(currentValue + "", viewWidth / 2, pointY - (fontMetrics.descent + Math.abs(fontMetrics.ascent)) / 3, mPaint);
}
public void setlastValue(int lastValue) {
this.lastValue = lastValue;
}
public void setNextValue(int nextValue) {
this.nextValue = nextValue;
}
/**
* 画折线
*
* @param canvas
*/
private void drawGraph(Canvas canvas) {
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(8);
if (drawLeftLine) {
float middleValue = (currentValue + lastValue) / 2f;
float middleY = (scale * (maxValue - middleValue) + distance);
//ax+b = y 二元一次方程，向左多画一点计算y值
float a = (middleY - pointY) * 1f / (0 - pointX);
float b = (0 * pointY - pointX * middleY) * 1f / (0 - pointX);
middleY = a * (0 - 10) + b;
canvas.drawLine(0 - 10, middleY, pointX, pointY, mPaint);
}
if (drawRightLine) {
float middleValue = (currentValue + nextValue) / 2f;
float middleY = scale * (maxValue - middleValue) + distance;
//向右多画一点，机制同上
float a = (middleY - pointY) * 1f / (viewWidth - pointX);
float b = (pointX * middleY - viewWidth * pointY) * 1f / (pointX - viewWidth);
middleY = a * (viewWidth + 10) + b;
canvas.drawLine(pointX, pointY, viewWidth + 10, middleY, mPaint);
}
}
/**
* 画数字下面的小圆圈
*
* @param canvas
*/
private void drawPoint(Canvas canvas) {
mPaint.setColor(Color.RED);
mPaint.setPathEffect(null);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(pointX, pointY, 10, mPaint);
}
public void setDrawLeftLine(boolean drawLeftLine) {
this.drawLeftLine = drawLeftLine;
}
public void setDrawRightLine(boolean drawRightLine) {
this.drawRightLine = drawRightLine;
}
}适配器
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private int minValue;
private int maxValue;
private List<Integer> data;
public MyAdapter(int minValue, int maxValue, List<Integer> data) {
this.minValue = minValue;
this.maxValue = maxValue;
this.data = data;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.test_line, parent, false);
return new ViewHolder(layout);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
if (position == 0) {
holder.lineView.setDrawLeftLine(false);
} else {
holder.lineView.setDrawLeftLine(true);
holder.lineView.setlastValue((data.get(position - 1)));
}
holder.lineView.setMaxValue(maxValue);
holder.lineView.setMinValue(minValue);
holder.lineView.setCurrentValue((data.get(position)));
if (position == data.size() - 1) {
holder.lineView.setDrawRightLine(false);
} else {
holder.lineView.setDrawRightLine(true);
holder.lineView.setNextValue((data.get(position + 1)));
}
}
@Override
public int getItemCount() {
return data.size();
}
class ViewHolder extends RecyclerView.ViewHolder {
LineView lineView;
public ViewHolder(View itemView) {
super(itemView);
this.lineView = itemView.findViewById(R.id.item);
}
}
}item的布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="20dp" android:layout_marginBottom="5dp" android:text="文字" /> <com.example.recyclelinechart.test.LineView android:id="@+id/item" android:layout_width="100dp" android:layout_height="100dp" /> <ImageView android:layout_width="20dp" android:layout_height="20dp" android:layout_gravity="center_horizontal" android:layout_marginBottom="20dp" android:src="@mipmap/ic_launcher" /> </LinearLayout>
使用
MyAdapter myAdapter = new MyAdapter(2, 30, integers); recyclerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.HORIZONTAL, false)); recyclerView.setAdapter(myAdapter);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Android在view.requestFocus(0)返回false的解决办法
这篇文章主要介绍了Android在view.requestFocus(0)返回false的解决办法，非常不错，具有参考借鉴价值，需要的朋友参考下2016-08-08
这里我们要演示的自定义ViewGroup中将实现多种方式排列和滑动等效果,并且涵盖子View之间Touch Event的拦截与处理等问题,完全干货,下面就为大家送上Android应用开发中自定义ViewGroup的究极实例攻略2016-05-05
这篇文章主要介绍了Android系统中应用程序前后台切换的实现要点,除了切换操作的效果之外还重点讲解了判断程序运行于前台还是后台的方法,需要的朋友可以参考下2016-04-04
这篇文章主要为大家介绍了Android扩大View点击区域方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家详细介绍了RecyclerView实现侧滑拖拽功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了Android粒子线条效果的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
TextClock是在Android 4.2(API 17)后推出的用来替代DigitalClock的一个控件。本文将为大家详细说说TextClock的使用，感兴趣的小伙伴可以了解一下2022-11-11
本篇文章主要介绍了Android 图片Bitmap的剪切的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
Android开发之缓冲dialog对话框创建、使用与封装操作
这篇文章主要介绍了Android开发之缓冲dialog对话框创建、使用与封装操作,结合具体实例形式分析了Android缓冲dialog对话框的创建、设置、显示、关闭等操作实现方法,需要的朋友可以参考下2017-09-09
在开发Android应用时,自定义视图是一个非常重要的技能,本文将介绍如何创建一个自定义的罗盘视图,感兴趣的小伙伴可以跟随小编一起学习一下2025-02-02
最新评论