Combinaison de contraintes de mise en page SPREAD et PACKED

Question

Je veux créer les éléments suivants ConstraintLayout :

En d'autres termes, je veux avoir une chaîne, où tous les éléments sont spread et seulement les deuxième et troisième sont emballé . Je peux le faire en supprimant troisième élément de la chaîne et y appliquer le code suivant :

app:layout_constraintTop_toBottomOf="@+id/second_element"

il fonctionne comme prévu.

MAIS

Dans le cas d'un petit appareil, où cette chaîne est poussée ensemble, troisième élément serait au-dessus de la quatrième élément . Comme ça :

Dans ce cas, j'ai besoin qu'il soit positionné de manière uniforme :

Merci pour votre aide.

Answer 1

Essayez ça,

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:orientation="vertical">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonOne"
        android:layout_width="wrap_content"
        app:layout_constraintVertical_chainStyle="packed"
        android:layout_height="wrap_content"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toTopOf="@+id/buttonTwo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/buttonThree"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonOne" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/buttonFour"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTwo" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonFour"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/buttonFive"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonThree" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonFive"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonFour" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Les vues deux et trois pourraient être regroupées dans leur propre groupe de vues et le groupe de vues participerait à la chaîne. Cela fonctionnera, mais l'écart entre ces deux vues sera constant et pourra paraître étrange sur un petit écran si cet écart semble plus grand que l'autre.

Une autre approche consiste à supprimer le troisième élément de la chaîne, comme vous l'avez mentionné, mais à rechercher un chevauchement entre les troisième et quatrième éléments. Lorsqu'il y a un chevauchement, la chaîne peut être modifiée pour inclure tous les éléments dans un arrangement de chaîne emballée. Le code pour faire cela ressemblerait à quelque chose comme ceci :

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintLayout = findViewById<ConstraintLayout>(R.id.mainLayout)
        constraintLayout.doOnLayout {
            val tv3 = findViewById<View>(R.id.textView3)
            val tv4 = findViewById<View>(R.id.textView4)
            if (tv4.top < tv3.bottom) {
                val constraintSet = ConstraintSet()
                constraintSet.clone(constraintLayout)
                constraintSet.createVerticalChain(
                    ConstraintSet.PARENT_ID,
                    ConstraintSet.TOP,
                    ConstraintSet.PARENT_ID,
                    ConstraintSet.BOTTOM,
                    intArrayOf(
                        R.id.textView1,
                        R.id.textView2,
                        R.id.textView3,
                        R.id.textView4,
                        R.id.textView5
                    ),
                    null,
                    ConstraintSet.CHAIN_SPREAD
                )
                constraintSet.applyTo(constraintLayout)
            }
        }
    }
}

Answer 3

J'espère que ce code peut vous aider, il est réactif dans toutes les tailles d'écran des appareils. Si vous trouvez une réponse correcte, veuillez la corriger.

activité_man.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".Activity_Camera">

    <Button
        android:id="@+id/first_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#03A9F4"
        android:padding="10dp"
        android:text="1"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.20" />

    <Button
        android:id="@+id/secon_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:backgroundTint="#F44336"
        android:padding="10dp"
        android:text="2"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/first_id"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/third_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#FF5722"
        android:padding="10dp"
        android:text="3"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/secon_id"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/four_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:backgroundTint="#8BC34A"
        android:padding="10dp"
        android:text="4"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/third_id"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/five_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:backgroundTint="#673AB7"
        android:padding="10dp"
        android:text="5"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/four_id"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

J'ai résolu le problème en extrayant les 2ème et 3ème éléments dans une mise en page séparée :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout ... >

   <TextView
      android:id="@+id/second"
      app:layout_constraintTop_toTopOf="parent"
      ...
      />

  <TextView
      android:id="@+id/third"
      app:layout_constraintTop_toBottomOf="@id/second"
      ...
      />

</androidx.constraintlayout.widget.ConstraintLayout>

Et en l'incluant dans la mise en page principale. Cette disposition incluse remplacerait le 2ème et le 3ème élément. En l'ajoutant à la chaîne verticale, tout fonctionne comme prévu.