Jak ukształtować dzielnik między zakładkami Ice Cream Sandwich?

Question

Używam następujący styl wraz z kompletem dziewięciu obrazów krosowych stworzyć czerwoną linię na dole lody Sandwich kartach zamiast standardowej niebieskiej linii:

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

Czerwona linia jest pokazana i wszystko wygląda dobrze, z wyjątkiem podziału między zakładkami. Jak widać wewnątrz zielonego pola na obrazie, linia nie jest narysowana poniżej dzielnika. Jak wybrać rozkładany lub styl tego dzielnika?

Elementy android:divider i android:showDividers nie są odpowiedzialne za dzielnik między zakładkami. Wybierają tylko dzielnik narysowany między ikoną tabulatora i tytułem karty. Schowam te przegródki, ponieważ nie ma tytułu, a przegroda wyglądałaby dziwnie.

---

Aktualizacja z odpowiedzią od Aneal pamiętać Dodałem drugi styl customTabBar. Styl wybiera losowanie jako dzielnik. Dzielnik jest stały czarna linia stworzona z następujących 9patch odkształcalne:

Z tego odkształcalne dzielnik uwagę, ale nie jest też pusta linia obok niego:

Answer 1

Po usunięciu każdego stylu używam mam następujący obraz:

Obraz ten zawiera również małe luki. Dlatego wydaje się, że jest to jakieś domyślne zachowanie.

Jednak znalazłem sposób na obejście problemu. Ustawiłem czerwoną linię jako standardowe tło dla całego paska zakładek. W ten sposób pojawia się luka, ale nikt nie może jej zobaczyć, ponieważ pokazuje tło, które już zawiera linię.

I teraz należy stosować następujące styl dla wszystkich moich działań:

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

Ten styl jest używany do stylu każdego pojedynczego kartę wewnątrz im zakładkami:

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

projektować całe umieszczenie zakładek używam następujący styl:

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

Ten styl definiuje mój niestandardowy separator, a także definiuje ckground dla paska zakładek. Jako tło ustawiam bezpośrednio dziewiątą łatkę do rysowania, która jest rysowana, jeśli zakładka nie jest wybrana. Wynikiem tego wszystkiego jest tabbar z czerwonym podkreśleniem bez żadnych przerw.

Answer 2

Proszę bardzo.

<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

Jeśli chcesz pozbyć przegródkami można zrobić tylko to:

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

Answer 4

Btw. Jest to spowodowane ogromnym błędem w ICS w implementacji klasy LinerLayout z Androidem: divider. Został wprowadzony w Honeycomb, złamany w ICS i ponownie pracuje w Jelly Bean.

Problem polega na tym, że podczas korzystania z androida: dzielnik tworzy małą przestrzeń między nim a dzieckiem dla dzielnika miejsca, ale umieszcza dzielnik nie w tym obszarze, ale po nim, więc będzie się nakładał na zakładkę, a przestrzeń pozostanie pusta . Bardzo głupi błąd. Spróbuj porównać kod źródłowy LinerLayout dla wersji 4.0 i 4.1.

I tak rozwiązanie umieszcza ogranicznik na tle wszystkich zakładek i będzie widoczny tylko w przerwach między zakładkami spowodowanymi przez ten błąd.

Answer 5

Na podstawie ATom's answer, oto sposób na uzyskanie czegoś przypominającego przekładki we wszystkich wersjach Androida.

Aby to działało, nie należy używać żadnej z natywnych metod dzielenia (ponieważ są one uszkodzone w niektórych wersjach). Nie zapomnij usunąć żadnego kodu, w którym ustawiłeś separatory.

Sztuką jest po prostu ustawienie bardzo małego prawego marginesu w widokach używanych dla każdej karty. W ten sposób pojawi się mała luka, w której możesz zobaczyć tło (TabHost). Aby to zakończyć, ustawiasz tło TabHost, aby naśladować rozciągnięty dzielnik.

Chociaż ta sztuczka nie działa w przypadku wszystkich możliwych projektów, które można chcieć, działa dobrze w wielu przypadkach, takich jak ten, który miałem.

Oto realizacja próbki:

@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; 
} 

Oto próbka tab_divider odkształcalne:

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

Answer 6

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

</style> 

tutaj @null jest, aby nie dostarczać żadnych dzielnik a jeśli chcesz, aby dostosować divider niż use @ drawable/your_divider_image