Android tabwidgetのタブ間のスペースを削除する

Question

HelloTabActivityのようなタブを持つアプリケーションを作成しました。これらのタブの間にスペースもあります。このスペースを削除する方法を誰かが提案できますか。また、タブの下に灰色の線があります。どのように削除できますか？

main.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">
<TabHost
    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"
        Android:padding="5dp" >
        <HorizontalScrollView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:scrollbars="none">
            <TabWidget
                Android:id="@Android:id/tabs"
                Android:layout_width="fill_parent"
                Android:layout_height="wrap_content" />
        </HorizontalScrollView>
        <FrameLayout
            Android:id="@Android:id/tabcontent"
            Android:layout_width="fill_parent"
            Android:layout_height="fill_parent"
            Android:padding="5dp" />
    </LinearLayout>
</TabHost>
</LinearLayout>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="@Android:style/Theme">
    <item name="Android:tabWidgetStyle">@style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="@Android:style/Widget.TabWidget">
    <item name="Android:textAppearance">@style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText" 
    parent="@Android:style/TextAppearance.Widget.TabWidget">
    <item name="Android:textSize">10sp</item>
    <item name="Android:textStyle">bold</item>
    <item name="Android:textColor">#1589FF</item>
    <item name="Android:padding">3dip</item>
</style>


</resources>

アクティビティ

public class InfralineTabWidget extends TabActivity{

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

    Resources res = getResources(); // Resource object to get Drawables
    TabHost tabHost = (TabHost)getTabHost();  // The activity TabHost

    TabHost.TabSpec spec;  // Resusable TabSpec for each tab
    Intent intent;  // Reusable Intent for each tab

    // Create an Intent to launch an Activity for the tab (to be reused)
    intent = new Intent().setClass(this, TopNewsActivity.class);

    // Initialize a TabSpec for each tab and add it to the TabHost
    spec = tabHost.newTabSpec("topNews").setIndicator("Top News", res.getDrawable(R.drawable.tab_news)).setContent(intent);
    tabHost.addTab(spec);

    // Do the same for the other tabs
    intent = new Intent().setClass(this, PowerActivity.class);
    spec = tabHost.newTabSpec("power").setIndicator("Power", res.getDrawable(R.drawable.tab_power)).setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, EnergyActivity.class);
    spec = tabHost.newTabSpec("energy").setIndicator("Renewable Energy", res.getDrawable(R.drawable.tab_energy)).setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, CoalActivity.class);
    spec = tabHost.newTabSpec("coal").setIndicator("Coal", res.getDrawable(R.drawable.tab_coal)).setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, OilnGasActivity.class);
    spec = tabHost.newTabSpec("oilnGas").setIndicator("Oil & Gas", res.getDrawable(R.drawable.tab_oilngas)).setContent(intent);
    tabHost.addTab(spec);

    tabHost.setCurrentTab(0);
    tabHost.getTabWidget().getChildAt(0).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(2).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(3).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(4).setLayoutParams(new LinearLayout.LayoutParams(100,25));



}



}

タブ間の黒いスペースを削除したいのですが、タブが接続されているようになっているはずです。また、タブの下の灰色の線を削除できません。

ありがとう

Answer 1

タブバーの下部にある灰色の線を削除するには、

tabHost.getTabWidget().setStripEnabled(false);

タブ間のギャップを取り除く時点で..最良の方法は、パディングなしで独自のドローアブルを使用することです。これに画像を使用することも、xmlを介してタブの背景を作成することもできます（たとえば、<layer_list>ルート要素内）。

<layer_list>
    <item Android:top="0dp" Android:left="0dp" Android:right="0dp" Android:bottom="0dp">
        <shape Android:shape="rectangle">
        [..]
        </shape>
    </item>
    [..]
</layer_list>

このドローアブルをTabWidgetの背景に設定します。

タブをカスタマイズする方法を確認するために、Web上に多くのチュートリアルがあります。たとえば これはJoshによるものです は短く、わかりやすい説明があります。

