android - アイスクリームサンドイッチタブ間の仕切りをどのようにスタイリングしますか？

Question

次のスタイルを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タブ間の仕切りについては責任を負いません。タブアイコンとタブタイトルの間に描かれた仕切りのみを選択します。タイトルがなく、仕切りがおかしいので、これらの仕切りを非表示にします。

---

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

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

Answer 1

私が使用するすべてのスタイルを削除した後、私は次の画像を取得しました：

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

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

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

<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>

タブバー全体のスタイルを設定するには、次のスタイルを使用します。

<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つのパッチドローアブルを直接設定しました。これらすべての結果として、ギャップのない赤い下線が付いたタブバーが作成されます。

Answer 2

どうぞ。

<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>

Answer 3

<style name="AppTheme" parent="AppBaseTheme">
    <item>......
    </item>
    <item name="android:actionBarDivider">@null</item>

</style>

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

Answer 4

仕切りを取り除きたい場合は、次のようにすることができます。

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

Answer 5

ところで。これは、android：divider属性のLinerLayoutクラス実装のICSの大きなバグが原因です。それはHoneycombで導入され、ICSで壊れ、JellyBeanで再び機能しました。

問題は、android：dividerを使用すると、その間に小さなスペースが作成され、ディバイダーが配置されますが、ディバイダーはこのスペースに配置されませんが、その後はタブ自体によってオーバーラップされ、スペースは空のままになります。非常に愚かなバグ。リリース4.0と4.1のLinerLayoutソースコードを比較してみてください。

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

Answer 6

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>