如何在 Android 的 GraphView 中创建自定义形状的数据点?
如果您正在寻找一个视图来表示一些统计数据或寻找一个 UI 来在您的应用程序中显示图表,那么在本文中,我们将看看创建一个折线图视图并为我们的 Android 中的数据点显示自定义形状应用程序。
我们将在本文中构建什么?
我们将在我们的 Android 应用程序中构建一个简单的线图视图,我们将在我们的应用程序中显示一些带有自定义形状的示例数据。请注意,我们将使用Java语言来实现这个项目。
分步实施
第 1 步:创建一个新项目
要在 Android Studio 中创建新项目,请参阅如何在 Android Studio 中创建/启动新项目。请注意,选择Java作为编程语言。
第二步:添加依赖
导航到Gradle Scripts > build.gradle(Module:app)并在依赖项部分添加以下依赖项。
implementation ‘com.jjoe64:graphview:4.2.2’
步骤 3:使用 activity_main.xml 文件
导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。
XML
Java
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.series.DataPoint;
import com.jjoe64.graphview.series.DataPointInterface;
import com.jjoe64.graphview.series.PointsGraphSeries;
public class MainActivity extends AppCompatActivity {
GraphView graphView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
graphView = findViewById(R.id.graphview);
// For creating Point Graph Series We use PointGraphSeries
PointsGraphSeries series = new PointsGraphSeries<>(getDataPoint());
graphView.addSeries(series);
// we use this method to define the shape that
// will be used for data points
// series.setShape(PointsGraphSeries.Shape.TRIANGLE);
// we use this method to define the size of the shape
series.setSize(50);
// we use this method to set the color
series.setColor(Color.RED);
// we use this method to define the custom shape,
// we create our own shape
series.setCustomShape(new PointsGraphSeries.CustomShape() {
@Override
public void draw(Canvas canvas, Paint paint, float x, float y, DataPointInterface dataPoint) {
paint.setStrokeWidth(5);
// we are initialising the shape structure of dat points
canvas.drawLine(x - 20, y, x, y - 20, paint);
canvas.drawLine(x, y - 20, x + 20, y, paint);
canvas.drawLine(x + 20, y, x, y + 20, paint);
canvas.drawLine(x - 20, y, x, y + 20, paint);
}
});
}
// initialising the data points
private DataPoint[] getDataPoint() {
DataPoint[] dp = new DataPoint[]{
new DataPoint(0, 1),
new DataPoint(2, 1),
new DataPoint(3, 5),
new DataPoint(6, 2),
new DataPoint(7, 8),
};
return dp;
}
}
第 4 步:使用MainActivity。 Java文件
转到主活动。 Java文件,参考如下代码。下面是MainActivity的代码。 Java文件。代码中添加了注释以更详细地理解代码。
Java
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.series.DataPoint;
import com.jjoe64.graphview.series.DataPointInterface;
import com.jjoe64.graphview.series.PointsGraphSeries;
public class MainActivity extends AppCompatActivity {
GraphView graphView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
graphView = findViewById(R.id.graphview);
// For creating Point Graph Series We use PointGraphSeries
PointsGraphSeries series = new PointsGraphSeries<>(getDataPoint());
graphView.addSeries(series);
// we use this method to define the shape that
// will be used for data points
// series.setShape(PointsGraphSeries.Shape.TRIANGLE);
// we use this method to define the size of the shape
series.setSize(50);
// we use this method to set the color
series.setColor(Color.RED);
// we use this method to define the custom shape,
// we create our own shape
series.setCustomShape(new PointsGraphSeries.CustomShape() {
@Override
public void draw(Canvas canvas, Paint paint, float x, float y, DataPointInterface dataPoint) {
paint.setStrokeWidth(5);
// we are initialising the shape structure of dat points
canvas.drawLine(x - 20, y, x, y - 20, paint);
canvas.drawLine(x, y - 20, x + 20, y, paint);
canvas.drawLine(x + 20, y, x, y + 20, paint);
canvas.drawLine(x - 20, y, x, y + 20, paint);
}
});
}
// initialising the data points
private DataPoint[] getDataPoint() {
DataPoint[] dp = new DataPoint[]{
new DataPoint(0, 1),
new DataPoint(2, 1),
new DataPoint(3, 5),
new DataPoint(6, 2),
new DataPoint(7, 8),
};
return dp;
}
}
输出: