'탭바인터페이스'에 해당되는 글 1건

  1. 2011.02.10 [아이폰개발] 탭바 인터페이스 라이브러리 번역

Tab Bar Controller

 

 

u     Tab Bar인터페이스

n         용도

같은 데이터셋에대해 다른 표현방법을 제공해야할 경우

기능별로 나누어서 어플리케이션을 구성해야할 경우

 

n         Tab Bar View 컨포넌트

화면 하단에 표시

어플리케이션의 각종 모드간의 화면 전환기능을 지원

각 모드의 상태에 관한 정보를 표시가능

 

n         Tab Bar ViewController 오브젝트

Tab Bar View를 작성하고 관리

각 모드별 뷰를 관리하는 커스텀뷰컨트롤러를 관리

 

n         Tab Bar View는 통상의 커스터마이즈 가능한 오브젝트이나 Tab Bar인터페이스에 포함된경우에는 변경해서는 안됨

Tab Bar인터페이스에서는 Tab Bar뷰가 Tab Bar컨트롤러에 소유된 프라이베이트한 뷰계층의 일부로 간주함

액티브한 탭 리스트의 변경이 필요한때에는 반드시 Tab Bar컨트롤러의 메소드를 사용해야함

u     Tab Bar인터페이스의 오브젝트

n         종류

UITabBarController 오브젝트

탭별 한개씩 존재하는 커스텀 ViewController 오브젝트

옵션의 델리게이트 오브젝트

 

n         설명

각 뷰컨트롤러에는 선택될때 표시되는 컨텐츠가 지정되어 있음

지정되는 뷰컨트롤러에는 단일 뷰를 표시하는 커스텀 뷰 컨트롤러나 네비게이션 컨트롤러도 사용가능. 하지만 탭바뷰컨트롤러는 사용 불가능

뷰컨트롤러 프로퍼티에 5개가 넘는 항목을 추가하면 탭바에 들어가지 못한 항목의 표시를 위해

특별한 뷰컨트롤러(MoreView Controller)를 자동적으로 삽입

 

n         MoreView Controller

5개이상의 뷰컨트롤러를 테이블형식으로 표시가능

커스터마이즈 하거나 선택하는건 불가능

탭바 컨트롤러가 관리하는 뷰 컨트롤러 리스트에 포함되어있지 않음

보통 필요한때에 자동으로 표시되어 커스텀콘텐츠로부터 독립되어있음

참조가 필요할 경우에는UITabBarControllermoreNavigationController 프로퍼티에 접근

 

 

u     Tab Bar 인터페이스의 작성

n         인터페이스 사용방법 결정

어플리케이션의 메인 윈도우에 직접 추가

Split view 인터페이스의 두개중 한개의 루트뷰중 한곳에 추가(iPad만 가능)

모드에 고유의 구성을 필요로하는 데이터를 표시하기위해 모달모드로 표시

Popover에서 표시(iPad만 가능)

 

n         주의사항

네비게이션 컨트롤러를 탭내에 내장하는것은 가능하나 그 반대의 경우는 불가능

 

n         탭바 인터페이스용의 커스텀 뷰 컨트롤러의 정의

탭바 인터페이스의 각 모드는 다른 모드들과는 독립되어 있음

각모드의 루트 컨트롤러가 탭 안의 콘텐츠를 정의하고 있음

모드의 콘텐츠가 복잡한 경우에는 네비게이션 컨트롤러를 인스톨함으로서 탭내에서의

조작을 지원

모드의 콘텐츠가 비교적 단순한 경우에는 단일뷰를 가진 커스텀 뷰 컨트롤러를 인스톨

 

 

n         NIB파일을 사용한 탭바 인터페이스의 작성

탭바컨트롤러를 nib파일에서 로드하는 경우는 커스텀 뷰 컨트롤러에서 로드하는 경우와 조금 다름

뷰컨트롤러의 경우 프로그램안에서 작성하는 경우나 다른 nib파일에서 로드하는 경우 똑같이 개별적으로 작성함

              탭바 컨트롤러의 경우 뷰는 반드시 프로그램안에서 작성하기때문에 독립된 nib파일에 격납할 뷰는

              존재하지 않기때문에 탭바컨트롤러가 nib파일을 관리할 일이 없음

              대신에 탭바컨트롤러와 nib파일이 관계를 가지는 경우는 탭바컨트롤러 자체가 nib파일에

