Saturday, July 5, 2014

Ví dụ sử dụng View và Control trong Xcode

Ở ví dụ này chúng ta sẽ sử dụng một Segment và một Label
Segment thay đổi ở trạng thái 1 và 2 khi đó label sẽ thay đổi text theo trạng thái của segment

Ban đầu chúng ta tạo một project với việc add vào Storyboard một segment và một label


Tiếp theo để label phản hồi đến View thông qua View Controler chúng ta cần tạo outlet cho đối tượng label bằng cách giữ mouse phải và kéo vào file ViewController.h. Chúng ta chọn Connection là Outlet và Name là lblInfo sau đó ấn vào connect
code tự động sinh ra trong file ViewController.h:

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



Tương tự ta tạo Outlet cho segment để segment có thay đồi sẽ phản hồi đến view thông qua ViewController
với Connection là Outlet. Name là: segInfo








Để một Control có thể tương tác khi có action thì chúng ta cần phải tạo thêm một Action cho Segment.
Đây là sự khác biệt giữa View và Control. Control có thêm action, còn View thì không

Tại đây ta right click vào segment và chọn Action là change Value để add action khi segment thay đổi value
Name là: segChange
Code tự sinh ra trong file ViewController.m



Chú ý: Khi chúng ta vừa add xong Action cho Segment thì sẽ tự động sinh ra đoạn code trong file ViewController.h và ViewController.m

ViewController.h sẽ phát sinh code:

-(IBAction ) segChange:(id)sender;

ViewController.m phát sinh code: đây là hàm bắt sự kiện khi change value của segment

- (IBAction)segChange:(id)sender {
}




Thực hiện xong công việc add Action và Outlet cho View và Control chúng ta thực hiện việc code để bắt sự kiện khi Segment thay đổi value

Để hiểu hơn tổng quát, chúng ta cần phải bắt sự kiện khi segment thay đổi do vậy ta sẽ code trong trong hàm vừa phát sinh của file ViewController.m 

Chúng ta tương tác trên đối tượng View và Control thông qua Outlet

Đối tượng segment của chúng ta có một method trong thư viện là selectedSegmentIndex để lấy vị trí (index) đang được chọn



Để khi load ứng dụng thì Label cũng sẽ thay đổi theo nên ta cần code thêm đoạn code trên vào hàm viewDidLoad (đây là hàm load khi ứng dụng bắt đầu chạy)



Vậy là xong, chúng ta thực hiện Build ứng dụng và kiểm tra kết quả
Chọn vào First là index của segment =0 nên label sẽ được set text là Segment 0

 Chọn vào First là index của segment =1 nên label sẽ được set text là Segment 1



Qua ví dụ trên chúng ta đã tìm hiểu được View là gì Control là gì. Sự khác biệt giữa View và Control
View và Control đều tương tác với View qua Outlet và Control sẽ có sự thay đổi trạng thái nó sẽ phản hồi cho ViewController biết thông qua Action

Tương tác giữa chúng với ViewController như thế nào và đặc biệt là mỗi Control đều có method sẵn trong library để sử dụng, ví dụ như segment có selectedSegmentIndex để lấy index đang được chọn. Chúng ta sẽ không cần phải quan tâm đến việc code bên trong như thế nào. Xcode thú vị phải không nào :D

P/s: View là quản lý các đối tượng View  ( label, text field...) và Control ( button, segment... ). Chúng phản hồi thông qua ViewController
View đặt trên StoryBoard
Chúng ta có nhiều màn hình của ứng dụng tức là chúng ta hiểu chúng ta có nhiều View, View này quản lý View và Control


Ví dụ kế thừa Inherit Xcode

Việc truy xuất đến biến thuộc một class khác mà class đó không kế thừa thì ta dùng @property @synthesize

Ở ví dụ này chúng ta tìm hiểu việc kế thừa của Class B đến Class A

