web-dev-qa-db-fra.com

ConstraintLayout - largeur/hauteur proportionnelle à soi?

J'essaie de comprendre comment obtenir le comportement suivant à l'aide d'une disposition de contrainte:

  1. Placez une vue au centre du parent ConstraintLayout
  2. Faire en sorte que la largeur de la vue soit égale à la moitié de la largeur du parent
  3. Rendre la hauteur de la vue égale à sa largeur

(c'est-à-dire, placez un carré au centre)

J'ai essayé d'utiliser cette combinaison:

  Android:layout_width="0dp"
  Android:layout_height="0dp"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintDimensionRatio="2:1"

Mais je ne sais pas comment continuer à partir d'ici

androidandroid-constraintlayout
5
dor506

Pour que la largeur de votre enfant soit égale à la moitié de celle de ses parents, suivez les instructions ci-dessous: à gauche 0,25% et à droite 0,75

Ensuite, placez votre vue entre ces lignes directrices.

Et enfin, définissez layout_constraintDimensionRatio sur '1: 1':

 enter image description here 

<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.constraint.Guideline
        Android:id="@+id/guideline_left"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"/>

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline_right"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75"/>

    <View
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="@id/guideline_left"
        app:layout_constraintRight_toRightOf="@id/guideline_right"
        app:layout_constraintTop_toTopOf="parent"/>
</Android.support.constraint.ConstraintLayout>
7
repitch

Vous pouvez vous passer de Guideline c'est facile. 

Utilisez simplement app: layout_constraintWidth_percent = "0.5"

Il fonctionne dans la version ConstraintLayout: 1.1.0-beta5 et ultérieure.

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

    <ImageView
        Android:id="@+id/img_icon"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="@color/dark_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

</Android.support.constraint.ConstraintLayout>

 enter image description here

5
serg3z

Vous pouvez obtenir ce comportement en suivant les instructions ( Contrainte à une guilde ). Vous devez définir deux repères verticaux avec un pourcentage (premier - 25% et second - 75%) qui vous donnera une moitié de la largeur du parent. Ensuite, vous devriez limiter votre vue à ces lignes directrices par début/fin. Vous devez également le contraindre au parent en haut/en bas et définir le rapport de dimensions de votre vue sur 1: 1 pour le rendre carré et centré.

<?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.support.constraint.Guideline
        Android:id="@+id/guideline1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75" />

    <View
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@id/guideline2"
        app:layout_constraintStart_toStartOf="@id/guideline1"
        app:layout_constraintTop_toTopOf="parent" />

</Android.support.constraint.ConstraintLayout>
1
Yurii Kyrylchuk

Je ne vois pas pourquoi vous auriez à utiliser des systèmes de directives complexes alors que vous pourriez simplement utiliser:

app:layout_constraintWidth_percent="0.5"

pour la moitié de la largeur du parent et

app:layout_constraintDimensionRatio="1:1"

pour atteindre la même hauteur que la largeur. Ce rapport de dimension prend tous les nombres et même double. 

Voici le code complet avec center:

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

    <View
        Android:id="@+id/view"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" />

</Android.support.constraint.ConstraintLayout>
0
MiXT4PE