Hướng dẫn sử dụng tableView trong ios

với việc tạo được ứng dụng hello World chúng ta đã nắm bắt cơ bản về message bắt sự kiện button kết nối file tiếp theo chúng ta sẽ làm việc với tableView trong ios. tableView được thiết kế rất nhiều trên ios List Bài hát, list món ăn, setting trong ios… bài này mình sẽ hướng dẫn cụ thể cho các bạn về tableView! 🙂 .. chúng ta bắt đầu nào! ! !.

bước 1- CREATE PROJECT MỚI

-vào Main.storyboard

-kéo vào tableView

Screen Shot 2016-04-11 at 11.02.20Screen Shot 2016-04-11 at 14.27.57

-Kéo vào tableviewcellScreen Shot 2016-04-11 at 14.27.57

 

-kéo vào imageView và label trong contenViewScreen Shot 2016-04-11 at 14.28.06

-table quản lý các cell -> trong cell chứa các contenView chúng ta tương tác trực tiếp với conTenView

-table có các hàm tạo sẵn AppDelegate khuôn mẫu để quản lý hứng sự kiên bắt data lên contenView

– Để làm được điều đó chúng ta kết nối Appdelegate

-thực hiện nối tableView với viewcontroller của chính nó uỷ quyền cho ViewController quản lý tableView qua :UITableViewDelegate,UITableViewDataSource

Screen Shot 2016-04-11 at 14.37.22

–  như thế ta đã tạo giao diện xong :

-ta xoá ViewController.h và .m tạo 2 file mới tableViewController.h và .m

create file:

Screen Shot 2016-04-11 at 14.42.53 Screen Shot 2016-04-11 at 14.43.18

sau đó chọn thư mục lưu ok!

-Kết nối

tableViewController với viewcontroller của nó!

Screen Shot 2016-04-11 at 14.46.40như vậy class tableViewController đã quản lý viewcontroller mà chúng ta tạo

tạo identifine: để xác định xem đang làm cho section nào!

Screen Shot 2016-04-11 at 15.01.06

vào tableViewController.h

kết nối :

@interface tableViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>

 

khởi tạo class quản lý Cell trong tableView sau đó kéo nôí image và label

@interface cellitem: UITableViewCell
@property(weak ,nonatomic) IBOutlet UILabel *label;
@property (weak ,nonatomic) IBOutlet UIImageView* imageIcon;
@end

 

-Quản lý tableView:

AppDelegate có 2 hàm bắt buộc

// đưa ra số lượng hàng trong nhóm section quản lý khuôn mẫu cell

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

};

//Hứng data vào cell tương tác dữ liệu

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

}

– Chúng ta phải khởi tạo dữ liệu đưa vào cell…

cho ảnh vào resource

đặt tên

Screen Shot 2016-04-11 at 14.57.20

@interface tableViewController ()
@property(nonatomic,strong) NSArray *item;//text
@property(nonatomic,strong) NSArray *linkUrl;/tên ảnh+ đôi
@end

trong viewdidload khởi tạo giá  trị

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.item=@[@"Na",@"Ổi",@"Táo"];
self.linkUrl=@[@"na.jpg",@"oi.jpg",@"tao.jpg"
}

 

(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

return [self.item count];  //đưa ra số lượng cột
}-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
cellitem *cell=[tableView dequeueReusableCellWithIdentifier:@"cellitem" forIndexPath:indexPath];//khởi tạo indentifine
cell.label.text=self.item[indexPath.row];// lấy text đưa vào
cell.imageIcon.image=[UIImage imageNamed:self.linkUrl[indexPath.row]];/lấy tên ảnh đưa vào
return cell;

}

Screen Shot 2016-04-29 at 11.38.19

ok !!! phần tiếp theo mình sẽ giúp các bạn tương tác với row và section trong tablewView!

link full mã nguồn!

http://www.mediafire.com/download/hmvyip19pdqbhsr/tableViewController.zip
  • 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 *