2012-04-03 8 views
6

So Android geht aus dem Weg, um diese nette UI-Anleitung für jedermann zu erstellen. Aber ich sehe nirgendwo, wo es Codebeispiele zeigt, wie man diese Elemente baut.Android: So erstellen Sie Tabs wie die, die auf der Android-Benutzeroberfläche angezeigt werden Seite

Die UI-Richtlinien für Registerkarten finden Sie hier. http://developer.android.com/design/building-blocks/tabs.html.

Weiß jemand, wie man Registerkarten mag, wie die diese? enter image description here

Jede Hilfe wäre dankbar, danke.

LÖSUNG POSTED
Ok, also hier ist, was ich am Ende nach etwa 10 Stunden vergeblich versucht, einige gut aussehende Tabs zu machen.

Zuerst verwarf ich die ganze Idee der Verwendung von Android-Implementierung von Tabs. Aus einem Grund soll das Tab-Host-Widget für die Aktionsleiste veraltet sein, aber die Aktionsleiste funktioniert nur von Android 3 an.

Ich fand schließlich heraus, dass wenn ich ein lineares Layout und als Hintergrund für das lineare Layout verwendete ich das Bild, das ich verwenden wollte (mit einem 9-Patch-Bild). Erstellen Sie dann ein weiteres lineares Layout und eine Textansicht, um Text über das lineare Layout zu legen. Dann machen Sie Ihr lineares Layout anklickbar. Dann, wenn Sie weiter fortgeschritten sind, können Sie einen linearen Layout-Hintergrund einen XML-Selektor machen und Sie sind gut zu gehen. Wenn Sie nicht alles bekommen haben, ist hier mein Code.

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> 

Beispiel Selector

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

hoffe, das hilft allen. Android-Tabs waren einfach zu schwierig und nervig, um damit zu arbeiten, es war einfacher, einfach von Grund auf mein eigenes zu erstellen. Viel Glück!

+1

AFAIK definieren, es ist die Standarddarstellung von Android ICS Holo Thema verwenden. – Ghost

Antwort

5

tun Sie etwas wie das.

Dies ist ein vollständiger Arbeitscode.

irgendwo in OnCreate- Methode Aktivität genießen Tabactivity verlauf

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

setupTab Methoden

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 als

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

und firsttabdrawable.xml in drawable Ordner definieren

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

secondtabdrawable.xml und thirddrawable.xml in gleicher Weise

+0

fragen Sie Ihren Designer, um 6 Bilder für die oben genannten Tabs zu schneiden – Javanator

+0

Dies scheint zu arbeiten, ich habe es fast richtig eingerichtet. Welches Verhältnis verwenden Sie, wenn Sie Ihre eigenen Tabsymbole entwerfen? Welchen Pixel x Pixel verwendest du? Aus dem Screenshot habe ich 120 Pixel X 48 Pixel. Ist das korrekt? –

2

Die Registerkarten, die Sie benötigen, sind Teil der ActionBar. Insbesondere werden sie angezeigt, wenn sich die ActionBar im Navigationsregisterkartenmodus befindet.

http://developer.android.com/guide/topics/ui/actionbar.html (siehe unter „Hinzufügen von Navigations Tabs“)

Möglicherweise möchten Sie www.ActionbarSherlock.com verwenden, die eine Bibliothek ist, dass Sie die ActionBar auf fast allen Android-Versionen geben. Es funktioniert genauso wie das offizielle und enthält die Tabs.

Verwenden Sie die TabActivity nicht mehr, sie ist alt und veraltet. ActionBar ist die Zukunft.