Jump to content
Melde dich an, um diesem Inhalt zu folgen  
Meishere

Der Einstieg in die Android-Programmierung - Layouts

Recommended Posts

Meishere

Übersicht meiner Tutorials:

Der Einstieg in die Android Programmierung - Das Einrichten

- Der Einstieg in die Android Programmierung - Letzte Vorbereitung

- - Der Einstieg in die Android Programmierung - Hello World

- - - Der Einstieg in die Android Programmierung - Layouts

- - - - Der Einstieg in die Android Programmierung - Tipps und Tricks

--------------------------------------------------------------------------

Ich bin's mal wieder!

Bevor ich morgen wegfahre, wollte ich nochmal ein kleines Tutorial schreiben. (Auch wenn ich meinen Laptop mitnehme... Wird wohl aber nicht viel entstehen :icon_chee)

Heute werden wir uns dann doch mal mit Layouts beschäftigen.

Das wird wieder ein bisschen mehr Theorie, aber wahrscheinlich wird es dafür nicht so lang sein wie das letzte :-)

Wir werden wieder mit unserem "Hello-World"-Programm vom letzten Mal arbeiten. Weißt du noch? Das mit den zwei genialen Knöpfen?

Gut...

Vielleicht kannst du dich ja noch an die main.xml erinnern.

Diese wurde ja eingeleitet mit "<LinearLayout".

Und, wie du dir sicherlich denken kannst, wird damit ein lineares Layout eingeleitet.

Ein lineares Layout ist eigentlich genau das, was der Name sagt (merkst du, wie oft ich das jetzt schon bei verschiedenen Dingen gesagt habe? Oft erkennt man tatsächlich am Namen worum es sich handelt!). Es ist linear!

Und was heißt das jetzt genau?

Das heißt, dass es ziemlich statisch ist.

Wie ich ja schon im letzten Tutorial erklärt habe, enthält ein Layout mehrere "Layoutelemente", die als "view" bezeichnet werden. Also jeder Knopf ist ein View (Knöpfe werden normalerweise mit dem zugehörigen englischen Wort "Button" betitelt), sowie auch jede "Textbox" (TextView) ein view ist.

Deshalb werden Layouts auch als ViewGroups, also Gruppen von Views bezeichnet, denn mehr sind sie auch nicht: Nur Container für alle möglichen Views.

Das ist eigentlich ein ziemlich gutes Bild.

Stell dir mal einen Container vor. So ein ganz normalen großen. Von mir aus 12kubik, blau und rechteckig.

So und jetzt sortieren wir da verschiedene Bauabfälle rein. Alte Elektronik, Steine usw.

Logisch: Container = Layout

Baumüll = Views

"Hä? Jetzt versteh ich immer noch nicht was denn jetzt ein lineares Layout ist. Und wieso überhaupt "linear", gibt's noch andere?"

Mensch, du bist ja schon wieder so ungeduldig ;)

Aber recht hast du... Es gibt noch andere Layouts und darum mache ich ja dieses Tutorial.

Und jetzt kommt die Erklärung:

Also:

Wir fangen jetzt mal und packen zuerst ein paar bemalte Steine in den Container, fein säuberlich hinten an die Wand.

Jetzt ist schonmal die Rückwand voll.

Jetzt haben wir noch zwei Haufen Elektroschrott.

Also rein damit.

Schön hintereinander reingestapelt.

Und jetzt ist der Container auch schon voll.

Unser Problem an der Stelle: Der erste Elektrohaufen nimmt überhaupt nicht die volle Breite des Containers ein und der zweite hätte noch genug Platz daneben.

Tja, blöd dass es ein linearer Container ist :icon_chee

Also bestellen wir fix nochmal denselben Container, 12kubik, blau und rechteckig, diesmal aber als "relativ"-Variante. Was es nicht alles gibt :crazy:

So, jetzt fangen wir nochmal an. Alles raus aus dem alten und ran an den neuen!

Erstmal wieder die Steine. Hinten an die Wand und voll ist die Rückwand. Wir merken uns einfach mal, dass das der "Steinhaufen" ist.

Aber was ist jetzt mit dem Elektromüll?

Genau das ist der Punkt!

Den ersten Elektrohaufen, nennen wir ihn mal "EHaufen1", packen wir, wie vorher, direkt vor den Steinhaufen.

Und jetzt der zweite Elektrohaufen! Genialerweise nennen wir ihn "EHaufen2".

