ConstraintLayout: comment faire pour avoir une vue la moitié de la largeur de l'écran et centrée?

TD;DR
Le point de vue de la largeur doit être exactement la moitié de l'écran, et être centré. À L'Aide De ConstraintLayout.

Notez que la vue n'a pas de largeur intérieure.

<View android:background="#ff0000" ... />

Question d'origine
J'aimerais réaliser une mise en page où une taille d'affichage est la moitié de la taille de l'écran, et centré horizontalement.

Quelque chose comme ceci: |--vue--|

Je ne peux pas trouver un chemin à l'aide ConstraintLayout. Le meilleur que j'ai trouvé est d'utiliser app:layout_constraintHorizontal_weight="1" sur 2 fausses vues positionné au fond à gauche et de plein droit, respectivement, et app:layout_constraintHorizontal_weight="1.5" sur mon point de vue.

Une meilleure façon ?

Eh bien comme je l'ai mentionné une solution à l'aide de xml et de 3 points de vue dans la question, je suppose que vous seriez assez intelligent pour en déduire que "mieux" signifie "moins de code" de 3 lignes de xml. Je supposés mal et permettra d'améliorer ma prochaine question. ty pour essayer de répondre.

OriginalL'auteur Softlion | 2017-08-12

android android-constraintlayout

Avec la version bêta, vous pouvez utiliser le pourcentage largeurs. Si vous ne pouvez pas utiliser la version bêta, vous pouvez employer deux verticales directives: l'une à 25% de la largeur de l'écran et l'autre à 75% de la largeur. Le point de vue avec une largeur de 0dp serait soumise à des contraintes entre ces deux lignes directrices. Ce programme d'installation va vous donner un point de vue qui est de 1/2 de la largeur de l'écran et également centrée.

Le code XML suivant illustre les deux moyens, à l'aide de la ConstraintLayout version beta et la seconde à l'aide de fonctionnalités disponibles dans la version de production actuelle.

ConstraintLayout: comment faire pour avoir une vue la moitié de la largeur de l'écran et centrée?
XML de Mise en page

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


    <View
        android:id="@+id/viewTop"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />


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

    <View
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toStartOf="@id/guidelineRight"
        app:layout_constraintStart_toEndOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/viewTop" />

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

</android.support.constraint.ConstraintLayout>

Savez-vous pourquoi ils ne font pas la mise en place d'une contrainte de mise en page comme Apple l'a fait sur iOS et Mac ? Il ne devrait pas être si difficile que ça...
Tout d'abord, il n'est pas facile, alors ne dis pas des choses comme “Il ne devrait pas être trop dur”, sauf si vous êtes prêt à mettre en œuvre vous-même; aller travailler pour Google et de le faire. Deuxièmement, si vous avez de l'expérience de mise en page automatique, vous devez savoir comment difficile il a été (et continue à l'être) pour les utilisateurs; même les utilisateurs expérimentés, il a pris un morceau de temps pour bien le comprendre (si jamais) et, plus important, dans une pratique quotidienne, mise en page automatique peut être très difficile à déboguer, en particulier si les dispositions sont compliquées. CL fait des choses mieux que les autres, et vice-versa.
La version bêta sera jamais sortir ?
Je serais heureux de mettre en œuvre ce que c'est facile. Cl n'a rien de mieux que de AL lol, ou peut-être seulement la vitesse pour calculer la mise en page. C'est une simple liste d'équations qui se transforme en une matrice qui peut être facilement résolu.

OriginalL'auteur Cheticamp

9

Comme des "ConstraintLayout1.1.0-beta1" vous pouvez utiliser pour cent pour définir les largeurs & de la hauteur.
```
android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"
```
Cela permettra de définir les avec 40% de la largeur de l'écran. Une combinaison de cela et de lignes directrices pour cent vous permettent de créer n'importe quel pourcentage de mise en page que vous voulez.

