vista spaziatura uniformemente con ConstraintLayout

Question

Un uso comune per LinearLayout è quello uniformemente spazi Viste (peso), per esempio:

Come è possibile realizzare viste equidistanti come questo utilizzando il nuovo ConstraintLayout?

ConstraintLayout link di riferimento: blog post, I/O session video

Answer 1

Ci sono due modi per ottenere questo risultato utilizzando ConstraintLayout: Chains e Guidelines. Per utilizzare le catene, assicurati di utilizzare ConstraintLayout Beta 3 o versioni successive e, se desideri utilizzare l'editor di layout visivo in Android Studio, assicurati di utilizzare Android Studio 2.3 Beta 1 o versione successiva.

Metodo 1 - Utilizzo Catene

aprire l'editor di layout di e aggiungere i widget come di consueto, aggiungendo vincoli genitore, se necessario. In questo caso, ho aggiunto due pulsanti con i vincoli alla parte inferiore del genitore e parte del genitore (lato sinistro per il pulsante Salva e sul lato destro per pulsante Condividi):

Si noti che in questo stato , se i flip a quello panorama, il punto di vista non riempiono il genitore, ma sono ancorati agli angoli:

Evidenziare entrambi i punti di vista, sia per Ctrl/Cmd clic o trascinando un riquadro intorno i punti di vista:

Quindi fare clic destro sui punti di vista e scegliere "Centro orizzontalmente":

Questo imposta una connessione bidirezionale tra i punti di vista (che è come una catena è definito) . Di default lo stile della catena è "diffuso", che viene applicato anche quando non è incluso alcun attributo XML.Attaccando con lo stile della catena, ma impostando la larghezza del nostro punto di vista per 0dp lascia il punto di vista riempire lo spazio disponibile, diffondendo in modo uniforme in tutto il genitore:

Questo è più evidente con orientamento orizzontale:

Se si preferisce saltare l'editor di layout, l'XML risultante sarà simile:

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

<Button 
    android:id="@+id/button_save" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:text="@string/button_save_text" 
    android:layout_marginStart="8dp" 
    android:layout_marginBottom="8dp" 
    android:layout_marginEnd="4dp" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/button_share" 
    app:layout_constraintHorizontal_chainStyle="spread" /> 

<Button 
    android:id="@+id/button_share" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:text="@string/button_share_text" 
    android:layout_marginStart="4dp" 
    android:layout_marginEnd="8dp" 
    android:layout_marginBottom="8dp" 
    app:layout_constraintLeft_toRightOf="@+id/button_save" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toBottomOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

Dettagli:

• impostazione la larghezza di ogni elemento per 0dp o MATCH_CONSTRAINT lascia il punto di vista riempiono il genitore (opzionale)
• i punti di vista devono essere collegati tra loro in modo bidirezionale (destra di salvare i link del pulsante per pulsante di condivisione, a sinistra di link pulsante di condivisione per salvare il pulsante), ciò avviene automaticamente tramite l'editor di layout quando si sceglie "Centro orizzontalmente"
• la prima vista nella catena può specificare lo stile di catena tramite layout_constraintHorizontal_chainStyle, vedere lo documentation per vari stili di catena, se il lo stile della catena è omesso, il valore predefinito è "spread"
• la ponderazione della catena può venire regolata tramite layout_constraintHorizontal_weight
• questo esempio è per una catena orizzontale, ci sono attributi corrispondenti per catene verticali

Metodo 2 - Utilizzo di un indirizzo

Apri il tuo layout nell'editor e fai clic sul pulsante della linea guida:

quindi selezionare "Aggiungi verticale Guideline":

apparirà una nuova linea guida, che per default, sarà probabilmente ancorato a sinistra in valori relativi (indicato con sinistra rivolta freccia):

Fare clic sulla freccia rivolta verso sinistra per passare ad un valore percentuale, quindi trascinare la linea guida per la soglia del 50%:

Ora è possibile utilizzare la linea guida come ancoraggio per altre viste. Nel mio esempio, ho attaccato alla destra del pulsante Salva e sinistra del pulsante di condivisione per la linea guida:

Se si desidera il punto di vista per riempire lo spazio disponibile, il vincolo deve essere impostato su "Qualsiasi Size" (le linee ondulate che corre orizzontalmente):

(Questa è la stessa impostazione del layout_width a 0dp).

Una linea guida può anche essere creato in XML abbastanza facilmente piuttosto che utilizzare l'editor di layout:

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

Answer 2

Beh, se aiuta qualcuno

la chiave è qui app:layout_constraintHorizontal_weight="1" e
la cosa migliore riguardo al layout dei vincoli è che supporta la dipendenza circolare e qui questo è quello che ho fatto usando esattamente questo.

Per primo figlio
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Per il secondo figlio

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

Ecco la demo completa

<android.support.design.widget.TextInputLayout 
    android:id="@+id/textInputParent" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent"> 

    <EditText 
     android:id="@+id/editTextParent" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:hint="@string/state" /> 
</android.support.design.widget.TextInputLayout> 

<android.support.design.widget.TextInputLayout 
    android:id="@+id/textInputFirstChild" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild" 
    app:layout_constraintHorizontal_weight="1" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/textInputParent"> 

    <EditText 
     android:id="@+id/editTextChildOne" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:hint="@string/pin_code" /> 
</android.support.design.widget.TextInputLayout> 

<android.support.design.widget.TextInputLayout 
    android:id="@+id/textInputSecondChild" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    app:layout_constraintHorizontal_weight="1" 
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/textInputParent"> 

    <EditText 
     android:id="@+id/editTextChildSecond" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:hint="@string/country" /> 
</android.support.design.widget.TextInputLayout>