Jetzt kommt's: Auch den packen wir diesmal direkt vor den Steinhaufen!

Wie ist das möglich? Indem wir ihn gleichzeitig auch noch neben EHaufen1 platzieren. Macht doch Sinn oder?

Wenn ich dich jetzt vollends verwirrt, dann tut's mir leid, aber lustig find ich's trotzdem :icon_chee

Egal, ob du jetzt verwirrt bist oder nicht, du fragst dich mit Sicherheit: "Was genau hat das jetzt mit Android zu tun?"

Eine ganze Menge!

Du erinnerst dich? Layout = ViewGroup = Container.

Und in unserem "Hello-World"-Programm hatten wir in unserem Layout 3 Views, nämlich 2 Buttons und einen TextView.

Der Steinhaufen symbolisiert den Textview (deswegen auch bemalt :-) ).

EHaufen1 und EHaufen2 stehen jeweils für einen Button.

Und damit haben wir auch schon den Unterschied zwischen dem relativen und dem linearen Layout.

Wie gesagt ist ein lineares Layout linear :-)

Dort werden alle Views entweder untereinander (Vertikale Ausrichtung) oder nebeneinander (horizontale Ausrichtung) angezeigt. Undzwar in der Reihenfolge in der sie in der main.xml stehen.

Das heißt, wenn du in der main.xml den TextView unter die Buttons schreiben würdest, dann würde der Text in der App auch unter den Buttons stehen.

Funktionieren würde aber trotzdem alles.

Es gibt hier die Möglichkeit mehrere Lineare Layouts untereinander/nebeneinander anzuzeigen.

Handelt es sich um ein vertikales Layout, wird das nächste Layout darunter angezeigt. Handelt es sich um ein horizontales Layout, wird das nächste Layout rechts daneben angezeigt.

So kann man dann zum Beispiel den Text in ein vertikales Layout packen. Darunter kommt dann ein horizontales Layout mit den Buttons.

In diesem Beispiel wird dann der Reset-Button rechts neben dem Red-Button angezeigt. Beide befinden sich unter dem Text.


[COLOR="Green"]<LinearLayout[/COLOR] xmlns:android="https://schemas.android.com/apk/res/android"  [COLOR="Red"]Erstes lineares Layout.[/COLOR]

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    [COLOR="Green"]android:orientation="vertical"[/COLOR] >  [COLOR="Red"]Dieses Layout ist vertikal ("von oben nach unten") ausgerichtet.[/COLOR]


    <TextView  [COLOR="Red"]Hier ist nur unser Text drin.[/COLOR]

        android:id="@+id/text"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textColor="#FFFFFF"

        android:text="@string/hello" />



[COLOR="Green"]<LinearLayout[/COLOR] xmlns:android="https://schemas.android.com/apk/res/android" [COLOR="Red"]Dann das zweite lineare Layout.[/COLOR]

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    [COLOR="Green"]android:orientation="horizontal"[/COLOR] >  [COLOR="Red"]Welches widerum horizontal ("von links nach rechts") ausgerichtet ist.[/COLOR]


    <Button  [COLOR="Red"]Hier sind unsere beiden Buttons drin.[/COLOR]

        android:id="@+id/buttonRed"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	android:text="@string/red"

		 />


    <Button  [COLOR="Red"]Hier sind unsere beiden Buttons drin.[/COLOR]

        android:id="@+id/buttonReset"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	android:text="@string/reset"

		 />


</LinearLayout>

</LinearLayout>

Wenn du alles richtig gemacht hast, dann sollte es so aussehen (Natürlich ist ds die App, nicht Eclipse :-)): 4eb5r9d6oa4.png Nun gibt es noch eine kleine Besonderheit: "android:layout_weight". Damit wird den Views ein bestimmtes "Gewicht" gegeben. Aufgrund dieses Gewichtes bestimmt Android dann den prozentualen Anteil, den dieser View vom Bildschirm haben darf. Ein kleines Beispiel (modifizierter Code vom oberen Beispiel):

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  [COLOR="Red"]Erstes lineares Layout.[/COLOR]

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >  [COLOR="Red"]Dieses Layout ist vertikal ("von oben nach unten") ausgerichtet.[/COLOR]


    <TextView  [COLOR="Red"]Hier ist nur unser Text drin.[/COLOR]

        android:id="@+id/text"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textColor="#FFFFFF"

        android:text="@string/hello" />



