web-dev-qa-db-ja.com

タブの背景色を変更し、タブ間の仕切り線を削除します

アプリケーションにタブを表示したいのですが、デフォルトではAndroidタブ間にこのような仕切り線があります

                            Tab1 | Tab2 | Tab3 |

しかし、私はこのようなタブを表示したい

                            Tab1 Tab2 Tab3

したがって、2つのタブの間の仕切り線を削除したいのですが、デフォルトでは、タブの背景色は灰色です。だからこれを黒い色に変えたいです。

2つのタブの間の仕切り線を削除し、タブの背景色を変更する方法を教えてください。

前もって感謝します。

宜しくお願いします。

androidtabs
13
Ramakrishna

この方法とレイアウトを使用して、タブに独自のレイアウトを使用します。仕切りを削除するには、背景の9patchグラフィックを独自のものに置き換えるだけです。

public static View prepareTabView(Context context, String text, Drawable background) {
    View view = LayoutInflater.from(context).inflate(R.layout.fake_native_tab, null);
    TextView tv = (TextView) view.findViewById(R.id.fakeNativeTabTextView);
    tv.setText(text);
    view.setBackgroundDrawable(background);
    return view;
}

fake_native_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/fakeNativeTabLayout" Android:layout_width="wrap_content"
Android:layout_height="wrap_content" Android:gravity="center"
Android:orientation="vertical" Android:background="@drawable/default_tab_background">
<!--
       You can even define an Icon here (dont forget to set a custom icon in your code for each Tab):
    <ImageView Android:id="@+id/fakeNativeTabImageView"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content" Android:src="@drawable/icon" />
-->
    <TextView Android:id="@+id/fakeNativeTabTextView"
    Android:layout_width="wrap_content" Android:layout_height="wrap_content"
    Android:textColor="@color/tab_text_color" Android:textSize="@dimen/text_size_tiny"
    Android:text="Tab" Android:ellipsize="Marquee" />

</LinearLayout>

使用法（TabActivity内）：

/* Create Tabs */
// reusable Tab Spec
TabHost.TabSpec spec;
Intent tabIntent;
tabHost = getTabHost();
Resources res = getResources();

// Tab 1:
tabIntent = new Intent().setClass(this, Favorite.class);
    spec = tabHost.newTabSpec(TAB_SOMETAB).setIndicator(
            prepareTabView(this, (String) getText(R.string.tab_favorite), res
                    .getDrawable(R.drawable.tab_favorite_background), 0)).setContent(tabIntent);
tabHost.addTab(spec);



// Tab 2:
tabIntent = new Intent().setClass(this, History.class);
spec = tabHost.newTabSpec(TAB_SOMEOTHERTAB).setIndicator(
            prepareTabView(this, (String) getText(R.string.tab_history), res
                    .getDrawable(R.drawable.tab_favorite_background), 0)).setContent(tabIntent);
tabHost.addTab(spec);
10
whlk

使用する：

tabHost.getTabWidget().setDividerDrawable(null);

仕切り線を削除します。

61
John P.

仕切りが見えるICSで問題が発生しました。以下を除いて、どのソリューションも機能しませんでした。

<TabWidget
            Android:id="@Android:id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="60dp"
            Android:gravity="bottom"
            Android:layout_alignParentBottom="true"
            Android:fadingEdge="none"
            Android:showDividers="none" >
        </TabWidget>

キーラインはAndroid:showDividers="none"

24
DanKodi