보관물

Posts Tagged ‘아이패드’

iOS 개발에 사용되는 주요 컴포넌트 크기.

iOS개발을 진행하며 화면에 표시되는 주요 컴포넌트에 대한 크기를 조금 막연하게 알고 있는 경우가 있어 정리해 봅니다.
나중에 기회가 되면, 이미지로 설명하겠습니다.
아래 내용에서 레티나 디스플레이의 경우는 모두 두배를 해 주어야 합니다. 통신사가 보이는 상태표시줄은 20px 입니다.

* 아이폰
1. 스크린 사이즈
– 세로 : 320 * 480 px
– 가로 : 480 * 320 px
2. 네비게이션바
– 세로 : 높이 44 px
– 가로 : 높이 32 px
3. 네비게이션바 버튼
– 세로 : 높이 30 px
– 가로 : 높이 24 px
4. 네비게이션바 버튼 내부 이미지
– 약 20 * 20 px
5. 툴바 : 높이 44 px
6. 툴바 버튼 : 높이 30 px
7. 툴바 버튼 내부 이미지 : 20 * 20 px
8. 탭바 : 높이 49 px
9. 탭바 이미지 : 30 * 30 px

* 아이패드
1. 스크린 사이즈
– 세로 : 768 * 1024 px
– 가로 : 1024 * 768 px
2. 네비게이션바 / 툴바 : 높이 44 px
3. 네비게이션바 버튼 / 툴바 버튼 : 높이 30 px
4. 네비게이션바 버튼 이미지 / 툴바 버튼 이미지 : 20 * 20 px
5. 탭바 : 높이 49 px
6. 탭바 이미지 : 30 * 30 px
7. 리스트 뷰

참고, 아이패드에 개발시에 필요한 이미지 종류를 정리해 둔 자료가 있습니다. 참고하세요. 링크 : http://goo.gl/efCkT

키보드에 기능키를 추가하는 방법…

키보드 상단에 기능키를 넣은 예제를 많이 볼 수 있습니다.
오늘은 이런 기능키를 넣는 예제를 간단하게 만들어 보려고 합니다. 이 샘플은 초보자를 위한 것이니 여러가지 스킬을 쓰지 않고 최대한 단순하게 만들 예정입니다.

기본 개념은 UITextView나 UITextField 클래스의 inputAccessoryView속성을 이용하여 개발자가 원하는 키보드 형태를 만드는 것입니다. 물론, View에 subView를 추가하는 것은 제약이 없으니, 우리가 원하는 어떤 형태의 뷰도 넣을 수 있습니다.

간단한 예제를 위해 KeyboardTest라는 View-based Application을 만듭니다.
KeyboardTestViewController.h을 열어 아래와 같이 수정합니다.

@interface KeyboardTestViewController : UIViewController {
    NSString *inputText;
    IBOutlet UITextField *inputField;
    IBOutlet UIButton *drawButton;
    IBOutlet UILabel *drawField;
}
@property(copy, readwrite) NSString *inputText;

- (IBAction)callDrawButton:(id)sender;
@end

inputText는 입력된 문구를 저장하는 문자열 인스턴스입니다.
그외에 우리가 문자열을 입력받을 inputField, 입력한 문자열에 대한 반영을 지시할 drawButton 마지막으로 입력한 문자열을 출력해 줄 drawField를 생성합니다.
IBOutlet의 경우 아래 그림과 같이 xib 파일도 수정해 줍니다.

다음에는 각 컨트롤을 File’s owner와 연결합니다.
처음으로 drawField와 맨위의 UILabel을 연결하고, inputField와 아래의 UITextField를 연결하고, 마지막으로 drawButton의 TouchUpInside와 callDrawButton을 연결합니다.