<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" [COLOR="Red"]Dann das zweite lineare Layout.[/COLOR]

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal" >  [COLOR="Red"]Welches widerum horizontal ("von links nach rechts") ausgerichtet ist.[/COLOR]


    <Button  [COLOR="Red"]Hier sind unsere beiden Buttons drin.[/COLOR]

        android:id="@+id/buttonRed"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	[COLOR="Green"]android:layout_weight="3"[/COLOR]

	android:text="@string/red"

		 />


    <Button  [COLOR="Red"]Hier sind unsere beiden Buttons drin.[/COLOR]

        android:id="@+id/buttonReset"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	[COLOR="Green"]android:layout_weight="1"[/COLOR]

	android:text="@string/reset"

		 />


</LinearLayout>

</LinearLayout>

Und das sollte die kleine Änderung bewirken. Wie du siehst, nimmt der linke Button nun mehr Platz ein. cdx814un2f2.png Hier wird dem Red-Button ein Gewicht von 3 und dem Reset-Button ein Gewicht von 1 zugeordnet. Kleine Rechnung: 3+1=4 :icon_chee Das heißt: Der Red-Button bekommt 3 von 4 Teilen des Bildschirms (also drei Viertel) und der Reset-Button dementsprechend nur 1 von 4 Teilen (also ein Viertel). Allerdings hat Android gewisse "Prioritäten". :-) Das heßt in diesem Fall, dass wegen dem "wrap_content" immer darauf geachtet wird, dass der Inhalt (der Text) noch in den Button passt. So bewirkt etwa ein Wert von 99 zu 1 nicht etwa das "Fast-Verschwinden" des Reset-Buttons, sondern nur ein Schrumpfen dessen auf ein Minimum, dass es ermöglicht den Text noch darzustellen. Allerdings stößt die Methode des linearen Layouts an eine Grenze, wenn es zum Beispiel darum geht unter einem horizontalen Layout noch ein weiteres anzuzeigen. Denn jedes weitere Layout wird automatisch neben dem horizontalen Layout angezeigt. Und hier kommt dann unser relatives Layout ins Spiel. Velleicht kannst du dich noch an unsere Container erinnern. Und was war der große Unterschied zwischen den beiden? Genau, wir konnten beim "relativen Container" ganz ohne "Extra-Container" die beiden EHaufen nebeneinander platzieren. Anmerkung: Beim "linearen Container" würde der "Extra-Container" natürlich dem zusätzlichen linearen Layout entsprechen. ;) Und jetzt ist es gar nicht so schwer das Beispiel erneut zu übertragen. Du kannst dir sicher denken, dass das sog. "Relative Layout" eben nicht linear, sondern relativ ist. Soll heißen: Alle Views lassen sich relativ zueinander anordnen. Das widerum heißt: Du kannst zum Beispiel sagen: "EHaufen2 soll rechts von EHaufen1 liegen und vor Steinhaufen". Das würde auf unser "Hello-World"-Programm bedeuten: "Reset-Button soll rechts von Red-Button liegen und unterhalbe von text". Und wie sage ich das Android? Gute Frage! Erstmal musst du natürlich definieren, dass es sich nun um ein relatives Layout handelt. Dafür änderst du einfach "LinearLayout" in "RelativeLayout". Desweiteren kannst du jetzt auch "android:orientation="vertical"" bzw. "android:orientation="horizontal"" entfernen, denn das wird bei einem relativen layout nicht mehr benötigt. Und der Code würde nun erstmal so aussehen:

<RelativeLayout xmlns:android="https://schemas.android.com/apk/re/android" 

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >
Und genauso musst du gaaaanz unten "</LinearLayout>" in "</RelativeLayout>" ändern. Sonst meckert der Compiler :icon_chee Als nächstes hauen wir noch das (jetzt überflüssige) zweite lineare Layout in die Tonne. Der vorläufige Code wäre also:

[COLOR="Green"]<RelativeLayout[/COLOR] xmlns:android="https://schemas.android.com/apk/res/android"[COLOR="Red"]Und schon ist es ein relatives Layout![/COLOR] 

    android:layout_width="fill_parent" [COLOR="Red"]Das bleibt und hat auch immernoch denselben Effekt.[/COLOR]

    android:layout_height="fill_parent">  [COLOR="Red"]Gleiches gilt hier.[/COLOR]

