앱을 실행시킬 때 처음에 로고가 있는 화면을 띄우게 한다.

---

프로젝트 생성까지는 마쳤으니 이제 실행했을 때 앱 로고를 띄우는 아래와 같은 화면을 만들 것이다.

1. 이미지 파일 준비하기

우선 나는 아래와 같이 정사각형의 삼색이 이미지를 저장했다.

Xcode에서 왼쪽의 파일들 목록에서 Assets.xcassets라는 폴더를 확인할 수 있을 것이다. 이를 클리하면 아래와 같은 화면이 나온다.

여기에 이제 아까 저장했던 이미지를 드래그해서 드롭해준다. 그럼 아래와 같이 이미지가 추가된 것을 확인할 수 있다. 이 1x, 2x, 3x는 지금 신경쓰지 않기로 한다. 참고로 나는 1x에 있던 이미지를 2x로 드래그-드랍해서 이미지를 옮겨놓았다.

그럼 이제 앱에서 이미지를 쓰기 위한 이미지 파일은 준비가 된 것이다.

2. 이미지 파일 코드에서 불러오기

나는 앱을 실행시켰을 때 가장 먼저 로고가 노출되기를 원하므로 ViewController.m 파일에 이미지를 노출시키기로 했다. 이 ViewController는 UIViewController를 상속한 것으로, 쉽게 사용자에게 보이는 화면이라고 생각하면 된다.

먼저 ViewController.m 파일의 상단에 UIImageView 타입의 mImageView를 선언해준다.

@implementation ViewController
{
    UIImageView *mImageView;
}

그리고 바로 아래에 viewDidLoad 함수를 오버라이딩 해줘서 뷰가 로드되었을 때 이미지 파일을 노출시키게 한다.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    mImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"samsek"]]; //이미지 파일 이름으로 불러오기
    [self.view addSubview:mImageView]; // 뷰에 이미지 뷰 추가.
    [mImageView sizeToFit];
}

이러고 실행시키면 아래와 같이 이미지 파일이 뜨는 것을 확인할 수 있다.

이미지가 예상한 것보다 크기는 한데, 그것보다 중앙에 노출되지 않는 게 너무 거슬린다. 이 이미지의 위치를 중앙으로 이동시켜보자. 마찬가지로 viewDidLoad 함수 안에서 아래의 코드를 추가시켜준다.

mImageView.translatesAutoresizingMaskIntoConstraints = NO; // Constraint를 코드로 조정해야 할 일이 있을 때 사용
[NSLayoutConstraint activateConstraints:@[
    [self.view.centerYAnchor constraintEqualToAnchor:mImageView.centerYAnchor], // 이미지의 가운데 점의 Y좌표와 화면의 가운데 점의 Y좌표를 일치시켜준다.
    [self.view.centerXAnchor constraintEqualToAnchor:mImageView.centerXAnchor] // X좌표도 마찬가지
]];

그리고 다시 실행시켜보면 아래와 같이 삼색이가 화면의 정중앙에 위치한 것을 확인할 수 있다.

그런데 좀 심심하니 화면이 딱 떴을 때 삼색이가 투명했다가 점점 또렷해지면서 나타나는 애니메이션을 추가해보자. 우선 삼색이는 처음에 투명해야 하니 알파값(이미지의 투명도를 조정하는 값. 0이면 투명, 1이면 불투명이다)을 0.0으로 조정해준다. viewDidLoad 함수에 마찬가지로 작성해주면 된다.

    mImageView.alpha = 0.0;

그리고 이 알파 값을 점점 1까지 증가시켜주면서 나타나게 하는 애니메이션을 추가한다. 이 애니메이션은 뷰가 화면에 떴을 때부터 실행되어야 하므로 viewDidLoad 함수 아래에 viewDidAppear 함수를 오버라이딩 해주고 코드를 추가해준다.

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    [UIView animateWithDuration:3 animations:^{ //3초에 걸쳐서 이루어지게 한다.
        CGFloat alphaValue = 1.0;
        
        self->mImageView.alpha = alphaValue; //알파값이 1이 되게 한다.
    } ];
}

그리고 다시 실행시키면 삼색이가 처음에는 투명했다가 점점 불투명해지는 것을 확인할 수 있다.

ViewController.m의 전체코드는 아래와 같다.

#import "ViewController.h"

@interface ViewController () {
    UIImageView *mImageView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    mImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"samsek"]];
    [self.view addSubview:mImageView]; // 뷰에 이미지 뷰 추가.
    [mImageView sizeToFit];
    
    mImageView.translatesAutoresizingMaskIntoConstraints = NO;
    [NSLayoutConstraint activateConstraints:@[
        [self.view.centerYAnchor constraintEqualToAnchor:mImageView.centerYAnchor],
        [self.view.centerXAnchor constraintEqualToAnchor:mImageView.centerXAnchor]
    ]];
    
    mImageView.alpha = 0.0;

}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    [UIView animateWithDuration:3 animations:^{
        CGFloat alphaValue = 1.0;
        
        self->mImageView.alpha = alphaValue;
    } ];
}
@end

이제 앱 로고 화면을 띄워봤다! 다음에는 고양이 목록 화면을 만들어보도록 하겠다.