Android - personalizzazione delle schede degli sherlock della barra delle azioni

Question

Sto cercando di personalizzare le schede degli sherlock della barra delle azioni in modo che visualizzino il testo della scheda sotto l'icona della scheda. Dopo aver cercato e letto sull'argomento, non ho ancora molta fortuna.

Ecco i risultati che sto ottenendo:

personalizzato tab1 selezionato

tab1 personalizzato non è selezionata, Tab2 standard selezionato

Questo è quello che ho finora:

Creato il mio styles.xml dove cambio alcune delle impostazioni della barra delle azioni:

<style name="SkoletubeTheme" parent="Theme.Sherlock"> 
    <item name="actionBarSize">@dimen/st__action_bar_default_height</item> 
    <item name="actionBarTabStyle">@style/Skoletube.TabView</item> 
    <item name="actionBarTabTextStyle">@style/Skoletube.Tab.Text</item> 
</style> 

<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView"> 
    <item name="android:background">@drawable/abs__tab_indicator_holo</item> 
    <item name="android:paddingLeft">6dp</item> 
    <item name="android:paddingRight">6dp</item> 
</style> 

<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText"> 
    <item name="android:textAppearance">@android:style/TextAppearance.Medium</item> 
    <item name="android:textColor">@android:color/primary_text_dark</item> 
    <item name="android:textSize">10sp</item> 
</style> 

creato un ressource XML in cui mi cambio e owerwrite alcuni textsettings per l'ActionBar. Qui ho aumentato l'altezza della barra di azione, che a sua volta aumenta l'altezza delle schede. Ho anche diminuito le dimensioni del testo al fine di fare spazio per l'icona montaggio e testo nella scheda

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<!-- Default height of an action bar. --> 
<dimen name="st__action_bar_default_height">58dip</dimen> 
<!-- Text size for action bar titles --> 
<dimen name="ab__action_bar_title_text_size">10dp</dimen> 
<!-- Text size for action bar subtitles --> 
<dimen name="ab__action_bar_subtitle_text_size">6dp</dimen> 
<!-- Top margin for action bar subtitles --> 
<dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen> 
<!-- Bottom margin for action bar subtitles --> 
<dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen> 
</resources> 

Poi ho definito un layout personalizzato per le schede da utilizzare, in cui metto il testo sotto l'icona :

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/customTabLayout" 
android:layout_width="wrap_content" 
android:layout_height="fill_parent" 
android:orientation="vertical" 
android:layout_weight="1" 
android:focusable="true" 
android:gravity="center" 
style="?attr/actionBarTabStyle" 
> 
<ImageView 
    android:id="@+id/sk_abs__tab_icon" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:background="@android:color/transparent" 
    /> 
<com.actionbarsherlock.internal.widget.ScrollingTextView 
    android:id="@+id/sk_abs__tab_txt" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/sk_abs__tab_icon" 
    android:layout_alignWithParentIfMissing="true" 
    android:layout_weight="1" 
    android:layout_centerHorizontal="true" 
    android:lines="1" 
    android:scrollHorizontally="true" 
    android:ellipsize="marquee" 
    android:marqueeRepeatLimit="marquee_forever" 
    style="@style/Skoletube.Tab.Text" 
    /> 
<FrameLayout 
    android:id="@+id/abs__tab_custom" 
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent" 
    android:padding="5dip" 
    android:layout_weight="1" 
    android:visibility="gone" 
    /> 

per la cronaca l'attributo passato come lo stile per i punti di layout relativi a questo:

<style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style> 

allora ho applicato queste modifiche al mio app come segue, la prima scheda ha la mia implementazione personalizzata, la seconda scheda ha l'implementazione standard:

final ActionBar actionBar; 
    actionBar = getSupportActionBar(); 
    actionBar.setDisplayHomeAsUpEnabled(false); 
    actionBar.setDisplayUseLogoEnabled(true); 
    // Set up tabs 

    myMediaTab = actionBar.newTab(); 
    myMediaTab.setCustomView(R.layout.skoletube_tab_layout); 
    ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon); 
    myMediaImg.setImageResource(R.drawable.tab_mymedia); 
    ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt); 
    myMediaText.setText("Tab1"); 
    myMediaTab.setTabListener(this); 
    myMediaTab.setTag("MyMediaTab"); 
    actionBar.addTab(myMediaTab); 

    myChannelsTab = actionBar.newTab(); 
    myChannelsTab.setIcon(drawable.tab_mychannels); 
    myChannelsTab.setText("Tab2"); 
    myChannelsTab.setTabListener(this); 
    myChannelsTab.setTag("myChannelsTab"); 
    actionBar.addTab(myChannelsTab); 

Mentre io credo di essere vicino alla soluzione, penso di aver perso un passaggio da qualche parte.

Ovviamente la barra blu dietro il testo/sotto l'immagine non deve essere lì, ma non mi è parso di scoprire dove posso impostare l'immagine focalizzata (voglio che l'img cambi colore quando una scheda è selezionato) e colore del testo. Devo rendere l'immagisiew focalizzabile e gestirlo attraverso questo o?

Sono ancora abbastanza nuovo in questo, quindi l'approccio che ho preso qui potrebbe essere sbagliato se c'è un modo migliore/più intelligente per fare questo per favore, per dire.

Apprezzare eventuali suggerimenti e idee.

Answer 1

Non so se hai trovato una risposta per questo o non ancora, ma una soluzione potrebbe essere quella di modificare l'immagine della scheda per includere il testo, con GIMP o Photoshop qualcosa, e quindi basta impostare quelle immagini nelle schede , invece di immagini e testo. È un modo un po 'scomodo di farlo, ma funzionerebbe.

Spero che questo aiuti!

Answer 2

Ho risolto che utilizzando un compound drawable:

tv = new TextView(this); 
tv.setText(R.string.tab_movies); 
tv.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.nav_movies, 0, 0); 

mBar.addTab(mBar 
    .newTab() 
    .setCustomView(tv) 
    .setTabListener(
    new TabListenerImpl<TheatersTabActivity>(this, "theaters", 
     TheatersTabActivity.class))); 

Per far fronte con l'immagine selezionata o non selezionata, sto usando un selettore:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item 
     android:state_selected="true" 
     android:drawable="@drawable/nav_movies_on"/> 
    <item 
     android:state_selected="false" 
     android:drawable="@drawable/nav_movies_off"/> 
</selector>