포함될 경우

그렇기 때문에 대부분의 경우에 탭바컨트롤러는 다른 오브젝트가 관리하는 닙파일에 포함됨

가장 이상적인 구성은 탭뷰컨트롤러를 어플리케이션의 메인nib파일에 포함시키는 것

              탭바 컨트롤러 자신이 어플리케이션 윈도우의 메인뷰를 제공하는 경우 모달 모드에서 표시 되는

              탭바 컨트롤러를 nib파일에서 로드하는것도 가능하지만 최적은 아님

              실제로는 탭바컨트롤러를 필요할때 프로그램안에서 작성해서 쓰는게 일반적

 

              위 그림에서 각 커스텀 뷰 컨트롤러는 한개의 탭에 연결된 루트 뷰 컨트롤러를 표시함

              각 뷰컨트롤러는 커스텀 뷰 컨트롤러이기때문에 뷰를 포함하고 있는 nib파일을 참조하고 있음

              메인nib파일에 각각의 커스텀 뷰를 포함시키는것도 가능하지만 추천하지 않음

              뷰를 별도의 nib파일에 포함시키는것으로 시스템에서 필요에따라 뷰를 메모리에서

완전히 파기하는게 가능해짐

 

n         텝바컨트롤러의 작성 순서 예(메인 윈도우 nib에 포함시킬경우)

탭바 어플리케이션 템플리트를 사용할경우 1,2과정은 스킵

1.       탭바컨트롤러 오브젝트를 라이브러리에서 인터페이스 빌더의 도큐멘트윈도우에 드래그함

탭바컨트롤러를 nib파일에 추가하면 인터페이스 빌더에 의해 1개의 탭바뷰, 2개의 루트뷰컨트롤러, 2개의 탭바아이콘이 추가됨

2.       아웃렛을 사용해서 탭바컨트롤러에의 참조를 저장함

실행시에 이 탭바컨트롤러에 엑세스하기위해선 아웃렛을 사용하거나 닙파일을 로드할때 닙파일의 최상위 레벨의 오브젝트를 명시적으로 취하는 방법이 있음

일반적으로 아웃렛을 사용

 

아웃렛을 추가하는 방법

@interface MyAppDelegate :NSObject <UIApplicationDelegate> {

IBOutlet UITabBarController* myTabBarController;

}

@end

아웃렛의 정의를 추가하고 아웃렛에서 탭바컨트롤러오브젝트에 접속을 작성

3.       인터페이스에 표시하고싶은 탭수에 맞춰서 뷰컨트롤러를 추가하거나 삭제함

탭바 컨트롤러 오브젝트에 포함된 뷰컨트롤러 수에 의해 탭바 인터페이스에 표시되는 탭의 수가 정해짐

최종적인 탭바컨트롤러에는 최소한 2개의 뷰컨트롤러가 포함되야함

인터페이스 빌더의 라이브러리에서 뷰컨트롤러나 네비게이션컨트롤러 테이블뷰컨트롤러를 드래그해서 탭과 연결시키는것이 가능함

뷰컨트롤러를 추가하는 방법은 아래와 같음

■ 적절한 오브젝트를 라이브러리에서 편집서페이스내의 탭바에 드래그함

■ 오브젝트 라이브러리에서 인터페이스 빌더의 도큐먼트윈도우안의 탭바 컨트롤러에 드래그

윈도우는 아웃라인모드 이여야함

네비게이션 컨트롤러나 테이블뷰 컨트롤러를 인터페이스에 추가할 경우에는 해당 오브젝트를 라이브러리에서 드래그하거나 탭바 컨트롤러를 선택해서Attributes인스펙터를 사용해서 뷰컨트롤러의 종류를 설정

범용 뷰컨트롤러 오브젝트를 닙파일에 드래그해서 클래스명을 원하는 클래스타입으로 변경

                           

4.       화면에 표시할 순서대로 뷰컨트롤러를 정렬

탭바 컨트롤러의 편집서페이스에 표시된 탭을 드래그하거나 인터페이스빌더의 도큐먼트윈도우에 뷰컨트롤러를 드래그함으로서 (아웃라인모드인 경우) 뷰컨트롤러의 순서를 바꾸는것이 가능함

편집서페이스에는 모든 탭이 표시되나 실행시에는 5개만 표시됨

