Android RatingBar使用Kotlin

最新推荐文章于 2024-07-19 10:59:13 发布

cunchi4221

最新推荐文章于 2024-07-19 10:59:13 发布

阅读量338

点赞数

文章标签： android java css html canvas

原文链接：https://www.journaldev.com/351/android-ratingbar-using-kotlin

版权

In this tutorial, we’ll discuss and implement RatingBar in our Android app using Kotlin.

在本教程中，我们将使用Kotlin在Android应用程序中讨论和实现RatingBar。

什么是Android RatingBar？ (What is Android RatingBar?)

Android RatingBar is an extension of the SeekBar. SeekBar is an extension of the ProgressBar.

Android RatingBar是SeekBar的扩展。 SeekBar是ProgressBar的扩展。

Rating Bar is used to create a review/rating UI where the user can drag over the UI except that there is not an explicit thumb icon.

评级栏用于创建审阅/评级UI，用户可以在该UI上拖动鼠标，除非没有明确的拇指图标。

等级栏国家 (RatingBar States)

A RatingBar has three states: full, empty, and partial.

RatingBar具有三种状态：完全，空和部分状态。

The rating of a rating bar is a float value.

等级栏的等级是浮点值。

等级栏XML属性 (Rating Bar XML Attributes)

The important XML attributes of the rating bar are:

等级栏的重要XML属性是：

android:numStars – The number of rating stars you wish to show on the screen. If you set the RatingBar width to match parent, this attribute would be ignored and the number of stars would be 10.
android:numStars –您希望在屏幕上显示的星级评分。如果将RatingBar宽度设置为与父项匹配，则该属性将被忽略，并且星数为10。
android:rating – This expects a float value. The value here fills that many stars.
android:rating –这需要一个float值。这里的值充满了那么多星星。
android:stepSize – The size of each star. By default, this is 0.5. Setting it to 1 can’t fill the star partially anymore. This attribute should be between 0 and 1.
android:stepSize –每颗星星的大小。默认情况下，该值为0.5。将其设置为1不能再部分填充星星。此属性应介于0和1之间。
android:progressTint – The color of the stars filled.
android:progressTint填充的星星的颜色。
android:progressBackgroundTint – The color of the stars not filled.
android:progressBackgroundTint未填充的星星的颜色。
android:secondaryProgressTint – The color passed here would add a border on the partially filled star.
android:secondaryProgressTint –在此处传递的颜色将在部分填充的星星上添加边框。
android:isIndicator – Setting this to true says that the RatingBar is for display only. You cannot fill the rating.
android:isIndicator –将此设置为true表示RatingBar仅用于显示。您无法填写评分。
android:progressDrawable – We pass the drawable for a custom star here.
android:progressDrawable –我们在此处传递自定义星星的drawable。
style – Used to set a custom/built-in style on the RatingBar. Besides the default Style, there are two more: Small, Indicator. We can create our own custom style as well.
style –用于在RatingBar上设置自定义/内置样式。除了默认的样式，还有两个：Small，Indicator。我们也可以创建自己的自定义样式。

Kotlin代码创建评分栏 (Kotlin Code to Create Rating Bar)

The OnRatingBarChangeListener interface is implemented and the following Kotlin function has to be overridden.

实现了OnRatingBarChangeListener接口，并且必须重写以下Kotlin函数。

override fun onRatingChanged(p0: RatingBar?, p1: Float, p2: Boolean)

The boolean value is true if the rating is changed by the user.

如果用户更改了等级，则布尔值为true。

等级栏XML示例 (Rating Bar XML Examples)

Let’s look at the different kinds of RatingBar using XML code.

让我们看一下使用XML代码的不同类型的RatingBar。

1.简单的评分栏 (1. Simple Rating Bar)

<RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="1"
        android:stepSize="1" />

2.带有背景和二次进度色调的评分栏 (2. Rating Bar with Background and Secondary Progress Tint)

<RatingBar
        android:id="@+id/ratingBar3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:numStars="3"
        android:secondaryProgressTint="@android:color/white"
        android:stepSize="0.2" />

3.具有进度和二级进度色调的RatingBar (3. RatingBar with Progress and Secondary Progress Tint)

<RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/black"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="1"
        android:stepSize="0.5" />


    <RatingBar
        android:id="@+id/ratingBar5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/white"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="2.5"
        android:secondaryProgressTint="@color/colorPrimaryDark"
        android:stepSize="0.5" />

By default, the secondary progress tint is colorAccent set in the styles.xml.

默认情况下，辅助进度色是在styles.xml中设置的colorAccent 。

