[Objective C로 앱 만들기 - 3. 목록 화면 만들기]

in APP on Objective-c


고양이 목록 화면을 만들어보자

저번에는 앱을 딱 실행시켰을 때 앱 로고를 띄워보는 것까지 해봤다. 이제는 목록 화면을 만들 건데, 로고 화면이 뜨고 나서 아래에서 위로 목록 화면이 올라오도록 만들 것이다.

image

1. 목록 화면 뷰 만들기

프로젝트 폴더에서 우클릭 > New File > Cocoa Touch Class를 선택해준다.

image

그리고 SubClass of 옵션에 UIViewController를 지정해주고 클래스 이름을 원하는 대로 지정한다. 참고로 옵션을 지정할때 타자를 쳐서 검색해도 되고 드래그 해서 찾아도 된다.

image

그러면 아래와 같이 CatListViewController.h, CatListViewController.m파일이 생성된 것을 확인할 수 있다.

image

2. 로고 화면 뷰 컨트롤러에서 목록 화면 노출되게 설정

ViewController.m으로 다시 돌아가서, 맨 위에 CatListViewController.h 파일을 임포트해서 여기서 이 리스트뷰 컨트롤러를 불러올 수 있도록 해보자. 파일의 import 부분에 아래의 코드를 추가한다.

#import "CatListViewController.h"

그리고 나는 이 목록 화면을 저번에 설정한 로고 애니메이션이 다 끝나면 화면이 뜨도록 설정하고 싶다. 그러므로 저번에 작성했던 viewDidLoad 함수 안의 애니메이션을 설정하는 코드를 아래와 같이 수정한다. 아래의 코드는 completion, 즉 애니메이션이 완료되면 CatListViewController(목록 화면)을 아래에서 위로 뜨게끔 하는 것이다. 주석에 push도 있다고 적어놓았는데 push는 오른쪽에서 왼쪽으로 화면이 뜬다.

[UIView animateWithDuration:3 animations:^{
    CGFloat alphaValue = 1.0;

    self->mImageView.alpha = alphaValue;
} completion:^(BOOL finished) {
    CatListViewController* sViewController = [[CatListViewController alloc] initWithNibName:nil bundle:nil]; // 목록 뷰 객체 생성
    UINavigationController* sNavigationController = [[UINavigationController alloc] initWithRootViewController:sViewController]; 
    [self presentViewController:sNavigationController animated:YES completion:nil]; //push도 있음
}];

그리고 실행시키면 아래처럼 화면이 뜨는 것을 확인할 수 있다. 참고로 저 위의 흰색 메뉴 바 같은 부분을 드래그해서 아래로 내리면 화면을 닫을 수도 있다.

samsek2

로고 애니메이션이 끝나면 아래에서 위로 화면이 하나 올라온다. 이게 바로 위에서 생성한 CatListViewController 인 것이다. 다만 바탕이 노출되는 이유는 view의 배경 색을 지정해주기 않았기 때문에 투명으로 나오는 것이다.

3. 데이터 모델 생성

이제 고양이들의 목록에 들어갈 고양이 데이터가 필요하다. 이를 위해 Model을 만들어줘야 하는데, 위에서 CatListViewConroller를 생성한 것과 마찬가지로 새로운 파일을 생성해주고, 옵션은 아래와 같이 지정한다.

image

이제 CatModel.h에 아래와 같이 코드를 작성해준다.

@interface CatModel : NSObject

@property NSURL* mUrl; // 멤버변수여서 앞에 m을 붙였다. 고양이들의 이미지 url이 들어갈 것이다.
@property NSString* mName; // 고양이들의 이름

-(instancetype) initWith: (NSURL*) aUrl andName: (NSString*) aName NS_DESIGNATED_INITIALIZER; // 지정 초기화 메서드로 선언해줬다.

@end

위에서 작성한 코드를 보면 멤버변수로 mUrl, mName을 지정해주고 있고, NS_DESIGNATED_INITIALIZER를 붙여서 지정초기화 메서드 선언을 해줬다. 이 초기화 메서드는 aUrl(파라미터여서 앞에 a가 붙는다)와 aName을 인자로 받는다. 이에 대한 구현은 아래와 같이 CatModel.m에 구현해준다.

@implementation CatModel

-(instancetype) initWith: (NSURL*) aUrl andName: (NSString*) aName {
    self = [super init]; //부모의 designed된 Init 호출필요(지정초기화m)
    
    if (self) { // 부모의 super init이 잘 작동했다면
        [self setMUrl:aUrl]; // 멤버 변수의 값을 초기화해준다.
        [self setMName:aName];
    }
    return self; // 초기화된 객체를 리턴한다.
}
@end

위의 코드에서 initWith를 구현해줬다. 하지만 여기까지 작성하면 Method override for the designated initializer of the superclass '-init' not found라고 노란색 경고 문구가 뜨는 것을 확인할 수 있다. 이는 너가 지정 초기화로 initWith를 지정했는데 만약 그걸 깜빡하거나 실수로 인해 init 메서드를 그대로 사용해버려도 괜찮은 것인가? 에 대한 말이다. 즉 나는 initWith로 aUrl과 aName을 받아 멤버 변수를 초기화했는데, init에 대해서는 따로 설정해주지 않았으니 내가 원하는 대로 작동하지 않을 수 있다는 의미이다. 따라서 아래와 같은 코드를 initWith 함수 밑에 추가해준다.

- (instancetype) init {
    return [self initWith: [[NSURL alloc] init] andName: @""]; 
}

이렇게 init을 사용할 때도 고려해주면 아까 봤던 노란색 경고 문구는 없어지게 된다.

4. Cell 만들기

갑자기 cell이 나오는데 이게 왜 나왔는지 얘기하기 전에 UITableView라는 것을 먼저 알아야 한다. UITableView는 간단하게