RatingBar trong Android
Android RatingBar có thể được sử dụng để có được những đánh giá từ người dùng. Rating trả về một số dấu chấm động. Nó có thể là 2.0, 3.5, 4.0, vv . Android RatingBar hiển thị các đánh giá trong các sao.
Android RatingBar là class con của class AbsSeekBar.
RatingBar code trong XML
<RatingBar android:id="@+id/simpleRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" /> Một vài phương thức thường sử dụng: | Phương thức | Ý nghĩa |
|---|---|
| public Float getRating() | Phương thức trả về số lần đánh giá từ người sử dụng |
| public int getNumStars() | Phương thức này lấy số lượng ngôi sao của RantingBar |
Thuộc tính thường dùng của Button
Bây giờ chúng xem một số thuộc tính hay sử dụng trong Button trong tập tin XML
1. android:id: Là thuộc tính duy nhất của RatingBar.
<RatingBar android:id="@+id/simpleRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content"/> Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:
RangtingBar simpleRangtingBar= (CheckBox) findViewById(R.id.simpleRangtingBar); 2. android:background: Thuộc tính này xác định màu nền cho RatingBar. Ví dụ chúng ta thiết màu nên cho RatingBar sau là màu đỏ.
<RatingBar android:id="@+id/simpleRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#f00"/> <!-- Thiết lập màu nền là màu đỏ --> 
Thiết lập màu nền của RatingBar trong Java class
RatingBar simpleRatingBar = (RatingBar) findViewById(R.id.simpleRatingBar); // initiate a rating bar simpleRatingBar.setBackgroundColor(Color.RED); // Thiết lập màu nền cho RangtingBar 3. android:numStars: thuộc tính numStars dùng để thiết lập số lượng ngôi sao để hiển thị trong một RatingBar. Mặc định là hiển thị 5 ngôi sao, chúng ta có thể thay đổi số lương ngôi sao thông qua thuộc tính numStar:
Số lương ngôi sao phải là số nguyên:1,2,3 .v.v.
Ví dụ hiển thị 7 ngôi sao trong RatingBar
<RatingBar android:id="@+id/simpleRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="7"/> <!-- Số lượng ngôi sao là 7 --> 
Thiết lập số lượng ngôi sao trong RatingBar
RatingBar simpleRatingBar = (RatingBar) findViewById(R.id.simpleRatingBar); // initiate a rating bar simpleRatingBar.setNumStars(7); // Tổng số ngôi sao là 7 4. android:rating: Thuộc tính rating thiết lập mặc định một số ngôi sao được đánh giá. giá trị thuộc tính này phải là số thực. Ví dụ thiết lập mặc định cho thuộc tính android:rating="3.5"
<RatingBar android:id="@+id/simpleRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:rating="3.5"/> 
Thiết lập mặc định thuộc tính rating trong java class
/*Add in Oncreate() funtion after setContentView()*/ RatingBar simpleRatingBar = (RatingBar) findViewById(R.id.simpleRatingBar); // initiate a rating bar simpleRatingBar.setRating((float) 3.5); // Thiết lập mặc định 3.5 ngôi sao 5. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của RatingBar với các ngôi sao nó chứa: left, right, top or bottom. Cũng ví dụ trên bây giờ chúng ta xác định padding=30sp từ mọi phía của RatingBar. Cũng ví dụ trên bây giờ chúng ta xác định padding=30sp từ mọi phía của RatingBar.
<RatingBar android:id="@+id/simpleRatingBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="30sp" /> 
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụn gồm có 1 RatingBar và 1 Button. Để xem tổng số ngôi sao và số lượng đánh giá khi người sử dụng click vào Button trên màn hình, thông tin hiển thị thông qua đối tượng Toast. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là RatingBar: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng RatingBarvà Button trong Relative Layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.rantingbar.MainActivity" > <RatingBar android:id="@+id/simpleRatingBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:rating="3.5" android:background="#f00"/> <Button android:id="@+id/btnRatingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/simpleRatingBar" android:layout_below="@+id/simpleRatingBar" android:layout_marginLeft="34dp" android:layout_marginTop="50dp" android:background="#fcc" android:text="Rating bar" /> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java và thêm code. Khi click vào Button "Rating Bar" sẽ hiển thị số ngôi sao và số lượng đánh giá.
package hiepsiit.com.rantingbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.RatingBar; import android.widget.Toast; public class MainActivity extends Activity { Button btnRatingBar; RatingBar simpleRatingBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); simpleRatingBar = (RatingBar) findViewById(R.id.simpleRatingBar); btnRatingBar = (Button) findViewById(R.id.btnRatingBar); btnRatingBar.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub Toast.makeText(getApplication(), "Tổng số ngôi sao:"+simpleRatingBar.getNumStars()+" \nSố lượng đánh giá:"+simpleRatingBar.getRating(), Toast.LENGTH_LONG).show(); } }); } }
Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó Click vào Button "Rating Bar":
Ví dụ tùy biến (Custom) lại RatingBar
Trong ví dụ này chúng ta sẽ tùy biến lại đối tượng RatingBar, chúng ta sẽ hiển thị một thanh RatingBar có 5 ngôi sao đã tùy biến lại. Chúng ta sẽ làm ứng dụn gồm có 1 RatingBar và 1 Button. Để xem tổng số ngôi sao và số lượng đánh giá khi người sử dụng click vào Button trên màn hình, thông tin hiển thị thông qua đối tượng Toast. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là CustomRatingBar: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng RatingBarvà Button trong Relative Layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.customratingbar.MainActivity" > <RatingBar android:id="@+id/simpleRatingBar" style="@style/customRatingBar" android:layout_width="fill_parent" android:layout_height="100dp" android:layout_marginTop="60dp" android:background="#0f0" android:rating="2.5" /> <Button android:id="@+id/btnRatingBar" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="#f40" android:padding="10dp" android:text="Submit" android:textColor="#fff" android:textSize="20sp" android:textStyle="bold" /> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java và thêm code. Khi click vào Button "Rating Bar" sẽ hiển thị số ngôi sao và số lượng đánh giá.
package hiepsiit.com.rantingbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.RatingBar; import android.widget.Toast; public class MainActivity extends Activity { Button btnRatingBar; RatingBar simpleRatingBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); simpleRatingBar = (RatingBar) findViewById(R.id.simpleRatingBar); btnRatingBar = (Button) findViewById(R.id.btnRatingBar); btnRatingBar.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub Toast.makeText(getApplication(), "Tổng số ngôi sao:"+simpleRatingBar.getNumStars()+" \nSố lượng đánh giá:"+simpleRatingBar.getRating(), Toast.LENGTH_LONG).show(); } }); } } Bước 4: Mở res ->values ->styles.xml
Trong bước này chúng ta thiết lập tập tin customratingstars.xml và thiết lập chiều cao, chiều rộng cho từng mục
<style name="customRatingBar" parent="@android:style/Widget.RatingBar"> <item name="android:progressDrawable">@drawable/customratingstars</item> <item name="android:minHeight">20dip</item> <item name="android:maxHeight">20dip</item> </style> Bước 5: Tạo mới tập tin customratingstars.xml trong thư mục drawable
Trong bước này chúng ta tạo mới tập tin customratingstars.xml trong thư mục drawable, đồng thời thiết lập 2 icon empty.png và filled.png.
Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó Click vào Button "Rating Bar":
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
