[Day19] Android Iphone Tab UI 2 소스

TITLE : Android Fake Iphone UI 2 Source

Date : 2010/08/12

Description :

This is Source that make Iphone style UI by android Tab controller.

Download Link : 

TabTest.zip

Reference Site :

http://sourceway.eu/wp/2010/06/android-tutorial-1-custom-tabs/

http://www.gregbugaj.com/?p=6

저번 시간에 포스트는 하단 이미지4개를 배치해서 Iphone 스타일로 만드는 것이였다면,

이번 시간에는 TabView를 사용해서 정석적인 방법에서 접근했다. (논란의 여지도 있어서)

Tabview을 상속받는 CustomTabView를 만들어야 하나 고민하다가

TabHost의 setIndicator로 뷰를 지정할 수있다는 사실을 알게되니(헉!) 생각보다 쉽게 해결됬다;

(Thanks to sourceway.eu~)

1. LinearLayout을 상속받는 setIndicator에 지정될 뷰를 정의한다.  각 탭의 Indecator 디자인을 의미한다.

 XML로 정의해서 Inflator로 생성하면 좀더  정교한 디자인이 될 수 있겠지만, 원작자의 의견을 존중(?)했다.

private class MyView extends LinearLayout {

  public MyView(Context c, int drawable, String label) {
   super(c);
   ImageView iv = new ImageView(c);
   iv.setImageResource(drawable);

   TextView tv = new TextView(c);
   tv.setText(label);
   tv.setGravity(0×01);

   setOrientation(LinearLayout.VERTICAL);
   addView(iv);
   addView(tv);   
  }

2. TabHost에 붙일 때 들어갈 아이콘 과 스트링 문자열을 정의한다.

정말 생각보다 간단하게 구현됫다;

 spec = tabHost.newTabSpec(“player”).setIndicator(
    new MyView(this, R.drawable.home, “Home”)).setContent(intent);
  tabHost.addTab(spec);

 

3. 여기까지는 원작자의 소스를 바탕으로 설명한 것인데, 실제로 탭 이동간에 허전한 느낌이 있다.

탭 이동간 에니메이션을 처리해 줄 순서.

res-anim폴더에 anim.push_left_in.xml 에니메이션 파일을 등록한 후

 translateLeftAnim = AnimationUtils.loadAnimation(this,
    R.anim.push_left_in) ;

으로 장전하여 언제든지 쏠 준비를 한다.

 

4. TabHost을 클릭했을 때 Animation을 시작하는 리스너를 등록한다. 

tabHost.setOnTabChangedListener(new OnTabChangeListener() {
   // 텝이 변경될 때 에니메이션이 바뀐다.
   @Override
   public void onTabChanged(String tabId) {
    // TODO Auto-generated method stub
    // 현재 Activity에 토스트 팝업
    Toast.makeText(getCurrentActivity(),
      ActivityName[tabHost.getCurrentTab()] + ” Activity”,
      Toast.LENGTH_SHORT).show();
    // 에니메이션 출발 !
    tabHost.getCurrentView().startAnimation(translateLeftAnim);
   }
  });

 

<P.S> 구현된 UI를 보니 예전에 만든 UI보다 멎지게 작동하는 것 같아서 흐믓하다.

 (이의를 제기해 주신분들께  ㄳ)

하단 뷰에 이미지를 Selector를 사용해서 눌리는 효과를 주거나 에니메이션 효과를 주면 더 좋을것 같다.

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