web-dev-qa-db-fra.com

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

TD; DR
La largeur de la vue doit correspondre exactement à la moitié de l'écran et être centrée. Utilisation de ConstraintLayout.

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

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

Question d'origine
Je voudrais réaliser une mise en page où la taille de la vue est la moitié de la taille de l'écran et centrée horizontalement.

Quelque chose comme ceci: | --view-- |

Je ne trouve aucun moyen d'utiliser ConstraintLayout. Le meilleur que j'ai trouvé est d'utiliser app:layout_constraintHorizontal_weight="1" sur 2 fausses vues positionnées respectivement à gauche et à droite et app:layout_constraintHorizontal_weight="1.5" à mon avis.

Une meilleure façon?

androidandroid-constraintlayout
14
Softlion

Avec la version bêta, vous pouvez utiliser des largeurs en pourcentage. Si vous ne pouvez pas utiliser la version bêta, vous pouvez utiliser deux directives verticales: une à 25% de la largeur de l'écran et une à 75% de la largeur. La vue avec une largeur de 0dp serait limité entre ces deux lignes directrices. Cette configuration vous donnera une vue qui est 1/2 de la largeur de l'écran et également centrée.

Le XML suivant illustre les deux façons; une utilisant la version bêta ConstraintLayout et la seconde utilisant des fonctionnalités disponibles dans la version de production actuelle.

enter image description here Disposition XML 

<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>
26
Cheticamp

Depuis "ConstraintLayout1.1.0-beta1", vous pouvez utiliser le pourcentage pour définir les largeurs et les hauteurs.

Android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

Ceci définira le avec à 40% de la largeur de l'écran. Une combinaison de cela et des directives en pourcentage vous permet de créer la mise en page en pourcentage que vous souhaitez.

15
shahid17june

essayez cette division verticale

    <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>
5
Karthik Kompelli

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>

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

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

enter image description here

1
live-love

Résultat

Ce que vous devez faire, c'est:
Ajoutez simplement ceci 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 cela dans votre Java.
Importez-les d'abord.

    import Android.graphics.Point;
    import Android.support.constraint.ConstraintLayout;
    import Android.view.Display;
    import Android.view.View;

Ajoutez ensuite ces lignes dans la fonction 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 définir 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.

Comme 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"
         />

En le sélectionnant, déplacez cette ligne directrice à la fin de l'écran et notez cette valeur app:layout_constraintGuide_begin="411dp". Quelle que soit la valeur, c'est la largeur de votre écran.

Ajoutez marginStart et marginEnd à votre vue en 411/4 dp. (calculez cette valeur, XML ne le fera pas).
Cela rendra votre vue au centre avec une demi-largeur comme parent.

N'oubliez pas que tous les écrans ne sont pas 411dp. Cela ne fonctionnera pas pour la taille d'écran de chaque téléphone.

0
Lalit Singh Fauzdar