Tìm hiểu về Progress View, Activity View, Segmented Control, Switch trong IOS

Ở bài trước mình đã giới thiệu cho các bạn về  Một số UI, cũng như Control cơ bản, ở bài này mình tiếp tục giới thiệu cho các bạn một số UI, Control phổ biến khác như Tiêu đề mình đã đề rõ.

Tiếp tục giới thiệu, cách dùng, và dùng các Control trên.!

Tạo một dự án mới và đặt tên:

Screen Shot 2016-07-22 at 09.28.58

 

Đầu tiên mình thiết kế giao diện chung như hình sau:

Screen Shot 2016-07-22 at 09.30.08

 

Bao gồm:Progress View, Activity View, Segmented Control, Switch kéo thả từ tập các danh sách UI:

  • Segmented Control: 

Screen Shot 2016-07-22 at 09.32.52 Chúng ta có thể đổi số lượng segments , lựa chọn từng segment và thay đổi tiêu đề (title) cho từng segment tuỳ ứng dụng của mình.

Đối với segment chúng ta khai báo: Property để lựa chọn đang sử dụng segment nào, và action để lọc thông tin tuỳ theo từng segment.

Ứng dụng chủ yếu là để lọc thông tin như messager chẳng hạn.!

  • Khai báo một label đổi text=”Filter Friend”. Dùng để hiển thị nội dung segment khi ta lọc thông tin.
  • Progress View: có thể thay đổi vị trí thanh màu xanh progress.Screen Shot 2016-07-22 at 10.34.43

Dùng để tăng giảm theo bước nhảy trong khoảng Min Max, Tuy nhiên nó biểu biễn cụ thể trực quan hơn Stepper, và nó cũng rời rạc chứ không liên tục như Slider.

Ở đây mình thêm 2 button là + – dùng để tăng giảm Progress. Progress chỉ sử dụng Property để thay đổi khung màu xanh chạy cho tới khi full.

Ứng dụng: Sử dụng  khi biết chính xác  thời gian load dữ liệu. Ngược lại vớiActivity là cứ quay khi nào load dữ liệu thành công thì dừng quay.

  • Switch: Sử dụng rất đơn giản chỉ có 2 trạng thái ON or OFF.  Nếu on thì làm gì đó off thì dừng việc đó lại. Sử dụng khi bật tắt chức năng gì đó hoặc cho phép hay không cho phép sử dụng ứng dụng, trong setting Iphone sử dụng rất nhiều. Khai báo property để lựa chọn on or off.
  • Activity View: Đơn giản là nếu chúng ta cho phép quay thì quay, tắt thì nó sẽ dừng quay, sử dụng rất nhiều khi load data mà không biết khi nào xong, chưa load xong thì nó sẽ quay, và ngay khi lấy được data thì sẽ dừng quay.

Thiết kế Ứng dụng hoạt động theo nguyên lý như sau:

–  Khi chọn vào segment thì label sẽ hiển thị nội dung lọc.

–  Khi nhấn vào cộng trừ thì progress tăng giảm.

–  Khi chọn vào ON thì Activity quay, OFF thì activity dừng quay.

Kết nối UI với class ViewController.h quản lý:

Giữ Ctrl vào kéo vào class quản lý và đặt tên:

Screen Shot 2016-07-22 at 10.22.29

Sau khi ánh xạ và đặt tên ta được đoạn mã:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIActivityIndicatorView *activity;
- (IBAction)switchActivity:(id)sender;
@property (strong, nonatomic) IBOutlet UISwitch *switchControl;
@property (strong, nonatomic) IBOutlet UIProgressView *progressView;

- (IBAction)buttonTang:(id)sender;

- (IBAction)buttonGiam:(id)sender;
@property (strong, nonatomic) IBOutlet UISegmentedControl *segmentedControl;
- (IBAction)changeText:(id)sender;
@property (strong, nonatomic) IBOutlet UILabel *labelValueSegmented;
@end

Đối với activity, segmented có cả action  và property.  Đơn giản mình đã giải thích ở trên!

Thực thi các UI đã khai báo trong ViewController.m:

Segmented Control:

Lựa chọn:

– Nếu segmented=0, thì lọc ra friend online.

– Nếu segmented=1, thì lọc ra friend all.

- (IBAction)changeText:(id)sender {
    if (self.segmentedControl.selectedSegmentIndex==0) {
        self.labelValueSegmented.text=@"friend online!";
        NSLog(@"%lu",(unsigned long)self.segmentedControl.numberOfSegments);
    };
    if (self.segmentedControl.selectedSegmentIndex==1) {
        self.labelValueSegmented.text=@"friend all";
    }
    
}

 Progress View:( min =0 , max =1)

– Tăng : mỗi lần nhấn vào nút cộng thì tăng lên o.1

– Giảm : mỗi lần nhấn vào nút trừ thì giảm đi 0.1

- (IBAction)buttonTang:(id)sender {
    self.progressView.progress +=0.1;
    
}

- (IBAction)buttonGiam:(id)sender {
    self.progressView.progress -=0.1;
}

Switch và Activity:

Nếu Switch để chế độ ON thì cho phép activity cho phép quay. Nếu để chế độ OFF thì activity ngay lật tức dừng quay!!!.

- (IBAction)switchActivity:(id)sender {
    if ([self.switchControl isOn]) {
        [self.activity startAnimating];
    }else{
        [self.activity stopAnimating];
    }
}

link full code:

http://www.mediafire.com/download/4o49cz6azcl0n4c/UICoBanTiepTheo.zip

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

Tiếp mình sẽ giới thiệu về NSTimer và viết  ứng dụng bấm thời gian đơn giản!!! thanks all !!! hãy để lại suy nghĩ của bạn nhá!!! 🙂

  • Nếu các bạn muốn biết thêm các kỹ thuật khác về ios, các bạn có thể tham khảo thêm các khóa học ios tại đây.

Add a Comment

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