ty, mais la question est la largeur de la vue à exactement la moitié de la largeur de l'écran. Btw, vous pouvez utiliser la "société mère" au lieu de "@+id/activity_main" dans votre exemple.
Veuillez vérifier mes mises à jour répondre
Ok, mais que faire si je ne peux pas utiliser une composante bêta ?

OriginalL'auteur shahid17june

essayer cette verticalement diviser

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/clPart1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/clPart2">


        </android.support.constraint.ConstraintLayout>

        <android.support.constraint.ConstraintLayout
            android:id="@+id/clPart2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/black"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/clPart1"
            app:layout_constraintRight_toRightOf="parent">


        </android.support.constraint.ConstraintLayout>
    </android.support.constraint.ConstraintLayout>

OriginalL'auteur Karthik Kompelli

0

Résultat

Ce que vous avez à faire est de:

Il suffit d'ajouter ce dans votre XML
```
    <View
        android:id="@+id/viewV1"
        android:layout_height="match_parent"
        android:background="#ff0000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        />
```
Et ce dans votre java.

D'abord importer ces.
```
    import android.graphics.Point;
    import android.support.constraint.ConstraintLayout;
    import android.view.Display;
    import android.view.View;
```
Puis ajouter ces lignes dans le onCreate de votre fichier java.
```
    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    int width1 = size.x;
    //int height = size.y;
    View v =  findViewById(R.id.viewV1);        
    ConstraintLayout.MarginLayoutParams params = (ConstraintLayout.MarginLayoutParams) v.getLayoutParams();
    params.width = width1/2; params.leftMargin = width1/4; params.rightMargin = width1/4;
    v.setLayoutParams(params);
```
Vous pouvez également régler la Hauteur à l'aide de cette méthode. Et Oui, cette Vue utilise la moitié de la largeur de l'écran quelle que soit la taille de l'écran est.

Que vous ne voulez pas le faire via java. Ajoutez ceci à votre XML.
```
<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline5"
        app:layout_constraintGuide_begin="411dp"
        android:orientation="vertical"
         />
```
Par la sélection de ce, de déplacement de cette directive à la fin de l'écran et notez cette valeur app:layout_constraintGuide_begin="411dp". Maintenant, quelle que soit la valeur c'est de votre écran de largeur.

Ajouter marginStart et marginEnd à votre point de vue en tant que 411/4 dp. (calculer cette valeur, XML ne va pas le faire).

Cela rendra votre point de vue dans le centre avec la moitié de la largeur en tant que parent.

Rappelez-vous de ne pas chaque écran est 411dp. Ce ne sera pas de travail pour tous les téléphones de la taille de l'écran.

Ty, mais il ne répond pas à la question "afficher la taille doit être de la moitié de la taille de l'écran". Il a exactement la moitié de la largeur de l'écran. La vue n'est pas un affichage de texte.
Essayez d'utiliser votre solution avec <View android:background="#ff0000" />: cette vue utilise la moitié de la largeur de l'écran ? Non 🙂
Je ne veux pas utiliser java comme il ne fonctionne pas lors de la modification de l'orientation du périphérique.
Je l'ai découvert en combinant beaucoup de réponses et de solutions et de mon propre cerveau puissance et à 20 minutes de mon temps pour la recherche de ce genre de choses. Merci de voter si les œuvres dont il ne en passant. Aussi, le code JAVA que j'ai partagée est aussi de travailler exactement comme vous le souhaitez lors de la modification de l'orientation.
Ainsi la question demande une solution qui est plus simple que celui exposé. Le vôtre est plus compliqué.

OriginalL'auteur Lalit Singh Fauzdar

Avec ConstraintLayout, vous pouvez centrer une vue à l'écran comme ceci:

<?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">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Mise à jour de votre gradle à la dernière version de ConstraintLayout:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

ConstraintLayout: comment faire pour avoir une vue la moitié de la largeur de l'écran et centrée?

OriginalL'auteur live-love

Vous devez vous connecter pour publier un commentaire.