Neo's Programming

커스텀 탭은 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#을 하다가 다시 자바 쪽 공부를 하면서 병행하니 조금;; 헛갈리긴 한다.

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

여기서 탭은 CS에서 본 탭과 동일한 기능이다.

간단하게 라이너 레이아웃과 하나의 텍스트뷰를 넣고 각기 탭에 대한 기능을 구현 해 보면 다음과 같다.

일단 먼저 XML 파일은 생략한다. 처음에 프레임 레이아웃을 먼저 잡아주고 그 안에 라이너와 텍스트뷰를 넣어서 구성했다.

public class ImageViewActivity extends TabActivity{
 TabHost m_tab;
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);  
  TabHost m_tab = getTabHost();
  
  LayoutInflater inflater = LayoutInflater.from(this);
  inflater.inflate(R.layout.main, m_tab.getTabContentView(),true);  
  m_tab.addTab(m_tab.newTabSpec("tag").setIndicator("first").setContent(R.id.first));
  m_tab.addTab(m_tab.newTabSpec("tag").setIndicator("second").setContent(R.id.second));
  m_tab.addTab(m_tab.newTabSpec("tag").setIndicator("third").setContent(R.id.m_txt_view));
 } 
}

간단히 표시 해 보면 위와 같이 할 수 있다. 다른 방법으로는 setContent 형식으로 표시 하는 방법이 있다.

그 코드는 다음과 같다.

public class ImageViewActivity extends TabActivity{
 Factory m_factory; 
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);  
  m_factory = new Factory(this);
  TabHost tab = getTabHost();
  
  Drawable icon = getResources().getDrawable(R.drawable.ic_launcher);
  LayoutInflater inflater = LayoutInflater.from(this);
  inflater.inflate(R.layout.main, tab.getTabContentView(),true);  
  tab.addTab(tab.newTabSpec("tag1").setIndicator("first",icon).setContent(m_factory));
  tab.addTab(tab.newTabSpec("tag2").setIndicator("second",icon).setContent(m_factory));
  tab.addTab(tab.newTabSpec("tag3").setIndicator("third",icon).setContent(m_factory));
 } 
}

class Factory implements TabHost.TabContentFactory{
 Context m_context;
 Factory(Context context){
  m_context = context;
 }
 
 public View createTabContent(String tag){
  TextView text = new TextView(m_context);
  text.setText(tag);
  return text;
 }
}

별반 차이는 크게 없다. 하나 있다면 별도의 클래스를 생성하여 보낸 것인데 여기서 TabContentFactory를 확장하여 처리를 하였다.

이런 경우 각기 tag 값에 의해 다양하게 화면을 구성 할 수가 있다.

물론 Intent 또한 setContent에 적용하여 사용 할 수도 있다.