[Android] Custom Tab

커스텀 탭은 HostTab을 이용하지 않고 사용자가 마치 탭을 사용하는 것 처럼 겹쳐지는 화면들을 나타 낼 때 이용한다.

간단한 예제를 보면 다음과 같다.

XML 코드에서는 전체 레이아웃을 라이너로 잡고 그 아래에 프레임 레이아웃과 라디오 그룹을 이용한 것이다.

물론 프레임 레이아웃 내에는 두개의 라이너 레이아웃과 일반 텍스트 뷰로 표기 된 내용이 들어 있다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <FrameLayout
        android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_weight="1">
        <LinearLayout
            android:id="@+id/first"
            android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:visibility="visible">
      <EditText
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="test layout"
      />
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="input"
      />
     </LinearLayout>
     
        <LinearLayout
            android:id="@+id/second"
            android:orientation="vertical"
            android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:visibility="invisible">
      <CheckBox
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="check1"
      />
      <CheckBox
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="check2"
      />
     </LinearLayout>
     
        <TextView
             android:id="@+id/txt_view"
             android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:text="option"
          android:visibility="invisible"
  />
    </FrameLayout>
   
    <RadioGroup
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="65px"
        android:layout_weight="0"
        android:gravity="center_vertical"
        android:checkedButton="@+id/btn1"
        >
       <RadioButton
           android:id="@+id/btn1"
           android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="txt1"
       />
       <RadioButton
           android:id="@+id/btn2"
           android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="txt2"
       />
       <RadioButton
           android:id="@+id/btn3"
           android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="txt3"
       />
    </RadioGroup>
</LinearLayout>

위 내용은 쉽게 다들 알 것이다.

다음은 자바 코드이다.

전체적으로 보면 각각의 뷰를 설정하고 인덱스로 구분하여 화면을 보여주고 있는 형태이다.

public class ImageViewActivity extends Activity{
 View view1,view2,view3;
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);  
  setContentView(R.layout.main);
  view1 = findViewById(R.id.first);
  view2 = findViewById(R.id.second);
  view3 = findViewById(R.id.txt_view);
  ((Button)findViewById(R.id.btn1)).setOnClickListener(listener);
  ((Button)findViewById(R.id.btn2)).setOnClickListener(listener);
  ((Button)findViewById(R.id.btn3)).setOnClickListener(listener);
 }
 
 Button.OnClickListener listener = new Button.OnClickListener(){
  public void onClick(View v){
   switch(v.getId()){
   case R.id.btn1 :
    ChangePage(1);
    break;
   case R.id.btn2 :
    ChangePage(2);
    break;
   case R.id.btn3 :
    ChangePage(3);
    break;    
   }
  }
 };
 
 void ChangePage(int index){
  view1.setVisibility(View.INVISIBLE);
  view2.setVisibility(View.INVISIBLE);
  view3.setVisibility(View.INVISIBLE);
  
  switch(index){
  case 1:
   view1.setVisibility(View.VISIBLE);
   break;
  case 2:
   view2.setVisibility(View.VISIBLE);
   break;
  case 3:
   view3.setVisibility(View.VISIBLE);
   break;
  }
 }
}

한가지 명심 할 점이 있다면 클릭 리스너를 생성하고 끝에 ; << 세미콜론을 명심하자...

메세지만 안보고 빨간 엑스만 뜨길래 이놈은 왜 이래 하면서 한참 고뇌에 빠졌다;;

C#을 하다가 다시 자바 쪽 공부를 하면서 병행하니 조금;; 헛갈리긴 한다.

또한 버튼을 적용시키고 리스너를 넣을 때 선 선행 되어야 하는것이 버튼 쪽을 전체 ()로 묶어주고 그 다음에 이벤트를 연결해야한다.