[COLOR="Red"]Die Views müssen noch angepasst werden!![/COLOR]

    <TextView  

        android:id="@+id/text"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textColor="#FFFFFF"

        android:text="@string/hello" />


    <Button  

        android:id="@+id/buttonRed"

        android:layout_width="wrap_content"

		android:layout_height="wrap_content"

		android:text="@string/red"

		 />


    <Button

        android:id="@+id/buttonReset"

        android:layout_width="wrap_content"

		android:layout_height="wrap_content"

		android:text="@string/reset"

		 />


[COLOR="Green"]</RelativeLayout>[/COLOR]  [COLOR="Red"]Ganz wichtig![/COLOR]

Das ist ja schonmal was :D Obwohl wir nur zwei lineare Layouts verwendet hatten, konnten wir mit dem relativen Layout dennoch den Code kürzen. Jetzt müssen wir nur noch die Views anpassen und schon sind wir fertig! Der TextView kann sogar genauso da stehen bleiben, denn als erster View in unserem Layout steht er ja ganz oben und muss/kann sich gar nicht an irgendetwas orientieren. Bei unserem Red-Button sieht das schon anders aus. Denn im Gegensatz zum linearen Layout, sind wir jetzt gezwungen die jeweiligen Views aneinander zu orientieren. Würden wir unseren Red-Button einfach so stehen lassen (vom linearen Layout sind wir ja gewohnt, dass die Views dann auch nacheinander angezeigt werden), würde Android frecherweise einfach den Red-Button über unseren wunderschönen text kleben. Und mit "über" meine ich nicht etwa "über" wie "das Flugzeug fliegt über das Haus", sondern viel mehr "Er zieht sich die Bettdecke über den Kopf". Also der Button würde einfach auf den TextView gelegt werden und diesen teilweise verdecken. Denn in einem relativen Layout sind alle Views "gleichberechtigt", also können jeder an allen Positionen stehen. Aber keine Sorge, natürlich gibt es auch dafür eine Lösung. Sonst wäre die Idee des relativen Layouts auch ziemlich dämlich :icon_chee Undzwar werden wir jetzt das Geheimnis um die Worte "links, rechts, drüber und drunter" lüften. In einem relativen Layout kannst du nämlich die Abhängigkeiten zwischen den Views wieder mit bestimmten Parametern bestimmen. Wir wollen jetzt den Red-Button ersteinmal unter den TextView setzen. Dafür fügen wir dem Button einfach die Zeile "android:layout_below="@+id/text"" hinzu. Das "@+id/text" bezieht sich natürlich wieder auf den TextView und sagt Android, dass der Button "below", laso "unter", eben diesem TextView stehen soll. Der Code für den Button wäre also:

    <Button

        android:id="@+id/buttonRed"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	[COLOR="Green"]android:layout_below="@+id/text"[/COLOR]

	android:text="@string/red" />

Bevor ich dir kurz die verschiedenen "Abhängigkeiten" erläutere, kümmern wir uns erstmal um den zweiten Button und vollenden das ganze. Der Reset-Button soll ja nicht nur unter dem TextView liegen, nein er soll sich auch rechts neben dem Red-Button befinden. "Und wie lösen wir das Problemchen?" "Vielleicht... mit einem Becherchen?" Nein! Schön wär's, aber ein wenig komplizierter ist es dann doch... Auch wenn ich gegen Pudding nichts einzuwenden hätte. Ich meine... Wer mag schon keinen Pudding? Egal...Das gehört woanders hin... :icon_chee Also... Es gibt natürlich noch viel mehr Möglichkeiten die Abhängigkeiten der Views untereinander zu beschreiben. Neben der Zeile "android:layout_below="@+id/text"", die wir hier natürlich auch wieder benötigen, geben wir dem Reset-Button noch eine Extra-Zeile, nämlich "android:layout_toRightOf="@+id/buttonRed"". Und auch hier ist wieder leicht erkennbar, was die Zeile bewirkt. "toRightOf" = "to right of" = "rechts von" ... Also wird hier gesagt "Der Reset-Button soll rechts vom Red-Button sein." "Und der Programmierer sprach es und es ward, dass der Reset-Button in der Tat seine Position änderte und sich folgsam neben den Red-Button stellte, immer darauf bedacht ja nicht den text zu berühren!" Ja, so ist es :icon_chee Denn mit "@+id/buttonRed" ist natürlich wieder der Red-Button gemeint. Nun sollte der Code für den Reset-Button so aussehen:

    <Button

        android:id="@+id/buttonReset"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	[COLOR="Green"]android:layout_below="@+id/text"[/COLOR]

	[COLOR="Green"]android:layout_toRightOf="@+id/buttonRed"[/COLOR]

	android:text="@string/reset" />

