带有5个进度条的评分进度图

Question

我需要为应用程序上的评论绘制评分表。对于像1,2、3、4和5这样的每颗星星，我分别提供了一张图片供参考，请建议我n =最佳方式。

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>

以下是输出：

希望它会对您有所帮助。 谢谢。