Application Skeleton zur Unterstützung mehrerer Bildschirme

Wie wir Android mit verschiedenen Geräten mit verschiedenen functionen, Auflösung und Bildschirm-Größe kommen wissen, so dass bei der Entwicklung einer Anwendung, die mehrere (kleine und große) Bildschirm unterstützt gibt es ein Hindernis von Größe und Layout.

Dies führt zu unterschiedlichen Kombinationen von Bildschirmgrößen, Auflösungen und DPIs und stellt eine große Herausforderung beim Entcasting und Entwickeln für Android-Geräte dar. Während einige andere Hersteller (nicht Android) unterschiedliche Auflösungen und DPI haben, teilen sie die gleiche Bildschirmgröße und die Auflösungen folgen demselben Seitenverhältnis. Daher kann ein Bild erstellt werden, das zu den Nicht-Android-Geräten passt.

Meine Frage ist, ob es einen richtigen Fluss oder eine Architektur gibt, der man folgen sollte, um die Anforderung zu erfüllen?

Bildbeschreibung hier eingeben

Denken Sie daran, dass wir Tabletten unterschiedlicher Größe und Auflösung haben.

Mir ist bewusst, dass Android Developer diese Informationen enthält, aber meine Ansicht stammt von der Implementierung.

Aus meiner Kenntnis, was ich verstanden habe, ist, dass für das Entcasting von Android-Grafik sogar Programmierer das Design-Konzept kennen muss.

Schließlich wurde eine Struktur erstellt, die Layouts und Symbole für mehrere Bildschirme verwaltet.

Android verallgemeinert Geräte in Kategorien basierend auf zwei Parametern:

  • Bildschirmgröße, die physische Größe des Displays (diagonal gemessen)
  • Bildschirmdichte, die physische Pixeldichte des Displays (in Pixel pro Zoll oder ppi)

Um die Bildschirmgröße und -dichte schnell zu bestimmen, installieren Sie bitte die App ” What’s my Size ” für Android.

Bildschirmgröße

Android definiert vier verallgemeinerte Bildschirmgrößen:


  Qualifier Size small ~3 inches (approx) normal ~4 inches (approx) large Exceeds 4 inches xlarge Exceeds 7 inches 
  • Die meisten Telefone werden als klein oder normal (etwa 3 bis 4 Zoll diagonal) klassifiziert. Aber jetzt gibt es viele Telefone mit großem Bildschirm wie Galaxy S4, HTC One, Xperia Z
  • Ein kleines Tablet wie das Samsung Galaxy Tab wird als groß eingestuft (größer als 4 Zoll)
  • Extra groß gilt für große Geräte, zum Beispiel große Tablets

Android definiert vier generalisierte Bildschirmdichten:


  Qualifier Description Nominal value ldpi low density 120 ppi mdpi medium density 160 ppi hdpi high density 240 ppi xhdpi extra high density 320 ppi 

Typischerweise:

  • Die Bildschirmgröße hat den größten Einfluss auf Ihre App-Layouts
  • Die Bildschirmdichte hat den größten Einfluss auf Ihre Bild- und Grafikressourcen

Es ist hier der prozentuale Unterschied des Gerätebildschirms aufgelistet

  • Ldpi- 75%
  • Mdpi- 100% (Basis laut Android-Entwickler-Website)
  • Hdpi- 150%
  • XHdpi- 200%

Bildbeschreibung hier eingeben

Aber wie wir jetzt wissen, kommt das meiste Gerät mit 480X800, also betrachte ich dies als basiertes Gerät, also wird unsere neue Berechnung das mögen

  • Ldpi- 50%
  • Mdpi- 66.67%
  • Hdpi- 100%
  • XHdpi- 133.33%

Das bedeutet, dass das erste Symbol und Design nur für 480X800 und dann für die restlichen erstellt wird (dh Ldpi, Mdpi, Xhdpi).

Es gibt Bilder, die für alle Layouts üblich sind und einheitlich in Farbe und Form sein müssen (keine komplexe Form, keine Kurve). Für diese Art von Bild erstellen wir 9patch das in den Ordner “drawable (no-suffix)” gestellt wird. Um ein 9Patch-Bild zu erstellen, können Sie entweder DrawNinePatch oder BetterNinePatch verwenden

Jetzt hdpi einfach deine Bilder nach Android Standards um und vervollständige deine Anwendung mit hdpi und nimm dann drawable-hdpi Ordner und öffne Adode Photoshop (empfohlen) erstelle Aktion von mehrfacher Größe (ändere einfach die Größe nach prozentualem Verhältnis) sobald Action für alle erstellt wurde Größe dann einfach Batch automatisieren und geben Quelle (Drawable-hdpi) und Ziel (Drawable-LDPI, Drawable-MDPI, Drawable-XDpi).

Der Grund, warum ich darauf bestehe, Photoshop zu verwenden, ist, dass es Ihr Bild automatisch mit Actions skalieren wird und ein weiterer Pluspunkt ist, dass Sie die Datei nicht umbenennen müssen (sie wird den gleichen Namen vergeben wie der Original).

Sobald Sie alle Bilder erstellt haben, aktualisieren Sie Ihr Projekt und testen Sie es.

Manchmal besteht die Möglichkeit, dass das Layout, das den Bildschirm unterstützt (xhdpi, hdpi, mdpi), in einen kleinen Bildschirm (ldpi) geschnitten werden kann. Um dies zu bearbeiten, erstellen Sie einfach einen separaten Layout-Ordner (layout-klein) und fügen ScrollView . Das ist es.

Tablet- Tablets sind in zwei Größen kategorisiert.

  1. 7 “(1024X (600-48 (Navigationsleiste))) = 1024X552 (ausziehbar-groß)
  2. 10 “(1280X (800-48 (Navigationsleiste))) = 1280X752 (drawbar-xlarge)

In diesem müssen wir ein Bild für den Bildschirm erstellen und sie einfach entsprechend platzieren

Alles in allem werden wir diesen Ordner in unserer Anwendung haben, um mehrere Bildschirme zu unterstützen.

 drawable drawable-ldpi drawable-mdpi drawable-hdpi drawable-xhdpi drawable-large drawable-xlarge 

wird mehr Qualifier Kombination mit Screen size and Screen density

 drawable-large-ldpi drawable-large-mdpi drawable-large-hdpi drawable-large-xhdpi 

mehr Qualifier mit Screen density and Version

 drawable-ldpi-v11 drawable-mdpi-v11 drawable-hdpi-v11 drawable-xhdpi-v11 

und mehr Qualifier mit Screen size and Version

 drawable-large-v11 drawable-xlarge-v11 

und mehr Qualifier mit Smallest width concept(SW)

  drawable-sw???dp 

Außerdem haben sie in Android V3.0 Honeycomb ein neues Konzept von SW(smallest width) bei dem Geräte in Bildschirmbreite kategorisiert werden. Wenn wir also einen Ordner namens drawable-sw360dp wird das Gerät mit 720dp (entweder width oder height) Verwenden Sie Ressource aus diesem Ordner.

zum Beispiel, um das Samsung Galaxy S3 dp nach Suffix zu finden, um swd-db
Mit Bezug auf die DP-Berechnung , wenn Sie Ihr Layout unterstützen oder auf S3 abbilden möchten, sagt die Berechnung

px = Gerätebreite = 720
dpi = Gerätedichte = 320

Formel gegeben

  px = dp * (dpi / 160) 

Formel austauschen, weil wir den Wert von px haben

  dp = px / (dpi / 160) 

Jetzt Wert setzen,

  dp= 720 / (320/160); dp=360. 

so drawable-sw360dp wird die Arbeit machen

Holen Sie sich Device-Konfiguration von GsmArena Sameway können Sie auch Ordner nach Device Android-API-Version dh Drawable-hdpi-v11 erstellen, so dass das Gerät, das API11 hat und es ist Hdpi dann wird es diese Ressourcen verwenden.

Zusätzliche Tipps:

  • Verwenden Sie relative Layouts, dp, sp und mm

    dp-Einheiten – geräteunabhängige Pixel, die auf einem physischen Bildschirm mit 160 ppi, dh mittlerer Dichte, auf 1 physisches Pixel normiert sind. Zur Laufzeit skaliert. Verwenden Sie für Bildschirmelementdimensionen

    sp units – skalierte Pixel, die als Gleitkommawerte angegeben werden, basierend auf dp-Einheiten, aber zusätzlich skaliert für die Einstellung der Schriftgröße des Benutzers. Zur Laufzeit skaliert. Verwenden Sie für Schriftgrößen

    Sie sollten RelativeLayout immer für Layouts verwenden. AbsoluteLayout ist veraltet und sollte nicht verwendet werden.

  • Verwenden Sie geeignete Bildformate – PNG gegenüber JPEG

    Android "prefers" PNG for bitmap image files, "accepts" JPEG, and "discourages" GIF.

    PNG und JPEG sind jedoch keine Äquivalente. Sie haben unterschiedliche Qualitätskompromisse und PNG ist nicht immer am besten:

    JPEG kann bis zu 50% Dateigrößenreduktionen gegenüber PNG bieten, was bei einer bildintensiven Anwendung von Bedeutung ist

    Ein “verlustbehaftetes” JPEG mit höherer Qualität kann bei gleicher Dateigröße besser aussehen als ein hochkomprimiertes “verlustfreies” PNG

  • Fügen Sie Ihren Bildern und Grafiken Labels zum Debuggen hinzu

  • Verwenden Sie das Element Unterstützungsbildschirme

  • Konfigurieren Sie Ihre Emulatoren mit echten Gerätewerten

    Herkömmlicherweise werden Desktop-Systeme mit 72 ppi (Mac) oder 96 ppi (Windows, Linux) angezeigt. Im Vergleich zu mobilen Desktop-Displays sind immer niedrige Dichte.

    Konfigurieren Sie Ihre Android-Emulatoren immer so, dass sie reale Gerätewerte nachahmen, und stellen Sie sie immer so ein, dass sie die Gerätedichte emulieren.

    In Eclipse können Sie einfach mehrere Emulatoren erstellen (wählen Sie in der Eclipse-Menüleiste Fenster> AVD-Manager> Neu ), die mit Werten für reale Geräte konfiguriert sind:

    Benennen Sie den Emulator für das reale Gerät, das emuliert wird. Geben Sie die Auflösung an, verwenden Sie keine integrierten generischen Größen. Stellen Sie die Gerätedichte so ein, dass sie dem tatsächlichen Gerät entspricht (im Hardware-Bereich wurde die abstrahierte LCD-Eigenschaft auf die reale Dichte gesetzt, immer ein ganzzahliger Wert).

    Wenn Sie das Gerät starten, wählen Sie immer Anzeigegröße skalieren und geben Sie die tatsächliche Bildschirmgröße in Zoll ein.

    Wenn Sie die Gerätedichte nicht festlegen, verwendet der Emulator standardmäßig eine niedrige Dichte und lädt immer ldpi-spezifische Ressourcen. Die Auflösung (Pixelmaße) ist korrekt, aber Ihre dichteabhängigen Bildressourcen werden nicht wie gewünscht angezeigt.

    Natürlich wird nichts, was Sie tun, eine höhere Bildqualität auf einer Desktop-Anzeige mit geringerer Dichte wiedergeben.

Hier sind die Daten, die während eines 7-Tage-Zeitraums gesammelt wurden, der am 1. Oktober 2012 endete. Die neueste Statistik zur Android-Plattformversion finden Sie hier

Basierend auf der Bildschirmgröße

Bildbeschreibung hier eingeben

Basierend auf der Bildschirmdichte

Bildbeschreibung hier eingeben

Designer sollten Basisdesigns von erstellen

base size of mdpi devices * density conversion factor of highest supported density bucket
size.Base Bildschirmgröße ist 320 x 480 px und Dichte Eimer sind wie folgt:

  • ldpi: 0,75
  • mdpi: 1,0 (Grunddichte)
  • hdpi: 1.5
  • xhdpi: 2,0
  • xxhdpi: 3,0
  • xxxhdpi: 4.0

Um zusätzlichen Platz auf Android-Geräten zu schaffen, sollten Sie dehnbare Komponenten in beiden Richtungen (horizontal und vertikal) verwenden. Detaillierte Informationen finden Sie hier:

http://vinsol.com/blog/2014/11/20/tips-for-designers-from-de-veloper/