2016. 10. 4. 11:30ㆍmobile/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에 무지한 상태에서 구글링만으로 앱 개발 및 포스팅이 진행됨 누구나 따라할 수 있겠지만 결코 완벽한 정답이 아닐 수 있음 아주 주관적인 입장에서의 포스팅임 |