更新

ここでは、（コードに基づいて）カスタムタブを使用して次の出力を実現するtabwidgetの小さなサンプルを共有します。

何が必要：

1. 3つの新しいレイヤードローアブル（タブの選択された状態、フォーカスされた状態、および選択されていない状態用）
2. 2つの状態ドローアブル（異なる状態のテキストと背景用）
3. タブの新しいレイアウト
4. main.xmlを更新します
5. アクティビティクラスを更新する
6. androidManifest.xmlを更新します（スタイル宣言を削除します）

3層のドローアブル：tab_normal.xml、tab_focused.xml、tab_selected.xml
drawable/tab_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@color/default_back_color" />
        </shape>
    </item>
    <item Android:top="2dp">
        <shape Android:shape="rectangle">
            <gradient Android:startColor="#AAAAAA" Android:centerColor="#888888"
                Android:endColor="#666666" Android:angle="90" />
            <corners Android:bottomRightRadius="0dp"
                Android:bottomLeftRadius="0dp" Android:topLeftRadius="10dp"
                Android:topRightRadius="10dp" />
        </shape>
    </item>
    <item Android:top="4dp" Android:left="1dp" Android:right="1dp"
        Android:bottom="0dp">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/default_back_color" />
            <corners Android:bottomRightRadius="0dp"
                Android:bottomLeftRadius="0dp" Android:topLeftRadius="8dp"
                Android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

drawable/tab_focused.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@color/default_back_color" />
        </shape>
    </item>
    <item Android:top="2dp">
        <shape Android:shape="rectangle">
            <gradient Android:startColor="#AAAAAA" Android:centerColor="#888888"
                Android:endColor="#666666" Android:angle="90" />
            <corners Android:bottomRightRadius="0dp"
                Android:bottomLeftRadius="0dp" Android:topLeftRadius="10dp"
                Android:topRightRadius="10dp" />
        </shape>
    </item>
    <item Android:top="4dp" Android:left="1dp" Android:right="1dp"
        Android:bottom="0dp">
        <shape Android:shape="rectangle">
            <gradient Android:startColor="#8F8F8F" Android:centerColor="#656565"
                Android:endColor="#3F3F3F" Android:angle="90" />
            <corners Android:bottomRightRadius="0dp"
                Android:bottomLeftRadius="0dp" Android:topLeftRadius="8dp"
                Android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

drawable/tab_selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@color/default_back_color" />
        </shape>
    </item>
    <item Android:top="2dp">
        <shape Android:shape="rectangle">
            <gradient Android:startColor="#EEEEEE" Android:centerColor="#CCCCCC"
                Android:endColor="#AAAAAA" Android:angle="-90" />
            <corners Android:bottomRightRadius="0dp"
                Android:bottomLeftRadius="0dp" Android:topLeftRadius="10dp"
                Android:topRightRadius="10dp" />
        </shape>
    </item>
    <item Android:top="4dp" Android:left="1dp" Android:right="1dp"
        Android:bottom="0dp">
        <shape Android:shape="rectangle">
            <gradient Android:startColor="#EAEAEA" Android:centerColor="#9F9F9F"
                Android:endColor="#696969" Android:angle="90" />
            <corners Android:bottomRightRadius="0dp"
                Android:bottomLeftRadius="0dp" Android:topLeftRadius="8dp"
                Android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

2つの状態ドローアブル：tab_background_selector.xml、tab_text_selector.xml
drawable/tab_background_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:state_focused="false"
        Android:state_pressed="false" Android:drawable="@drawable/tab_selected"/>
    <item Android:state_selected="false" Android:state_focused="false"
        Android:state_pressed="false" Android:drawable="@drawable/tab_normal" />
    <item Android:state_pressed="true" Android:drawable="@drawable/tab_focused"/>
    <item Android:state_focused="true" Android:state_selected="true"
        Android:state_pressed="false" Android:drawable="@drawable/tab_selected"/>
