web-dev-qa-db-ja.com

アイスクリームサンドイッチタブ間の仕切りのスタイルを設定する方法？

次のスタイルと9つのパッチイメージのセットを使用して、標準的な青い線ではなく、アイスクリームサンドイッチタブの下部に赤い線を作成しています。

<style name="customTabStyle" parent="@Android:style/Widget.Holo.ActionBar.TabBar">
    <item name="Android:tabStripLeft">@null</item>
    <item name="Android:tabStripRight">@null</item>
    <item name="Android:tabStripEnabled">false</item>
    <item name="Android:showDividers">none</item>
    <item name="Android:measureWithLargestChild">true</item>
    <item name="Android:background">@drawable/tab_line</item>
    <item name="Android:gravity">center</item>
</style>

<style name="customTabBar" parent="@Android:style/Widget.Holo">
    <item name="Android:showDividers">middle</item>
    <item name="Android:divider">@drawable/divider2</item>
    <item name="Android:dividerPadding">0dp</item>
</style>

<style name="LightThemeSelector" parent="Android:Theme.Holo.Light">
    <item name="Android:actionBarTabStyle">@style/customTabStyle</item>
    <item name="Android:actionBarTabBarStyle">@style/customTabBar</item>
</style>

赤い線が表示され、タブ間の仕切りを除き、すべてがうまく見えます。画像の緑のボックス内にあるように、線は仕切りの下に描かれていません。この仕切りのドローアブルまたはスタイルを選択するにはどうすればよいですか？

Android:dividerおよびAndroid:showDividersアイテムは、タブ間の区切りに責任を負いません。タブアイコンとタブタイトルの間に描かれた仕切りのみを選択します。タイトルがなく、仕切りが奇妙に見えるため、仕切りを非表示にします。

Screenshot from the resulting tab bar

更新 Anealからの回答を念頭に置いて、2番目のスタイルのcustomTabBarを追加しました。スタイルは、分割可能としてドロアブルを選択します。仕切りは、次の9patch drawableで作成された黒い実線です。

9patch drawable creating the divider

このドロアブルを使用すると、仕切りが描画されますが、横に空白行もあります。

tab bar with dividers

androidandroid-tabs
45
Janusz

使用しているすべてのスタイルを削除した後、次の画像が表示されました。

enter image description here

この画像には小さな隙間も含まれています。したがって、これはある種のデフォルトの動作のようです。

しかし、私は問題を回避する方法を見つけました。レッドラインをタブバー全体の標準の背景として設定します。この方法ではギャップが表示されますが、すでに線が含まれている背景が表示されるため、誰も見ることができません。

現在、すべてのアクティビティに次のスタイルを使用しています。

<style name="LightThemeSelector" parent="Android:Theme.Holo.Light">
    <item name="Android:actionBarTabBarStyle">@style/customTabBar</item>
    <item name="Android:actionBarTabStyle">@style/customTabStyle</item>
</style>

このスタイルは、タブバー内の各タブをスタイルするために使用されます。

<style name="customTabStyle" parent="@Android:style/Widget.Holo.ActionBar.TabView">
    <item name="Android:showDividers">none</item>
    <item name="Android:measureWithLargestChild">true</item>
    <item name="Android:background">@drawable/tab_line</item>
    <item name="Android:gravity">center</item>
</style>

Tabbar全体をスタイルするには、次のスタイルを使用します。

<style name="customTabBar" parent="@Android:style/Widget.Holo.ActionBar.TabBar">
    <item name="Android:showDividers">middle</item>
    <item name="Android:divider">@drawable/divider</item>
    <item name="Android:dividerPadding">0dp</item>
    <item name="Android:background">@drawable/tab_unselected</item>
</style>

このスタイルは、カスタムの仕切りを定義し、タブバーの背景も定義します。背景として、タブが選択されていない場合に描画される9つのパッチドロウアブルを直接設定します。このすべての結果は、隙間のない赤い下線付きのタブバーです。

enter image description here

51
Janusz

どうぞ。

<style name="YourTheme" parent="@Android:style/Theme.Holo.Light">
    <item name="Android:actionBarTabBarStyle">@style/Divider</item>
</style>

<style name="Divider" parent="@Android:style/Widget.Holo.ActionBar.TabBar">
    <item name="Android:divider">@drawable/your_divider_drawable_here</item>
    <item name="Android:showDividers">middle</item>
    <item name="Android:dividerPadding">12dip</item>
</style>
22
adneal
<style name="AppTheme" parent="AppBaseTheme">
    <item>......
    </item>
    <item name="Android:actionBarDivider">@null</item>

</style>

ここで@nullは仕切りを提供しないためのものであり、@ drawable/your_divider_imageを使用するよりも仕切りをカスタマイズする場合

8
Devang

ところでこれは、Android：divider属性のLinerLayoutクラス実装のICSの巨大なバグが原因です。これはHoneycombで導入され、ICSで壊れており、ゼリービーン。

問題は、Android：dividerを使用する場合、区切り線を配置するために子の間に小さなスペースを作成しますが、このスペースには区切り線を配置しませんが、その後にタブ自体が重なり、スペースが空のままになることです。非常に愚かなバグ。リリース4.0と4.1のLinerLayoutソースコードを比較してみてください。

そして、はい解決策は、すべてのタブの背景に区切り文字を配置し、このバグによって引き起こされたタブ間のギャップでのみ表示されます。

6
ATom

仕切りを削除したい場合は、これを行うことができます：

<style name="customTabBar" parent="@Android:style/Widget.Holo.ActionBar.TabBar">
    <item name="Android:divider">@null</item>
</style>
6
Kid24

ATomの答え に基づいて、すべてのAndroidバージョンで仕切りに似たものを使用する方法を示します。

これを機能させるために、ネイティブの仕切りメソッドを使用しないでください（一部のバージョンでは壊れているため）。区切り線を設定するコードを削除することを忘れないでください。

トリックは、各タブに使用されるビューに非常に小さな右マージンを設定することです。この方法では、背景（TabHost）を見ることができる小さなギャップがあります。これを完了するには、TabHostの背景を、引き伸ばされた仕切りを模倣するように設定します。

このトリックはあなたが望むかもしれないすべての可能性のあるデザインに対しては機能しませんが、私が持っていたような多くの場合にはうまく機能します。

サンプルの実装は次のとおりです。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    // ...
    //      inflate or create tabHost  in code
    //      call tabHost.setup
    // ...

    TabWidget tabWidget = tabHost.getTabWidget();
    tabWidget.setBackgroundResource(R.drawable.tab_divider);

    // ...  add tabs

    for( int i = 0; tabWidget.getChildCount()-1; i++) {
        View view = tabWidget.getChildAt(i);
        LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
        layoutParams.rightMargin = getResources().getDimensionPixelSize(R.dimen.tab_divider_width); //1dp
        view.setLayoutParams(layoutParams);
    }
    return tabHost;
}

サンプルtab_divider描画可能：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
        <solid Android:color="@color/divider_color" />
        <stroke Android:width="@dimen/tab_divider_vertical_padding" 
                Android:color="@color/tab_background_color"/>
</shape>
1
Pedro Loureiro