4.评级栏小样式 (4. Rating Bar Small Style)

<RatingBar
        android:id="@+id/ratingBar7"
        style="@android:style/Widget.Material.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:isIndicator="false"
        android:numStars="5"
        android:rating="1"
        android:stepSize="0.5" />

5.自定义等级栏 (5. Custom Rating Bar)

Android RatingBar Kotlin项目结构 (Android RatingBar Kotlin Project Structure)

1. XML布局代码 (1. XML Layout Code)

The code for the layout activity_main.xml is given below.

下面给出了布局activity_main.xml的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="32sp"/>

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="1"
        android:stepSize="1" />

    <RatingBar
        android:id="@+id/ratingBar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numStars="5" />


    <RatingBar
        android:id="@+id/ratingBar3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:numStars="3"
        android:rating="0.4"
        android:secondaryProgressTint="@android:color/white"
        android:stepSize="0.2" />


    <RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/black"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="1"
        android:stepSize="0.5" />


    <RatingBar
        android:id="@+id/ratingBar5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/white"
        android:progressTint="@android:color/holo_green_dark"
        android:rating="2.5"
        android:secondaryProgressTint="@color/colorPrimaryDark"
        android:stepSize="0.5" />

    <RatingBar
        android:id="@+id/ratingBar6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="true"
        android:numStars="5"
        android:rating="0.7"
        android:stepSize="0.7" />


    <RatingBar
        android:id="@+id/ratingBar7"
        style="@android:style/Widget.Material.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:isIndicator="false"
        android:numStars="5"
        android:rating="1"
        android:stepSize="0.5" />


    <RatingBar
        android:id="@+id/ratingBar8"
        style="@style/CustomRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/holo_orange_dark" />

    <RatingBar
        android:id="@+id/ratingBar9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:numStars="5"
        android:progressBackgroundTint="@android:color/black"
        android:progressDrawable="@drawable/ic_action_happy"
        android:progressTint="@color/colorPrimary"
        android:rating="1" />


</LinearLayout>

A Custom RatingBar needs to set the progressDrawable and its other attributes in the styles.xml otherwise it won’t work. The last RatingBar won’t work in the above layout.

自定义RatingBar需要在styles.xml中设置progressDrawable及其其他属性，否则它将不起作用。最后的RatingBar在上述布局中不起作用。

Add the following code in the styles.xml file.

在styles.xml文件中添加以下代码。

<style name="CustomRatingBar" parent="Widget.AppCompat.RatingBar">
        <item name="android:progressDrawable">@drawable/custom_ratingbar</item>
        <item name="colorControlNormal">#f57c00</item>
        <item name="colorControlActivated">#c51162</item>
    </style>

We’ve created a custom_ratingbar.xml drawable as well.

我们还创建了一个custom_ratingbar.xml可绘制对象。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <bitmap
            android:src="@drawable/ic_action_happy"
            android:tint="?attr/colorControlNormal" />
    </item>
    <item android:id="@android:id/secondaryProgress">
        <bitmap
            android:src="@drawable/ic_action_happy"
            android:tint="?attr/colorControlHighlight" />
    </item>
    <item android:id="@android:id/progress">
        <bitmap
            android:src="@drawable/ic_action_happy"
            android:tint="?attr/colorControlActivated" />
    </item>
</layer-list>

Note: On the Bitmap android:src you cannot set a vector image drawable.

注意：在位图android:src您无法设置可绘制的矢量图像。

You can find the image asset for the custom star with the project source code at the end of this tutorial.

在本教程的结尾，您可以找到带有项目源代码的自定义星星的图像资产。

2. Kotlin活动代码 (2. Kotlin Activity Code)

The code for the MainActivity.kt file is given below.

MainActivity.kt文件的代码如下。

package net.androidly.androidlyratingbar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.RatingBar
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity(), RatingBar.OnRatingBarChangeListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)



        ratingBar1.onRatingBarChangeListener = this
        ratingBar2.onRatingBarChangeListener = this
        ratingBar3.onRatingBarChangeListener = this
        ratingBar4.onRatingBarChangeListener = this
        ratingBar5.onRatingBarChangeListener = this
        ratingBar6.onRatingBarChangeListener = this
        ratingBar7.onRatingBarChangeListener = this
        ratingBar8.onRatingBarChangeListener = this
        ratingBar9.onRatingBarChangeListener = this

    }

    override fun onRatingChanged(p0: RatingBar?, p1: Float, p2: Boolean) {

        textView.text = "$p1"
    }
}

Output:

输出：

AndroidlyRatingbar AndroidlyRatingbar