En utilisant ConstraintLayout, puis-je obtenir la contrainte verticale pour correspondre à la largeur dynamique d'une chaîne?

Question

J'ai une grille de quatre boutons dans ma disposition. Je les ai enchaînés horizontalement, de sorte que l'espace à gauche, à droite et entre les boutons soit uniformément pondéré.

screenshot of my app's buttons

Puis-je faire les deux rangées de boutons ont la même quantité d'espace vertical entre eux il ne semble pas inégale? Je préférerais ne pas les centrer juste verticalement comme je l'ai fait pour obtenir l'espacement horizontal, ce qui fait grâce à @AdamK de ce post: Evenly spacing views using ConstraintLayout

activity_main.xml:

<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" 
    tools:context="com.jason.notifier.MainActivity" 
    tools:layout_editor_absoluteY="81dp" 
    tools:layout_editor_absoluteX="0dp"> 

    <ImageView 
     android:id="@+id/imageView3" 
     android:layout_width="388dp" 
     android:layout_height="164dp" 
     app:srcCompat="@drawable/banner" 
     android:layout_marginStart="8dp" 
     app:layout_constraintTop_toTopOf="parent" 
     android:layout_marginTop="4dp" 
     android:layout_marginLeft="8dp" 
     app:layout_constraintLeft_toLeftOf="parent" /> 

    <Button 
     android:id="@+id/testbutton" 
     android:layout_width="171dp" 
     android:layout_height="136dp" 
     android:onClick="sampleNotification" 
     android:text="Test" 
     app:layout_constraintRight_toLeftOf="@+id/settingsbutton" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginTop="8dp" 
     app:layout_constraintTop_toBottomOf="@+id/historybutton" /> 

    <Button 
     android:id="@+id/settingsbutton" 
     android:layout_width="171dp" 
     android:layout_height="136dp" 
     android:text="Settings" 
     android:onClick="settingsbutton" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/testbutton" 
     android:layout_marginTop="8dp" 
     app:layout_constraintTop_toBottomOf="@+id/pingbutton" /> 

    <Button 
     android:id="@+id/pingbutton" 
     android:layout_width="171dp" 
     android:layout_height="136dp" 
     android:onClick="pingbutton" 
     android:text="ping" 
     android:layout_marginTop="-31dp" 
     app:layout_constraintTop_toBottomOf="@+id/textView2" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/historybutton" /> 

    <Button 
     android:id="@+id/historybutton" 
     android:layout_width="171dp" 
     android:layout_height="136dp" 
     android:onClick="historybutton" 
     android:text="History" 
     android:layout_marginTop="-31dp" 
     app:layout_constraintTop_toBottomOf="@+id/textView2" 
     app:layout_constraintRight_toLeftOf="@+id/pingbutton" 
     app:layout_constraintLeft_toLeftOf="parent" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="358dp" 
     android:layout_height="42dp" 
     android:text="TextView" 
     android:gravity="center" 
     tools:layout_editor_absoluteX="2dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintTop_toBottomOf="@+id/imageView3" /> 

</android.support.constraint.ConstraintLayout> 

Answer 1

Lieu un widget View dans le centre de votre mise en page avec un rapport de dimension de 1: 1 et contraint sur la gauche par historybutton et sur la droite par pingbutton. Cela vous donnera un carré où chaque côté est la longueur de l'écart horizontal.

<View 
    android:id="@+id/spacerView" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_margin="0dp" 
    app:layout_constraintDimensionRatio="H,1:1" 
    app:layout_constraintEnd_toStartOf="@+id/pingbutton" 
    app:layout_constraintStart_toEndOf="@+id/historybutton" 
    app:layout_constraintTop_toBottomOf="@+id/historybutton" /> 

contraignent maintenant les deux boutons du bas au fond de votre carré comme suit:

<Button 
    android:id="@+id/testbutton" 
    android:layout_width="171dp" 
    android:layout_height="136dp" 
    android:text="Test" 
    app:layout_constraintTop_toBottomOf="@+id/spacerView" 
    app:layout_constraintEnd_toEndOf="@+id/historybutton" /> 

<Button 
    android:id="@+id/settingsbutton" 
    android:layout_width="171dp" 
    android:layout_height="136dp" 
    android:text="Settings" 
    app:layout_constraintTop_toBottomOf="@+id/spacerView" 
    app:layout_constraintStart_toStartOf="@+id/pingbutton" /> 

Et cela devrait le faire. J'ai rendu la vue carrée visible afin que nous puissions la voir, mais vous devriez la rendre invisible. Voici une image de l'effet.