Mise en page sur le téléphone et l'émulateur tout à fait différent du concepteur

Question

J'essaie un exercice de mise en page simple, mais j'ai du mal à obtenir même une mise en page simple pour travailler.

Dans le concepteur, il est la suivante:

Mais lors de son exécution, la sortie sur un émulateur ou un téléphone réel est:

Le balisage Xml est la suivante :

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.example.hceng.myapplication.MainActivity" 
tools:layout_editor_absoluteY="81dp" 
tools:layout_editor_absoluteX="0dp"> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="E-mail:" 
    tools:layout_editor_absoluteY="52dp" 
    tools:layout_editor_absoluteX="18dp" /> 

<Button 
    android:id="@+id/button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Click Me!" 
    tools:layout_editor_absoluteX="148dp" 
    tools:layout_editor_absoluteY="96dp" /> 

<EditText 
    android:id="@+id/editText" 
    android:layout_width="266dp" 
    android:layout_height="36dp" 
    android:ems="10" 
    android:inputType="textEmailAddress" 
    tools:layout_editor_absoluteX="66dp" 
    tools:layout_editor_absoluteY="41dp" /> 

</android.support.constraint.ConstraintLayout> 

Je suis nouveau dans ce langage de balisage, mais je pensais que cela semblait assez simple avec un positionnement absolu tout au long. En tout cas, la disposition vue dans le concepteur est ce que je veux. Pourquoi ce qui précède ne fonctionne pas?

Answer 1

Selon la documentation

Lorsque vous déposez une vue dans l'éditeur de mise en page, il reste où vous laissez même si elle n'a pas de contraintes. Cependant, ceci est seulement pour faciliter l'édition; Si une vue n'a aucune contrainte lorsque vous exécutez votre mise en page sur un périphérique, elle est dessinée à la position [0,0] (coin supérieur gauche).

C'est la raison pour laquelle vous voyez correctement la disposition dans l'éditeur mais pas sur l'émulateur.

Answer 2

Vous pouvez essayer cela, sinon lié à ConstraintLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    tools:context="com.example.hceng.myapplication.MainActivity"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="12dp" 
     android:gravity="center"> 

     <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/email_tv" 
     android:text="E-mail:" /> 

     <EditText 
     android:id="@+id/editText" 
     android:layout_width="266dp" 
     android:layout_height="36dp" 
     android:ems="10" 
     android:layout_toRightOf="@+id/email_tv" 
     android:inputType="textEmailAddress" /> 
    </RelativeLayout> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Click Me!" 
     android:gravity="center" /> 
</LinearLayout> 

Answer 3

mise en page de contrainte a des limites, mais je ne suis pas sûr si la couleur est l'un d'entre eux.

Première

Vous pouvez essayer de changer la mise en page de contrainte à la mise en page de coordinateur peut-être ou disposition relative.

Si cela échoue

Peut-être, la cible SDK version dans votre Android Manifest est trop élevé, si la version cible est supérieure à la version du téléphone, il revient aux valeurs par défaut. Vous pouvez donc essayer de placer une version cible inférieure.