Ratschläge zur Umsetzung einer Nutzeroberfläche

Y

yolonaut

Neues Mitglied
0
Hallo,
ich bin neu in der Android Programmierung und möchte habe mir zum Kennenlernen der GUI-Entwicklung vorgenommen eine simple Tastatur zu bauen. Diese soll einfach nur aus Buttons bestehen.
Oben ein simpler TextView und darunter soll dann eine Tastatur wie diese sein:
Sw2hA1B.png


Wie man Buttons aus Bilddateien erzeugt habe ich schon gelernt (youtube.com/watch?v=zXXCFmfJMNw). Sieht dann etwa so aus:

3Argh0e.png



Wie man auf dem ersten Bild sehen kann sind die Buttons nicht alle vertikal synchron angeordnet. Ich habe mich jetzt gefragt wie man das am besten umsetzt und welches Layout sich empfiehlt. Außerdem sehen die Buttons im zweiten Bild ziemlich groß aus und alle Buchstaben würden nicht auf den Screen passen, was ich natürlich durch das Verkleinern der Ausgangs-Bilddateien verbessern könnte. Wechsle ich jedoch auf auf ein Device mit größerer Auflösung (z.B. Tablet) sieht das so aus und die Buttons sind jetzt plötzlich zu klein:

OcBnGbU.png


Ich weiß, dass es die Möglichkeit gibt die gleichen Bilder in unterschiedlichen Größen in den jeweiligen drawable-*dpi Ordnern unterzubringen. Aber das löst das Problem ja auch nicht ganz, da es mehr verschiedene Bildschirmauflösungen auf Android-Geräten gibt als es drawable-Ordner gibt (nur 5). Ich denke es gibt sicherlich eine Lösung für das Problem, oder ?


Vielen Dank schonmal !
Liebe Grüße
 
Kurz -> Wie ist z.B. soetwas möglich:

vOCWC92.png
 
Kommt drauf an was du genau willst. Wenn die Zeilen nicht komplett ausgefüllt werden (wie in deinem Beispiel) könntest du das mit PaddingLeft erreichen:
HTML: 
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button3"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button4"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="30dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button3"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button4"/>
    </LinearLayout>
</LinearLayout>

Zentrierte Variante: (gravity="center_horizontal")

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

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button4"/>
</LinearLayout>
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button4"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button5"/>
</LinearLayout>
</LinearLayout>
 
Danke ! Genau das habe ich gebraucht.
Eine Frage hätte ich dann noch. Wenn ich diesen Buttons über android:background ein Hintergrund Bild zuweise, dann wird auf dem Gerät dieses falsch dargestellt. Das ursprüngliche Höhe zu Breite Verhältnis stimmt nicht mit dem Original überein. Es ist jedoch wichtig, dass die Proportionen eingehalten werden.
Danke :)
 
Normalerweise müsste das Verhältnis stimmen. Wenn du dein Projekt oder zumindest deine Layout.xml-Datei mal postest kann ich es mir gerne mal anschauen. width und height von dem Button / ImageButton sollte halt auf wrap_content stehen
 
Hier die xml:

Code: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:layout_marginTop="200dp"
    >

    
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/q" 
         
            />
        

        <Button
            android:id="@+id/button2"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/w" />

        <Button
            android:id="@+id/button3"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/e" />

        <Button
            android:id="@+id/button4"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/r" />

        <Button
            android:id="@+id/button5"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/t" />

        <Button
            android:id="@+id/button6"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/z" />

        <Button
            android:id="@+id/button7"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/u" />

        <Button
            android:id="@+id/button8"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/i" />

        <Button
            android:id="@+id/button9"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/o" />

        <Button
            android:id="@+id/button10"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/p" />
    </LinearLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="15dp"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button11"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/a" />

        <Button
            android:id="@+id/button12"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/s" />

        <Button
            android:id="@+id/button13"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/d" />

        <Button
            android:id="@+id/button14"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/f" />

        <Button
            android:id="@+id/button15"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/g" />

        <Button
            android:id="@+id/button16"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/h" />

        <Button
            android:id="@+id/button17"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/j" />

        <Button
            android:id="@+id/button18"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/k" />

        <Button
            android:id="@+id/button19"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/l" />
    </LinearLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="15dp"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button20"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/y" />

        <Button
            android:id="@+id/button21"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/x" />

        <Button
            android:id="@+id/button22"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/c" />

        <Button
            android:id="@+id/button23"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/v" />

        <Button
            android:id="@+id/button24"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/b" />

        <Button
            android:id="@+id/button25"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/n" />

        <Button
            android:id="@+id/button26"
            style="@style/styleBtns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/m" />

       
    </LinearLayout>

</LinearLayout>

Der Button ist sichtlich etwas breiter als die Quelldatei.
 
Ich fürchte du müsstest doch noch mal etwas mehr von deinem Projekt posten, damit ich mir das angucken kann. Insbesondere natürlich die Style-Datei und vermutlich dort eingebundene Grafiken.
 
Hier der entsprechende style Abschnitt:

Code: 
    <style name="styleBtns" >
        <item name="android:background">@drawable/btns_abc</item>
        <item name="android:layout_marginRight">5dp</item>
  
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">11sp</item>             
    </style>


In der btns_abc.xml wird dann auf Bilddatei verwiesen:

85x106 Pixel
k8ojjdf.png
 
Das margin_Top beim äußeren LinearLayout ist keine gute Idee und glaube ich auch gar nicht zulässig (Android Studio zeigt die Eigenschaft gar nicht an), verwende stattdessen android:gravity="center_vertical", dann funktioniert dasselbe Layout nicht nur auf 10" Geräten sondern auch mit 7"

Bei mir sehen die Buttons korrekt aus. Ich hab sogar einen Screenshot gemacht und nachgemessen: das Verhältnis stimmt. Allerdings wurde der Style bei mir (wie gesagt Android Studio) erst nach einem kompletten Neustart angezeigt (wohl ein Android Studio Bug). In jedem Fall müsste es aber korrekt angezeigt werden wenn du es in einem Emulator oder auf deinem Handy ausführst.

Eine andere Frage ist, ob du überhaupt die Buttons alle gleich groß machen willst. Es gibt ja auch längere Knöpfe auf der Tastatur (Strg, Alt, Leertaste). Dafür wäre es günstiger, statt der fixen Grafik eine 9-patch-Grafik zu erstellen und zu verwenden.

Draw 9-patch | Android Developers
 
Die Space-Taste möchte ich anders erstellen. Wirklich seltsam, dass die buttons bei dir stimmen. So sieht das ganze bei mir auf dem Endgerät aus:

ZOPV3x4.png


So als ganze Tastatur auf dem Tablet:

usmbt4W.png



Und so auf einem Nexus S:

XrWwFUK.png


Und hier nochmal das Original zum Vergleich:

k8ojjdf.png
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

D
Anlegen/Import einer neuen AVD
  • Data2006
Antworten
14
Aufrufe
486
jogimuc
J
B
Kotlin Ergebnis einer SQL Abfrage sortieren
  • byteripper
Antworten
3
Aufrufe
1.307
swa00
swa00
A
Suche von MSSQL-Daten innerhalb einer ListView
  • AlexOB
Antworten
10
Aufrufe
1.021
swa00
swa00
Zurück
Oben Unten