2012-05-24 20 views
17

Sto iniziando con Android e quando provo a fare un TabHost con un'icona e un testo. Solo il testo è visibile, se ho lasciato il testo in bianco è possibile vedere l'icona. Voglio vedere entrambi sullo schermo.L'icona nella scheda non viene visualizzata

Qualcuno può darmi un consiglio?

public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main); 

Usuario usu = new Usuario(); 
usu.nombre = "fsdf"; 
lista.add(usu); 

adaptador = new AdaptadorCelda(this,lista); 
ListView lstView = (ListView)findViewById(R.id.lista); 
lstView.setAdapter(adaptador); 

Button btn = (Button)findViewById(R.id.btnSalva); 

btn.setOnClickListener(onSave); 



Resources res = getResources(); 

TabHost tabs=(TabHost)findViewById(R.id.tabhost); 
tabs.setup(); 

TabHost.TabSpec spec=tabs.newTabSpec("mitab1"); 
spec.setContent(R.id.tab1); 
spec.setIndicator("",res.getDrawable(android.R.drawable.ic_menu_rotate)); 


tabs.addTab(spec); 

spec=tabs.newTabSpec("mitab2"); 
spec.setContent(R.id.tab2); 
spec.setIndicator("ddd", 
     res.getDrawable(android.R.drawable.presence_invisible)); 
tabs.addTab(spec); 

tabs.setCurrentTab(0); 

spec.setIndicator("",res.getDrawable(android.R.drawable.ic_menu_rotate)) In this case icon appears. 

spec.setIndicator("ddd", 
     res.getDrawable(android.R.drawable.presence_invisible)); 

e qui è il main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/tabhost" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" > 

<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical" > 

<TabWidget 
    android:id="@android:id/tabs" 
    android:layout_width="match_parent" 

    android:layout_height="wrap_content" /> 

<FrameLayout 
    android:id="@android:id/tabcontent" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/tab1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:orientation="vertical" > 
     <TextView 
      android:id="@+id/lblNombre" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_marginTop="17dp" 
      android:text="Nombre" 
      android:textAppearance="?android:attr/textAppearanceLarge" /> 

     <EditText 
      android:id="@+id/txtNombre" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignTop="@+id/lblNombre" 
      android:layout_marginLeft="35dp" 
      android:layout_toRightOf="@+id/lblNombre" 
      android:ems="10" > 

      <requestFocus /> 
     </EditText> 

     <EditText 
      android:id="@+id/txtApellido" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignLeft="@+id/txtNombre" 
      android:layout_below="@+id/txtNombre" 
      android:ems="10" /> 

     <TextView 
      android:id="@+id/lblApellido" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignBottom="@+id/txtApellido" 
      android:layout_alignParentLeft="true" 
      android:text="Apellidos" 
      android:textAppearance="?android:attr/textAppearanceLarge" /> 

     <RadioGroup 
      android:id="@+id/tipos" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/txtApellido" 
      android:layout_marginTop="35dp" 
      android:layout_toLeftOf="@+id/txtApellido" > 

      <RadioButton 
       android:id="@+id/rdbAlta" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="alta" /> 

      <RadioButton 
       android:id="@+id/rdbBaja" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="baja" /> 

      <RadioButton 
       android:id="@+id/rdbTramite" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="tramite" /> 
     </RadioGroup> 

     <Button 
      android:id="@+id/btnSalva" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignLeft="@+id/txtApellido" 
      android:layout_alignTop="@+id/tipos" 
      android:layout_marginLeft="58dp" 
      android:layout_marginTop="30dp" 
      android:text="Button" /> 

     <ImageView 
      android:id="@+id/imageView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_below="@+id/txtApellido" 
      android:src="@drawable/ic_menu_chart" /> 

    </RelativeLayout> 

    <LinearLayout 
     android:id="@+id/tab2" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" > 

     <ListView 
      android:id="@+id/lista" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_below="@+id/tipos" 
      android:layout_marginTop="24dp" > 
     </ListView> 
    </LinearLayout> 
</FrameLayout> 

+2

Mostraci cosa stai facendo –

+0

fornite i utilizzo ulteriori informazioni .. –

+0

Scusate ragazzi, io sono un po 'newbie. – theholy

risposta

52

