[Android 강좌][Korean][테마] - Tab 배경이미지 적용 방법

일반적으로 Tab의 배경 이미지 적용은 간단하다.
즉, 아래와 같이 "setBackgroundColor()" 를 적용하면 간단하다.

'm_tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512"));'
하지만, 내가 원하는 것은 아래와 같이 여러 속성을 적용하고자 한다.

- 'Touch 했을 때 색상 or 이미지'
- 'Touch Up 했을 때 색상 or 이미지'
- 'Tab에 포커싱 되어 있을 때 색상 or 이미지'
...

위와 같이 하기 위해서는 기본으로 제공되는 Android Control을 조합해야 한다.

※ Example Code
- TapView_Custom.java
public class TapView_Custom extends TabActivity implements OnTabChangeListener {
    /** Called when the activity is first created. */

    private TabHost m_tabHost = null;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        setContentView(R.layout.tapview_custom_layout);
       
        /** TabHost ID */
        m_tabHost= (TabHost)findViewById(android.R.id.tabhost); 
        TabSpec aaa_TabSpec = m_tabHost.newTabSpec("aaa"); 
        TabSpec bbb_TabSpec = m_tabHost.newTabSpec("bbb");
        TabSpec ccc_TabSpec = m_tabHost.newTabSpec("ccc");
       
        LayoutInflater vi1 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater vi2 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater vi3 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View View_1 = (View)vi1.inflate(R.layout.tab_row_item, null);        View View_2 = (View)vi2.inflate(R.layout.tab_row_item, null);
        View View_3 = (View)vi3.inflate(R.layout.tab_row_item, null);
        LinearLayout Layout_1 = (LinearLayout)View_1.findViewById(R.id.LinearLayout01);
        LinearLayout Layout_2 = (LinearLayout)View_2.findViewById(R.id.LinearLayout01);
        LinearLayout Layout_3 = (LinearLayout)View_3.findViewById(R.id.LinearLayout01);
        Layout_1.setBackgroundResource(R.drawable.tab_1_bg);
        Layout_2.setBackgroundResource(R.drawable.tab_2_bg);
        Layout_3.setBackgroundResource(R.drawable.tab_3_bg);
       
        ImageView iv_1 = (ImageView)View_1.findViewById(R.id.icon);
        ImageView iv_2 = (ImageView)View_2.findViewById(R.id.icon);
        ImageView iv_3 = (ImageView)View_3.findViewById(R.id.icon);
       
        TextView tv_1 = (TextView)View_1.findViewById(R.id.text);
        TextView tv_2 = (TextView)View_2.findViewById(R.id.text);
        TextView tv_3 = (TextView)View_3.findViewById(R.id.text);
        tv_1.setText("aaa");
        tv_2.setText("bbb");
        tv_3.setText("ccc");
       
        aaa_TabSpec.setIndicator(View_1);
        aaa_TabSpec.setContent(new Intent(this,test_activity.class)); 
        bbb_TabSpec.setIndicator(View_2);
        bbb_TabSpec.setContent(new Intent(this,test_activity.class)); 
        ccc_TabSpec.setIndicator(View_3);
        ccc_TabSpec.setContent(new Intent(this,test_activity.class)); 
       
       /** 탭을 TabHost 에 추가한다 */
        m_tabHost.addTab(aaa_TabSpec);        m_tabHost.addTab(bbb_TabSpec);
        m_tabHost.addTab(ccc_TabSpec);
       
        m_tabHost.getTabWidget().setCurrentTab(0); 
    }
}

- tapview_custom_layout.xml
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical">
 <TabHost
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@android:id/tabhost">
  <LinearLayout
    android:id="@+id/LinearLayout01"
   android:orientation="vertical"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"> 
   <FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:layout_weight="1">
   </FrameLayout> 
 
    <TabWidget
    android:id="@android:id/tabs"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" >
   </TabWidget>
  </LinearLayout>
 </TabHost>

</LinearLayout>


- tab_row_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:id="@+id/LinearLayout01"
 android:orientation="vertical">
 <ImageView
  android:id="@+id/icon"
  android:layout_width="33dip"
  android:layout_height="30dip"
  android:layout_marginTop="3dip"
  android:scaleType="fitXY"
  android:layout_gravity="center"
  android:background="@drawable/icon" >
 </ImageView>
 <TextView
  android:id="@+id/text"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:layout_marginLeft="5dip"
  android:layout_marginRight="5dp"
  android:textSize="15dip"
  android:layout_gravity="center" />

</LinearLayout>


- tab_1_bg.xml
('res - drawable'폴더에 파일을 생성)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_selected="true"
  android:drawable="@drawable/color_green"/>

 <item
  android:state_pressed="true"
  android:drawable="@drawable/color_yellow"/>

 <item
  android:state_focused="false"
  android:drawable="@drawable/color_white"/>
</selector>


- tab_2_bg.xml
('res - drawable'폴더에 파일을 생성)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_selected="true"
  android:drawable="@drawable/color_green"/>

 <item
  android:state_pressed="true"
  android:drawable="@drawable/color_yellow"/>

 <item
  android:state_focused="false"
  android:drawable="@drawable/color_white"/>
</selector>


- tab_3_bg.xml
('res - drawable'폴더에 파일을 생성)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_selected="true"
  android:drawable="@drawable/color_green"/>

 <item
  android:state_pressed="true"
  android:drawable="@drawable/color_yellow"/>

 <item
  android:state_focused="false"
  android:drawable="@drawable/color_white"/>
</selector>

추가로 문의 사항이나, 궁금한 점이 계시면 연락주세요.
(joonryang@gmail.com)
※ 도움이 되셨다면, ^^. 맨 위 광고클릭 좀..ㅎㅎ