SeekBar trong Android
Một SeekBar là một lớp mở rộng từ ProgressBar nó có thêm một cái cần gạt. Người dùng có thể chạm vào cần gạt và kéo sang trái hoặc phải để thiết lập giá trị của tiến trình (progress) hoặc sử dụng các phím mũi tên để di chuyển cần gạt. Bạn cũng có thể chạm vào thanh bên trái hoặc bên phải cần gạt để di chuyển nó, mặc dù không được khuyến khích.
Một SeekBar là một lớp mở rộng từ ProgressBar nó có thêm một cái cần gạt. Do đó, SeekBar thừa kế các thuộc tính và phương thức của ProgressBar
Mộ số mẫu SeekBar:
SeekBar code Trong XML:
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" />
Xử lý sự kiện trên SeekBar
Để thêm sự kiện cho SeekBar chúng ta dùng cú pháp :
seekBarInstanceVariable.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {…} Khi người sử dụng thay đổi hoặc hành động thì sự kiện này xảy ra
Một số phương thức thường dùng trong SeekBar
Để nhận biết tiến trình đang thay đổi trong SeekBar chúng ta cần thực thi ba phương thức trừu tượng:
1. public void onProgressChanged (SeekBar seekBar, int progresValue, boolean fromUser) {…} –
Phương thức này sẽ được gọi khi người dùng thay đổi tiến trình của thanh tìm kiếm.
2. public void onStartTrackingTouch(SeekBar seekBar) {…} –
Phương thức nà được thực hiện khi người dùng bắt đầu thay đổi tiến trình của thanh tìm kiếm
3. public void onStopTrackingTouch(SeekBar seekBar) {…} -
Phương thức này được thực hiện khi người sử dụng kết thúc thay đổi tiến trình của tìm kiếm bar.
4. getMax() - Trả về giá trị lớn nhất của SeekBar
Chúng ta có thể lấy giá trị lớn nhất của SeekBar, phương thức này trả về một số nguyên. Ví dụ lấy giá trị lớn nhất của SeekBar
SeekBar simpleSeekBar = (SeekBar) findViewById(R.id.simpleSeekBar); // initiate the Seek bar int maxValue=simpleSeekBar.getMax(); // get maximum value of the Seek bar 5. getProgress() – Trả về giá trị tiến trình hiện tại
Chúng ta có thể lấy giá trị tiến trình của SeekBar, phương thức này trả về một số nguyên. Ví dụ lấy giá trị tiến trình hiện tại của SeekBar
SeekBar simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); // initiate the Seek bar int seekBarValue= simpleSeekBar.getProgress(); // get progress value from the Seek bar
Thuộc tính thường dùng của SeekBar
Bây giờ chúng xem một số thuộc tính hay sử dụng trong SeekBar trong tập tin XML
1. android:id: Là thuộc tính duy nhất của SeekBar.
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <!-- id lá thuộc tính duy nhất trong project Android--> 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:
SeekBar simpleSeekBar = (SeekBar) findViewById(R.id.simpleSeekBar); 2. android:max: Thuộc tính dùng để định nghĩa giá trị tối đa mà tiến trình có thể đạt được. Giá trị là số nguyên: 100, 200. Ví dụ thiết lập cho ProgressBar có gia trị tối đa là 150
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="150"/><!-- Thiết lập giá trị tối đa là 150 --> 
Thiết lập thuộc tính android:max trong java class
/*Add in Oncreate() funtion after setContentView()*/ SeekBar simpleSeekBar=(SeekBar) findViewById(R.id.simpleSeekBar); // initiate the Seekbar simpleSeekBar.setMax(150); // 150 maximum value for the Seek bar 3. android:progress: Thuộc tính này dùng để định nghĩa giá trị mặc định cho tiến trình. Giá trị này trong khoảng từ 0 đến max và phải là số nguyên. Ví dụ sau thiết lập max=100 và progress=50
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="150" android:progress="50"/><!-- Thiết lập giá trị cho progress 50 --> 
Thiết lập thuộc tính progress trong java class
SeekBar simpleSeekBar=(ProgressBar) findViewById(R.id.simpleSeekBar); // initiate the progress bar simpleSeekBar.setMax(200); // 200 maximum value for the Seek bar simpleSeekBar.setProgress(50); // 50 default progress value 4. android:progressDrawable: Thuộc tính này thường được sử dụng để tùy chính lại ProgressBar. Trong ví dụ sau chúng ta sẽ tùy chỉnh lại một SeekBar:
Bước 1: Thêm code vào main_activity.xml hoặc main.xml
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="150" android:progress="50" android:progressDrawable="@drawable/custom_seekbar"/><!-- Thiết lập tùy chỉnh lại Seekbar --> Bước 2 : Tạo tập tin custom_seekbar.xml trong thư mục drawable:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <gradient android:endColor="#fff" android:startColor="#f00" android:useLevel="true" /> </shape> </item> </layer-list> 
5. android:background: Thuộc tính này thiết lập màu nền cho SeekBar.
Thiết lập màu nên trong java class
SeekBar simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); // initiate the seek bar simpleSeekBar.setBackgroundColor(Color.GREEN); // green background color for the seek bar 6. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của SeekBar với nội dung nó chứa: left, right, top or bottom. Cũng ví dụ trên bây giờ chúng ta xác định paddingLeft=40dp bên trái của SeekBar.
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="150" android:progress="50" android:background="#cc0" android:paddingLeft="40dp"/><!-- Thiết lập paddingleft=40dp Seekbar --> 
7. android:indeterminate: Nếu bạn biết giá trị công việc của bạn phải làm thì bạn chỉ cần sử dụng ProgressBar để thể hiện giá trị hiện tại. Còn nếu không biết giá trị chính xác thì bạn có thể sử dụng android:indeterminate=”true” trong XML hoặc seekBar.setIndeterminate(true) trong code. Lúc này SeekBar sẽ ở chế độ Indeterminate và nó sẽ không hiển thị quá trình làm việc.
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="150" android:progress="50" android:indeterminate="true" /><!-- Thiết lập indeterminate="true" --> 
8. android:thumb: Thumb mặc định trong Android là Ngoán tay cái, bạn có thể đổi cái thumb khác bằng hình ảnh trong thuộc tính này. Hình sau đây làm thumb mặc định của SeekBar
Ví dụ chúng ta đổi thành thumb có hình sau, trước hết phải download hình lưu vào thư mục drawable
<SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="150" android:progress="50" android:thumb="@drawable/thumb" /> Kết quả thay đổi thumb hình sau:
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có 1 SeekBar. Khi người sử dụng kéo thanh SeekBar chúng ta sẽ lấy giá trị. Sau đó, xuất ra màn hình 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à SeekBar: 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 SeekBar 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.seekbar.MainActivity" > <SeekBar android:id="@+id/simpleSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:max="200" android:progress="60" /> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java và thêm code.--> Click -- Right --> Chọn Source --> Chọn Override/Implement Methods
--> Chọn phương thức onProgressChanged(SeekBar seekBar, int progress, boolean fromUser), onStartTrackingTouch(SeekBar seekBar), onStopTrackingTouch(SeekBar seekBar) trong Dialog sau:
Toàn bộ code trong Java class
package hiepsiit.com.seekbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.SeekBar; import android.widget.Toast; public class MainActivity extends Activity { SeekBar simpleSeekBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); // perform seek bar change listener event used for getting the progress value simpleSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { int progressChangedValue = 0; public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { progressChangedValue = progress; } public void onStartTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub } public void onStopTrackingTouch(SeekBar seekBar) { Toast.makeText(MainActivity.this, "Seek bar progress is :" + progressChangedValue, Toast.LENGTH_SHORT).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 đó kéo SeekBar :
Tùy chỉnh lại SeekBar theo chiều dọc
Ví dụ: Cũng giống ví dụ trên nhưng trong ví dụ này chúng ta tùy chỉnh lại SeekBar theo chiều dọc, Khi người sử dụng kéo thanh SeekBar chúng ta sẽ lấy giá trị. Sau đó, xuất ra màn hình 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à VerticalSeekBar: 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 SeekBar trong Relative Layout.
Trong bước này trong tập tin xml chúng ta sử dụng thuộc tính rotation và thiết lập giá trị là 270 để hiển thị thanh SeekBar theo chiều dọc
<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.verticalseekbar.MainActivity" > <SeekBar android:id="@+id/customSeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:max="200" android:progress="40" android:thumb="@drawable/thumb" android:rotation="270" android:progressDrawable="@drawable/custom_seekbar"/> </RelativeLayout> Bước 3: Tạo tập tin custom_seekbar.xml trong thư mục drawable:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <gradient android:useLevel="true" android:startColor="#560" android:endColor="#454455"/> </shape> </item> </layer-list> Bước 4: Mở app -> src ->MainActivity.java và thêm code.--> Click -- Right --> Chọn Source --> Chọn Override/Implement Methods
--> Chọn phương thức onProgressChanged(SeekBar seekBar, int progress, boolean fromUser), onStartTrackingTouch(SeekBar seekBar), onStopTrackingTouch(SeekBar seekBar) trong Dialog sau:
Toàn bộ code trong Java class
package hiepsiit.com.verticalseekbar; import hiepsiit.com.seekbar.MainActivity; import hiepsiit.com.seekbar.R; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.SeekBar; import android.widget.Toast; public class MainActivity extends Activity { SeekBar simpleSeekBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); simpleSeekBar=(SeekBar)findViewById(R.id.customSeekBar); // perform seek bar change listener event used for getting the progress value simpleSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { int progressChangedValue = 0; public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { progressChangedValue = progress; } public void onStartTrackingTouch(SeekBar seekBar) { // TODO Auto-generated method stub } public void onStopTrackingTouch(SeekBar seekBar) { Toast.makeText(MainActivity.this, "Seek bar progress is :" + progressChangedValue, Toast.LENGTH_SHORT).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 đó kéo SeekBar :
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
