java - 带有 5 个进度条的评分进度图表

Question

我需要为我在应用程序上的评论绘制评分表。分别为每颗星，如 1、2、3、4 和 5。作为参考，我上传了一张图片，请建议我 n=best way。

标签： javaandroidkotlin

Answer 1

嗨，您可以执行以下操作，例如使用 5 个 RatingBar 和 5 ProgressBar。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">

    <RatingBar
        android:id="@+id/rating_5"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="true"
        android:numStars="5"
        android:rating="5" />

    <ProgressBar
        android:id="@+id/progress_5"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="50" />

    <RatingBar
        android:id="@+id/rating_4"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_5"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="4"
        android:rating="4" />

    <ProgressBar
        android:id="@+id/progress_4"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_5"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="50" />


    <RatingBar
        android:id="@+id/rating_3"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_4"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="3"
        android:rating="3" />

    <ProgressBar
        android:id="@+id/progress_3"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_4"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="30" />


    <RatingBar
        android:id="@+id/rating_2"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_3"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="2"
        android:rating="2" />

    <ProgressBar
        android:id="@+id/progress_2"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_3"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="20" />


    <RatingBar
        android:id="@+id/rating_1"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_2"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="1"
        android:rating="1" />

    <ProgressBar
        android:id="@+id/progress_1"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_2"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="10" />

</RelativeLayout>

这是输出：

希望它会帮助你。谢谢。