[Day18] Android Iphone Tab UI 1 소스

TITLE : Android Fake Iphone UI 2 Source

Date : 2010/08/06

Description :

This is Source that make Iphone style UI by android slector button.

Download Link : 

iphoneUI2.zip

Reference Site :

안드로이드 Selector 버튼을 하단에 4개 배치하여  아이폰 하단의 네비게이션 UI를 배낀 소스

안드로이드의 다양한 에니메이션 기능과 확장성은 아이폰 스타일의 UI도 꾸밀 수 있다.

한국에서 안드로이드폰이 아이폰보다 많이 팔렸다는 뉴스가 나옴에도 불구하고 아직까지 모바일UI에 대세는 아이폰UI라는 점이 참 아이러니 하다 .

안드로이드 기본UI도 충분히 강력하고 효율적이라고 생각하지만 (비록 투박하지만),

주문하는 입장에서 아이폰UI를 부탁하니 어쩔 수 없는 일이다. 

1. 하단에 이미지버튼 4개를 배치하기 위해서 selector xml과 이미지파일을 Drawble 에 등록한다.

셀렉터는 defult와 pressed로 구별해서 정의한다.

 <selector xmlns:android=”http://schemas.android.com/apk/res/android“>
     <item android:state_pressed=”true”
           android:drawable=”@drawable/home_1″ /> <!– pressed –>
    
     <item android:drawable=”@drawable/home_0″ /> <!– default –>
 </selector>

 

2. 상단의 TextView와 하단의 LinearLayout (버튼4개 묶음)은 RelativeLayout 으로 구성하여서 해상도가 변경되어도 버튼들이 하단에 위치하게 한다. 

3. 해상도가 변경되어도 레이아웃이 유지된다.
하단의 이미지버튼을 9Patch로 작업한다면 아래처럼 깨지지도 않을 것이다.(본 예제는 초상권때문에 버튼 만드는 것도 엄청 고생했기때문에 나인패치까지는고려안햇슴;)

4. 버튼을 눌렀을 때 클릭리스너는 각각의 Listner는 Activity에서 정의했고,

XML에서 android:onClick=”ClickHandler” 속성으로 달아주었다.
 

 

5. 이 과정은 본 예제의 핵심으로 이미지 버튼으로 구성시 Activity가 쌓이게 되는데,

android:LunchMode=”singleTask”로 설정해 줌으로써 Activity가 쌓이지 않고 Singleton Pattern으로 1개씩만 생성된다.

 

P.S> 구현된 화면을 보니, 아무래도 화면전환 시 하단 네비게이션이 같이 움직여서 어색하다..

하단에 버튼을 배치하고 viewFlipper나 TabWidget을 활용하면 네비게이션 움직임 없이 구성될 듯 싶으나,

예제의 특성 상 Activity 이동으로 간단하게 구현해 보았다.

이 저작물은 크리에이티브 커먼즈 저작자표시 3.0 Unported 라이선스에 따라 이용할 수 있습니다.