skip to Main Content

ماذا سأتعلم:

في هذا الدرس ستتعلم استخدام أداة Rating Bar View  من خلال مثال بسيط.

 

ماهي Rating Bar ؟

Rating Bar  تستخدم لإعطاء تقييمات للمنتج سواء كان لعبة, تطبيق أو غيرها. هذه الأداة باستخدامها نستطيع اظهار عدد من النجوم بحيث تسمح للمستخدم باختيار عدد محدد من النجوم كتقييم. عن طريق الضغط أو لمس النجوم يستطيع المستخدم اختيار التقييم المرغوب. بعد التقييم و ضغط على Button  سيتم حساب التقييم و اظهار الرقم على الشاشة أو رسالة Toast. أيضاً تستطيع بعد ذلك حفظ قيمة التقييم في قاعدة البيانات أو ارسالها إلى بريد الكتروني حسب الغرض من التطبيق لديك, المهم الآن هو كيفية ادراج الأداة و استخلاص القيم منها.

1- إنشاء مشروع جديد

 

2- إنشاء Layout

بداخل ملف activity_main.xml  من داخل مجلد layout نقوم بترتيب الـ Views  و وضع الخيارات لها:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tvRateMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rate Me !!"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:stepSize="1.0"
        android:rating="2.0" />

    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />
</LinearLayout>

 

أداة Rating Bar  قمنا بتخصيص الخيارات التالية لها :

id : تم تسميتها ratingBar  ليتم الوصول اليها من خلال الكود

numStars:  و الهدف منها تحديد عدد النجوم و هنا تم اختيار 5

srating: و الهدف منها وضع قيمة افتراضية عند فتح التطبيق , و تم وضعها 2 هنا.

3- تعريف Rating Layout  داخل الكود

الآن من داخل MainActivity.java و من داخل onCreate  سيم تعريف الأداة RatingBar , و الـ Button كالتالي:

// Initialize RatingBar
RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
//Initialize Button
Button rateBtn = (Button) findViewById(R.id.btnSubmit);

4- استخلاص قيمة التقييم بعد حدث النقر

package com.example.android.ratebar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    RatingBar ratingBar;
    Button rateBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Initialize RatingBar
        final RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        //Initialize Button
        Button rateBtn = (Button) findViewById(R.id.btnSubmit);

        //if click on me, then display the current rating value.
        rateBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        String.valueOf(ratingBar.getRating()),
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

و أخيرا النتيجة المتوقعة للتطبيق كالتالي:

درس اليوم بسيط جداً أرجو أن يكون مفيد لكم و السلام عليكم.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *