web-dev-qa-db-fra.com

Comment donner la couleur de fond au groupe dans Constraintlayout

J'ai groupé 3 textview dans une mise en page de contrainte. J'ai de l'expérience dans le groupe, mais ça ne marche pas.

<Android.support.constraint.Group
                    Android:id="@+id/group"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:background="@color/text_color_3"
                    app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv" />

Y a-t-il un autre moyen de le faire?.

androidconstraint-layout
4
Nauman Ash

Le groupe n'est utilisé que pour contrôler la visibilité des identifiants référencés dans app: constraint_referenced_ids. Selon la documentation . La solution consiste simplement à placer des vues dans un groupe de vues. J'ai dû mettre toutes les vues dans ConstraintLayout pour construire la visibilité + les avantages de l'enchaînement des vues dans CL.

 <Android.support.constraint.ConstraintLayout
                Android:id="@+id/area_range_constraint"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="16dp"
                visibility = "View.VISIBLE"
                >

                <TextView
                    Android:id="@+id/area_title_tv"
                    style="@style/filter_heading_style"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:text="@string/STR_AREA"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <EditText
                    Android:id="@+id/area_range_from"
                    Android:layout_width="0dp"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:layout_marginTop="8dp"
                    Android:hint="@string/STR_MIN_AREA"
                    Android:inputType="number"
                    Android:maxLength="10"
                    Android:text='@{searchQueryModel.areaMin==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMin())))}'
                    Android:textAlignment="center"
                    Android:textDirection="anyRtl"
                    Android:textSize="14sp"
                    app:layout_constraintEnd_toStartOf="@+id/textView254"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintHorizontal_chainStyle="packed"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/area_title_tv" />

                <EditText
                    Android:id="@+id/area_range_to"
                    Android:layout_width="0dp"
                    Android:layout_height="wrap_content"
                    Android:layout_marginLeft="8dp"
                    Android:layout_marginStart="8dp"
                    Android:hint="@string/STR_MAX_AREA"
                    Android:inputType="number"
                    Android:maxLength="10"
                    Android:text='@{searchQueryModel.areaMax==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMax())))}'
                    Android:textAlignment="center"
                    Android:textDirection="anyRtl"
                    Android:textSize="14sp"
                    app:layout_constraintBaseline_toBaselineOf="@+id/textView254"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/textView254" />

                <TextView
                    Android:id="@+id/textView254"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:text="@string/STR_TO"
                    Android:textColor="@color/text_color_3"
                    Android:textSize="@dimen/text_size_normal"
                    app:layout_constraintBaseline_toBaselineOf="@+id/area_range_from"
                    app:layout_constraintEnd_toStartOf="@+id/area_range_to"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/area_range_from" />

                <TextView
                    Android:id="@+id/area_range_value_tv"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginBottom="8dp"
                    Android:layout_marginLeft="8dp"
                    Android:layout_marginStart="8dp"
                    Android:layout_marginTop="8dp"
                    Android:text='@{`(` + areaUnit + `)`}'
                    Android:textColor="@color/colorPrimary"
                    Android:textSize="@dimen/text_size_normal"
                    app:layout_constraintBottom_toBottomOf="@+id/area_title_tv"
                    app:layout_constraintStart_toEndOf="@+id/area_title_tv"
                    app:layout_constraintTop_toTopOf="@+id/area_title_tv" />


            </Android.support.constraint.ConstraintLayout>
0
Nauman Ash

Selon la documentation , Group est uniquement utilisé pour contrôler la visibilité d'un ensemble de widgets. 

Vous pouvez définir l'arrière-plan sur View et limiter la vue à l'apparence souhaitée pour l'arrière-plan. 

Dans l'exemple de code ci-dessous, après avoir défini l'arrière-plan sur View avec l'ID background, j'ai contraint les côtés supérieur, gauche et droit de la vue à la parent et le bas de la vue à la dernière TextView du groupe, ce qui dans ce cas. est la TextView avec l'ID textView3. J'ai également ajouté un 16dp bottom padding à textView3 pour que l'arrière-plan ne soit pas bizarre. Vous pouvez également utiliser un Guideline for this.

Notez également que l'arrière-plan de la vue doit être ajouté avant le groupe de vues nécessitant de l'arrière-plan. S'il est placé après le groupe de vues, l'arrière-plan est dessiné sur le groupe (et ce n'est pas ce que vous voulez).

<?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:background="#444444">

    <View
        Android:id="@+id/background"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        Android:id="@+id/textView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="TextView 1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        Android:id="@+id/textView2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="TextView 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1"/>

    <TextView
        Android:id="@+id/textView3"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:paddingBottom="16dp"
        Android:text="TextView 3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"/>

</Android.support.constraint.ConstraintLayout>

J'espère que ça aide.

4
iRuth

Le groupe est utile pour la visibilité dans ConstraintLayout. ConstraintLayout est introduit pour supprimer la hiérarchie des multiples ViewGroups (Layouts). 

Nous pouvons simplement utiliser à des fins d'arrière-plan. Si vous avez simplement 3 TextView et que vous souhaitez appliquer la couleur d'arrière-plan à TextView, ne l'ajoutez pas à un ViewGroup (Layout), vérifiez simplement 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"
  xmlns:tools="http://schemas.Android.com/tools"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"
  Android:background="#AAA">

  <View
    Android:id="@+id/background"
    Android:layout_width="0dp"
    Android:layout_height="0dp"
    Android:background="#FFF"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="@+id/textView1"
    app:layout_constraintStart_toStartOf="@+id/textView1"
    app:layout_constraintTop_toTopOf="@+id/textView1" />

  <TextView
    Android:id="@+id/textView1"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_margin="8dp"
    Android:padding="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

  <TextView
    Android:id="@+id/textView2"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:padding="8dp"
    app:layout_constraintEnd_toEndOf="@+id/textView1"
    app:layout_constraintStart_toStartOf="@+id/textView1"
    app:layout_constraintTop_toBottomOf="@+id/textView1"
    tools:text="TextView" />

  <TextView
    Android:id="@+id/textView3"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:padding="8dp"
    app:layout_constraintEnd_toEndOf="@+id/textView1"
    app:layout_constraintStart_toStartOf="@+id/textView1"
    app:layout_constraintTop_toBottomOf="@+id/textView2"
    tools:text="TextView" />
</Android.support.constraint.ConstraintLayout>

Résultat:

 enter image description here

Vous pouvez trouver la source ici

1
SANAT