</selector>

drawable/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="#1589FF" />
    <item Android:state_focused="true" Android:color="#1589FF" />
    <item Android:state_pressed="true" Android:color="@Android:color/white" />
    <item Android:color="#F0F0F0" />
</selector>

タブの新しいレイアウト：tab.xml
layout/tab.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="fill_parent"
    Android:background="@drawable/tab_background_selector" Android:gravity="center"
    Android:orientation="vertical" Android:padding="5dp">
    <ImageView Android:id="@+id/tab_icon" Android:layout_width="30dp"
        Android:layout_height="30dp" Android:scaleType="fitCenter" />
    <TextView Android:id="@+id/tab_text" Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" Android:singleLine="true"
        Android:textStyle="bold" Android:gravity="center_horizontal"
        Android:textSize="10sp" Android:padding="3dip" Android:ellipsize="Marquee"
        Android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

main.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">
    <TabHost 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">
            <HorizontalScrollView Android:scrollbars="none"
                Android:layout_width="fill_parent" Android:layout_height="wrap_content">
                <TabWidget Android:id="@Android:id/tabs" 
                    Android:layout_width="fill_parent" Android:layout_height="wrap_content" />
            </HorizontalScrollView>
            <FrameLayout Android:id="@Android:id/tabcontent"
                Android:layout_width="fill_parent" Android:layout_height="fill_parent"
                Android:padding="5dp" />
        </LinearLayout>
    </TabHost>
</LinearLayout>

InfralineTabWidget.Java：

public class InfralineTabWidget extends TabActivity
{
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final TabHost tabHost = (TabHost) getTabHost();

        tabHost.addTab(createTab(TopNewsActivity.class, 
                "topNews", "Top News", R.drawable.tab_news));
        tabHost.addTab(createTab(PowerActivity.class, 
                "power", "Power", R.drawable.tab_power));
        tabHost.addTab(createTab(EnergyActivity.class, 
                "energy", "Renewable Energy", R.drawable.tab_energy));
        tabHost.addTab(createTab(CoalActivity.class, 
                "coal", "Coal", R.drawable.tab_coal));
        tabHost.addTab(createTab(OilnGasActivity.class, 
                "oilnGas", "Oil & Gas", R.drawable.tab_oilngas));

        tabHost.setCurrentTab(0);
        tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(1).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(2).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(3).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(4).getLayoutParams().width = 140;
    }

    private TabSpec createTab(final Class<?> intentClass, final String tag, 
            final String title, final int drawable)
    {
        final Intent intent = new Intent().setClass(this, intentClass);

        final View tab = LayoutInflater.from(getTabHost().getContext()).
            inflate(R.layout.tab, null);
        ((TextView)tab.findViewById(R.id.tab_text)).setText(title);
        ((ImageView)tab.findViewById(R.id.tab_icon)).setImageResource(drawable);

        return getTabHost().newTabSpec(tag).setIndicator(tab).setContent(intent);
    }
}

そしてこれがそれです。
まっすぐな角のあるタブを作成するには、レイヤーの描画可能なxmlファイルから角の仕様を失うだけです。
また、色やストロークなどを試して、好みに合った結果を作成します。

Answer 2

xmlレイアウトでAndroid：showDividers = "none"を使用します。

<TabWidget
        Android:id="@Android:id/tabs"
        Android:layout_width="fill_parent"
        Android:showDividers="none"
        Android:layout_height="wrap_content"/>

Answer 3

ビルドターゲットがHoneycomb以降の場合は、次のコードを使用できます。

if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
    tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}

Answer 4

1つの魔法のライン。

mTabHost.getTabWidget().setDividerDrawable(null);

完了

Answer 5

タブ間の余分なギャップを削除するには、tabwidgetのmeasureWithLargestChild属性をfalseに設定します。

<TabWidget
   Android:id="@Android:id/tabs"                    
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"
   Android:measureWithLargestChild="false">
 </TabWidget>