创建与Google健身相似的圆环图

时间:2015-03-26 14:36:30

标签: android user-interface google-fit

是否有人知道如何创建类似于Google健身中的圆环图。这个库有吗?

Google Fit Chart

4 个答案:

答案 0 :(得分:6)

我也想要这个,但我能找到的最佳答案是"制作你自己的"。 所以我做到了。

这是非常基本的(我是Android的新手)并且未完成,但它应该给你这个想法。

基本上,您只需设置绘画对象

    paintPrimary = new Paint();
    paintPrimary.setAntiAlias(true);
    paintPrimary.setColor(colorPrimary);
    paintPrimary.setStyle(Paint.Style.STROKE);
    paintPrimary.setStrokeCap(Paint.Cap.ROUND);

并调用canvas.drawArc

class FitDoughnutView extends View {

    private RectF _oval;

    public FitDoughnutView(Context ctx) {
        super(ctx);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawArc(_oval, 0, 360, false, paintSecondary);

        canvas.drawArc(_oval, 270, percentDeg, false, paintPrimary);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        _oval = new RectF(width, width, w - width, h - width);
    }
}

完整来源: github.com/tehmantra/fitdoughnut

某人的教程:hmkcode.com/android-canvas-how-to-draw-2d-donut-chart/

答案 1 :(得分:2)

我发现了这个:https://github.com/txusballesteros/fit-chart

我希望这可以帮助有同样问题的人。

答案 2 :(得分:2)

我会推荐 this library,因为它的积极维护有很多选择。

它有 how to use it in Kotlin 的指南,但您也可以像这样在 Java 中使用它:

在您的布局文件中:

<app.futured.donut.DonutProgressView
        android:id="@+id/dpvChart"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="8dp"
        app:donut_bgLineColor="@color/grey"
        app:donut_gapAngle="270"
        app:donut_gapWidth="20"
        app:donut_strokeWidth="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

然后在您的 Java 活动中:

private DonutProgressView dpvChart;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);

    dpvChart = findViewById(R.id.dpvChart);

    DonutSection section = new DonutSection("Section 1 Name", Color.parseColor("#f44336"), 80.0f);
    dpvChart.setCap(100f);
    dpvChart.submitData(new ArrayList<>(Collections.singleton(section)));
}

答案 3 :(得分:0)

        <com.google.android.material.progressindicator.CircularProgressIndicator
          app:indicatorSize="60dp"
          android:progress="60"
          app:trackCornerRadius="10dp"
          app:trackThickness="10dp"
          app:trackColor="@color/white"
          app:indicatorColor="@color/teal_200"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />