'TabWidget'에 해당되는 글 2건

  1. 2009.05.21 Android - Change Tab Background (7)
  2. 2009.05.20 Android - TabWidget의 background 변경 (4)
TabWidget에서 추가되는 Tab의 Background변경하기
Tab마다 View를 얻어와서 직접 BackgroundDrawable을 지정하고
아래 막대부분은 reflection을 이용하여 꽁수로 바꿔치기 한다

tab_indicator.xml, tab_bar_left.xml, tab_bar_right.xml 내용은 <selector>로 정의

    private void changeTabWidgetStyle(TabWidget tw){
        for (int i = 0; i < tw.getChildCount(); i++) {
            View v = tw.getChildAt(i);
            v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_indicator));
        }
       
        Field mBottomLeftStrip;
        Field mBottomRightStrip;
        try {
            mBottomLeftStrip = tw.getClass().getDeclaredField("mBottomLeftStrip");
            mBottomRightStrip = tw.getClass().getDeclaredField("mBottomRightStrip");
           
            if(!mBottomLeftStrip.isAccessible()) {
                mBottomLeftStrip.setAccessible(true);
            }
            if(!mBottomRightStrip.isAccessible()){
                mBottomRightStrip.setAccessible(true);
            }
            mBottomLeftStrip.set(tw, getResources().getDrawable(R.drawable.tab_bar_left));
            mBottomRightStrip.set(tw, getResources().getDrawable(R.drawable.tab_bar_right));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

tab_indicator.xml 예
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/tab_unselected" />
    <item android:state_focused="false"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/tab_selected" />

    <!-- Focused states -->
    <item android:state_focused="true"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/tab_focus" />
    <item android:state_focused="true"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/tab_focus" />

    <!-- Pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
</selector>

저작자 표시 비영리 변경 금지
신고
Posted by 바나나쥬스
http://developer.android.com/guide/tutorials/views/hello-tabwidget.html
위 링크의 TabWidget 예제로 이리저리 TabWidget의 background 변경해본 결과

먼저 background 로 쓸 drawable 파일 준비
일단 tabWidget의 background로 사용할 drawable 파일을 만들었다
물론 그냥 색상을 지정해도 상관없다 ㅋㅋ (걍 이런저런 기능 사용해보기위해)

res/drawable/tab_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#FF0000" android:endColor="#C0C0C0"
            android:angle="0"/>
    <corners android:radius="0dp" />
</shape>

이제 이 background를 적용해 보았다

1. Theme로 적용
 styles.xml 만든다
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Test" parent="android:Theme">
        <item name="android:tabWidgetStyle">@style/Widget.TabWidget</item>
    </style>
    <style name="Widget.TabWidget" parent="android:Widget.TabWidget">
         <item name="android:background">@drawable/tab_bg</item>
    </style>
</resources>

여기서 tabWidgetStyle은 모두 "Widget.TabWidget" style을 사용하도록 하고 background를 지정해 주었다
"Theme.Test"를 AndroidManifest.xml 에서 적용시킨다

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="net.escomic.test"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name"
        android:theme="@style/Theme.Test">
        <activity android:name=".Tab" android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="3" />
</manifest>

이렇게 하면 결과는


글자에만 배경이 적용되었다 -_-;;;

2. TabWidget에 Style적용
테마로 적용한 경우 원하는 결과가 나오지 않아 TabWidget에 바로Widget.TabWidget Style을 적용해 보았다

AndroidMenifest.xml 에서 적용한 Theme는 삭제하고
layout 파일에서 style적용
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            style="@style/Widget.TabWidget"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TextView
                android:id="@+id/textview1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="this is a tab" />
            <TextView
                android:id="@+id/textview2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="this is another tab" />
            <TextView
                android:id="@+id/textview3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="this is a third tab" />
        </FrameLayout>
    </LinearLayout>
</TabHost>

style대신에 android:background="@style/tab_bg" 로 써도 된다
이렇게 하면 다음과 같다 -_-;;


이것은 소스 코드상에서 직접 설정하는것과 같다
TabHost mTabHost = getTabHost();
TabWidget tabWidget = mTabHost.getTabWidget();
tabWidget.setBackgroundResource(R.drawable.tab_bg);       

3. 따라서...
테마에  tabWidgetStyle 과 TabWidget에 직접 style을 적용하는 것이 다르다는 것을 알수있는데
왜인지는 모르겠따 -_-;;;



* 번외로 TabHost라고 있는데 여기에 background를 적용하면 아래와 같다
여기서 TabWidget에 background가 없으면 TabHost의 것이 적용되기때문에 노란색 그라데이션이 윗부분까지 적용되게 된다


* TAB1, TAB2, TAB3과 같은 Tab에 style을 적용하는 것은 없는 듯하다
따로 아예 만들어줘야 한다는듯... -_-;;;


저작자 표시 비영리 변경 금지
신고
Posted by 바나나쥬스