탭바 컨트롤러에 6개이상의 뷰컨트롤러가 포함된 경우에는 초기화상태의 탭바에는 최초의 4개만 표시됨 5번째의 탭에는 나머지 뷰컨트롤러를 표시하는More뷰컨트롤러용으로 예약됨

5.       각 탭에 루트뷰컨트롤러를 설정

각 루트뷰컨트롤러에는 다음과같은 속성을 설정해야만함

Identity」인스펙터를 사용해서 임의의 뷰컨트롤러 오브젝트의 클래스를 설정함

루트뷰컨트롤러가 범용의 뷰컨트롤러오브젝트이거나 테이블뷰컨트롤러오브젝트인 경우에는 클래스명을 커스텀서브클래스로 변경가능

루트뷰컨트롤러가 네비게이션 컨트롤러 오브젝트인경우에는 클래스명을 변경해서는 안됨

■ 뷰컨트롤러에 뷰를 설정

가장 일반적으로 뷰컨트롤러의 닙네임속성을 뷰를 포함한 닙파일의 이름으로 설정하는 방법이 사용

뷰를 메인 닙파일에 포함시키는것도 가능은 하나 추천하지 않음

■ 필요에 따라서 뷰컨트롤러의 스타일을 설정함

루트뷰컨트롤러중 네비게이션컨트롤러를 사용할 경우에는

6.       각뷰컨트롤러에 탭바 아이템을 설정

탭바컨트롤러의 편집서페이스 혹은 인터페이스 빌더의 도큐먼트윈도우(아웃라인모드 혹인 브라우져모드의 경우)에서 탭바이이템을 선택가능함 인터페이스빌더를 사용해서 탭바아이템의 타이틀, 화상, 뱃지를 설정할수 있음

혹은 Attributes인스펙터로 Identifier프로퍼티의 값을 할당함으로 탭바아이템을 표준의 시스템탭 한개에 설정하는것도 가능

7.       어플리케이션 델리게이트의applicationDidFinishLaunching메소드안에서 탭바컨트롤러뷰를 메인윈도우에 추가함

탭바 컨트롤러를 자동으로 어플리케이션의 윈도우에 인스톨하는것은 불가능 아래의 코드로 직접인스톨해야함

- (void)applicationDidFinishLaunching:(UIApplication *)application {

[window addSubview:myTabBarController.view];

}

8.       닙파일을 저장

 

n         프로그램으로 탭바인터페이스를 작성

탭바컨트롤러를 프로그램안에 작성하고 싶을 때 가장 권장하는 위치는 어플리케이션 델리게이트의 applicationDidFinishLaunching 메소드 임

통상 탭바컨트롤러는 어플리케이션 윈도우의 루트뷰를 저공하므로 어플리케이션을 기동한 직후 윈도우를 표시하기전에 탭바컨트롤러를 작성할 필요가 있음

프로그램안에 작성 순서

1.      신규의UITabBarController오브젝트를 작성

2.      탭별로 한 개씩의 커스텀 루트 뷰 컨트롤러를 작성

3.      루트뷰컨트롤러들을 배결에 추가해 탭바컨트롤러의 viewControllers프로퍼티에 할당

4.      탭바컨트롤러의 뷰를 어플리케이션의 메인윈도우에 추가

어플리케이션의 메인윈도우에 탭바 컨트롤러의 인터페이스를 작성해서 인스톨하기위해 필요한 기본적인 코드

- (void)applicationDidFinishLaunching:(UIApplication *)application {

tabBarController = [[UITabBarController alloc] init];

MyViewController* vc1 = [[MyViewController alloc] init];

MyOtherViewController* vc2 = [[MyOtherViewController alloc] init];

NSArray* controllers = [NSArray arrayWithObjects:vc1, vc2, nil];

tabBarController.viewControllers = controllers;

// Tab Bar Controllerの現在のビュをウインドウのサブビュとして追加する

[window addSubview:tabBarController.view];

}

 

n         프로그램으로 탭바아이템을 작성

탭바인터페이스의 각 루트뷰 컨트롤러에는 각각에 대응하는 탭에 표시하는 화상과 텍스트를 가진 UITabBarItem 오브젝트를 제공해야함

탭바 인터페이스가 표시되기전에는 언제든 탭바 아이템을 뷰 컨트롤러에 연결가능함

해당 오브젝트는 탭바아이템을 각각에 대응하는 뷰컨트롤러의 tabBarItem프로퍼티에 할당

