web-dev-qa-db-fra.com

Android - Disposition des contraintes - Comment aligner une vue centrée sur le bord d'une autre vue?

Je veux construire une mise en page comme ceci:

 enter image description here

À l'intérieur de la disposition des contraintes, il y a une vue d'image qui agit comme une bannière, une carte centrée sur le bord inférieur de la bannière, puis une autre vue d'image centrée sur le bord supérieur de la carte.

Le problème auquel je suis confronté est que la deuxième image (verte) alignée avec la carte passe en arrière-plan au lieu de rester au premier plan.

Voici le xml,

<Android.support.constraint.ConstraintLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            Android:paddingBottom="@dimen/padding_10">

            <ImageView
                Android:id="@+id/imageView_jobBackdrop_jobDetails"
                Android:layout_width="match_parent"
                Android:layout_height="175dp"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                Android:src="@drawable/backdrop_job_details"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_collapseMode="parallax"/>

            <ImageView
                Android:id="@+id/imageView_companyLogo_jobDetails"
                Android:layout_width="75dp"
                Android:layout_height="75dp"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_constraintBottom_toTopOf="@+id/cardView_jobHeader_jobDetails"
                app:layout_constraintEnd_toEndOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintStart_toStartOf="@id/cardView_jobHeader_jobDetails"
                app:layout_constraintTop_toTopOf="@+id/cardView_jobHeader_jobDetails" />

            <Android.support.v7.widget.CardView
                Android:id="@+id/cardView_jobHeader_jobDetails"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="24dp"
                Android:layout_marginEnd="16dp"
                Android:layout_marginStart="16dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
                app:layout_constraintVertical_bias="0.5">

                <Android.support.constraint.ConstraintLayout
                    Android:id="@+id/parent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:id="@+id/textView_jobTitle_jobDetails"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_marginEnd="16dp"
                        Android:layout_marginStart="16dp"
                        Android:layout_marginTop="32dp"
                        Android:gravity="center"
                        Android:text="Fresher Software Developer Job. Urgent Openning. Angular Js, HTML, JavaScript, CSS"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </Android.support.constraint.ConstraintLayout>
            </Android.support.v7.widget.CardView>
        </Android.support.constraint.ConstraintLayout>
androidxmlandroid-layoutandroid-constraintlayout
6
Suhas Shelar

Essaye ça: 

<?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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:padding="20dp">

    <Android.support.v7.widget.CardView
        Android:id="@+id/card_1"
        Android:layout_width="0dp"
        Android:layout_height="200dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Android.support.v7.widget.CardView
        Android:id="@+id/card_2"
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        Android:layout_marginBottom="8dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="0dp"
        app:cardBackgroundColor="#69F"
        app:layout_constraintBottom_toBottomOf="@+id/card_1"
        app:layout_constraintLeft_toLeftOf="@+id/card_1"
        app:layout_constraintRight_toRightOf="@+id/card_1"
        app:layout_constraintTop_toBottomOf="@+id/card_1" />

</Android.support.constraint.ConstraintLayout>

 See this image

Explication: - Cela fonctionne à cause de ces quatre lignes

Les lignes suivantes définissent le CardView bleu centré sur le bord inférieur de White CardView.

<!-- top constraint is set to bottom of White CardView -->
app:layout_constraintTop_toBottomOf="@+id/card_1"

<!-- bottom constraint is set to bottom of White CardView -->
app:layout_constraintBottom_toBottomOf="@+id/card_1"

Les lignes suivantes définissent le CardView bleu centré horizontalement

<!-- left constraint is set to left of White CardView -->
app:layout_constraintLeft_toLeftOf="@+id/card_1"

<!-- right constraint is set to right of White CardView -->
app:layout_constraintRight_toRightOf="@+id/card_1"
15
rupinderjeet

essayez ci-dessous:

<?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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    app:layout_collapseMode="parallax">


    <ImageView
        Android:id="@+id/imageView_jobBackdrop_jobDetails"
        Android:layout_width="match_parent"
        Android:layout_height="175dp"
        Android:fitsSystemWindows="true"
        Android:scaleType="centerCrop"
        Android:background="@Android:color/white"
        app:layout_collapseMode="parallax"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        Android:id="@+id/imageView2"
        Android:layout_width="match_parent"
        Android:layout_height="60dp"
        Android:layout_marginBottom="8dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginStart="8dp"
        Android:background="@Android:color/black"
        app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"
        app:layout_constraintEnd_toEndOf="@+id/imageView_jobBackdrop_jobDetails"
        app:layout_constraintStart_toStartOf="@+id/imageView_jobBackdrop_jobDetails"
        app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"  />

    <ImageView
        Android:id="@+id/imageView3"
        Android:layout_width="75dp"
        Android:layout_height="75dp"
        Android:layout_marginBottom="8dp"
        Android:layout_marginEnd="8dp"
        Android:background="@Android:color/darker_gray"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2"  />


</Android.support.constraint.ConstraintLayout>

 enter image description here

1
Mehul Kabaria