Und der komplette Code der neuen main.xml ist dann dieser:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">


    <TextView

        android:id="@+id/text"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textColor="#FFFFFF"

        android:text="@string/hello" />


    <Button

        android:id="@+id/buttonRed"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	[COLOR="Green"]android:layout_below="@+id/text"[/COLOR]

	android:text="@string/red" />


    <Button

        android:id="@+id/buttonReset"

        android:layout_width="wrap_content"

	android:layout_height="wrap_content"

	[COLOR="Green"]android:layout_below="@+id/text"[/COLOR]

	[COLOR="Green"]android:layout_toRightOf="@+id/buttonRed"[/COLOR]

	android:text="@string/reset" />


</RelativeLayout>

Schön, nicht wahr? :-)

Und was noch schöner ist, starte doch jetzt mal das Programm!

Das sollte jetzt nämlich so aussehen (Sieht zwar aus, wie auf dem ersten Bild, ist aber eine "verbesserte" Variante :D):

763elyn22xb5.png

Achja... Und das ganze nur indem du 2 Zeilen verändert, 1 Zeile gelöscht und 3 Zeilen hinzugefügt hast!

Und das bedeutet auch, dass du nur 2 Zeilen mehr als vorher hast!

Und im Vergleich mit der "mehrere lineare Layouts"-Methode schneidet das relative Layout sowieso viel besser ab, wie ich finde. :-)

Und was nehmen wir aus der heutigen "Stunde" mit?

1. Es gibt verrschiedene Layoutypen.

2. In den meisten Fällen ist ein relatives Layout mehreren linearen Layouts vorzuziehen.

3. Ich mag Pudding... :-)

Und damit sind wir eigentlich auch schon am Ende dieses Tutorials angelangt.

Ich werde noch eine Liste der verschiedenen "Abhängigkeiten" innerhalb eines relativen Layouts anhängen (natürlich mit Erklärungen meinerseits).

Ich wünsche dir hier schonmal einen schönen Abend, Morgen, Mittag oder sonstwat und hoffe wie immer, dass es dir gefallen/geholfen hat!

Fragen, Lob sowie Kritik sind natürlich wieder gerne gesehen!

Hier die Liste (vor den Namen kommt natürlich immer ein "android:layout_":

No code has to be inserted here.

bearbeitet von Meishere
  • Like 6

Diesen Beitrag teilen


Link zum Beitrag
Swissdroid

Junge Junge hast wieder mal viel geschrieben und wenig geschlafen was? ;)

Jedenfalls ein grosses Danke dafür :-) Richtig Toll was du hier ablieferst , jetzt noch ein paar Bilder rein und die Sache ist der Hammer... :eek: WoooW:eek: :P

Eben so dein Humor den du mit ein bringst ;)

  • Like 1

Diesen Beitrag teilen


Link zum Beitrag
Meishere

Haha... danke :D

Ja... wie immer hab ich bilder vergessen xD

Und ja.. ich hab zwar ferien, musste heut aber mal um 8 aufstehen xD

Werde mich eventuell mal um die bilder kümmern :)

Edit: wenn ich mich denn endlich mal mit dem wlan verbinden könnte... tja so is das auffem dorf xD

Edit2: ok, ich nehm's zurück.. Diesmal war ich Schuld, irgendwas in den Netzwerkeinstellungen war "verpfuscht" und, man kanns kaum glauben, Windows konnte das Problem beheben :D

Und Edit3: @SwissDroid: Ich hatte deinen letzten Satz gar nicht gesehen :D Dazu: Ich war mir nicht ganz Sicher, ob das richtig rüberkommt :D Also nochmal ein Extra-Danke dafür :)

bearbeitet von Meishere

Diesen Beitrag teilen


Link zum Beitrag

Please sign in to comment

You will be able to leave a comment after signing in



Jetzt anmelden
Melde dich an, um diesem Inhalt zu folgen  

×
×
  • Neu erstellen...

Wichtige Information

Bitte beachten Sie folgende Informationen: Nutzungsbedingungen und Impressum & Datenschutzerklärung. Wir haben Cookies auf deinem Gerät platziert, um die Bedienung dieser Website zu verbessern. Du kannst deine Cookie-Einstellungen anpassen, andernfalls gehen wir davon aus, dass Du damit einverstanden bist.