Android - UI Design-Tutorial

In diesem Kapitel werden wir auf die verschiedenen Komponenten der Benutzeroberfläche von Android-Bildschirm betrachten. In diesem Kapitel werden auch die Tipps, um ein besseres UI-Design zu machen und auch erläutert, wie ein UI-Design.

UI-Bildschirm-Komponenten

Eine typische Benutzerschnittstelle eines Android-Anwendung besteht aus Aktionsleiste und die Anwendung Inhaltsbereich.

1. Hauptaktionsleiste
2. View Control
3. Inhaltsbereich
4. Split-Aktionsleiste

Diese Komponenten sind auch in der Abbildung unten dargestellt worden -

Verständnis Bildschirmkomponenten

Die Grundeinheit der Android-Anwendung ist die Aktivität. Ein UI ist in einer XML-Datei definiert. Beim Übersetzen wird jedes Element in der XML in äquivalente Android GUI-Klasse mit Attributen durch Verfahren vertreten zusammengestellt.

Ansicht und ViewGroups

Eine Aktivität ist aus Blick. Eine Ansicht ist nur ein Widget, das auf dem Bildschirm erscheint. Es könnte Button etc eine oder mehrere Ansichten können zusammen in einem Groupview gruppiert werden können. Beispiel für Viewgroup enthält Layouts.

Arten von Layouts

Es gibt viele Arten von Layouts. Einige davon sind nachstehend aufgeführt:

• Linear-Layout
• Absolute-Layout
• Tabellen-Layout
• Rahmenlayout-
• Relative Layout-

Linear-Layout

Lineare Abwicklung ist weiterhin in horizontale oder vertikale Anordnung unterteilt. Es bedeutet, dass es Blick in einer Spalte oder in einer einzigen Reihe anzuordnen. Hier ist der Code von Linearlayout (vertikal), das eine Textansicht enthält.

<?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”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

Die AbsoluteLayout ermöglicht es Ihnen, die genaue Lage der Kinder angeben.Es kann wie folgt erklärt werden.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

Tablelayout

Die Tablelayout Gruppen Einblicke in Zeilen und Spalten. Es kann wie folgt erklärt werden.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
      android:text=”User Name:”
      android:width =”120dp”
      />
      
      <EditText
      android:id=”@+id/txtUserName”
      android:width=”200dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

Die RelativeLayout können Sie festlegen, wie untergeordnete Ansichten relativ zueinander other.It kann wie folgt erklärt werden, positioniert sind.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

Die FrameLayout ist ein Platzhalter auf dem Bildschirm, die Sie verwenden, um eine einzelne Ansicht anzuzeigen. Es kann wie folgt erklärt werden.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Zusätzlich bilden diese Attribute gibt es andere Attribute, die in allen Ansichten und ViewGroups gemeinsam sind. Sie sind: -

Sr.No	Ansehen und Beschreibung
1	layout_width Gibt die Breite der Anzeigen oder Viewgroup
2	layout_height Gibt die Höhe der Anzeigen oder Viewgroup
3	layout_marginTop Gibt zusätzlichen Platz auf der Oberseite der Anzeigen oder Viewgroup
4	layout_marginBottom Gibt zusätzlichen Platz auf der Unterseite der Anzeigen oder Viewgroup
5	layout_marginLeft Gibt zusätzlichen Platz auf der linken Seite der Anzeigen oder Viewgroup
6	layout_marginRight Gibt zusätzlichen Platz auf der rechten Seite der Ansicht oder Viewgroup
7	layout_gravity Gibt an, wie Kinder Ansichten positioniert sind
8	layout_weight Gibt an, wie viel von dem zusätzlichen Platz im Layout sollte der Ansicht zugeordnet werden

Maßeinheiten

Wenn Sie die Angabe der Größe eines Elements auf einem Android-UI, sollten Sie die folgenden Maßeinheiten erinnern.

Sr.No	Einheit & Beschreibung
1	dp Dichteunabhängige Pixel. 1 dp entspricht einem Pixel auf einem 160 dpi-Bildschirm.
2	sp Scale-unabhängige Pixel. Dies ist vergleichbar mit DP und wird für die Angabe Schriftgrößen empfohlen
3	pt Point. Ein Punkt wird auf 1/72 Zoll betragen, bezogen auf die physikalische Bildschirmgröße.
4	px Pixel. Entspricht den aktuellen Pixel auf dem Bildschirm

Rasterdichten

Sr.No	Dichte & DPI
1	Geringer Dichte (LDPI) 120 dpi
2	Mittlerer Dichte (MDPI) 160 dpi
3	Hoher Dichte (hdpi) 240 dpi
4	Besonders hohe Dichte (xhdpi) 320 dpi

Optimierung der Layouts

Hier sind einige der Leitlinien für die Erstellung von effizienten Layouts.

• Vermeiden Sie unnötige Verschachtelung
• Vermeiden Sie zu viele Ansichten
• Vermeiden tiefen Verschachtelung

Share on Google Plus

About ptjqatar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.