Largeur en pourcentage dans un RelativeLayout

Je travaille sur une mise en page de formulaire pour une connexion Activitydans mon application Android. L'image ci-dessous est à quoi je veux ressembler:

J'ai pu réaliser cette disposition avec le XML suivant . Le problème est que c'est un peu hackish. J'ai dû coder en dur une largeur pour l'hôte EditText. Plus précisément, je devais préciser:

android:layout_width="172dp" 

J'aimerais vraiment donner un pourcentage de largeur à l'hôte et au port EditText. (Quelque chose comme 80% pour l'hôte, 20% pour le port.) Est-ce possible? Le XML suivant fonctionne sur mon Droid, mais il ne semble pas fonctionner pour tous les écrans. J'aimerais vraiment une solution plus robuste.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:paddingLeft="15dp"
        android:paddingTop="0dp"
        android:text="host"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:layout_toRightOf="@+id/host_input"
        android:paddingTop="0dp"
        android:text="port"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="172dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@id/host_input"
        android:background="@android:drawable/editbox_background"
        android:inputType="number" />

    <TextView
        android:id="@+id/username_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/host_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="username"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/username_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/password_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="password"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="15dp"
        android:scaleType="fitStart"
        android:src="@drawable/home" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="   login   "
        android:textSize="18sp" >
    </Button>

</RelativeLayout>

Vous recherchez l' android:layout_weightattribut. Il vous permettra d'utiliser des pourcentages pour définir votre mise en page.

Dans l'exemple suivant, le bouton gauche utilise 70% de l'espace et le bouton droit 30%.

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

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

Cela fonctionne de la même manière avec n'importe quel type de vue, vous pouvez remplacer les boutons par du EditText pour répondre à vos besoins.

Assurez - vous de régler la layout_widthà 0dpou vos points de vue ne peuvent pas être mis à l' échelle correctement.

Notez que la somme de poids n'a pas à être égale à 1, je trouve cela plus facile à lire comme ça. Vous pouvez régler le premier poids sur 7 et le second sur 3 et cela donnera le même résultat.

Cela ne répond pas tout à fait à la question d'origine, qui concernait une répartition 70/30, mais dans le cas particulier d'une répartition 50/50 entre les composants, il existe un moyen: placez une jambe invisible au centre et utilisez-la pour positionner le deux composantes d'intérêt.

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

Comme il s'agit d'un cas assez courant, cette solution est plus qu'une curiosité. C'est un peu un hack mais efficace car le support vide de taille zéro devrait coûter très peu.

En général, cependant, il est préférable de ne pas trop attendre des mises en page Android d'origine ...

Mise à jour 1

Comme indiqué par @EmJiHash PercentRelativeLayout est déconseillé au niveau API 26.0.0

Ci-dessous, citant un commentaire Google:

Cette classe a été déconseillée au niveau API 26.0.0. envisagez plutôt d'utiliser ConstraintLayout et les dispositions associées. Ce qui suit montre comment répliquer la fonctionnalité des dispositions de pourcentage avec un ConstraintLayout

Google a introduit une nouvelle API appelée android.support.percent

Ensuite, vous pouvez simplement spécifier le pourcentage à prendre par vue

Ajouter une dépendance de compilation comme

implementation 'com.android.support:percent:22.2.0

en ce que PercentRelativeLayout est ce que nous pouvons faire une mise en page en pourcentage

 <android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

Vous ne pouvez pas utiliser de pourcentages pour définir les dimensions d'une vue dans un RelativeLayout. La meilleure façon de le faire est d'utiliser la mise en page linéaire et les poids, ou une mise en page personnalisée.

Vous pouvez jeter un œil à la nouvelle bibliothèque de support de pourcentage.

compile 'com.android.support:percent:22.2.0'

docs

échantillon

Vous pouvez utiliser PercentRelativeLayout , il s'agit d'un ajout récent non documenté à la bibliothèque de support de conception , qui permet de spécifier non seulement les éléments les uns par rapport aux autres, mais également le pourcentage total de l'espace disponible.

Sous-classe de RelativeLayout qui prend en charge les dimensions et les marges basées sur un pourcentage. Vous pouvez spécifier une dimension ou une marge enfant en utilisant des attributs avec le suffixe "Pourcentage".

<android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
  <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_widthPercent="50%"
      app:layout_heightPercent="50%"
      app:layout_marginTopPercent="25%"
      app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>

Le package Percent fournit des API pour prendre en charge l'ajout et la gestion du pourcentage dimensions basées sur un dans votre application.

Pour l'utiliser, vous devez ajouter cette bibliothèque à votre liste de dépendances Gradle :

dependencies {
    compile 'com.android.support:percent:22.2.0'//23.1.1
}

J'ai résolu ce problème en créant une vue personnalisée:

public class FractionalSizeView extends View {
  public FractionalSizeView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public FractionalSizeView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width * 70 / 100, 0);
  }
}

