web-dev-qa-db-ja.com

Android-制約レイアウト-ビューを他のビューの端に中央揃えで配置する方法は？

このようなレイアウトを構築したい：

enter image description here

制約レイアウトの内部には、バナーのように機能する画像ビューがあり、次にバナーの下端に中央揃えのカードがあり、次にカードの上端に中央揃えの別の画像ビューがあります。

私が直面している問題は、カードと位置合わせすると、2番目の画像ビュー（緑色）が前景に留まるのではなく、背景になることです。

ここに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
19
Suhas Shelar

これを試して：

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

説明：-これは、これらの4行のために機能します

次の行は、白いCardViewの下端の中央に配置された青い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"

次の行は、青いCardViewを水平方向に中央揃えに設定します

<!-- 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"
35
rupinderjeet

以下を試してください：

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

2
Mehul Kabaria