Avete testato l'app su un dispositivo che esegue Ice Cream Sandwich? Di recente ho notato che il valore predefinito TabHost si comporta in modo diverso a seconda del dispositivo di destinazione e della versione della piattaforma Android.

esecuzione di un'applicazione che fornisce un'icona e un testo a setIndicator (come nella fonte dalla questione), ha avuto il seguente risultato:

  • Phone con Android 2.1: sia icona e testo in cui indicata (Etichetta sotto l'icona come previsto)
  • Telefono con 4.0.3: le icone non sono state visualizzate e era visibile solo il testo.
  • tablet con sistema operativo ICS: le schede laddove siano esposti con l'icona e il testo

Come hai scoperto troppo fuori, sostituendo l'etichetta con una stringa vuota le icone apparso sul telefono - ma poi l'utente bisogno di indovinare il significato delle icone. A parte questo: quando si esegue questa versione dell'app sul telefono ICS pre: le schede mantengono le loro dimensioni e lasciano un'area vuota sotto l'immagine.

Per modificare questo dispositivo guidato decisione su quanto spazio le schede dovrebbero ottenere, ho trovato la soluzione in questo tutorial on how to customize tabs:

In primo luogo è necessario fornire il proprio indicatore scheda di layout ("layout/tab_indicator.xml "nel tutorial) incluso uno ImageView e un TextView. Quindi comunichi allo TabSpec di utilizzarlo tramite setIndicator. E voilà: ottieni l'icona e l'etichetta sul telefono anche con ICS.

Qui è la parte importante su come impostare l'indicatore (questo = l'attività corrente):

TabHost.TabSpec spec = this.getTabHost().newTabSpec(tag); 

View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false); 
((TextView) tabIndicator.findViewById(R.id.title)).setText(label); 
((ImageView) tabIndicator.findViewById(R.id.icon)).setImageResource(drawableResourceId); 

spec.setIndicator(tabIndicator); 

Se vi piace lo stesso aspetto delle linguette sui telefoni vecchi e nuovi hanno un aspetto ulteriore qui : http://jgilfelt.github.com/android-actionbarstylegenerator/. Questa pagina genera immagini e stili per personalizzare la barra delle azioni, comprese le schede e mi ha aiutato a capire come devono essere definite le immagini di sfondo a 9 patch.

+2

Brillante, dovresti fare tutorial. Real facile da leggere e capire. –

+0

Anche io sembra che usi i frammenti più aggiornati. Qualche idea su come implementarlo in frammenti anziché tramite il vecchio TabActivity? –

+2

Questo approccio elimina anche la "linea sottile" sotto l'immagine/testo quando la scheda è selezionata. –

2

cerco il seguente modo per farlo e funziona benissimo:

  1. utilizzando setIndicator ("TAB") per impostare solo il testo.
  2. utilizzando setBackgroundDrawable (-) per impostare l'icona.

codice di esempio:

final TabHost    tabHost = (TabHost)findViewById(android.R.id.tabhost); 
    final Resources    res = getResources(); 
    int i; 

    tabHost.setup(); //Call setup() before adding tabs if loading TabHost using findViewById(). 

    TabHost.TabSpec ts = tabHost.newTabSpec("trackinfo"); 
    //ts.setIndicator("", res.getDrawable(R.drawable.icon_trackinfo)); 
    ts.setIndicator("Track Information"); 
    ts.setContent(R.id.tabTrackInfo); 
    tabHost.addTab(ts); 

    TabHost.TabSpec ts2 = tabHost.newTabSpec("collection"); 
    //ts2.setIndicator("", res.getDrawable(R.drawable.icon_collection_gray)); 
    ts2.setIndicator("My Collection"); 
    ts2.setContent(R.id.tabMyCollecton); 
    tabHost.addTab(ts2); 

    tabHost.setOnTabChangedListener(new OnTabChangeListener(){ 
     @Override 
     public void onTabChanged(String tabId) 
     { 
      if("trackinfo".equals(tabId)) { 
       // 
       TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs); 
       View tabView = tw.getChildTabViewAt(0); 
       TextView tv = (TextView)tabView.findViewById(android.R.id.title); 
       tv.setTextColor(TabColor[0]); 
       tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_selected)); 

       tabView = tw.getChildTabViewAt(1); 
       tv = (TextView)tabView.findViewById(android.R.id.title); 
       tv.setTextColor(TabColor[1]); 

       tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_gray)); 
      } 
      if("collection".equals(tabId)) { 
       // 
       TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs); 
       View tabView = tw.getChildTabViewAt(0); 
       TextView tv = (TextView)tabView.findViewById(android.R.id.title); 
       tv.setTextColor(TabColor[1]); 
       tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_gray)); 

       tabView = tw.getChildTabViewAt(1); 
       tv = (TextView)tabView.findViewById(android.R.id.title); 
       tv.setTextColor(TabColor[0]); 
       tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_selected)); 

     } 
     }}); // END OF tabHost.setOnTabChangedListener 

    // After Tabs being added 
    // change font settings 
    TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs); 
    for(i=0;i<2;i++) 
    { 
     View tabView = tw.getChildTabViewAt(i); 
     TextView tv = (TextView)tabView.findViewById(android.R.id.title); 
     tv.setHeight(25); 
     tv.setTextColor(TabColor[i]); 
     tv.setTypeface(Typeface.SANS_SERIF, Typeface.BOLD_ITALIC); 
     tv.setTextSize(20);  
     tabView.setBackgroundDrawable(res.getDrawable(TabIcon[i])); 

    } 