C'est une jambe invisible que je peux utiliser pour aligner d'autres vues dans RelativeLayout.

Mise à jour

Comme indiqué par @EmJiHash PercentRelativeLayout et PercentFrameLayout est déconseillé au niveau API 26.0.0

Envisagez d'utiliser ConstraintLayout

Google a introduit une nouvelle API appelée android.support.percent

1) PercentRelativeLayout

2) PercentFrameLayout

Ajouter une dépendance de compilation comme

compile 'com.android.support:percent:23.1.1'

Vous pouvez spécifier la dimension en pourcentage afin de bénéficier à la fois de l'avantage RelativeLayoutet du pourcentage

 <android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

Étant donné que PercentRelativeLayout a été déconseillé dans 26.0.0 et que les présentations imbriquées comme LinearLayout dans RelativeLayout ont un impact négatif sur les performances ( Comprendre les avantages de ConstraintLayout performances ), la meilleure option pour atteindre un pourcentage de largeur est de remplacer votre RelativeLayout par ConstraintLayout.

Cela peut être résolu de deux manières.

SOLUTION # 1 Utilisation de directives avec pourcentage de décalage

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

</android.support.constraint.ConstraintLayout>

SOLUTION # 2 Utilisation d'une chaîne avec une largeur pondérée pour EditText

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintHorizontal_weight="0.2"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toRightOf="@+id/host_input"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

Dans les deux cas, vous obtenez quelque chose comme ça

PercentRelativeLayout est obsolète par rapport à la révision 26.0.0 de la bibliothèque de support.

Google a introduit une nouvelle mise en page appelée ConstraintLayout .

Ajoutez la bibliothèque en tant que dépendance dans votre fichier build.gradle au niveau du module:

     dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
      }

ajoutez simplement un fichier de mise en page:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>

Contraintes

Les contraintes vous aident à garder les widgets alignés. Vous pouvez utiliser des ancres, telles que les poignées de contrainte illustrées ci-dessous, pour déterminer les règles d'alignement entre divers widgets.

