Tìm hiểu về Label, Button, TextField, Slider,Stepper trong iOS

Hôm nay mình sẽ giới thiêu cho các  bạn về UI cơ bản của lập trình di động IOS. Label, Button, TextField, Slider, Switch, Page Control  cách khai báo, cách sử dụng, ứng dụng thực tế của các UI trong App.

Sau đây mình sẽ giới thiệu cho các bạn từng UI cụ thể!.

  • Ta cần tạo dự án mới, đặt tên: Screen Shot 2016-07-19 at 14.01.311 Đầu tiên mình sẽ giới thiệu về Label, Button, TextField trong IOS. 

label là gì? label là nhãn chứa thông tin về text, trang trí text, thường dùng để thông báo thông tin, trang trí màn hình.

button là gì? button là một nút,  sau khi nhấn vào nút đó sẽ thực một số công việc gì đó, đoạn code nào đó.

TextField là gì? là một ô nhập liệu cho phép nhập dữ liệu từ bạn phím vào ô đó, và cho phép lấy dữ liệu từ ô để thực hiện các tác vụ khác.

Để cho các bạn dễ hình dung mình sẽ lấy một ví dụ cụ thể sau:

Mình tạo ra 2 ô nhập liệu(TextField) , nhập dữ liệu từ bàn phím, một nút(button) để thực hiện cộng 2 số nhập từ bàn phím, một label hiển thị kết quả tổng của 2 số.

  • Thiết kế giao diện đơn giản như sau label đổi text=0, button đổi text=0, và 2 ô text Field.Screen Shot 2016-07-19 at 14.15.37
  • Ánh xạ UI sang class quản lý: tạo file ViewController.h, Giữ CTRL và kéo lần lượt label, textField để kiểu Outlet chỉ thuộc tính label và textField và đặt tên:
    Screen Shot 2016-07-19 at 14.20.26Riêng button Cộng ta để kiểu action:Screen Shot 2016-07-19 at 14.23.27

    Sau khi ánh xạ và đặt tên ta sẽ được như trông như sau:

    @interface ViewController : UIViewController
    @property (weak, nonatomic) IBOutlet UILabel *labelResult;
    - (IBAction)buttonCong:(id)sender;
    @end
  • Ta thực thi bên file ViewController.m
    Ta thêm đoạn mã sau trong buttonCong:

    - (IBAction)buttonCong:(id)sender {
        int soA;
        int soB;
        int tong;
        soA=[self.textfieldSoA.text intValue];
        soB=[self. textFieldSoB.text intValue];
        tong =soA+soB;
        NSString *kq=[[NSString alloc]initWithFormat:@"%d",tong];
        self.labelResult.text=kq;
    }

    Khai báo 3 biến, soA, soB, tong.

    soA=[self.textfieldSoA.text intValue]; lấy dữ liệu từ ô nhập thứ nhất chuyến đổi kiểu sang intValue, số mới có khả năng tính toán. Tương tự với soB.
    Lưu ý: Trong ios nếu kiểu dữ liệu nhập vào ô textField là không thể chuyển sang kiểu số thì gán =0 giá trị mặc định khi không thể chuyển đổi được.
    tong=soA+soB; gán tổng bằng tổng 2 số vừa lấy ra. Định dạng lại kết quả kiểu NSString, kiểu text mới có thể đưa dữ liệu lên label, đưa dữ liệu lên label.

    2 Tiếp theo mình giới thiệu cho các bạn về Slider:

Slider là gì? là môt thanh có con trỏ cho phép tuỳ chỉnh một miền dữ liệu trên thanh. Thường ứng dụng như tinh chỉnh ánh sáng, màu sắc, độ trong suốt…

ví dụ: Ta có một thanh slider và một label trả về miền giá trị, khi ta kéo con trỏ trên thanh slider:

Ta thiết kế trên ViewControler ví dụ trước :

ta thêm slider và cho con trỏ vào chính giữa.
Ta thêm label và đổi text thành 0.500000, đơn giản bởi ta cho con trỏ ở chính giữa, miền ta cho chạy Screen Shot 2016-07-19 at 15.02.23

 

 

Screen Shot 2016-07-19 at 14.55.18

 

ánh xạ tương tự như ví dụ trên và đặt tên ta cần thuộc tính để lấy data từ con trỏ và action để cho phép lấy dữ liệu khi di chuyển con trỏ.

- (IBAction)sliderbarChange:(id)sender;
@property (weak, nonatomic) IBOutlet UILabel *labelSliderBar;

thêm đoạn mã thực thi sau:

- (IBAction)sliderbarChange:(id)sender {
    UISlider *slider=(UISlider*) sender;
    self.labelSliderBar.text=[[NSString alloc]initWithFormat:@"%f",slider.value];
}

khi ta di con trỏ  giá trị con trỏ lưu trong value, sẽ hiện thị trên label Sliderbar.

Tuỳ từng ứng dụng mà ta lấy miền giá trị truyền vào!

  3, Stepper:

stepper là gì? stepper bao gồm 2 nút + và – là một thanh dữ liệu min max, thanh này sẽ nhảy bậc theo bậc ta quy định. khác slider ở chỗ slider miền liên tục, stepper tăng giảm rời rạc, ứng dụng như tăng giảm âm thanh…

ví dụ:

Ta có một Stepper, và label hiển thị kết quả khi tăng giảm.

Screen Shot 2016-07-19 at 15.31.15

Ánh xạ Stepper: thuộc tính để lấy giá trị stepper, action để mỗi lần thay đổi ta lấy được giá trị thay đổi.

@property (weak, nonatomic) IBOutlet UIStepper *stepper;
- (IBAction)step:(id)sender;

ánh xạ label gán giá trị =0  để hiển thị kết quả stepper :

@property (weak, nonatomic) IBOutlet UILabel *labelSliderBar;

 

Thực thi thêm đoạn mã sau:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.stepper.stepValue=2;
    self.stepper.minimumValue=-2;
    self.stepper.maximumValue=  51;
    

bước nhảy mỗi lần nhấn vào + or -. giá trị min=-2, max= 51;

- (IBAction)step:(id)sender {
    double number=[self.stepper value];
    self.labelStepper.text=[[NSString alloc]initWithFormat:@"%f",number ];
     
}

[ self.stepper value] lấy ra giá trị của stepper hiện tại.

=> sau đó đưa lên label.

như vậy mình đã hướng dẫn cơ bản một số UI cơ bản!

link full code:

http://www.mediafire.com/download/t7d2d54u6xnivhc/UICoBan.zip

Có gì trong phần tiếp theo:

Phần tiếp theo mình sẽ giới thiệu cho các bạn về các UI cơ bản tiếp theo như   segmented, Activity….

 

 

 

 

Add a Comment

Your email address will not be published. Required fields are marked *