2012-04-03 6 views
6

Così Android si fa in quattro per costruire questa bella guida dell'interfaccia utente per tutti da utilizzare. Ma non vedo da nessuna parte dove mostra esempi di codice su come costruire questi elementi.Android: Come creare schede come quelle visualizzate nell'interfaccia utente Android Pagina

Le linee guida UI per le schede sono disponibili qui. http://developer.android.com/design/building-blocks/tabs.html.

Qualcuno sa come creare schede come questo? enter image description here

Qualsiasi aiuto sarebbe apprezzato, grazie.

SOLUZIONE POSTATA
Ok, ecco cosa ho fatto dopo aver probabilmente perso circa 10 ore cercando di creare delle schede di bell'aspetto.
enter image description here

Per prima cosa ho scartato l'idea di utilizzare l'implementazione di schede di Android. Per una ragione, il widget host della scheda è supposto deprecato per la barra delle azioni, ma la barra delle azioni funziona solo da Android 3 in poi.

Alla fine ho capito che se si utilizzava un layout lineare e come sfondo per il layout lineare, inserivo l'immagine che volevo usare (usando un'immagine di 9 patch). Quindi crea un'altra linearlayout e textview per mettere il testo sopra a quella linearlayout. Quindi fai clic sul tuo layout lineare. Quindi, man mano che diventi più avanzato, puoi rendere lo sfondo lineare del layout un selettore xml e sei pronto per partire. Nel caso in cui non hai ottenuto tutto ciò che è qui il mio codice.

LinearLayout

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:background="@color/main_screen_bg_color" 
    android:orientation="horizontal" 
    android:padding="2dp" > 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/selector_not_current" 
     android:clickable="true" 
     android:onClick="onClickSub" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:singleLine="true" 
       android:text="Example 1" 
       android:textColor="@color/black" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/selector_current" 
     android:clickable="true" 
     android:onClick="onClickFoodDetails" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:singleLine="true" 
       android:text="Example 2" 
       android:textColor="@color/black" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

Esempio di selezione

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="true" 
     android:drawable="@drawable/selected_pressed_tab" /> <!-- pressed --> 
<item android:state_focused="true" 
     android:drawable="@drawable/selected_pressed_tab" /> <!-- focused --> 
<item android:drawable="@drawable/selected_tab" /> <!-- default --> 

Spero che questo aiuta tutti. Le schede di Android erano troppo difficili e fastidiose da gestire, era più semplice creare le mie da zero. In bocca al lupo!

+1

AFAIK, è l'aspetto di default di Android ICS con tema Holo. – Ghost

risposta

5

fare qualcosa del genere.

questo è un codice funzionante completo.godere

da qualche parte nel metodo OnCreate di attività si estende Tabactivity

tabHost = getTabHost(); 
    Intent intent; 
    intent = new Intent().setClass(this, FirstActvity.class); 
    setupTab("NearBy", intent, R.drawable.firsttabdrawable); 
    intent = new Intent().setClass(this, SecondActivity.class); 
    setupTab("History", intent, R.drawable.secondtabdrawable); 
    intent = new Intent().setClass(this, ThirdActivity.class); 
    setupTab("Setting", intent, R.drawable.thirdtabdrawable); 

definire i metodi setupTab come

private void setupTab(String tag, Intent intent, int selectorId) { 
    View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null); 
    tabView.setBackgroundResource(selectorId); 
    TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent); 
    tabHost.addTab(setContent); 
    } 

view.xml come

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
> 
</LinearLayout> 

e firsttabdrawable.xml nella cartella drawable come

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- When selected, use grey --> 
    <item android:drawable="@drawable/selectedfirsttabimage" 
     android:state_selected="true" /> 
    <!-- When not selected, use white--> 
    <item android:drawable="@drawable/notselectedfirsttabimage" /> 
</selector> 

definiscono secondtabdrawable.xml e thirddrawable.xml nello stesso modo

+0

Chiedi al tuo designer di tagliare 6 immagini per le schede sopra indicate – Javanator

+0

Questo sembra funzionare, ho quasi impostato correttamente. Che rapporto usi quando disegni le tue icone di tabulazione? Quale pixel x pixel usi? Dalla schermata ho ottenuto 120 pixel x 48 pixel. È corretto? –

2

Le schede necessarie sono parte di ActionBar. In particolare, vengono visualizzati quando ActionBar è in modalità Scheda di navigazione.

http://developer.android.com/guide/topics/ui/actionbar.html (vedi alla voce "Aggiunta Schede di navigazione")

Si consiglia di utilizzare www.ActionbarSherlock.com che è una libreria che vi darà l'ActionBar su quasi tutte le versioni di Android. Funziona come quello ufficiale e include le schede.

Non utilizzare più TabActivity, è obsoleto ed è obsoleto. ActionBar è il futuro.