ConstraintLayout: vues carrées, uniformément réparties, numérisées automatiquement

-2

Comment utiliser ConstraintLayout pour obtenir 5 carrés répartis uniformément, avec taille flexible en fonction de la largeur de l'écran?ConstraintLayout: vues carrées, uniformément réparties, numérisées automatiquement

Source

2017-09-23 Alexey

Bienvenue sur Stack Overflow. Qu'avez-vous déjà essayé de faire cela? Veuillez consulter [Comment poser une bonne question] (https://stackoverflow.com/help/how-to-ask). Stack Overflow n'est pas un service de codage. Vous êtes censé *** étudier votre problème et faire une bonne tentative pour écrire le code vous-même *** avant de poster. Si vous êtes bloqué sur quelque chose de * spécifique *, revenez en arrière et incluez un [exemple minimal, complet et vérifiable] (https://stackoverflow.com/help/mcve) et un résumé de ce que vous avez essayé, afin que nous puissions vous aider. – FluffyKitten

Directives avec precentage, quelque chose comme 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:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline" 
    app:layout_constraintGuide_begin="316dp" 
    android:orientation="horizontal" /> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/guideline2" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline2" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.2" /> 

<Button 
    android:id="@+id/button3" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline2" 
    app:layout_constraintRight_toLeftOf="@+id/guideline3" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline3" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.4" /> 

<Button 
    android:id="@+id/button4" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline3" 
    app:layout_constraintRight_toLeftOf="@+id/guideline4" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline4" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.6" /> 

<Button 
    android:id="@+id/button5" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline4" 
    app:layout_constraintRight_toLeftOf="@+id/guideline5" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.5" 
    app:layout_constraintVertical_bias="0.503" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline5" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.8" /> 

<Button 
    android:id="@+id/button6" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline5" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 
</android.support.constraint.ConstraintLayout>

Pour ajouter la ligne directrice, cliquez-droit sur ConstraintLayout/Ajouter verticale/Horisontal ligne directrice ... espérons qu'il vous aidera

Cheers

Source

2017-09-23 21:16:22

Vous devez créer une chaîne de widgets connectés de tous les côtés de son parent conteneur (vous définissez les dimensions de ce conteneur parent à tout ce que vous voulez/besoin). Chaque widget doit avoir la contrainte app:layout_constraintDimensionRatio="1:1" pour assurer un motif carré. Par exemple:

<?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:orientation="horizontal" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<FrameLayout 
    android:id="@+id/frame1" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/frame2" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

<FrameLayout 
    android:id="@+id/frame2" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@+id/frame1" 
    app:layout_constraintRight_toLeftOf="@+id/frame3" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

<FrameLayout 
    android:id="@+id/frame3" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@+id/frame2" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

</android.support.constraint.ConstraintLayout>

Source

2017-09-28 10:04:46 ema3272

-2

Img. Vertical orientation

Img. Horizontal orientation

Vous avez juste besoin d'ajouter une contrainte à la vue à la première vue. Sur le haut et le bas.

<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.support.v7.widget.CardView 
    android:id="@+id/uno" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorPrimary" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/dos" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    android:layout_margin="8dp"/> 

<android.support.v7.widget.CardView 
    android:id="@+id/dos" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorPrimaryDark" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/tres" 
    app:layout_constraintStart_toEndOf="@+id/uno" 
    app:layout_constraintTop_toTopOf="@id/uno" 
    app:layout_constraintBottom_toBottomOf="@id/uno"/> 

<android.support.v7.widget.CardView 
    android:id="@+id/tres" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorAccent" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toEndOf="@+id/dos" 
    app:layout_constraintTop_toTopOf="@id/uno" 
    app:layout_constraintBottom_toBottomOf="@id/uno" />

Source

2017-12-01 00:20:05 fer

Je me réfère à ceci: app: layout_constraintTop_toTopOf = "@ id/uno" app: disposition_constraintBottom_toBottomOf = "@ id/uno" – fer

ConstraintLayout: vues carrées, uniformément réparties, numérisées automatiquement

Répondre

Questions connexes