Zum Inhalt springen

Android Training/Building a Simple User Interface/de: Unterschied zwischen den Versionen

Die Seite wurde neu angelegt: „Fahre mit der nächsten Lektion fort, um zu lernen wie auf einen Klick auf einen Button reagiert, der Inhalt des Textfeldes ausgelesen oder eine andere Activit…“
(Die Seite wurde neu angelegt: „Das Ergebnis für die <code>strings.xml</code> Datei sieht wie folgt aus:“)
(Die Seite wurde neu angelegt: „Fahre mit der nächsten Lektion fort, um zu lernen wie auf einen Klick auf einen Button reagiert, der Inhalt des Textfeldes ausgelesen oder eine andere Activit…“)
 
(23 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<languages />
<languages/>
[[Datei:Viewgroup.png|thumb|Illustration, wie ViewGroup Objekte Zweige im Layout bilden und View Objekte beinhalten.]]
[[Datei:Viewgroup.png|thumb|Illustration, wie ViewGroup Objekte Zweige im Layout bilden und View Objekte beinhalten.]]
In dieser Übung erstellst du ein Layout in XML, welches ein Textfeld und ein Button enthält. In der darauffolgenden Übung wird deine App auf einen Button-Klick reagieren und den Inhalt des Textfeldes an eine andere Aktivität senden.
In dieser Übung erstellst du ein Layout in XML, welches ein Textfeld und ein Button enthält. In der darauffolgenden Übung wird deine App auf einen Button-Klick reagieren und den Inhalt des Textfeldes an eine andere Aktivität senden.
Zeile 87: Zeile 87:
</resources>
</resources>
</syntaxhighlight>
</syntaxhighlight>
For text in the user interface, always specify each string as a resource. String resources allow you to manage all UI text in a single location, which makes the text easier to find and update. Externalizing the strings also allows you to localize your app to different languages by providing alternative definitions for each string resource.
Definiere für Text in der Benutzeroberfläche immer eine Zeichenkette als Ressource. Zeichenketten-Ressourcen erlauben es dir, jeden Text der Benutzeroberfläche an einem einzigen Ort zu verwalten, was es einfacher macht, den Text zu finden und zu aktualisieren. Außerdem erlaubt dir das, deine App in verschiedene Sprachen zu lokalisieren, indem alternative Definitionen für jede Zeichenkette bereit gestellt werden.


For more information about using string resources to localize your app for other languages, see the Supporting Different Devices class.
Für mehr Informationen zur Verwendung von Zeichenketten (als Ressourcen) zur Lokalisierung in andere Sprachen, siehe die "Supporting Different Devices class".


== Add a Button ==
== Ein Button hinzufügen ==
# In Android Studio, from the <code>res/layout</code> directory, edit the <code>activity_my.xml</code> file.
# Bearbeite die Datei <code>activity_my.xml</code> aus dem Ordner <code>res/layout</code> in Android Studio.
# Within the <code><LinearLayout></code> element, define a [http://developer.android.com/reference/android/widget/Button.html <code><Button></code>] element immediately following the <code><EditText></code> element.
# Definiere im <code><LinearLayout></code> Element, direkt nach dem <code><EditText></code> Element, ein [http://developer.android.com/reference/android/widget/Button.html <code><Button></code>] Element.
# Set the button's width and height attributes to <code>"wrap_content"</code> so the button is only as big as necessary to fit the button's text label.
# Setze für die width und height Attribute des Buttons <code>"wrap_content"</code> als Wert, sodass der Button nur so groß ist, damit der komplette Button-Text angezeigt wird.
# Define the button's text label with the [http://developer.android.com/reference/android/widget/TextView.html#attr_android:text <code>android:text</code>] attribute; set its value to the <code>button_send</code> string resource you defined in the previous section.
# Definiere die Aufschrift des Buttons mit dem [http://developer.android.com/reference/android/widget/TextView.html#attr_android:text <code>android:text</code>] Attribut; setze als Wert die <code>button_send</code> Zeichenketten-Ressource, welche du im vorherigen Abschnitt definiert hast.
Your <code><LinearLayout></code> should look like this:
Dein <code><LinearLayout></code> sollte wie folgt aussehen:


''res/layout/activity_my.xml''
''res/layout/activity_my.xml''
Zeile 115: Zeile 115:
</LinearLayout>
</LinearLayout>
</syntaxhighlight>
</syntaxhighlight>
'''Note''': This button doesn't need the <code>android:id</code> attribute, because it won't be referenced from the activity code.
'''Hinweis''': Der Button benötigt kein <code>android:id</code> Attribut, da es im Activity-Code nicht referenziert wird.
[[Datei:edittext_wrap.png|thumb|The EditText and Button widgets have their widths set to "wrap_content".]]
[[Datei:edittext_wrap.png|thumb|Die EditText und Button Widgets haben als Breite "wrap_content" gesetzt.]]
The layout is currently designed so that both the <code>EditText</code> and <code>Button</code> widgets are only as big as necessary to fit their content, as shown in the picture.
Das Layout ist aktuell so entworfen, dass beide Widgets, <code>EditText</code> und <code>Button</code>, nur so breit sind, um ihre Inhalte anzeigen zu können, wie im Bild zu sehen.


This works fine for the button, but not as well for the text field, because the user might type something longer. It would be nice to fill the unused screen width with the text field. You can do this inside a <code>LinearLayout</code> with the weight property, which you can specify using the [http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#weight <code>android:layout_weight</code>] attribute.
Das funktioniert für den Button ausgezeichnet, nicht aber für das Textfeld, da der Nutzer ggf. etwas längeres eingeben wird. Es wäre schön, wenn der ungenutzte Platz für die Breite des Textfeldes verwendet wird. Im <code>LinearLayout</code> kannst du dies mit der weight-Eigenschaft erreichen, unter Verwendung des [http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#weight <code>android:layout_weight</code>] Attributes.


The weight value is a number that specifies the amount of remaining space each view should consume, relative to the amount consumed by sibling views. This works kind of like the amount of ingredients in a drink recipe: "2 parts soda, 1 part syrup" means two-thirds of the drink is soda. For example, if you give one view a weight of 2 and another one a weight of 1, the sum is 3, so the first view fills 2/3 of the remaining space and the second view fills the rest. If you add a third view and give it a weight of 1, then the first view (with weight of 2) now gets 1/2 the remaining space, while the remaining two each get 1/4.
Der weight-Wert ist eine Zahl, welche festlegt, wie viel verfügbaren Platz jedes View verwenden soll, relativ zu der Menge die andere Views verwenden. Das funktioniert ähnlich wie bei einem Getränke-Rezept: "2 Teile Soda, 1 Teil Sirup" bedeutet, 2/3 vom Getränk ist Soda. Gibst du beispielsweise einem View ein Gewicht von 2 und einem anderen ein Gewicht von 1, ist die Summe 3, sodass das erste View 2/3 vom verfügbaren Platz und das Zweite den Rest verwenden wird. Wenn du ein drittes View mit einem Gewicht von 1 hinzufügst, wird das erste View (mit dem Gewicht 2) nun die Hälfte des verfügbaren Platzes und die verbleibenden anderen beiden Views jeweils ein 1/4 verwenden.


The default weight for all views is 0, so if you specify any weight value greater than 0 to only one view, then that view fills whatever space remains after all views are given the space they require.
Das Standard-Gewicht von allen Views ist 0, was bedeutet, wenn du einem View einen Wert größer 0 gibst, wird es den kompletten verfügbaren Platz verwenden, nachdem alle Elemente den Platz bekommen haben, den sie mindestens benötigen.


== Make the Input Box Fill in the Screen Width ==
== Das Eingabefeld die Komplette Bildschirmbreite füllen lassen ==
To fill the remaining space in your layout with the <code>EditText</code> element, do the following:
Um den verbleibenden Platz in deinem Layout mit dem <code>EditText</code> Element zu füllen, musst du folgendes tun:


# In the <code>activity_my.xml</code> file, assign the <code><EditText></code> element's <code>layout_weight</code> attribute a value of <code>1</code>.
# Weise dem <code>layout_weight</code> Attribut des <code><EditText></code> Elements in der <code>activity_my.xml</code> Datei den Wert <code>1</code> zu.
# Also, assign <code><EditText></code> element's <code>layout_width</code> attribute a value of <code>0dp</code>.
# Weise außerdem dem <code>layout_width</code> Attribut des <code><EditText></code> Elements den Wert <code>0dp</code> zu.
#: ''res/layout/activity_my.xml''
#: ''res/layout/activity_my.xml''
#: <syntaxhighlight lang="xml">
#: <syntaxhighlight lang="xml">
Zeile 137: Zeile 137:
     ... />
     ... />
</syntaxhighlight>
</syntaxhighlight>
To improve the layout efficiency when you specify the weight, you should change the width of the <code>EditText</code> to be zero (0dp). Setting the width to zero improves layout performance because using <code>"wrap_content"</code> as the width requires the system to calculate a width that is ultimately irrelevant because the weight value requires another width calculation to fill the remaining space.
Um bei der Verwendung von weight die Effizienz des Layouts zu verbessern, solltest du die Breite von <code>EditText</code> auf 0 setzen (0do). Das Setzen einer Breite von 0 verbessert die Leistungsfähigkeit, weil bei der Verwendung von <code>"wrap_content"</code> als Breite das System die Breite berechnen muss, welche letztlich irrelevant ist, da die Breite erneut in Bezug auf das Gewicht berechnet werden muss, um den verbleibenden Platz auszufüllen.


Here’s how your complete activity_my.xmllayout file should now look:
So sollte deine komplette <code>activity_my.xml</code> Layout-Datei nun aussehen:
''res/layout/activity_my.xml''
''res/layout/activity_my.xml''
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
Zeile 160: Zeile 160:
</syntaxhighlight>
</syntaxhighlight>


== Run Your App ==
== Starte deine App ==
This layout is applied by the default <code>Activity</code> class that the SDK tools generated when you created the project. Run the app to see the results:
Das Layout wird von der Standard-<code>Activity</code> Klasse angewendet, welche durch die SDK Tools beim Erstellen des Projektes angelegt wurde. Starte die App um das Ergebnis zu sehen:


# In Android Studio, from the toolbar, click Run  .
# Klicke '''Start''' in der Android Studio Toolbar.
# Or from a command line, change directories to the root of your Android project and execute:
# Oder wechsle in einer Kommandozeile zu dem Stammverzeichnis deines Android Projektes und führe folgende Befehle aus:
#: <code>ant debug</code>
#: <code>ant debug</code>
#: <code>adb install bin/MyFirstApp-debug.apk</code>
#: <code>adb install bin/MyFirstApp-debug.apk</code>
Fahre mit der nächsten Lektion fort, um zu lernen wie auf einen Klick auf einen Button reagiert, der Inhalt des Textfeldes ausgelesen oder eine andere Activity gestartet werden kann und mehr.


Continue to the next lesson to learn how to respond to button presses, read content from the text field, start another activity, and more.
{{TNT|Android Training/Attribution}}
 
{{Android Training/ Vorlage:Attribution}}
11.008

Bearbeitungen

Cookies helfen uns bei der Bereitstellung von Android Wiki. Durch die Nutzung von Android Wiki erklärst du dich damit einverstanden, dass wir Cookies speichern.