Как создать разделитель между вкладками Sandwich Ice Cream?

Я использую следующий стиль вместе с набором из девяти патч-изображений, чтобы создать красную линию внизу некоторых вкладок Sandwich Ice Cream вместо стандартной синей линии:

<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 я добавил второй стиль customTabBar. Стиль выбирает выталкиваемый как разделитель. Делитель представляет собой сплошную черную линию, созданную с помощью следующего 9-патча:

С помощью этого drawable разделитель рисуется, но рядом с ним также есть пустая строка:

Ответ 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>

Чтобы создать стиль в 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>

Этот стиль определяет мой пользовательский разделитель, а также определяет фон для вкладки. В качестве фона я прямо устанавливаю девять патчей, которые вытягиваются, если вкладка не выбрана. Результатом всего этого является панель с красным подчеркиванием без пробелов.

Ответ 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>

Ответ 3

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

</style>

здесь @null - это не предоставление какого-либо разделителя и если вы хотите настроить свой разделитель, чем использовать @drawable/your_divider_image

Ответ 4

Если вы хотите избавиться от разделителей, вы можете сделать следующее:

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

Ответ 5

Btw. Это вызвано огромной ошибкой в ICS в реализации класса LinerLayout атрибута android: divider. Он был введен в Honeycomb, разбит на ICS и снова работает в желе Bean.

Проблема в том, что когда вы используете android: divider, он делает небольшое пространство между ним child для разделителя места, но поместите divider no в это пространство, но после него он будет перекрываться самой вкладкой, и пространство останется пустым. Очень глупая ошибка. Попробуйте сравнить исходный код LinerLayout для версий 4.0 и 4.1.

И да решение помещает разделитель на фон всех вкладок, и он будет виден только в промежутках между вкладками, вызванными этой ошибкой.

Ответ 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 drawable:

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