Mise en page relative Android et différentes tailles d'écran/appareils

Je viens d'écrire tout cela et je suis dit par cette petite barre rouge que je ne peux pas poster des images, ou plus de deux liens. Donc, si vous pouviez faire référence à this Imgur album, ce serait génial. Je vous remercie.Mise en page relative Android et différentes tailles d'écran/appareils

Je suis relativement nouveau ici et encore plus récent pour la programmation Android. J'essaie d'écrire une application qui met l'accent sur l'attrait visuel plus que sur l'attrait fonctionnel. Ce n'est pas une tâche ou un travail lié, c'est juste quelque chose que je veux essayer.

J'ai donc atteint un barrage routier. Je suis en train de discuter avec la mise en page de certaines boîtes TextView lorsqu'il est dans différents émulateurs et dispositifs. J'ai lu this mais c'est assez long et ça ne semble pas résoudre mon problème et honnêtement, c'est juste au dessus de ma tête.

Alors, voici mon problème.

J'ai quelques TextView boîtes et je les layout attributs XML, et dans la fenêtre de conception d'un dispositif maquette Nexus 4 en studio Android, il ressemble à ceci (Image 1)

Le code ressemble à ceci :

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/anger" 
    android:id="@+id/angertv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_centerVertical="true" 
    android:layout_alignParentEnd="true" 
    android:layout_marginEnd="36dp"/> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/happiness" 
    android:id="@+id/happinesstv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_centerVertical="true" 
    android:layout_alignParentStart="true" 
    android:layout_marginStart="34dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/fear" 
    android:id="@+id/feartv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_alignParentTop="true" 
    android:layout_alignParentEnd="true" 
    android:layout_marginTop="165dp" 
    android:layout_marginEnd="100dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/sadness" 
    android:id="@+id/sadnesstv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentStart="true" 
    android:layout_marginBottom="165dp" 
    android:layout_marginStart="66dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/surprise" 
    android:id="@+id/surprisetv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_alignParentTop="true" 
    android:layout_alignParentStart="true" 
    android:layout_marginTop="165dp" 
    android:layout_marginStart="60dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/disgust" 
    android:id="@+id/disgusttv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentEnd="true" 
    android:layout_marginBottom="165dp" 
    android:layout_marginEnd="74dp" />

J'ai utilisé les bordures parentales pour positionner les 6 mots sur l'écran des périphériques. Mais quand vient le temps de l'exécuter, il ressemble à ceci (Image 2) sur un écran d'émulateur Nexus 5, et quand sur un vrai HTC One m8, il ressemble à ceci (Image 3).

J'essayer quelque chose comme ceci:

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/center" 
    android:layout_centerHorizontal="true" 
    android:layout_centerVertical="true" /> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/anger" 
    android:id="@+id/angertv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_centerVertical="true" 
    android:layout_toEndOf="@+id/center" 
    android:layout_marginStart="70dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/happiness" 
    android:id="@+id/happinesstv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_centerVertical="true" 
    android:layout_toStartOf="@+id/center" 
    android:layout_marginEnd="67dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/fear" 
    android:id="@+id/feartv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_above="@+id/center" 
    android:layout_toEndOf="@+id/center" 
    android:layout_marginBottom="67dp" 
    android:layout_marginStart="30dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/sadness" 
    android:id="@+id/sadnesstv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_below="@+id/center" 
    android:layout_toStartOf="@+id/center" 
    android:layout_marginTop="68dp" 
    android:layout_marginEnd="12dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/surprise" 
    android:id="@+id/surprisetv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_above="@+id/center" 
    android:layout_toStartOf="@+id/center" 
    android:layout_marginBottom="67dp" 
    android:layout_marginEnd="10dp" /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/disgust" 
    android:id="@+id/disgusttv" 
    android:textSize="28sp" 
    android:textStyle="bold" 
    android:typeface="serif" 
    android:textColor="#FFFFFF" 
    android:layout_below="@+id/center" 
    android:layout_toEndOf="@+id/center" 
    android:layout_marginTop="68dp" 
    android:layout_marginStart="16dp" />

J'utilise un TextView supplémentaire (center a identifié) qui est aligné au centre du dispositif, qui est vide et l'utiliser pour aligner la autres vues avec du texte dedans. Ce sont les résultats.

window Nexus 4: (Image 4)

Nexus 5 émulateur: (image 5)

HTC One m8: (image 6)

Il est préférable, mais pas tout à fait. Idéalement, les mots devraient rester dans un endroit à l'intérieur des tranches de tarte que j'ai faites. J'ai regardé autour mais rien ne semble spécifique, et puisque je suis un débutant à tout ceci, je ne peux pas sembler extrapoler des réponses de peuples à d'autres questions qui sont peut-être semblables mais pas tout à fait comme cette situation.

Si quelqu'un pouvait m'expliquer comment je pouvais résoudre ce problème, ou me diriger dans la bonne direction, je serais très reconnaissant. Je vous remercie.

Source

2016-04-01 skwear

est le pâté en croûte et de l'image? – gaara87

Un autre travail possible consiste à créer un shaperawable dans un fichier xml et à l'utiliser comme arrière-plan pour votre mot. – gaara87

Si vous voulez que cela corresponde à tous les périphériques, vous ne devez pas utiliser les valeurs de positionnement absolues 'marginTop =" 68dp " 'car ils vont changer en fonction de la taille de l'écran et la résolution de l'appareil. Avez-vous essayé d'avoir une fissure à ce sujet sans utiliser des tailles absolues? – blueprintChris

Vous pouvez utiliser @dimen différents fichiers dimen afin que les différentes tailles d'écran aient des tailles de police différentes.

android:textSize="@dimen/text_28"

ont les valeurs de dimen dans différents répertoires:

res/valeurs/dimen.xml

<dimen name="text_28">28sp</dimen>

res/valeurs 600dp/dimen.xml

<dimen name="text_28">22sp</dimen>

etc.

Vous devrez jouer avec des tailles de police différentes et des tailles d'écran, mais vous devriez être en mesure de trouver quelque chose qui fonctionne.

http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali

Et cette page des paramètres de l'appareil populaire: https://design.google.com/devices/

Source

2016-04-01 20:55:38

Merci pour votre réponse Cory. Après quelques considérations, je pense que je vais changer ces titres en chemins SVG et les définir. Après tout, ces titres sont plus visuellement motivés et ne sont pas vraiment fonctionnels. Je vais certainement essayer ça si ça ne marche pas. Merci beaucoup. – skwear

Vous êtes les bienvenus. La vue SVG ou personnalisée fonctionnera probablement encore mieux. Bonne chance! –

Mise en page relative Android et différentes tailles d'écran/appareils

Répondre

Questions connexes