6

C'è un'altra soluzione molto semplice per questo.

Sembra che il problema riguardi il nuovo tema di Holo e TabWidget. Che cosa si deve fare è definire tema Holo nella cartella values-v11 ma con il vecchio TabWidget stile come questo:

<style name="MyAppTheme" parent="@android:style/Theme.Holo.NoActionBar"> 
    <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item> 
</style> 

Funziona per me, spero che aiuta qualcuno.

+0

È necessario aggiungere questa linea in ** valori-v14 ** e anche nella cartella versione superiore. – biswajitGhosh

7

Questo è un modo semplice per mostrare il testo e l'icona in ICS. Dopo di impostare il Tabhost, che io chiamo i prossimi metodi:

setTabIcon(mTabHost, 0, R.drawable.ic_tab1); //for Tab 1 
setTabIcon(mTabHost, 1, R.drawable.ic_tab2); //for Tab 2 

public void setTabIcon(TabHost tabHost, int tabIndex, int iconResource) { 
    ImageView tabImageView = (ImageView) tabHost.getTabWidget().getChildTabViewAt(tabIndex).findViewById(android.R.id.icon); 
    tabImageView.setVisibility(View.VISIBLE); 
    tabImageView.setImageResource(iconResource); 
} 

Se si desidera una soluzione più avanzata, è necessario creare un layout simile @sunadorer raccomandare. La mia raccomandazione è che puoi creare il tuo layout usando il layout del tema holo, cercare il file sul tuo sdk_dir/platforms/android-14/data/res/layout/tab_indicator_holo.xml.

mia soluzione avanzata è la prossima, è necessario creare un layout simile a questo:

tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       android:paddingTop="5dp" 
       android:paddingBottom="5dp" 
       style="@android:style/Widget.Holo.Tab"> 

    <ImageView 
     android:id="@android:id/icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:visibility="visible" /> 

    <TextView 
     android:id="@android:id/title" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     style="@android:style/Widget.Holo.ActionBar.TabText" /> 

</LinearLayout> 

Nella vostra attività o frammento, creare la funzione successiva:

public View createTabIndicator(LayoutInflater inflater, TabHost tabHost, int textResource, int iconResource) { 
    View tabIndicator = inflater.inflate(R.layout.tab_indicator, tabHost.getTabWidget(), false); 
    ((TextView) tabIndicator.findViewById(android.R.id.title)).setText(textResource); 
    ((ImageView) tabIndicator.findViewById(android.R.id.icon)).setImageResource(iconResource); 
    return tabIndicator; 
} 

Infine, quando si crea la scheda nella propria attività o frammento, utilizzare il seguente codice:

mTabHost.addTab(
    mTabHost.newTabSpec("tab1") 
    .setIndicator(createTabIndicator(inflater, mTabHost, R.string.tab1, R.drawable.ic_tab1)) 
    .setContent(R.id.tab1) 
); 

Ho testato questa soluzione in ICS e funziona correttamente.

Buona fortuna :)

+1

sto ricevendo errore in questa riga NPE: scheda ImageViewImageView = (ImageView) schedaHost.getTabWidget(). GetChildTabViewAt (tabIndex) .findViewById (android.R.id.icon); – user3233280

Problemi correlati