탭바아이템을 작성하는 이상적인 시기는 뷰컨트롤러자신의 초기화중이지만 통상 위의 경우는 커스텀뷰컨트롤러의 경우뿐임 뷰컨트롤러를 작성해서 초기화하고 탭바아이템을 작성해서 연결시키는 것이 가능함

커스텀뷰컨트롤러에 탭바아이템을 작성하는 예

- (id)init {

if (self = [super initWithNibName:@"MyViewController" bundle:nil]) {

self.title = @"My View Controller";

UIImage* anImage = [UIImage imageNamed:@"MyViewControllerImage.png"];

UITabBarItem* theItem = [[UITabBarItem alloc] initWithTitle:@"Home"

image:anImage tag:0];

self.tabBarItem = theItem;

[theItem release];

}

return self;

}

 

u     실행시 탭의 관리

n         탭바 인터페이스를 작성한후에는 몇가지의 방법을 사용해 인터페이스를 변경하거나 어플리케이션내의 변화에 대응가능

탭의 추가나 삭제가 가능

델리게이트오브젝트를 사용해서 동적인 조건을 기반으로 탭의 선택을 금지시키는것도 가능

각각의 탭에 뱃지를 추가해서 유저에게 해당탭에 주의시키는것도 가능

 

n         탭의 삭제와 추가

탭바 인터페이스안 탭의 수가 동적으로 변화할 경우 필요에 따라 실행시에 적절한 변경이 가능함

작성시에 탭을 설정하는 방법과 같이 적절한 뷰컨트롤러셋을 탭바컨트롤러에 할당함으로서 실행시에 탭을 변경함

유저에게 시각적인 효과를 주면서 탭을 추가하거나 삭제할경우에는 setViewControllers:animated:를 사용해서 탭변경을 에니메이션화 하는 것 도 가능

현재 선택된 탭내의 특정버튼에 의해 해당탭을 삭제하는 메소드

- (IBAction)processUserInformation:(id)sender {

if ([self userDataIsValid]) {

NSMutableArray* newArray = [NSMutableArray

arrayWithArray:self.tabBarController.viewControllers];

[newArray removeObject:self];

[self.tabBarController setViewControllers:newArray animated:YES];

}

}

 

n         탭 선택 금지

유저가 탭을 선택하지 못하게 할경우에는 델리게이트오브젝트를 준비해서 tabBarController:shouldSelectViewController:메소드를 작성함

탭의 선택을 금지하는 경우는 예를들면 어플리케이션에서 유저에게 아이디 패스워드의 입력을 요구할경우 입력을 받는 태그이외의 태그를 무효로 하는 것이 가능

위의 상황의 예제 코드 hasValidLogin메소드는 입력된 정보를 검증하기위해 작성한 커스텀 메소드

shouldSelectViewController:(UIViewController *)viewController {

if (![self hasValidLogin] && (viewController != [aTabBar.viewControllersobjectAtIndex:0]) ) {

return NO;

}

return YES;

}

 

n         유저의 의한 탭의 변경을 감시

탭바에서 유저에의해 발생하는 변경에는 아래의 두가지가 있음

유저가 탭을 선택함

유저가 탭의 배치를 변경함

두경우 모두 탭바컨트롤러의 델리게이트에 보고됨

델리게이트는 UITabBarControllerDelegate프로토콜에 준비한 오브젝트임

델리게이트를 준비해서 유저에의한 변경을 추적하거나 변경에따라서 어플리케이션의

상태정보를 갱신가능

다만 표시나 비표시중의 뷰컨트롤러가 일반적으로 처리하는 작업을 실행하기위해 위의

통지를 사용하는건 안됨

예를들어 현재선택된 뷰의 스타일에 어울리는 스테이터스바의 디자인을 변경하기위해

탭바컨트롤러의 델리게이트를 사용하지 않음

위의 경우에는 커스텀뷰컨트롤러에서 처리하는게 최선임

 

n         탭의 커스터마이즈 금지

More뷰 컨트롤러에는 탭바에 표시하는 항목을 유저가 수정가능하게 하는 기능이 내장되어있음

여러 개의 탭을 가진 어플리케이션의 경우 유저는 위의 기능을 이용해서 바로 엑세스 가능한 화면과

엑세스하기위해 추가의 네비게이터가 필요하게되는 화면을 선택 가능함

