ios | ios도 모르고 하이브리드 앱 개발하기 [ 17 아이폰 해상도별 storyboard 설정 / 디바이스 해상도 설정 ]

2016.10.04 11:30mobile/ios



ios도 모르고 하이브리드 앱 개발하기 [ 17 아이폰 해상도별 storyboard 설정 / 디바이스 해상도 설정 ]





이번에는 디바이스 해상도에 따른 설정을 알아본다.


아이폰은 4가지 해상도가 존재한다.


3.5인치(320x480), 4인치(320x568), 4.7인치(375x667), 5.5인치(414x736)




4가지 해상도를 지원해야 아이폰 종류에 따라서 화면이 깨지거나 틀어지지 않는다.


디바이스별로 다른 해상도를 지원하는 방법은 여러가지가 존재한다.


그중 하나인 storyboard 를 이용하여 아이폰 디바이스의 모든 해상도에 대응한다.








먼저 파일을 생성한다.

File > New > File... 클릭




스토리보드 파일을 생성할 것이다.

User Interface > Stroyboard > Next 클릭





이름은 다음과 같이 줘도되고 아니면 주고싶은대로 줘도된다.

난 구분하기 위해서 height 값을 파일명 뒤에 주었다.

Create 클릭





총 4개 파일을 만들어야 한다.

Main.storyboard 는 원래 있던 파일이고 그 아래 4개 파일을 위와 같은 방법으로 생성한다.





원래 있던 Main.storyboard 파일의 소스화면을 오픈한다.

Main.storyboard 우클릭 > Open As > Source Code 클릭





아래 파란색 부분을 모두 복사한다.

기본 스토리보드에는 ViewController 와 WebView가 있다.

다른 스토리보드에도 똑같이 적용하기 위해서 소스를 직접 복사 붙혀넣기 한다.





생성했던 새로운 스토리보드 파일에 소스를 붙혀넣기 해야한다.

Main480.storyboard 우클릭 > Open As > Source Code 클릭





아래 파란색 부분에 붙혀넣기한다.

파란색 부분에 있는 소스는 삭제한다.

4개 파일 모두 같은 방법으로 소스를 붙혀넣기 한다.





이제 스토리보드 화면으로 전환한다.

Main480.storyboard 우클릭 > Open As > Interface Builder - Storyboard 클릭





스토리보드 화면이다.

가장먼저 해야 할 것은 오른쪽 하단에 Localize 설정이다.

Localize... 클릭





Base 로 선택하고 Localize 클릭

4개 파일 모두 동일하게 설정해야 한다.





다음에는 Size 설정이다.

Main480.storyboard > View Controller > Show the Attributes inspector > Size 3.5inch로 설정 후 Is Initial View Controller 체크

나머지 4개 파일도 해당하는 size 설정 후 Is Initial View Controller 체크









SIze 설정이 끝나면 Web View 의 크기를 화면에 맞도록 변경한다.

4개 파일 모두 적용해야 한다.



마지막으로 디바이스를 체크해서 해당 storyboard 를 연결하는 소스를 추가해야 한다.


AppDelegate.m 파일

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 내부에 삽입


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    /* S 해상도별 스토리보드 선택 */
    CGSize deviceScreenSize = [[UIScreen mainScreen] bounds].size;
    if(deviceScreenSize.height == 480){
        // 3.5인치
        UIStoryboard *inch35Storyboard = [UIStoryboard storyboardWithName:@"Main480" bundle:nil];
        UIViewController *viewController = [inch35Storyboard instantiateInitialViewController];
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen]bounds]];
        // rootViewController를 스토리보드의 initial view controller로 설정
        self.window.rootViewController = viewController;
        // 화면 보이기
        [self.window makeKeyAndVisible];
    }else if(deviceScreenSize.height == 568){
        // 4인치 (568)
        UIStoryboard *inch4Storyboard = [UIStoryboard storyboardWithName:@"Main568" bundle:nil];
        UIViewController *viewController = [inch4Storyboard instantiateInitialViewController];
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen]bounds]];
        // rootViewController를 스토리보드의 initial view controller로 설정
        self.window.rootViewController = viewController;
        // 화면 보이기
        [self.window makeKeyAndVisible];
    }else if(deviceScreenSize.height == 667){
        // 4.7인치 (667)
        UIStoryboard *inch47Storyboard = [UIStoryboard storyboardWithName:@"Main667" bundle:nil];
        UIViewController *viewController = [inch47Storyboard instantiateInitialViewController];
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen]bounds]];
        // rootViewController를 스토리보드의 initial view controller로 설정
        self.window.rootViewController = viewController;
        // 화면 보이기
        [self.window makeKeyAndVisible];
    }else{
        // 5.5인치 (736)
        UIStoryboard *inch55Storyboard = [UIStoryboard storyboardWithName:@"Main736" bundle:nil];
        UIViewController *viewController = [inch55Storyboard instantiateInitialViewController];
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen]bounds]];
        // rootViewController를 스토리보드의 initial view controller로 설정
        self.window.rootViewController = viewController;
        // 화면 보이기
        [self.window makeKeyAndVisible];
    }
    /* E 해상도별 스토리보드 선택 */
cs














 * 경고


IOS에 무지한 상태에서 구글링만으로 앱 개발 및 포스팅이 진행됨


누구나 따라할 수 있겠지만 결코 완벽한 정답이 아닐 수 있음


아주 주관적인 입장에서의 포스팅임



'mobile > ios' 카테고리의 다른 글

ios | ios도 모르고 하이브리드 앱 개발하기 [ 21.2 APNS 구현 - APNS 서버 만들기 (프로바이더 구성) ]  (4) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 21.1 APNS 구현 - APNS 인증서 만들기 ]  (0) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 20 키체인에서 인증서는 언제 유효해 질까? ]  (0) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 19 Provisioning 설정 후 Unable to install "project name" 에러 ]  (0) 2016.10.07
ios | ios도 모르고 하이브리드 앱 개발하기 [ 18 아이폰으로 테스트 하기 / Xcode에 아이폰 연결 / 디바이스 테스트 ]  (6) 2016.10.04
ios | ios도 모르고 하이브리드 앱 개발하기 [ 17 아이폰 해상도별 storyboard 설정 / 디바이스 해상도 설정 ]  (0) 2016.10.04
ios | ios도 모르고 하이브리드 앱 개발하기 [ 16 Xcode 에서 아이콘 수정 (변경) / Asset Catalog Creator Free ]  (0) 2016.09.23
ios | ios도 모르고 하이브리드 앱 개발하기 [ 15 Xcode static 변수 / extern 변수 / static 함수 ]  (0) 2016.09.22
ios | ios도 모르고 하이브리드 앱 개발하기 [ 14 AppDelegate에서 ViewController 사용하기 / AppDelegate란 ]  (2) 2016.09.21
ios | ios도 모르고 하이브리드 앱 개발하기 [ 13 NSUserDefaults 사용하여 데이터 저장하고 읽기 ]  (0) 2016.09.19
ios | ios도 모르고 하이브리드 앱 개발하기 [ 12 webview에서 네트워크 체크하기 ]  (0) 2016.09.19