Chúng ta tạo một empty project sau đó tạo Group ClassA và add 2 file ClassA.h và ClassB.m thuộc NSObject
Sau đó tạo Group với name ClassB và add 2 file ClassB.h và ClassB.m chú ý ở đây ta kế thừa ClassA nên thay vì để mặc định là NSObject ta thay bằng ClassA



Tiếp tục trong ClassA.h ta khai báo 2 biến và một hàm xuất biến


Trong ClassA.m ta định nghĩa hàm XuatBien đã khai báo trong ClassA.h


Trong ClassB.h ta khai báo một method để thay đổi biến trong ClassA
Chú ý: ta thấy hình bên dưới có dòng code: #import "ClassA.h" đó là code phát sinh ra khi ta add ClassB mà ta chọn kế thừa là ClassA

Tiếp theo tất nhiên chúng ta sẽ phải định nghĩa method đã khai báo thực hiện trong ClassB.m


Thực hiện build project ta có được kết quả:



Như vậy sau ví dụ Inherit này ta thấy được việc kế thừa là dùng để truy xuất thay đổi giá trị của biến thuộc một class khác.



Ví dụ @Property Xcode

@property: sinh ra phương thức set/get trong interface

@synthesize: định nghĩa phương thức set/get vừa sinh ra bởi @property trong interface

Sử dụng @property và @synthesize để thay đổi một biến trong một class khác tương tự phương thức set/get

Set/get có thể tùy chỉnh thay đổi dễ dàng còn @property @synthesize thì không

Ví dụ dưới đây sẽ thay đổi giá trị của biến color trong Class: ClassProperty

Vd: 
Tạo một single project

Chúng ta add một Class: ClassProperty với 2 file: ClassProperty.h và ClassProperty.m
Trong file ClassProperty.h ta khai báo một method là: khoiTaoMau

.h
#import <Foundation/Foundation.h>
@interface ClassProperty : NSObject{NSString * color;}
-(void)khoiTaoMau;
// tao mot property de thay doi mau
@property NSString * property_thayDoiMau;
// code tren tuong duoi voi code
/*
-(void)setproperty_thayDoiMau:(NSString*)color;
-(NSString *)getproperty_thayDoiMau;

*/
@end


Trong file ClassProperty.m thực hiện định nghĩa hàm khoiTaoMau
.m
-(void)khoiTaoMau{
  
    color=@"Blues";// Xuat bien color de kiem tra gia tri ban dau    NSLog(@"Khoi tao color ban dau%@",color); 
}
// tao mot synthesize property_khoiTaoMau de thay doi bien color
@synthesize property_thayDoiMau = color;
// code tren tuong duong voi code
/*
-(void)setproperty_thayDoiMau:(NSString*)color{
  property_thayDoiMau = color;
}
-(NSString *)getproperty_thayDoiMau{
   return property_thayDoiMau;
}
*/

Trong ViewControler.m code trong viewdidLoad
Tất nhiên chúng ta sẽ import ClassProperty.h để thực hiện gọi phương thức khoiTaoMau trong Class ClassProperty

- (void)viewDidLoad
{
    [super viewDidLoad];ClassProperty * thayDoiMau = [[ClassProperty alloc] init];// goi ham khoiTaoMau[thayDoiMau khoiTaoMau]; 

// thuc hien thay doi gia tri bien color thong qua property property_khoiTaoMauthayDoiMau.property_thayDoiMau =@"Red"; 
NSLog(@"Bien color sau khi thay doi %@",thayDoiMau.property_thayDoiMau);
}

Kết quả sẽ là Red vì biến color được thay đổi giá trị thông qua property_thayDoiMau




P/s: Để hiểu rõ hơn trong viewDidLoad ta cần thay đổi bỏ đi dòng code: 
property_khoiTaoMauthayDoiMau.property_thayDoiMau =@"Red";
Khi đó NSLog sẽ xuất ra biến color với giá trị ban đầu vẫn là Blue
Qua ví dụ trên ta thấy được khả năng của việc sử dụng @property, @synthesize để truy xuất đến biến trong một class khác mà nó không kế thừa