Android: anpassen das Aussehen der Tabs mit TabHost & TabWidget

Ich, hat einen Beitrag über diese vor, aber ich spüre, dass ich jetzt (nach der Lektüre einige andere Beiträge) besser erklären, was ich will und formuliere es so wird es sein besser zu verstehen.

Folgte ich dem tutorial über die Registerkarte Layout auf der dev-guide, und ich schaffte es, um Register zu erstellen, aber ich will ein paar Anpassungen, um es (und ich habe Blick auf andere Beiträge, aber entweder war der code viele Fehler oder es gab keine Antwort, was ich Suche).

Das erste problem das ich habe ist, dass der test in den meisten Bereichen über dem Symbol, statt von unten (ich habe ein icon, Abmessungen 48x48, wie empfohlen, auf der dev-guide). Ich will das tab mit zu handeln, wie wrap_content tut.
Ich will mich auch ändern Sie den text Größe (ich glaube es nennt sich das label).
Will ich mit hex triplets ändern Sie die Hintergrundfarbe des tabs, um es zu ändern zwischen zwei Situationen : wenn diese Registerkarte ist, der ausgewählt ist und wenn es nicht ist.
Ich möchte in der Lage sein zu ändern die Farbe der Linie, die sich unterhalb der Registerkarten, ich konnte nicht finden alle Informationen auf, wie dies zu tun.

Den code, den ich verwende derzeit zum erstellen einer neuen Registerkarte (aus dem dev-guide):

    intent = new Intent().setClass(this, GroupsActivity.class);
    spec = tabHost.newTabSpec("groups").setIndicator("groups",
                      res.getDrawable(R.drawable.ic_tab_groups))
                  .setContent(intent);
    tabHost.addTab(spec);

(- Gruppen ist der name der Registerkarte).

Hilfe wird sehr geschätzt!

België: der Titel ist einer der wichtigsten Teile Ihrer Frage. Bitte mindestens schnell zu überprüfen, bevor Sie es Absenden.
was war falsch mit ihm ? (Ich Frage besser zu wissen für die Zukunft). vielen Dank für die Bearbeitung und helfen
Klicken Sie auf den link mit der Zeit Informationen nur auf der rechten Seite "bearbeitet" über meine "Signatur" wird, zeigt es die edit-history.

InformationsquelleAutor Belgi | 2011-10-16

Anstatt zu versuchen, anpassen der widget-tabs selbst, hier ist eine Alternative Methode, die ich verwendet habe erfolgreich an einem Projekt, das kann sparen Sie einige Kopfschmerzen:

Die Idee ist, eine versteckte TabWidget in Ihrem layout und kontrollieren Sie mit einem maßgeschneiderten LinearLayout mit Schaltflächen. Auf diese Weise können Sie leicht anpassen, die Tasten zu schauen, aber Sie möchten. Sie Steuern die tatsächlichen TabWidget in Ihrer Aktivität innerhalb der einzelnen button-OnClick.

Erstellen Sie Ihr layout mit der TabWidget und die Tasten:

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

    <RelativeLayout android:orientation="vertical"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:gravity="bottom">
        <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:visibility="gone" />

        <LinearLayout android:id="@+id/tabbar"
            android:orientation="horizontal" android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <Button android:id="@+id/firstButton"
                android:layout_alignParentTop="true" android:background="@drawable/btn_first_on"
                android:layout_width="100dp" android:layout_height="43dp"
                android:clickable="true"></Button>
            <Button android:id="@+id/secondButton"
                android:layout_alignParentTop="true" android:background="@drawable/btn_second_off"
                android:layout_height="43dp" android:layout_width="100dp"
                android:clickable="true"></Button>
            <Button android:id="@+id/thirdButton"
                android:layout_alignParentTop="true" android:background="@drawable/btn_third_off"
                android:layout_height="43dp" android:layout_width="100dp"
                android:clickable="true"></Button>
            <Button android:id="@+id/forthButton"
                android:layout_alignParentTop="true" android:background="@drawable/btn_forth_off"
                android:layout_height="43dp" android:layout_width="100dp"
                android:clickable="true"></Button>
        </LinearLayout>

        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            android:layout_below="@+id/tabbar" />

    </RelativeLayout>
</TabHost>