1. Wrap Content: La vue s'agrandit selon les besoins pour s'adapter à son contenu.
2. Match Constraints: La vue s'élargit selon les besoins pour répondre à la définition de ses contraintes après prise en compte des marges. Cependant, si la dimension donnée n'a qu'une seule contrainte, la vue se développe pour s'adapter à son contenu. L'utilisation de ce mode sur la hauteur ou la largeur vous permet également de définir un rapport de taille.
3. Fixed: Vous spécifiez une dimension spécifique dans la zone de texte ci-dessous ou en redimensionnant la vue dans l'éditeur.
4. Spread: Les vues sont réparties uniformément (après prise en compte des marges). C'est la valeur par défaut.
5. Spread inside: La première et la dernière vue sont apposées sur les contraintes à chaque extrémité de la chaîne et les autres sont réparties uniformément.
6. Weighted: Lorsque la chaîne est définie pour s'étendre ou s'étendre à l'intérieur, vous pouvez remplir l'espace restant en définissant une ou plusieurs vues pour qu'elles correspondent aux contraintes (0dp). Par défaut, l'espace est réparti uniformément entre chaque vue définie pour "correspondre aux contraintes", mais vous pouvez attribuer un poids d'importance à chaque vue à l'aide des attributs layout_constraintHorizontal_weight et layout_constraintVertical_weight. Si vous connaissez layout_weight dans une mise en page linéaire, cela fonctionne de la même manière. Ainsi, la vue avec la valeur de poids la plus élevée obtient le plus d'espace; les vues qui ont le même poids obtiennent la même quantité d'espace.
7. Packed: Les vues sont regroupées (après prise en compte des marges). Vous pouvez ensuite ajuster le biais de la chaîne entière (gauche / droite ou haut / bas) en modifiant le biais de vue de tête de la chaîne.
8. Center Horizontally or Center Vertically: Pour créer rapidement une chaîne de vues, sélectionnez-les toutes, cliquez avec le bouton droit sur l'une des vues, puis sélectionnez Centrer horizontalement ou Centrer verticalement, pour créer une chaîne horizontale ou verticale
9. Baseline alignment: Aligner la ligne de base de texte d'une vue sur la ligne de base de texte d'une autre vue.
10. Constrain to a guideline: Vous pouvez ajouter une ligne directrice verticale ou horizontale à laquelle vous pouvez contraindre les vues, et la ligne directrice sera invisible pour les utilisateurs de l'application. Vous pouvez positionner la ligne directrice dans la présentation en fonction des unités dp ou du pourcentage, par rapport au bord de la présentation.
11. Adjust the constraint bias: Lorsque vous ajoutez une contrainte des deux côtés d'une vue (et que la taille de la vue pour la même dimension est "fixe" ou "envelopper le contenu"), la vue devient centrée entre les deux contraintes avec un biais de 50% par défaut. Vous pouvez ajuster le biais en faisant glisser le curseur de biais dans la fenêtre Propriétés
12. Set size as a ratio: Vous pouvez définir la taille de la vue à un rapport tel que 16: 9 si au moins une des dimensions de la vue est définie sur "match contraintes" (0dp).

Vous pouvez en savoir plus sur le doc officiel .

Vous pouvez le faire via des pondérations de mise en page. Un poids dicte la répartition des parties non réclamées de l'écran. Donnez à chaque EditText une layout_width de 0 et un poids proportionnel. C'est-à-dire, donnez à l'un un poids de 2 et l'autre un poids de 1 si vous voulez que le premier occupe deux fois plus d'espace.

Chose intéressante, en s'appuyant sur la réponse de @olefevre, on peut non seulement faire des mises en page 50/50 avec des "entretoises invisibles", mais toutes sortes de mises en page impliquant des pouvoirs de deux.

Par exemple, voici une disposition qui coupe la largeur en quatre parties égales (en fait trois, avec des poids de 1, 1, 2):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/strut"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/strut" >

        <View
            android:id="@+id/left_strut"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/strut"
            android:layout_centerHorizontal="true"
            android:background="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/left_strut"
            android:text="Far Left" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/left_strut"
            android:text="Near Left" />
    </RelativeLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right" />

</RelativeLayout>

Il vous suffit de placer vos deux hôtes textView et port dans une horizontale linéaire indépendante et d'utiliser Android: layout_weight pour faire le pourcentage

Vérifiez https://github.com/mmin18/FlexLayout que vous pouvez utiliser pour cent ou expression java directement dans la mise en page XML.

<EditText
    app:layout_left="0%"
    app:layout_right="60%"
    app:layout_height="wrap_content"/>
<EditText
    app:layout_left="prev.right+10dp"
    app:layout_right="100%"
    app:layout_height="wrap_content"/>