web-dev-qa-db-ja.com

Androidタブまたは背景の変更をカスタマイズするには?

私はAndroidを初めて使用します。次に、小さなアプリケーションを作成します。

Android 2.2のデフォルトルックアップ)のルックアンドフィールを変更する必要があります。そこで、ここでタブの背景を変更しようとしています。

私はxml/styleを使用する方法が大好きです。

これが実際の出力に必要なものです。

Tabs

16
Sibiraj PR

タブホストXMLファイル

TabHost

<?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" 
            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"> 
        </FrameLayout> 

    </LinearLayout> 

</TabHost> 

あなたの中主な活動

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    mTabHost = (TabHost) findViewById(Android.R.id.tabhost);

    setupTab(new TextView(this), "Tab 1");
    setupTab(new TextView(this), "Tab 2");
    setupTab(new TextView(this), "Tab 3");
}

private void setupTab(final View view, final String tag) {
    View tabview = createTabView(mTabHost.getContext(), tag);
    TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
        public View createTabContent(String tag) {
            return view;
        }
    });
    mTabHost.addTab(setContent);
}

private static View createTabView(final Context context, final String text) {
    View view = LayoutInflater.from(context).inflate(R.layout.tabs_bg, null);
    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);
    return view;
}

CustomTabsLayout tabs_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/tabsLayout" Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" Android:background="@drawable/tab_bg_selector"
    Android:padding="10dip" Android:gravity="center" Android:orientation="vertical">

    <TextView Android:id="@+id/tabsText" Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" Android:text="Title"
        Android:textSize="15dip" Android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

tab_text_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true" Android:color="@Android:color/white" />
    <item Android:state_focused="true" Android:color="@Android:color/white" />
    <item Android:state_pressed="true" Android:color="@Android:color/white" />
    <item Android:color="#f8f8f8" />
</selector>

tab_bg_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <!--  Active tab -->
    <item Android:state_selected="true" Android:state_focused="false"
        Android:state_pressed="false" Android:drawable="@drawable/tab_bg_selected" />
    <!--  Inactive tab -->
    <item Android:state_selected="false" Android:state_focused="false"
    Android:state_pressed="false" Android:drawable="@drawable/tab_bg_unselected" />
    <!--  Pressed tab -->
    <item Android:state_pressed="true" Android:drawable="@Android:color/transparent" />
    <!--  Selected tab (using d-pad) -->
    <item Android:state_focused="true" Android:state_selected="true"
    Android:state_pressed="false" Android:drawable="@Android:color/transparent" />
</selector>

tab_bg_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <gradient Android:startColor="#A8A8A8" Android:centerColor="#7F7F7F"
        Android:endColor="#696969" Android:angle="-90" />
</shape>

tab_bg_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <gradient Android:startColor="#5C5C5C" Android:centerColor="#424242"
    Android:endColor="#222222" Android:angle="-90" />
</shape>

そして最後にメインのアクティビティクラス

mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);

そして仕上げ:)

45