Bài 13: Checkbox, RadioButton, ImageButton

Ở loạt bài viết trước và các ví dụ thực hành thì chúng ta đã học qua các view và viewgroup cơ bản nhất rồi đúng không, đó là những view mà bất ký ứng dụng nào cũng có đấy.Còn hôm nay chúng ta sẽ học thêm các view cơ bản khác cũng tương đối quan trọng đó là Checkbox, RadioButton, ImageView.
Và ở bài trước chúng ta đã học xử lý sự kiện rồi đúng không nào chính vì thế từ nay về sau khi giới thiệu các view mình sẽ làm một ứng dụng nhỏ để ví dụ luôn nhé chứ không dừng lại ở việc giới thiệu về layout không thôi.
Bây giờ bạn nhìn vào tổng quan chương trình sau và chúng ta bắt đầu đi phân tích code nhé, giao diện chương trình như sau:

Bài 12 RadioButton, CheckBox, ImageView

Bài 12 RadioButton, CheckBox, ImageView

Và đây là code layout bạn có thể copy bỏ vào layout bạn xem hoặc là clone project về theo đường link ở cuối bài viết nhé:


Ở trên mình đã đánh dấu đâu là CheckBox, RadioButton, ImageButton hết rồi bây giờ chúng ta cùng đi phân tích đoạn code giao diện trên nhé.Và phần ứng dụng thì khi bấm vào cái ImageButton thì sẽ show lên một Toast thông tin về những các bạn đã chọn thôi.

1. RadioButton

Đây là view chuyên thiết kế để cho người dùng chọn một trong các lựa chọn và thường nó là chỉ được chọn 1 cái duy nhất thôi nếu muốn chọn nhiều thì sẽ dùng CheckBox tí nữa mình nói sau.

Ví dụ về RadioButton như: chọn giới tính Nam/Nữ, chọn ngôn ngữ VietNam/English…

Vì RadioButton thường cho người dùng chọn lựa 1 trong nhiều chọn lựa chính vì thế bạn phải bỏ nó vào trong GroupButton thì khi bạn đổi sự chọn lựa thì cái đã chọn trước đó mới mất đi được, nếu không bỏ vào GroupButton bạn sẽ chọn được nhiều cái cùng một lúc, phân tích đoạn code trên bạn sẽ hiểu:


RadioGroup chính là một ViewGroup đó các bạn, ở Bài 9 mình đã giới thiệu về 2 viewGroup chính là LinnearLayout và ReleantiveLayout rồi đúng không nào, 2 thằng đó thường là view cha cho tất cả các view khác còn RadioGroup này thường chỉ làm view cha cho RadioButton thôi.

Vì sao phải cần <RadioGroup> làm view cha bởi vì bạn thấy 2 RadioButton bên dưới chỉ cho người dùng chọn một trong 2 cái là Gay hoặc Less thôi, không được chọn đồng thời chính vì thế phải bỏ nó trong Group chứ không là chọn được 2 cái một lúc.

Tiếp theo là 2 RadioButton bên dưới,  2 thằng này thì là view bình thường như các view khác thôi bạn set các thuộc tính cơ bản cho nó là được rồi không có gì đặc sắc cả.

Ở RadioButton đầu tiền mình có set một thuộc tính là android:checked=”true”, điều này có nghĩa là khi khởi chạy mặc định nút RadioButton Gay này sẽ được chọn, nghĩa là mặc đinh giới tính của mình là “Gay” đó :'(

Ở RadioButton khi bạn muốn kiểm tra xe RadioButton đó đã được chọn chưa thì bạn có phươg thức isChecked() còn muốn set cho RadioButton đó được chọn thì bạn dùng phương thức setChecked(true).

2. CheckBox

Đây là view giúp người dùng check nhiều sự chọn cùng một lúc nó đối nghịch với RadioButton ở chỗ này và đó là nguyên nhân nó tồn tại.Và cũng chính vì thế các thuộc tính nó dường như tương tự như RadioButton luôn, đây là đoạn code tạo giao diện của nó:


Nó không có viewGroup đặc biệt nào bao bọc cả,nó cũng chẳng có gì đặc biệt đúng không nào, thế nên mình cũng không giải thích gì thêm vì y chang RadioButton bên trên.

3. ImageButton

Đây là một phiên bản khác của ImageView thôi vì nó cũng extends từ ImageView mà ra, thay vì ImageView thường để hiển thị hình ảnh thì ImageButton thường là dùng như một Button để set các sự kiện, thay vì Button là chữ thì ImageButton sẽ là hình ảnh chứ không có chữ.

Mọi thuộc tính thằng này dường như giống ImageView mà mình đã giới thiệu ở bài 8 rồi nhé, mọi người có thể coi lại.Đây là đoạn code Layout của nó:


Thằng này mình nghĩ nó lai giữa Button với ImageView mà ra đây.ImageButton vẫn dùng để hiển thị ảnh được nhé mọi người .

Bây giờ chúng ta sẽ bắt sự kiện cho các View này trong ứng dụng ban đầu mình đã nói, code MainActivity sẽ như sau:

MainActivity.java


Chi tiết hơn thì các bạn xem video bên dưới nhé, mình cũng nói chi tiết bên trong rồi, nếu chỗ nào thắc mắc xin các bạn cứ để lại comment cho mình là được.

Video hướng dẫn Checkbox, RadioButton, ImageButton trong Android

Download Source Code

Tiếp theo

Bài 13: Checkbox, RadioButton, ImageButton
5 (100%) 1 vote

2 Comments

  1. nguyễn văn sang March 12, 2017
    • trangchongcheng March 16, 2017

Add Comment

*