Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

Kotlin으로 Android 커스텀 RatingBar(별점 바) 만드는 방법 완벽 가이드

이 튜토리얼에서는 Kotlin을 사용하여 Android 앱에서 커스텀 RatingBar(별점 표시줄)를 만드는 방법을 단계별로 알아봅니다. RatingBar는 사용자에게 별점 평가를 받을 수 있는 UI 요소로, 리뷰나 피드백 기능을 구현할 때 자주 활용됩니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project를 선택하고, 필요한 모든 정보를 입력하여 새 프로젝트를 생성합니다.

2단계: 레이아웃 파일 작성 (activity_main.xml)

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. RatingBar와 버튼, 결과를 표시할 TextView를 배치합니다.

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16sp"
    tools:context=".MainActivity">
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:numStars="5"
        android:rating="2.0"
        android:stepSize="1.0" />
    <Button
        android:id="@+id/buttonCheck"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ratingBar"
        android:layout_centerHorizontal="true"
        android:text="CHECK" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="24sp" />
</RelativeLayout>

여기서 사용된 주요 속성은 다음과 같습니다:

  • numStars: 표시할 별의 개수를 지정합니다 (예제에서는 5개).
  • rating: 초기 별점 값을 설정합니다 (예제에서는 2.0).
  • stepSize: 별점이 증가하는 단위를 지정합니다 (1.0이면 반 개 단위가 아닌 한 개씩 증가).

3단계: MainActivity.kt 작성

src/MainActivity.kt 파일에 아래 코드를 추가합니다. RatingBar의 값이 변경될 때마다 Toast로 현재 별점을 보여주고, CHECK 버튼을 누르면 TextView에 최종 별점을 출력합니다.

import android.os.Bundle
import android.widget.Button
import android.widget.RatingBar
import android.widget.RatingBar.OnRatingBarChangeListener
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    lateinit var ratingBar: RatingBar
    lateinit var button: Button
    lateinit var textView: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        ratingBar = findViewById(R.id.ratingBar)
        ratingBar.numStars = 5
        button = findViewById(R.id.buttonCheck)
        textView = findViewById(R.id.textView)
        ratingBar.onRatingBarChangeListener =
        OnRatingBarChangeListener {
            _, rating, _ ->
            Toast.makeText(
            this@MainActivity, "Stars: " +
            rating.toInt(), Toast.LENGTH_SHORT
            ).show()
        }
        button.setOnClickListener {
            textView.text = "You have got " + ratingBar.rating.toInt()+ " stars"
        }
    }
}

코드 핵심 포인트

  • onRatingBarChangeListener: 사용자가 별점을 조작할 때마다 호출되어 실시간으로 별점 값을 Toast 메시지로 표시합니다.
  • setOnClickListener: CHECK 버튼 클릭 시 현재 별점을 정수로 변환하여 TextView에 결과를 출력합니다.

4단계: AndroidManifest.xml 확인

AndroidManifest.xml 파일에 아래와 같이 MainActivity가 등록되어 있는지 확인합니다.

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 Android 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 상단 툴바의 Run(실행) 아이콘을 클릭하세요. 목록에서 연결된 모바일 기기를 선택하면 기기 화면에 앱이 실행됩니다.

앱이 실행되면 별점을 터치하거나 드래그하여 변경할 수 있고, 별점이 바뀔 때마다 Toast 메시지로 현재 별점이 표시됩니다. CHECK 버튼을 누르면 화면 가운데에 최종 별점 결과가 나타납니다.