ToggleButton trong Android
ToggleButton có thể nói là dạng đặc biệt của button,nó có 2 trạng thái cơ bản là check và not check.Khi ở trạng thái check chúng ta click nó sẽ chuyển sang trạng thái not check và ngược lại
Tùy theo phiên bản android mà hình ảnh ToggleButton khác nhau(check và uncheck).
Lớp ToggleButton là lớp con của lớp CompoundButton.
Các phương của ToggleButton
Lớp ToggleButton kế thừa nhiều phương thức của View, TextView hoặc Button
Một vài phương thức thường sử dụng:
| Phương thức | Ý nghĩa |
|---|---|
| CharSequence getTextOff() | Trả về một chuỗi khi giá trị trạng thái button là unchecked |
| CharSequence getTextOn() | Trả về một chuỗi giá trị khi trạng thái button là checked |
| public void setChecked(boolean status) | Thay đổi trạng thái của ToggleButton |
| public Boolean isChecked() | Kiểm tra trạng thái của ToggleButon, có 2 giá trị true hoặc false |
ToggleButton code in XML:
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content"/> Các lấy trạng thái của ToggleButton
Để lấy trạng thái hiện tại của ToggleButton chúng ta dùng phương thức isChecked().
/*Add in Oncreate() funtion after setContentView()*/ ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // initiate a toggle button Boolean ToggleButtonState = simpleToggleButton.isChecked(); // check current state of a toggle button (true or false). Thuộc tính thường dùng của ToggleButton
Bây giờ chúng xem một số thuộc tính hay sử dụng trong ToggleButton trong tập tin XML
1. android:id: Là thuộc tính duy nhất của ToggleButton. Xem ví dụ sau:
<ToggleButton android:id="@+id/simpleToggleButton" 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:
ToggleButton simpleToggleButton= (ToggleButton) findViewById(R.id.simpleToggleButton); 2. android:checked: checked là thuộc tính của ToggleButton dùng để set trạng thái của ToggleButton. Giá trị là true hoặc false, nếu giá trị là true thì trạng thái ToggleButton là checked, ngược lại là false thì trạng thái của ToggleButton là unchecked. Chúng ta cũng có thể set trạng thái của ToggleButton bên Java Code bằng cách dùng phương thức setChecked(boolean status). Ví dụ sau chúng ta set android:checked="true"
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" /><!-- set the current state of the toggle button--> 
Thiết lập trang thái checked của ToggleButton
/*Add in Oncreate() funtion after setContentView()*/ ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // initiate a toggle button simpleToggleButton.setChecked(true); // set the current state of a toggle button 3. android:gravity: Thuộc tính này thường sử dụng để canh nội dung trong CheckBox: left, right, center, top, bottom, center_vertical, center_horizontal. Ví dụ chúng ta set android:gravity="left"
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:checked="true" android:gravity="right|center_vertical"/><!-- gravity of the toggle button--> 
4. android:textOn Và android:textOff: thuộc tính textOn được sử dụng để hiển thị câu thông báo khi Switch ở trạng thái checked. Chúng ta có thể set textOn trong XML, hoặc trong Java Class.
Trong ví dụ sau chúng ta sẽ thiết lập android:textOn="Enable" và android:textOff="Disable"
Thiết lập thuộc tính textOn và textOff trong Java Class
/*Add in Oncreate() funtion after setContentView()*/ // initiate toggle button ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // displayed text of the toggle button whenever it is in checked or on state simpleToggleButton.setTextOn("TextOn Attribute Of Toggle b3`utton"); // displayed text of the toggle button whenever it is in unchecked or off state simpleToggleButton.setTextOff("TextOff Attribute Of Toggle b3`utton"); 5. android:textColor: Thuộc tính này dùng xác định màu chữ, dạng màu chữ: “#argb”, "#rgb”, “#rrggbb”, hoặc “#aarrggbb”. Vi dụ sau set nội dung văn bản trong ToggleButton màu đỏ.
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:checked="true" android:textOff="Disable" android:textColor="#f00" /><!--red color for displayed text--> 
Thiết lập thuộc tính textColor trong java code
/*Add in Oncreate() funtion after setContentView()*/ ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton);// initiate toggle button simpleToggleButton.setTextColor(Color.RED); //red color for displayed text of toggle button 6. android:textSize: Thuộc tính textSize xác định kích thước nội dung văn bản của ToggleButton. Chúng ta có thể đặt kích thước văn bản theo: sp(scale independent pixel) hoặc dp(density pixel). Trong ví dụ này chúng ta xác định kich thước cho văn bản là 40sp.
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:textOff="On State" android:textOn="Off State" android:layout_centerHorizontal="true" android:textColor="#f00" android:textSize="40sp"/> <!-- 40sp displayed text size--> 
Thiết lập thuộc tính textSize trong Java class
/*Add in Oncreate() funtion after setContentView()*/ ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); // initiate toggle button simpleToggleButton.setTextSize(25); // set 25sp displayed text size of toggle button 7. android:textStyle: Thuộc tính xác định loại văn bản của ToggleButton, thông thường có các loại văn bản:bold, italic và normal. Nếu chúng ta muốn sử nhiều hơn một loại văn bản thì phải thêm phép toán hoặc "|" vào giữa các loại văn bản. Trong ví dụ sau chúng ta set bold và italic cho chuỗi văn bản của ToggleButton:
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:textOff="Off State" android:textOn="On State" android:textSize="25sp" android:layout_centerHorizontal="true" android:textColor="#f00" android:textStyle="bold|italic"/> <!-- bold and italic text style for displayed text--> 
8. android:background: Thuộc tính này xác định màu nền cho ToggleButton.
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:textOff="Off State" android:textOn="On State" android:textSize="25sp" android:layout_centerHorizontal="true" android:textColor="#f00" android:background="#000"/><!--Black Color Background--> Thiết lập thuộc tính Background trong Java class:
/*Add in Oncreate() funtion after setContentView()*/ ToggleButton simpleToggleButton = (ToggleButton) findViewById(R.id.simpleToggleButton); simpleToggleButton.setBackgroundColor(Color.BLACK); 9. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của ToggleButton 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 padding=10sp từ mọi phía của ToggleButton.
10. android:drawableBottom, android:drawableTop,android: drawableRight và android:drawableLeft: Các thuộc tính này hiển thị hình trong res/drawable theo các hướng: bottom, top, right và left nội dung văn bản của ToggleButton.
Ví dụ sau thiết lập icon phía dưới nội dung của ToggleButton.
<ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:textOff="Off State" android:textOn="On State" android:textSize="25sp" android:layout_centerHorizontal="true" android:textColor="#f00" android:drawableTop="@drawable/ic_launcher" /><!--drawable icon at the bottom of text of top buttton--> 
Ví dụ: Trong ví dụ này chúng ta sẽ làm app có một ToggleButton. Khi người sử dụng click ToggleButton sẽ hiện thị trạng thái hiện tại của ToggleButton qua đối tượng TOAST (đối tượng này sẽ học trong những bài sau) . Trong ví dụ này chúng ta sử dụng sự kiện setOnCheckedChangeListener(). 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à TextView: 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 ToggleButton 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.togglebutton.MainActivity" > <ToggleButton android:id="@+id/simpleToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:textSize="25sp" android:layout_centerHorizontal="true" android:textColor="#f00" android:textOn="Mở" android:textOff="Tắt" android:drawableTop="@drawable/ic_launcher" /><!--drawable icon at the bottom of text of top buttton--> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java và thêm code. Khi click vào ToogleButton sẽ lấy chuỗi trạng thái của nó bằng cách dùng phương thức getText(), sau đó dùng đối tượng TOAST để hiển thị.
package hiepsiit.com.togglebutton; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.CompoundButton; import android.widget.Toast; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.ToggleButton; public class MainActivity extends Activity { ToggleButton tglbtnSimple; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tglbtnSimple = (ToggleButton) findViewById(R.id.simpleToggleButton); tglbtnSimple.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // TODO Auto-generated method stub Toast.makeText(getApplication(), "Trạng thái đã chọn "+tglbtnSimple.getText(), 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 8 and target sdk 21.
Kết quả khi chạy ứng dụng ToggleButton đang ở trạng thái tắt:
Sau đó Click ToggleButton sẽ chuyển sang trạng thái mở:
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
