web-dev-qa-db-fra.com

Vues de groupe dans ConstraintLayout pour les traiter comme une vue unique

J'ai besoin d'appliquer quelques contraintes à un groupe de vues dans ConstraintLayout . Je souhaite regrouper ces vues et continuer à les modifier pendant que le concepteur de mise en page dans Android studio les traite comme une seule vue. Y a-t-il un moyen de le faire sans envelopper les vues avec un ViewGroup (une autre mise en page)? Si un tel wrapper est nécessaire, peut-être y a-t-il une mise en page de wrapper qui vient avec ConstraintLayout et permet de regrouper des objets sans créer de mises en page lourdes comme RelativeLayout?

androidandroid-studioandroid-constraintlayoutconstraint-layout-chains
30
Yury Fedorov

Chaînes de contrainte

Les développeurs Android ont récemment publié une nouvelle version de ConstraintLayout ( 1.0.2 à partir d'aujourd'hui). Cette version contient une nouvelle fonctionnalité majeure - Chaînes , qui nous permet de regrouper les vues dans ConstraintLayout .

Les chaînes offrent un comportement de type groupe sur un seul axe (horizontalement ou verticalement).

Un ensemble de widgets sont considérés comme une chaîne s'ils sont liés entre eux via une connexion bidirectionnelle

Une fois qu'une chaîne est créée, il y a deux possibilités:

  • Répartissez les éléments dans l'espace disponible
  • Une chaîne peut également être "emballée", dans ce cas les éléments sont regroupés

Actuellement, vous devez utiliser la dépendance Gradle suivante pour utiliser cette fonctionnalité (car il s'agit d'un alpha):

 compile 'com.Android.support.constraint:constraint-layout:1.0.0-alpha9'

Ici vous pouvez trouver la dernière version de ConstraintLayout à utiliser dans vos projets.

Jusqu'à Android Studio 2. , Android Le concepteur d'interface utilisateur de Studio ne prenait pas en charge la création de chaînes car vous ne pouviez pas y ajouter de contraintes bidirectionnelles. La solution était de créer ces contraintes en XML manuellement, comme mentionné par TranslucentCloud . À partir de Android Studio 2.3 (actuellement uniquement sur le canal canari), les chaînes sont également prises en charge dans un éditeur d'interface utilisateur (comme - GoRoS mentionné dans les commentaires).

Exemple

Voici un exemple montrant comment positionner deux vues ensemble au milieu d'un écran en utilisant les chaînes ConstraintLayout et :

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


    <TextView
        Android:id="@+id/textView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginEnd="16dp"
        Android:layout_marginStart="16dp"
        Android:layout_marginTop="16dp"
        Android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintVertical_chainPacked="true"/>

    <Button
        Android:id="@+id/button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="16dp"
        Android:layout_marginEnd="16dp"
        Android:layout_marginStart="16dp"
        Android:layout_marginTop="8dp"
        Android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>
</Android.support.constraint.ConstraintLayout>

Mise à jour (janvier 2018) par @ Mateus Gondim

Dans les versions récentes, vous devez utiliser app:layout_constraintVertical_chainStyle="packed" au lieu de app:layout_constraintVertical_chainPacked="true"

31
Yury Fedorov

Vous pouvez utiliser

Android.support.constraint.Guideline

pour regrouper des éléments.

Ajoutez une ligne directrice (verticale ou horizontale), puis utilisez-la comme point d'ancrage pour les autres vues. Voici un exemple simple de centrage horizontal de deux vues de texte groupées: (montrant la vue de conception dans AS)

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<ConstraintLayout 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"

    Android:layout_width="match_parent"
    Android:layout_height="56dp"
    Android:background="@Android:color/white"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp">


    <TextView
        Android:id="@+id/top_text"
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"
        Android:background="@Android:color/holo_red_light"
        Android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        Android:text="Above"
        tools:text="Above" />

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        Android:id="@+id/bottom_text"
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"
        Android:background="@Android:color/holo_blue_bright"
        Android:textSize="16sp"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        Android:text="Below"
        tools:text="Below" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center_vertical"
        Android:text="Right vertically centered"
        Android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Right vertically centered"/>
</ConstraintLayout>
9
VonSchnauzer

Je veux juste ajouter quelques graphiques à la grande réponse acceptée. C'est très simple:

Dans la vue de conception de disposition> sélectionnez toutes les vues que vous souhaitez regrouper> cliquez dessus avec le bouton droit> Chaînes> Créer une chaîne horizontale: enter image description here

Il est également simple de les centrer:

Sélectionnez la vue head du groupe> Organize> Pack Horizontally> définissez la contrainte de début de la première vue et la contrainte de fin de la dernière vue sur leur parent : enter image description here

1
Hong