[ios/tutorial] TabBar 기본

[ios/tutorial] TabBar 기본

Tab Bar

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html

-

Tab bar 는 tab bar controller 안에 포함되어 있으며, custom view 들에 대한 display 를 담당한다.

-

Tab bar 는...

     투명하다.

     항상 화면 최하단에 위치한다.

     한번에 5개 이상 표시하지 않는다. (폰에서) 만약 5개 이상의 아이템이 있다면 4개가 표시되고, More tab 을 두어 나머지 리스트를 표시해야 한다.

     모든 orientation 에 대해 같은 높이를 유지한다.

     badge 를 표시할 수 있다. ( badge 는 빨간 타원형에 숫자나 느낌표와 함께 하얀 text 로 표시된다. )

-

일반적으로 Tab bar 는 main app view 에 잘 사용된다.

같은 Depth 의 View 들을 보여주기에 좋다.

     

-

Modal 을 띄우는 경우라면 Tab bar 를 쓰지 말고 Toolbar 를 사용하라.

-

그 기능이 Unavailable 할 때도 Tab bar 를 제거하지 말자.

대신 enability 를 조절하라.

-

Badge 를 너무 과도하게 사용하지 말아라.

새로운 정보가 있음을 indicate 하는 용도로만 사용하라.

Badge 표시는.. [[[tabBar items] objectAtIndex:index] setBadgeValue:badgeValue];

-

가로로 사용하는 환경에서는 popover 나 split view controller 등에서 사용할 수도 있다.

그러나 이것은 해당 뷰 안에서만 그 뷰를 바꾸는 경우 (Tab 의 context 가 그 view 를 벗어나지 않는 경우 ) 에만 사용한다.

그러나 이들 뷰 안에서 사용되는 경우네는 Segmented Control 이 더 낫다. ( Visual 측면에서 )

 

<segmented control>

-

너무 많은 tab 을 사용하지 말아라.

유저가 뭘 선택해야 할지 할눈에 알 수 없고, 보기에도 좋지 않다.

-

가능하다면 모든 방향에 대해 같은 tab 을 사용하라.

Tab Bar Icons

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html

-

아이콘을 사용할 때에는 가능하면 standard icon 을 사용하라.

상단 링크에 기본 icon 들에 대한 table 이 있다.

-

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

기본 아이콘(standard icon)을 사용하지 않을 경우 다음을 유념하여 디자인해야 한다.

     간단하고, 선만 따는 형태여야 한다.

     다른 시스템에서 제공되는 아이콘과 헛갈리지 않아야 한다.

     쉽게 이해하고 받아들여질 수 있어야 한다.

-

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarItem_Class/index.html#//apple_ref/c/tdef/UITabBarSystemItem

UITabBarSystemItem 에 대한 Constant 들을 찾아볼 수 있다.

-

애플의 이미지를 그대로 이미지화해서 사용하지 말아라.

저작권이 있으며, 디자인은 수시로 바뀔 수 있다.

-

Custom Tab Icon 을 사용하려면 2가지 버전을 항상 준비해야 한다.

하나는 normal state, 다른 하나는 selected state 이다.

selected state icon 은 보통 invert 를 하면 된다.

그러나 상황에 따라서 가독성을 더 주기 위해 invert 와 함께 배경을 추가할 수도 있다. ( circular enclosure )

선을 더 굵게 하는 방법도 있고,

그냥 tint 에 의존하도록 같은 icon 을 쓰는 방법도 있다.

-

Icon 은 투명도를 사용한다.

iOS 는 모든 색상을 무시하고, alpha 값에 dependent 하게 디자인을 구성한다.

drop shadow 를 사용하지 말아라.

antialiasing 을 사용하라.

-

Tab Icon 의 사이즈는 아래에서 찾을 수 있다.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW2

-

Tab bar icon 자체에 text 를 넣는 것은 좋지 않다.

initWithTitle:image:tag: 등을 이용해서 localize 된 text 를 넣는 것이 좋다.

Title 에 대한 조정은 setTitlePositionAdjustment: 등을 이용해서 할 수 있다.

5개, ALPHA, antialiasing, badge, custom tab icon, custom view, depth, drop shadow, enability, initWithtitle, Invert, localize text, main app view, modal, more tab, normal state, Orientation, Popover, segmented control, selected state, selected state icon, setbadgevalue, settitlepositionadjustment, split view controller, standard icon, tab bar icons, tab bat, tab bat controller, tab icon 사이즈, tabbar, tabbar items, tabbar 기본, tint, Toolbar, UITabBarSystemItem, unavilable, [ios/tutorial] TabBar 기본, 간단, 높이, 디자인 변경, 배경, 선만 따는 형태, 애플 이미지, 저작권, 채ㅜㄴㅅ뭇, 최하단, 탭 아이콘 사이즈, 투명