다음에는 뷰 로드 후에 작업을 진행합니다.
KeyboardTestViewController.m 파일의 -(void)viewDidLoad 함수의 주석을 풀고 아래와 같이 코딩합니다.

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    /* 키보드에 확장될 부분을 위한 뷰를 생성합니다. */
    UIView *inputAccessaryView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 768, 50)];
    inputAccessaryView.backgroundColor = [UIColor darkGrayColor];
    
    /* 첫번째 기능을 위한 버튼을 생성하고 기능을 입력합니다. - 입력된 내용을 지우는 기능을 하는 버튼입니다. - */
    UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    cancelButton.frame = CGRectMake(20, 7, 100, 37);
    [cancelButton setTitle:@"지우기" forState:UIControlStateNormal];
    [cancelButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [cancelButton addTarget:self action:@selector(cancel:) forControlEvents:UIControlEventTouchUpInside];

    /* 두번째 기능을 위한 버튼을 생성하고 기능을 입력합니다. - 미리 지정된 문구를 입력하는 기능을 하는 버튼입니다. - */ 
    UIButton *presetButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    presetButton.frame = CGRectMake(137, 7, 100, 37);
    [presetButton setTitle:@"지정문구" forState:UIControlStateNormal];
    [presetButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [presetButton addTarget:self action:@selector(preset:) forControlEvents:UIControlEventTouchUpInside];

    /* 확장뷰에 커튼을 서브뷰로 등록합니다. - */
    [inputAccessaryView addSubview:presetButton];
    [inputAccessaryView addSubview:cancelButton];

    /* inputField에 확장뷰를 대입합니다. - */
    inputField.inputAccessoryView = inputAccessaryView;
}

우선 위와 같이 viewDidLoad를 수정하면 키보드에 확장된 뷰가 표시될 것입니다.
이제 기능을 붙여 봐야겠죠. 기능은 위 주석에도 표시한 것과 같이 간단하게 두가지입니다. 모든 내용을 지우는 것과 미리 지정된 내용으로 입력하는 것입니다.

기능을 위해 아래 함수를 구현합니다.

- (IBAction)callDrawButton:(id)sender {
    inputText = inputField.text;
    [self godrawField:sender];
}


- (void)godrawField:(id)sender {
    [drawField setText:inputText];
}

- (void)cancel:(id)sender {	
    inputText = @"";
    inputField.text = inputText;
    
    [self godrawField:sender];
}

- (void)preset:(id)sender {
    inputText = @"미리 정의된 문구를 넣도록 만들었습니다.";
    inputField.text = inputText;
    
    [self godrawField:sender];
}

dealloc을 통해 메모리 관리하는 것을 잊지 말고, 이제 실행을 해 보면 아래와 같이 실행이 됩니다.

아이패드 개발에 필요한 이미지들..

개인 개발자가 앱을 개발할 때 곤혹스러운 것 중에 하나가 디자인 문제이다.
요즘처럼 디자인에 신경을 써야하는 환경에서 더욱 그렇다고 할 수 있다. 그런데, 아이패드의 경우에는 이미지 파일이 너무 많이 필요하다. 그 이미지를 모두 지원할 수는 없더라도 정리를 좀 해둘 필요가 있다고 생각이 된다.

앱 개발에 필요한 이미지 파일.

  • 72 X 72 png icon : 아이패드의 홈 화면에 표시할 앱 아이콘.
  • 50 X 50 png icon : 아이패드의 스포트라이트 검색 결과 화면에 표시되는 아이콘.
  • 29 X 29 png icon : iOS 설정화면에 표시될 아이콘. (옵션)
  • 64 X 64 and 320 X 320 png icon : 문서 유형을 등록하는 경우 필요. (옵션)
  • 768 X 1004 png image : 앱 실행 초기화면 이미지.(파일이름 아래 참고.)

앱 실행 초기화면 이미지 파일명.

  • Default-Portrait.png : 세로보기 화면
  • Default-PortraitUpsideDown.png : 뒤집힌 세로보기. 없으면 Default-Portrait.png가 대체 (옵션)
  • Default-Landscape.png : 가로보기 화면
  • Default-LandscapeLeft.png, Default-LandscapeRight.png : 가로보기 화면에서 왼쪽, 오른쪽을 따로 표시해야할 경우. 없으면 Default-Landscape.png가 대체 (옵션)

유니버셜앱의 경우에 아이폰과 아이패드를 구분하는 방법은 plist를 사용한다. UILaunchImageFile 설정을 이용한다.
아이폰의 초기 화면 설정 예)
UILaunchImageFile~iphone
Default Default-Portrait.png

아이패드의 초기 화면 설정 예)
UILaunchImageFile~ipad
iPadDefault
=> iPadDefault-Portrait.png

아이패드 앱을 개발해서 배포할 때에는 이상의 이미지 정도는 확인을 해보아야 겠습니다.

* 마지막으로 iOS 디바이스의 화면 구성 요소를 잘 정리해 둔 글이 있어 소개합니다. : 링크 보기

%d 블로거가 이것을 좋아합니다: