0

Ich habe seit Wochen versucht, das Problem zu lösen, wie der Text meiner Benutzeroberfläche alle Arten unterschiedlicher Geräteauflösungen und Dichten ohne Erfolg unterstützt. Nach dem Lesen der Entwickler Anleitung und mehrere Stack-Beiträge, habe ich eine Menge Dinge ausprobiert. Für den Anfang, ich die layout directories erstellt, die Sie im Bild unten (layout-sw320dp, layout-sw360dp und layout-sw400dp) sehen:Anpassen von Text zur Unterstützung mehrerer Bildschirme

layout dirs

Nun, wenn ich auf ein paar verschiedenen emulators meine App testen, die UI Text scheint gut, aber wenn meine Alpha-Tester laden Sie die App auf ihren Handys, die UI Text wird verlegt. Hier ist der Blick, den ich auf alle Geräte zu erreichen versuchen:

desired look

Below Ich addiere 7 verschiedene Geräte, die der Alpha-Tester verwenden:

1) S8 + (2960x1440) (529dpi)

2) prime j7 Samsung Galaxy (1920x1080) (401dpi)

3) S8 + (1440x2960) (~ 529dpi)

4) Samsun g A3 (960x540) (245dpi)

5) Motor z play Droid (1920x1080) (403 dpi)

6) Samsung Galaxy S7 (1440x2560) (577dpi)

7) Sony Xperia xa (720x1280)

Nachdem er mit ihnen in Verbindung zu setzen, das sind die Bilder, die sie mir zurückgeschickt (nicht jeder noch beantwortet hat):

2) 2nd

5) 5th

6) 6th

7) 7th

Ich habe auch diese Codezeilen, die mich überprüfen helfen, ob das Telefon eine s8 oder s8 + (da sie benötigen unterschiedliche Layout-Stile aufgrund ihr Verhältnis 18: 9). Könnte das Probleme verursachen?

 // Get the user's phone's height and width 
    DisplayMetrics dm = new DisplayMetrics(); 
    getWindowManager().getDefaultDisplay().getMetrics(dm); 

    // screen size in inches 
    int height = dm.heightPixels; 
    int width = dm.widthPixels; 
    double x = Math.pow(width/dm.xdpi,2); 
    double y = Math.pow(height/dm.ydpi,2); 
    double screenInches = Math.sqrt(x+y); 
    Log.d("SIZE_INCHES", screenInches + "\""); 

    // If it's an S8 or S8+ choose the appropriate layout 
    if (height > 1920 && height <= 2220) { // FHD+ (2220x1080) 
     if(screenInches <= 6.0) { 
      setContentView(R.layout.cardview_s8); //s8 
     } else { 
      setContentView(R.layout.cardview_s8_plus); // s8+ 
     } 
    } else if (height > 2220 && height <= 2960) { // S8 WQHD+ (2960x1440) 
     if(screenInches <= 6.0) { 
      setContentView(R.layout.cardview_s8_wqhd_res); 
     } else { 
      setContentView(R.layout.cardview_s8_plus_wqhd); // s8+ 
     } 
    } else { // otherwise choose the appropriate layout for the user's phone based on it's swdp qualifier 
     setContentView(R.layout.cardview); 
    } 

Hier ist mein Layout (Design-Ansicht) Referenz:

layout

Und hier ist der XML-Code:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@drawable/card_view_bg" 
tools:layout_editor_absoluteY="25dp"> 

<ImageView 
    android:id="@+id/cardArtImageView" 
    android:layout_width="400dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="8dp" 
    android:layout_marginStart="8dp" 
    android:layout_weight="1" 
    android:adjustViewBounds="true" 
    android:scaleType="fitCenter" 
    app:layout_constraintBottom_toTopOf="@+id/cardDetailsImageView" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<ImageView 
    android:id="@+id/cardDetailsImageView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:adjustViewBounds="true" 
    android:cropToPadding="false" 
    android:scaleType="fitXY" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:srcCompat="@drawable/card_details_box" /> 

<TextView 
    android:id="@+id/leaderSkillDesc" 
    android:layout_width="300dp" 
    android:layout_height="19dp" 
    android:layout_marginBottom="8dp" 
    android:layout_marginStart="40dp" 
    android:layout_marginTop="8dp" 
    android:ellipsize="marquee" 
    android:focusable="true" 
    android:focusableInTouchMode="true" 
    android:fontFamily="monospace" 
    android:marqueeRepeatLimit="marquee_forever" 
    android:scrollHorizontally="true" 
    android:singleLine="true" 
    android:textAlignment="viewStart" 
    android:textColor="@color/white" 
    android:textSize="13sp" 
    android:textStyle="italic" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintHorizontal_bias="0.496" 
    app:layout_constraintStart_toStartOf="@+id/cardDetailsImageView" 
    app:layout_constraintTop_toTopOf="@+id/guideline8" 
    app:layout_constraintVertical_bias="0.626" /> 

<TextView 
    android:id="@+id/superAttackDesc" 
    android:layout_width="314dp" 
    android:layout_height="21dp" 
    android:layout_marginBottom="8dp" 
    android:layout_marginStart="40dp" 
    android:layout_marginTop="8dp" 
    android:ellipsize="marquee" 
    android:focusable="true" 
    android:focusableInTouchMode="true" 
    android:fontFamily="monospace" 
    android:marqueeRepeatLimit="marquee_forever" 
    android:scrollHorizontally="true" 
    android:singleLine="true" 
    android:textAlignment="viewStart" 
    android:textColor="@android:color/white" 
    android:textSize="13sp" 
    android:textStyle="italic" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/guideline9" /> 

<TextView 
    android:id="@+id/superAttackTitle" 
    android:layout_width="250dp" 
    android:layout_height="15dp" 
    android:layout_marginBottom="8dp" 
    android:layout_marginEnd="8dp" 
    android:layout_marginStart="8dp" 
    android:fontFamily="monospace" 
    android:textAlignment="viewStart" 
    android:textColor="@android:color/holo_blue_light" 
    android:textSize="14sp" 
    android:textStyle="bold" 
    app:layout_constraintBottom_toTopOf="@+id/superAttackDesc" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toStartOf="parent" /> 

<android.support.constraint.Guideline 
    android:id="@+id/guideline8" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    app:layout_constraintGuide_begin="443dp" /> 

<android.support.constraint.Guideline 
    android:id="@+id/guideline9" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    app:layout_constraintGuide_begin="596dp" /> 

</android.support.constraint.ConstraintLayout> 

Was ich hier falsch mache? Ich war noch nie in meinem Leben in der Android-Entwicklung mehr verwirrt ... Gibt es einen expliziteren Weg für diesen Job? Brauche ich mehr layout dirs oder etwas? Sind diese 3 layout dirs korrekt?Bitte, wenn du etwas weißt, was mir helfen könnte, poste es unten.

PS: Ich verwende ein Constraint-Layout für diesen Teil der Benutzeroberfläche, könnten die Einschränkungen das Problem verursachen?

+2

Der gesamte Punkt von Layout-Dirs ist nicht zu tun, was Sie mit mehreren Aufrufen von SetContentView tun. SO bist du definitiv irgendwo verwirrt. Um sogar jede Hilfe zu geben, die Sie benötigen, um eine Menge Details über genau, wie Sie die Zeichnung tun zu geben - wie viele Ansichten, was sind Bitmaps und was ist offen gl, welche/wie bestimmte Bitmaps gestreckt werden, um den Bildschirm genau und welche passen sind nicht, etc. Wenn Sie für ein hochgradig grafisches Design wie dieses ein Pixel-perfektes Layout für alle Geräte suchen, müssen Sie es sich genau überlegen. –

+0

@GabeSechan sind Bitmaps in meinem Fall wichtig, da das Problem mit dem Text ist? Und ja, ich bin ziemlich sicher, dass ich im Allgemeinen mit dieser ganzen Sache verwirrt bin. –

+0

Sie schreiben den Text über Bitmaps. Wenn du mit nur einem riesigen Bild davonkommen willst, schreibst du Text - ja, du wirst eine schlimme Zeit haben. –

Antwort

0

Das Problem wurde von @Gabe Sechan gelöst (für jeden, der zurück überprüft), überprüfen Sie die Kommentare unter dem Beitrag!

-1

Es sieht so aus, als ob Sie ein Hintergrundbild haben und Sie versuchen, Text in der richtigen Position über diesem Hintergrundbild zu platzieren. Kannst du das Hintergrundbild aufteilen und die Teile als Hintergrundbild verwenden? Besser noch eine Recycler-Ansicht verwenden? Ich erkenne jetzt, dass die Teile möglicherweise nicht richtig für das gesamte Bild ausgerichtet sind. Ist der Künstler verfügbar? Viel Glück für Sie, ich weiß, wie schwierig es ist, Dinge auf jedem Gerät zum Laufen zu bringen. Sie scheinen ein gutes Verständnis des Konzepts zu haben

+0

Wie würde ein RecyclerView ihm helfen? Es gibt keine wiederholten Elemente, die recycelt werden können. –

+0

https://stackoverflow.com/questions/26245139/how-to-create-recyclerview-with-multiple-view-type – Pomagranite

+0

Ja, Sie können mit mehreren Ansichtstypen erstellen - aber wenn es keine Wiederholung gibt, gibt es nichts zu sein gewonnen durch Verwendung einer Recycler-Ansicht. Es gibt nichts, das im Design eine Recycler-Ansicht verlangt. Wenn Sie vorschlagen, RecyclerView für seine Layout-Fähigkeit zu verwenden, ist das der schlechteste Einsatz, den ich je gehört habe, vorgeschlagen. –

Verwandte Themen