Rating Bar متریال دیزاین در کوتلین

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به معرفی Rating Bar متریال دیزاین در کوتلین می پردازیم قبلا Rating Bar های مختلفی را برای برنامه نویسی اندروید به شما معرفی کرده بودیم در این آموزش شاید بهترین نوع Rating Bar را معرفی خواهیم کرد در ادامه با ما همراه باشید تا نحوه استفاده از این کتاب خانه را یاد گیرید.

پیش نمایش Rating Bar متریال دیزاین در کوتلین
بروی این لینک کلیک کنید.
برای اینکه این کتاب خانه را به پروژه خود اضافه کنید ابتدا وارد فایل Build.gradle از نوع Top-Level شده سپس در بخش repositories خط زیر را قرار دهید.

      maven { url 'https://jitpack.io' }

1	maven { url 'https://jitpack.io' }

بعد از اینکار وارد فایل Build.gradle از نوع Top-Level شده سپس در بخش dependencies خط زیر را قرار دهید.

dependencies {
    implementation ‘com.github.rubygarage:emotion-rating-view:v1.0.0’
}

dependencies {

implementation ‘com.github.rubygarage:emotion-rating-view:v1.0.0’

}

پروژه را sync کنید.
اگر می خواهید دقیقا همانند پیش نمایش آن را درست کنید ابتدا کدهای زیر را در بخش layout خود قرار دهید.

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.dm.emotionrating.library.GradientBackgroundView
                android:id="@+id/gradientBackgroundView"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        <com.dm.emotionrating.library.EmotionView
                android:id="@+id/emotionView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="48dp"
                android:layout_marginLeft="48dp"
                android:layout_marginRight="48dp"
                android:layout_marginStart="48dp"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        <com.dm.emotionrating.library.RatingView
                android:id="@+id/ratingView"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_marginEnd="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:padding="5dp"
                app:gap="5dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/emotionView" />
    </android.support.constraint.ConstraintLayout>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.dm.emotionrating.library.GradientBackgroundView

android:id="@+id/gradientBackgroundView"

android:layout_width="0dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<com.dm.emotionrating.library.EmotionView

android:id="@+id/emotionView"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:layout_marginEnd="48dp"

android:layout_marginLeft="48dp"

android:layout_marginRight="48dp"

android:layout_marginStart="48dp"

android:layout_marginTop="8dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<com.dm.emotionrating.library.RatingView

android:id="@+id/ratingView"

android:layout_width="wrap_content"

android:layout_height="40dp"

android:layout_marginEnd="8dp"

android:layout_marginLeft="8dp"

android:layout_marginRight="8dp"

android:layout_marginStart="8dp"

android:layout_marginTop="16dp"

android:padding="5dp"

app:gap="5dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/emotionView" />

</android.support.constraint.ConstraintLayout>

در بالا از لایه ConstraintLayout استفاده شده است شما می توانید آن را حذف کنید. در بالا کل کد از سه بخش تشکیل شده است که شامل :

RatingView : نمایش ستاره ها یا Rating Bar
EmotionView : بخش مربوط به شکلک نمایشی به ازای انتخاب Rating Bar
GradientBackgroundView : که رنگ مربوط به پشت صفحه را تغییر میدهد.

وارد اکتیویتی کدها شده (MainActivity.kt) باید یکسری از آنها را find کنید قبلا آموزشش رو قرار دادیم view هایی که باید find شود (EmotionView ,RatingView ,GradientBackgroundView )
در نهایت برای اینکه Listener آن را تعریف کنید مثل زیر عمل کنید.

ratingView.setRatingChangeListener { previousRating, newRating ->
            emotionView.setRating(previousRating, newRating)
            gradientBackgroundView.changeBackground(previousRating, newRating)
        }

ratingView.setRatingChangeListener { previousRating, newRating ->

emotionView.setRating(previousRating, newRating)

gradientBackgroundView.changeBackground(previousRating, newRating)

}

برای اینکه رنگهای مربوط به شکلک و RatinBar را تغییر دهید از کد زیر در style خود استفاده کنید.

<style name="YourCustomThemeTheme">
    ...
    <item name="faceColor">@color/colorWhite</item>
    <item name="gradeColor">@color/orange</item>
</style>

...

<item name="faceColor">@color/colorWhite</item>

<item name="gradeColor">@color/orange</item>

</style>

این آموزش هم به پایان رسید.
موفق و پیروز باشید.

مطالعه بیشتر