Einrichten der onCreate Ihrer Tätigkeit zu behandeln, verwenden Sie die Schaltflächen zum anpassen der Registerkarte Ansichten:

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

        //tabs        
        firstButton = (Button) findViewById(R.id.firstButton);
        secondButton = (Button) findViewById(R.id.secondButton);        
        thirdButton = (Button) findViewById(R.id.thirdButton);
        forthButton = (Button) findViewById(R.id.forthButton);

        Resources res = getResources(); //Resource object to get Drawables
        final TabHost tabHost = getTabHost();  //The activity TabHost
        TabHost.TabSpec spec;  //Resusable TabSpec for each tab
        Intent intent;  //Reusable Intent for each tab

        intent = new Intent().setClass(this, FirstGroupActivity.class);
        spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent);
        tabHost.addTab(spec);
        intent = new Intent().setClass(this, SecondGroupActivity.class);
        spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent);
        tabHost.addTab(spec);   

        intent = new Intent().setClass(this, ThirdGroupActivity.class);
        spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent);
        tabHost.addTab(spec);


        intent = new Intent().setClass(this, ForthActivity.class);
        spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent);
        tabHost.addTab(spec);


        tabHost.setCurrentTab(0);

        firstButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v)
            {
                tabHost.setCurrentTab(0);
                firstButton.setBackgroundResource(R.drawable.btn_first_on);
                secondButton.setBackgroundResource(R.drawable.btn_second_off);              
                thirdButton.setBackgroundResource(R.drawable.btn_third_off);
                forthButton.setBackgroundResource(R.drawable.btn_forth_off);            
            }

        });


        secondButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v)
            {
                tabHost.setCurrentTab(1);
                firstButton.setBackgroundResource(R.drawable.btn_first_off);
                secondButton.setBackgroundResource(R.drawable.btn_second_on);                       
                thirdButton.setBackgroundResource(R.drawable.btn_third_off);                        
                forthButton.setBackgroundResource(R.drawable.btn_forth_off);

            }

        });


        thirdButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v)
            {
                tabHost.setCurrentTab(3);
                firstButton.setBackgroundResource(R.drawable.btn_first_off);
                secondButton.setBackgroundResource(R.drawable.btn_second_off);              
                thirdButton.setBackgroundResource(R.drawable.btn_third_on);
                forthButton.setBackgroundResource(R.drawable.btn_forth_off);

            }

        });


        forthButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v)
            {
                tabHost.setCurrentTab(4);
                firstButton.setBackgroundResource(R.drawable.btn_first_off);
                secondButton.setBackgroundResource(R.drawable.btn_second_off);              
                thirdButton.setBackgroundResource(R.drawable.btn_third_off);
                forthButton.setBackgroundResource(R.drawable.btn_forth_on);

            }

        });
    }

Wie Sie sehen können, bin ich mit drawables für die Bilder der buttons auf und ab. Mit dieser Technik, Sie sind nicht beschränkt auf die verfügbaren Optionen, wenn Sie einfach nur versuchen, um das Aussehen der TabWidget-tabs und Sie können eine völlig custom-look für Ihre tabs.

sieht sehr interessant, aber die layout-code gibt mir Fehler: "<LinearLayout android:id="@+id/tabbar" " gibt mir "Das markup im Dokument nach dem Stammelement muss sein gut-gebildet." und am Ende bekomme ich "error: Error parsing XML: unbound prefix" können Sie bitte überprüfen Sie, dass der code ? vielen Dank für Eure Hilfe
Sorry - hatte einige Tippfehler drin aus, während ich versuchte, die nicht-relevanten Teile. Sollte nun gut sein. Beachten Sie, dass ich mache, Verweise auf bestimmte drawables. Sie müssen erstellen Sie Ihre eigenen und passen Sie den Namen entsprechend.
Ich bin noch immer "Das markup im Dokument nach dem Stammelement muss sein gut-gebildet." aber dieses mal ist es auf " <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="bottom"> "
Wirklich tut mir Leid, dass. Das kompiliert bei mir.
Auch im Auge behalten, dass Sie gehen zu müssen, zu erstellen Sie Ihre drawable Bilder oder erhalten Sie eine Ressource nicht gefunden Fehler. Aber, das ist der ganze Punkt von diesem Ansatz - zum erstellen von benutzerdefinierten drawables zu ersetzen die original-tabs.
ist ein Bild (png etc') ?
ja ... das wird Ihr den tab-Tasten.. 2 für jeden tab.. auf und ab ... btn_first_on.png & btn_first_off.png
Ich werde versuchen, diesen code später heute und lassen Sie wissen, thx!!!
ok, früher habe ich den code und es funktioniert, aber ich habe zwei Dinge, die ich tun will und weiß nicht wie: A. ich möchte etwas Platz zwischen den icons, ich habe versucht, hinzufügen Polsterung aber es hat nicht funktioniert. B. fügen Sie den text unter den icons ist immer noch ein Teil von dem button
A) es ist nicht die Polsterung, sondern die Margen, die Sie sollten versuchen zu setzen. B) der text Teil des Bildes. Sie könnten auch versuchen, hinzufügen von text auf die Taste und positionieren, aber das ist nicht, wie ich es mache.
Beste Antwort.... meine Frage : Warum nur 2 upvotes... verdient mindestens 100 upvotes.... 🙂
Ich habe diese Methode auch Hinzugefügt HorizontalScrollView für LinearLayout und nun kann ich nicht machen, dass die ausgewählte Taste in der Mitte war, haben Sie Anregungen? Dank

