Hướng dẫn tạo Radio Button trên iOS

Lập trình iOS với Objective-C, Xcode đã hỗ trợ chúng ta khá nhiều component có sẵn để dễ dàng sử dụng như TableView, Tab Bar, Segmented, Slider, UIActivityIndicatorView, Date Picker… nhưng vẫn còn nhiều component cơ bản mà iOS chưa hỗ trợ như:  Combo box, Menu, Radio button, Pop-up…buộc ta phải tự tạo mới. Với Android hay html thì những component này có sẵn hết rồi. Hôm nay tôi sẽ hướng dẫn các bạn cách tạo 1 loại component cơ bản để dùng cho iOS,  đó là Radio Button, component sau khi tạo có dạng như sau:

create Radio Button 4

Bước 1: Bạn tạo file ảnh cho 2 trạng thái checked và unchecked

Bạn tạo file PNG cho những trạng thái này tùy theo thiết kế giao diện của mình, ở đây tôi đã có 2 file ảnh đi kèm để bạn dùng nếu cần.

checked checked        unchecked  unchecked

Bạn có thể download file ảnh trong link sau:

https://raw.github.com/onegray/RadioButton-ios/data/radio-res-ios.zip

Bước 2: Tôi đã có sẵn file RadioButton.h và RadioButton.m, bạn chỉ việc download file này và sử dụng.

Bạn lấy 2 file trên trong link sau:

https://github.com/onegray/RadioButton-ios/blob/master/RadioButton.h

https://github.com/onegray/RadioButton-ios/blob/master/RadioButton.m

Sau đó add 2 file vào project và import:

#import “RadioButton.h”

Bước 3: Tạo các button theo dạng kéo thả

  • Tạo button Radio1 với các thuộc tính:
    • Title là “Radio1”
    • Đặt class của button là “RadioButton” thay vì “UIButton”
    • State Config là “Defaut” thì image là “unchecked.png”. State Config là “Selected” thì image là “checked.png”
    • Content là “Selected”

create Radio Button 2

  • Tạo các button Radio2, Radio3 tương tự button Radio 1
  • Link các button với nhau: Bấm giữ Ctrl + click Chuột trái vào button Radio1, kéo chuột vào Radio2 và thả ra, chọn groupButtons. Tương tự với button Radio2 và button Radio3

create Radio Button 3

Hoặc thay thế thao tác kéo thả trên bằng cách viết dòng lệnh:

radio1.groupButtons = @[radio1, radio2, radio3];

  • Bấm  giữ Ctrl + click Chuột trái vào button Radio1, bạn kéo thả vào file .h và viết code:

@property (nonatomic, strong) IBOutlet RadioButton* radioButton;

Bước 4: Viết function cho radio button

  • Bấm giữ Ctrl + click Chuột trái vào button Radio1, kéo thả vào file .h và tạo function:

-(IBAction) onRadioButton: (id)sender;

  • Kéo thả khai báo function này từ file .h vào các button Radio2, Radio3 để các radio button dùng chung 1 function.
  • Implement function này trong file .m:

-(IBAction)onRadioBtn:(RadioButton*)sender
{
_statusLabel.text = [NSString stringWithFormat:@”Selected: %@”, sender.titleLabel.text];
}

Xong!.

Mình đã có file demo tạo theo cách này. Bạn download về và tham khảo nhé.

Link: https://github.com/onegray/RadioButton-ios/archive/sample.zip

CuongNT – iOS developer tại SmartJob


ios,
radio button,
tutorial,