Genta Hirauchi

公開日：2020/02/26
更新日：2020/08/03

【Kotlin基礎】RatingBarで星の評価バーを実装する方法を解説

  • Kotlinで星の評価バーを実装する方法が知りたい。
  • RatingBarをコードで動的に実装したい。
  • RatingBarのレートが変更された時に、任意の処理を実行したい。

よく口コミサイトなどで、おすすめ度合いが星の数で表示されていることがありますよね。

Kotlinでは、RatingBarというViewを使用することで、星の数によるレート表示を簡単に実装することができます。

本記事では、RatingBarの実装方法や基本的な使い方、レートが変更された時のイベント取得方法などを、サンプルコードを交え、わかりやすく解説しております。

目次

RatingBarで星の評価バーを実装する方法

Kotlinで星の評価バーを実装するには、RatingBarというViewを使用します。

【公式ドキュメント】 ： RatingBar | Android Developers

RatingBarを実装するには、xmlで実装する方法と、コードで動的に実装する方法の、2通りの方法があります。

xmlでRatingBarを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
       android:id="@+id/rating_bar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</LinearLayout>

RatingBarを実装するには、<RatingBar/>タグを使用します。

注意しなければならないのは、RatingBarの横幅です。横幅はwrap_contentを設定しないと、画面幅を超えて星が表示されてしまいます。

Point
  • xmlでRatingBarを実装するには、<RatingBar/>タグを使用する
  • RatingBarの横幅には、wrap_contentを指定する

コードで動的にRatingBarを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

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

   // RatingBarの生成
   val ratingBar = RatingBar(this)
   ratingBar.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

   // 親レイアウトに、RatingBarを追加
   val linearLayout = findViewById<LinearLayout>(R.id.container)
   linearLayout.addView(ratingBar)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

</LinearLayout>

RatingBar()で、RatingBarのインスタンスを生成しております。

その後、親レイアウトのlinearLayoutに対し、addView()でRatingBarを追加しております。

Point
  • コードで動的にRatingBarを実装するには、RatingBar()でインスタンスを生成した後、addView()で追加する

RatingBarの基本的な使い方

初期値を指定する

続いて、RatingBarの初期値を指定する方法を紹介致します。RatingBarの初期値は、ratingで指定することができます。

○xmlで実装

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
       android:id="@+id/rating_bar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:rating="2" />

</LinearLayout>

○コードで実装

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

   val ratingBar = findViewById<RatingBar>(R.id.rating_bar)
   ratingBar.rating = 2F
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
      android:id="@+id/rating_bar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

</LinearLayout>

RatingBarのデフォルトの初期値は0です。また、コードで動的に値を変更する場合は、Floatで値を指定する必要があります。

Point
  • RatingBarの値は、ratingで指定する

星の数を指定する

続いて、RatingBarの星の数を指定する方法を紹介致します。RatingBarの星の数は、numStarsで指定することができます。

○xmlで実装

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
       android:id="@+id/rating_bar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:numStars="8" />

</LinearLayout>

○コードで実装

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

   val ratingBar = findViewById<RatingBar>(R.id.rating_bar)
   ratingBar.numStars = 8
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
      android:id="@+id/rating_bar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

</LinearLayout>

RatingBarのデフォルトの星の数は5です。

Point
  • RatingBarの星の数は、numStarsで指定する

変更時のステップ幅を指定する

続いて、RatingBarの値変更時のステップ幅(変更量)を指定する方法を紹介致します。ステップ幅は、stepSizeで指定することができます。

○xmlで実装

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

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

</LinearLayout>

○コードで実装

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

   val ratingBar = findViewById<RatingBar>(R.id.rating_bar)
   ratingBar.stepSize = 1F
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
      android:id="@+id/rating_bar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

</LinearLayout>

RatingBarのデフォルトのステップ幅は0.5です。またrating同様、stepSizeもFloatで指定する必要があります。

Point
  • RatingBarのステップ幅は、stepSizeで指定する

値の変更可能状態を切り替える

続いて、RatingBarの値の変更可能状態を切り替える方法を紹介致します。値の変更可能状態は、isIndicatorで指定することができます。

○xmlで実装

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
       android:id="@+id/rating_bar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:isIndicator="true" />

</LinearLayout>

○コードで実装

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

   val ratingBar = findViewById<RatingBar>(R.id.rating_bar)
   ratingBar.setIsIndicator(true)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <RatingBar
      android:id="@+id/rating_bar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

</LinearLayout>

isIndicatorのデフォルト値はfalseです。trueを指定することで、編集不可となります。

Point
  • RatingBarの変更可能状態の切り替えは、isIndicatorで指定する

RatingBarのレートが変更された時のイベントを受け取る方法

最後に、RatingBarのレートが変更された時のイベントを受け取る方法を紹介致します。変更イベントを受け取るには、setOnRatingBarChangeListenerを実装します。

以下は、RatingBarのレートを変更すると、レートがTextViewに表示されるサンプルコードです。

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

   val textView = findViewById<TextView>(R.id.text_view)
   val ratingBar = findViewById<RatingBar>(R.id.rating_bar)

   // 変更イベントの実装
   ratingBar.setOnRatingBarChangeListener { ratingBar, rating, fromUser ->
       textView.text = rating.toString()
   }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <TextView
       android:id="@+id/text_view"
       android:textSize="20sp"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textAlignment="center"
       android:layout_margin="16dp" />

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

</LinearLayout>

setOnRatingBarChangeListenerの後のブロック{ }内に、レートが変更された時に行いたい処理を実装します。

また、{ }内では、レートが変更されたRatingBar(サンプルコードのratingBar)、レート(サンプルコードのrating)、ユーザー操作による変更かどうか(fromUser)が取得できます。

Point
  • レート変更イベントを受け取るには、setOnRatingBarChangeListenerを実装する

まとめ

  • xmlでRatingBarを実装するには、<RatingBar/>タグを使用する
  • RatingBarの横幅には、wrap_contentを指定する
  • コードで動的にRatingBarを実装するには、RatingBar()でインスタンスを生成した後、addView()で追加する
  • RatingBarの値は、ratingで指定する
  • RatingBarの星の数は、numStarsで指定する
  • RatingBarのステップ幅は、stepSizeで指定する
  • RatingBarの変更可能状態の切り替えは、isIndicatorで指定する
  • レート変更イベントを受け取るには、setOnRatingBarChangeListenerを実装する

関連記事