InformationsquelleAutor SBerg413

1 - Verwenden Sie eine benutzerdefinierte Ansicht:

    spec = tabHost.newTabSpec("groups");
    View view = LayoutInflater.from(this).inflate(R.layout.tabwidget_tabs, tabHost.getTabWidget(), false);
    spec.setIndicator(view);
    spec.setContent(intent);

statt:

    spec = tabHost.newTabSpec("groups").setIndicator("groups", res.getDrawable(R.drawable.ic_tab_groups)).setContent(intent);
    tabHost.addTab(spec);

Und definieren Sie dann die Ansicht für die tabs in der Datei tabwidget_tabs.xml (definieren Sie eine Bildansicht vor die textView und die textsize):

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tabsLayout" 
        android:layout_width="wrap_content"
        android:layout_height="34dp"
        android:background="@drawable/tabs_bkgrd"
        android:padding="5dp" 
        android:orientation="vertical">

        <TextView android:id="@+id/tabsText" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:singleLine="true"
            android:textStyle="bold" 
            android:gravity="center_horizontal"
            android:textSize="14dp" />
    </LinearLayout>

2 - Es ist nicht möglich hex triplets ändern Sie die Hintergrundfarbe des tabs, da sind drawables nicht mit Farben. Allerdings können Sie mithilfe einer Auswahl, die änderungen des drawables. und kombinieren Sie diese Lösung mit setColorFilter() und android:Farbton auswählen und dann kannst du den hintergrund mit hex triplets: Wie man ein bitmap-Farbton

tabs_bkgrd.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" 
        android:state_pressed="false" android:drawable="@drawable/tab_unselected_shape" />
    <item android:state_focused="false" android:state_selected="true" 
        android:state_pressed="false" android:drawable="@drawable/tab_selected_shape" /> 

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" 
        android:state_pressed="false" android:drawable="@drawable/tab_focused_shape" />
    <item android:state_focused="true" android:state_selected="true" 
        android:state_pressed="false" android:drawable="@drawable/tab_focused_shape" /> 

    <!-- Pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_pressed_shape" /> 

    </selector>

Können Sie festlegen, eine Farbe oder eine Form, tab_selected_shape.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle">
            <gradient android:startColor="@color/gold1"
                android:centerColor="@color/gold2" 
                android:endColor="@color/gold2"
                android:angle="@integer/vertical_shape" />
    </shape>

3 - Die Linie ist ein drawable zu. Sie finden die Dateien im sdk und kopieren Sie Sie in Ihr Projekt nach ändern Sie Sie, ändern Sie die Farbe mit gimp. Kombinieren Sie diese Lösung mit setColorFilter() und android:Farbton auswählen und dann kannst du den hintergrund mit hex triplets zu. Lesen:
weitere Erklärung

android-sdk-linux_x86/platforms/android-7/data/res/drawable

tab_bottom_left.xml,  
tab_bottom_right.xml,  
tab_indicator.xml  (define state changes)

android-sdk-linux_x86/platforms/android-7/data/res/drawable-mdpi

tab_focus.9.png (Farbe ändern)

tab_focus_bar_left.9.png

tab_focus_bar_right.9.png

tab_press.9.png (Farbe ändern)

tab_press_bar_left.9.png

tab_press_bar_right.9.png

tab_selected.9.png (Farbe ändern)

tab_selected_bar_left.9.png tab_selected_bar_right.9.png

tab_unselected.9.png

InformationsquelleAutor albodelu

1

Was ist die Lösung, die ich vorgeschlagen diese Frage?

Können Sie anpassen, die drawable jeder einzelnen Taste mit der gleichen verwendet werden, die durch native Android-Tab-Leiste(für die Suche nach Ressourcen in Android.jar finden Sie den richtigen drawables), plus können Sie zusätzliche Verhalten, wie Sie es wünschen.

Am Ende, Sie erhalten etwas, das grafisch ähnlich einer tabbar ausgedehnt werden, ist aus Sicht der Benutzer, sondern wirkt sich anders aus Entwickler-Perspektive.
- sieht cool aus, werde ich ausprobieren, wenn ich die chance bekomme
InformationsquelleAutor Rainbowbreeze

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.