ios TableView 예제
아마도 아이폰에서 가장 많이 사용되는 뷰가 있다면 TableView일 것 이다. 아이폰에서 리스트성 정보를 가장 직관적이고 이쁘게 보여줄 수 있는 뷰라고 생각한다. 이번 포스팅에서는 테이블뷰의 개념과 정의에 대한 내용보다는 ios에서 테이블 뷰가 어떻게 생겼고, 어떤 방식으로 구현을 하면되는지 튜토리얼 형식으로 알아본다.
화면구성 - 1
먼저 스토리보드로 간다음에 기존의 ViewController를 Navigation Controller로 만들어 준다. 기존의 VewController를 클릭한 후, Xcode 메뉴의 Editor -> Embed In -> Navigation Controller를 선택한다. 그리고 아래 그림에서 가운데에 보면 테이블 뷰가 보인다. 그림 처럼 + 버튼을 클릭하고 TableView를 드래그 해서 가져다 놓는다. 그리고 테이블 뷰를 우클릭&드래그 해서 사진에 보이는 노란색 동그란 버튼에 가져다 놓는다. 그러면 Outlets 라는 창이 뜨는데, delegate, datasource를 각각 클릭 해준다. 그리고 + 버튼을 한번 더 누르고 이번엔 TableView Cell을 드래그앤 드롭해서 TableView에 놓아주자. 그리고 cell 을 클릭한 후 우측 inspector에서 Identifier를 cell이라고 작성해 준다.
화면구성 - 2
이번에는 테이블 뷰의 셀을 클릭했을 때 열어줄 ViewController를 만든다. Xcode 메뉴에서 File-> New -> Files 클릭해서 UIViewController를 상속받는 DetailViewController를 생성한다. 그리고 스토리보드에서 + 버튼을 누르고 UIViewControler를 하나 생성 해준다. 그리고 방금 만든 DetailViewController와 이어준다. 우측 Custom Class 란에 Class 입력 부분을 DetailViewController작성해준다.그리고 중간에 라벨을 하나 만들고 DetailViewController 와 이어 준다.
DetailViewController에는 두가지 변수가 있는데 하나는 위에서 만든 라벨을 IBOutlet으로 연결해 준 것이고 하나는 테이블 뷰에서 데이터를 할당하기 위한 NSString 타입의 변수다. 아래에서 NSString 타입의 변수에 데이터를 할당하고 이 변수의 값을 다시 라벨의 text에 할당할 예정이다.
DetailViewController.h 작성
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController
//중간 타이틀
@property (strong, nonatomic) IBOutlet UILabel *centerLabel;
//테이블 뷰에서 데이터를 전달 받게될 변수
@property(strong,nonatomic) NSString *data;
@end
DetailViewController.m 작성
#import "DetailViewController.h"
@interface DetailViewController ()
@end
@implementation DetailViewController
@synthesize centerLabel , data;
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(@"테이블 뷰에서 넘어어온 data : %@" , data);
NSLog(@"라벨 타이틀 : %@" , centerLabel.text);
centerLabel.text = data;
}
@end
ViewController.h 작성
ViewController.h에 위 스토리보드에서 만든 TableView를 드래그앤드롭해서 IBOutlet으로 연결 시켜 준다. 그리고 UIViewController를 사용하려면 먼저 UIViewController 관련 프로토콜인 UITableViewDelegate, UITableViewDataSource를 채택해야 한다. 그리고 테이블 뷰 셀을 클릭했을 때 DetailViewController를 열어줄 것이기 때문에 import 시켜준다.
#import <UIKit/UIKit.h>
#import "DetailViewController.h"
@interface ViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>
@property (strong, nonatomic) IBOutlet UITableView *tableView;
@end
ViewController.m 작성
이 컨트롤러가 로딩이 완료 됬을때, 즉 메모리에 올라갔을때, viewDidLoad 부분에서 tableView의 delegate와 datasource를 설정해준다.
- (void)viewDidLoad {
[super viewDidLoad];
//테이블 뷰 델리게이트 설정
tableView.delegate = self;
tableView.dataSource = self;
}
델리게이트 메소드 작성
테이블 뷰에는 여러가지 델리게이트 메소드가 있는데 대표적인 델리게이트 메소드는 아래와 같다. 참고로 델리게이트 메소드는 사용자가 테이블 뷰에서 버튼을 누르거나 어떤 제스쳐를 했을 때 호출되는 메소드들이다. 즉, 사용자와 상호작용에 도움을 주는 메소드라고 생각하면 된다.
1.테이블 뷰 색션 개수 설정
테이블 뷰의 색션을 2개로 설정했다.
//테이블뷰 섹션 개수 설정
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 2;
}
2.테이블 뷰 셀 개수 설정
섹션별로 테이블뷰의 셀 개수를 지정해 줄 수 있다. 첫번째 색션에는 5개의 행을 할당했고, 두번째 색션에는 7개의 행을 할당했다.
- (NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
NSInteger numberOfRows = 0;
if (section == 0) {
numberOfRows = 5;
}else if(section == 1){
numberOfRows = 7;
}
return numberOfRows;
}
3.테이블 뷰 셀 꾸미기 설정
테이블 셀은 재사용가능하다. indexPath 안에 section 속성으로 이 cell이 몇번째 section에 속하는 cell 인지 체크하고 cell 구성을 아래와 같이 해줄 수 있다. 셀을 꾸민 후에 꾸민 cell을 리턴해주면 된다. 아래는 셀 제목으로 섹션 -1 row 번호를 입력했다.
- (nonnull UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {
UITableViewCell *cell = nil;
if(indexPath.section == 0){
cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
NSString *str = [NSString stringWithFormat:@"색션 1 - %ld" ,(long)indexPath.row];
cell.textLabel.text = str;
}else if(indexPath.section == 1){
cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
NSString *str2 = [NSString stringWithFormat:@"색션 2 - %ld" ,(long)indexPath.row];
cell.textLabel.text = str2;
}
return cell;
}
4.테이블 뷰 헤더 설정
섹션별로 구분해서 헤더를 설정해준다. 색션을 구분하기 위한 값은 section 에 NSInteger 타입으로 들어있다.
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
NSString *header = nil;
if(section == 0){
header = @"헤더 1";
}else if(section == 1){
header = @"헤더 2";
}
return header;
}
셀을 클릭했을 때 화면이동 설정
화면이동을 위해서 스토리보드로 간다음 table View의 cell을 우클릭 후 그대로 우측 Detail View Controller로 드래그 해준다. 그러면 아래와 같은 창이 뜬는데, Show를 클릭해 준다. 그리고 창과 창 사이 화살표가 생긴것을 볼 수 있다. 이로써 세그라고 하는 기능이 생성되었다. 좌측창에서 우측창을 열수 있다는 뜻이다. 그리고 화살표 가운데 동그라미 그림이 있는데 클릭해 보자. 이 동그라미를 클릭후 우측 Inspector 창의 Identifier의 이름을 showDetailSegue 라고 작성해 주자.
셀을 클릭했을 때 화면이동 설정 코드
다시 ViewController.m으로 돌아와서 아래 코드를 작성해준다. segue라는 인자값으로 identifier , destinationViewController 속성을 이용해서 세그의 이름을 비교하고, 목적지가 되는 Controller를 구한다. 참고로 DetailSegue는 소스 제일 위쪽에 작성되어 있다. 바로 위에서 만들어준 세그의 Identifier 이름이다. DetailVeiwController의 인스턴스를 만들고 인스턴스의 string 변수 data 에 화이링 이라는 값을 할당해 주었다. 여기서 DetailVeiwController의 Label 객체의 text에 바로 할당해버리면 화면을 열었을 때 아무값도 할당되지 않는다. DetailVeiwController부분 소스를 보면 DetailVeiwController가 로드될때 ViewDidLoad 부분에서 data의 값을 Label의 text에 할당하는 행위를 해준다. ViewDidLoad 메소드가 로드되어야 IBOutlet 객체가 생성되고 거기에 값을 할당 할 수 있다.
/*
참고
@implementation ViewController
//세그(화면이동) 이름
static NSString * const DetailSegue = @"showDetailSegue";
*/
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
//세그먼트 이름 체크 후
if ([segue.identifier isEqualToString:DetailSegue]) {
NSLog(@"showDetailSegue 이동");
//세그먼트 destinationViewController 속성으로 목적지 Controller 출력
DetailViewController *detailVC = segue.destinationViewController;
//detailVC.centerLabel.text = @"화이링..."; // 안됨.
//ViewController간 데이터 교류가 일어나는곳.
detailVC.data = @"화이링";
//centerLabel에 데이터가 전달 되는 시점은
//detailVC가 메모리에 올라가는 시점인 viewDidLoad 에서 지정한다.
}else{
NSLog(@"showDetailSegue 아님..");
}
}
테이블 뷰 테스트
앱을 실행시켜 보자. 아래와 같은 화면이 뜨면 성공이다.
예제 파일
'아이폰 개발 > ios 개념&튜토리얼' 카테고리의 다른 글
| iOS Photos Framework 정리 (PhotoKit) (0) | 2020.12.14 |
|---|---|
| iOS 코어데이터 예제(feat: 기초 개념) (0) | 2020.12.13 |
| ios UIImagePickerController 카메라 만들기 (0) | 2020.12.11 |
| ios UIImagePickerController 정리 (1) | 2020.12.10 |
| ios CollectionView 예제 - Cell 아이템 선택 및 간격 (0) | 2020.12.10 |