아래 화면에서 왼쪽화면 상단의 edit버튼을 탭하면 오른쪽화면으로 자동으로 표시전환됨

이화면에서 새로운 항목을 탭바에 드래그함으로서 탭바의 내용을 교체하는게 가능함

대부분의 경우에는 탭의 배치변경을 유저에게 허가하지만 특정탭을 탭바에서 삭제하거나 특정 탭을

탭바에 배치하는 조작을 유저에게 허가하고싶지 않을경우에는 뷰컨트롤러오브젝트의 배열을

customizableViewControllers프로퍼티에 할당함 이 배열에는 배치를 변경해도 좋은 뷰컨트롤러의

서브셋을 포함함 위의 배열에 포함되지않은 뷰컨트롤러는 배치변경화면에 표시되지 않음

따라서 탭바에 표시되고 있는 뷰컨트롤러를 탭바에서 삭제하는 것은 불가능함

중요 : 탭바인터페이스에서 뷰컨트롤러를 추가하거나 삭제하거나하면 커스터마이즈가능한

뷰컨트롤러의 배열도 디폴트값으로 리셋되어 모든 뷰컨트롤러가 커스터마이즈가능한 상태로 돌아감

따라서 viewControllers프로퍼티를(직접 또는 setViewControllers:animated:메소드를 호출해서)

변경했을 때 계속해서 커스터마이즈 가능한 뷰컨트롤러를 제어할경우에는

 customizableViewControllers프로퍼티내의 오브젝트의 배열도 변경할 필요가 있음

 

n         뱃지의 변경

통상 탭바인터페이스의 탭의 외견은 그탭이 선택될 때 이외에는 변화하지 않음

다만 특정의 탭에 주의를 주고싶은 경우에는 (해당탭에 유저에게 보이고싶은 새로은 컨텐츠가

생긴경우 등) 배지를 추가하는 것이 가능

              뱃지는 탭의 구석에 표시되는 빨간 표시임 뱃지의 내부에는 개발자가 제공하는 특정

텍스트가 표시됨

              통상 뱃지에는 그탭에서 이용가능한 신규항목의 수를 표시하는 숫자가 표시되나 짧은

문자를 지정하는것도 가능함

 

              탭에 뱃지를 추가할때는 해당 탭바아이템의 badgeValue프로퍼티에 nil이외의 값을 할당함

              예를들어 뱃지내에 신규항목의 수를 표시하는 뷰 컨트롤러에는 아래와 같은 코드를 사용해서

뱃지의 값을 작성함

              if (self.numberOfNewItems == 0)

self.tabBarItem.badgeValue = nil;

else

self.tabBarItem.badgeValue = [NSString stringWithFormat:@"%d",self.numberOfNewItems];

              뱃지의 값을 표시하거나 변경하는 타이밍을 결정하는 것은 개발자의 책임임

              다만 뷰컨트롤러에 뱃지용의 값을 가진 프로퍼티가 포함된 경우에는 KVO통지를 사용해서 값의

              변화를 검출해서 그것에 따라 뱃지를 갱신가능함

             

u     탭바 컨트롤러와 뷰의 회전

n         탭바 컨트롤러는 디폴트로 세로방향을 서포트함 모든 루트뷰컨트롤러가 가로방향을 서포트하지않는한 가로방향으로 회전하지 않음 디바이스의 방향이 변화하면 탭바컨트롤러는 뷰컨트롤러의 배열에 문의해 1개라도 가로방향을 서포트하지않는 뷰컨트롤러가 있으면 회전 하지 않음

 

u     탭바와 풀스크린레이아웃

n         탭바 컨트롤러는 다른 대부분의 뷰컨트롤러와는 다른 방법으로 풀스크린레이아웃을 서포트함

스테이터스바나 네비게이션바의 배경에 뷰를 겹치고 싶을때는 커스텀뷰컨트롤러의 wantsFullScreenLayout프로퍼티를 YES로 설정함

위의 프로퍼티를 YES로 설정해도 탭바뷰의 배경에 뷰를 겹치는 것은 불가능

탭바 컨트롤러는 탭바의 배경에 뷰가 겹치지 않도록 항상 뷰의 사이즈를 변경함

 

 

 ps. 번역이 점점 빨라진다..ㅎ 코딩해야하는데 ㅡ.ㅡ

 

 

Posted by 김반장78
,