web-dev-qa-db-ja.com

Android制約レイアウトで画像を半分オーバーラップする方法

制約レイアウトのみを使用して、画像の半分を別の画像の上に配置する方法はありますか？相対レイアウトとフレームレイアウトを使用して実行できることはわかっていますが、制約レイアウトの場合はとにかくありますか？高さ/幅のハードコーディングを必要としない方法を好む

要件は次のようになります

enter image description here

androidandroid-layoutandroid-imageviewandroid-viewandroid-constraintlayout
11
MarGin

以下のような制約レイアウトのみを使用してレイアウトを設定できます：

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

    <ImageView
        Android:id="@+id/imageView4"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="@Android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline"
        Android:layout_width="0dp"  
        Android:layout_height="0dp"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <ImageView
        Android:id="@+id/imageView_upper"
        Android:layout_width="70dp"
        Android:layout_height="70dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/guideline"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        Android:background="@Android:color/holo_purple"/>

</Android.support.constraint.ConstraintLayout>

enter image description here

12
Ketan Patel

最も簡単な方法

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

    <ImageView
        Android:id="@+id/appBar"
        Android:layout_width="match_parent"
        Android:layout_height="300dp"
        Android:background="#c2b6c2">

    </ImageView>


    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/floatbtn"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="8dp"
        Android:src="@drawable/ic_menu_camera"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/appBar"
        app:layout_constraintTop_toBottomOf="@+id/appBar"
         />
</Android.support.constraint.ConstraintLayout>

enter image description here

4
matin sayyad

マージンを確認してください。 ConstraintLayoutに配置します。

  <Android.support.constraint.Guideline
     Android:id="@+id/guideline"
     Android:layout_width="wrap_content"
     Android:layout_height="wrap_content"
     Android:orientation="horizontal"
     app:layout_constraintGuide_percent="0.5" />
  <LinearLayout
     Android:layout_width="0dp"
     Android:layout_height="0dp"
     Android:background="@color/colorPrimary"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent"
     app:layout_constraintTop_toTopOf="parent"
     app:layout_constraintBottom_toTopOf="@+id/guideline"/>

 <LinearLayout
     Android:layout_width="0dp"
     Android:layout_height="0dp"
     Android:background="@color/colorAccent"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/guideline"/>
 <ImageView
     Android:layout_width="100dp"
     Android:layout_height="100dp"
     Android:layout_marginBottom="8dp"
     Android:layout_marginEnd="8dp"
     Android:layout_marginStart="8dp"
     Android:layout_marginTop="8dp"
     Android:src="#000000"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
2
Bineesh P Babu

これを試して

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

    <ImageView
        Android:id="@+id/my_imageView"
        Android:layout_width="match_parent"
        Android:layout_height="150dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@color/colorAccent" />

    <Android.support.v4.widget.Space
        Android:id="@+id/marginSpacer"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginBottom="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/my_imageView"
        app:layout_constraintLeft_toLeftOf="@id/my_imageView"
        app:layout_constraintRight_toRightOf="@id/my_imageView" />

    <ImageView
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:src="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />

</Android.support.constraint.ConstraintLayout>

[〜＃〜]出力[〜＃〜]

enter image description here

OR THIS

<Android.support.design.widget.CoordinatorLayout 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">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <LinearLayout
            Android:id="@+id/imageviewanchor"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:orientation="horizontal">

            <ImageView
                Android:id="@+id/subject"
                Android:layout_width="match_parent"
                Android:layout_height="250dp"
                Android:src="@color/colorAccent"
                Android:text="Thi"
                Android:textSize="17sp" />

        </LinearLayout>

        <LinearLayout
            Android:id="@+id/viewB"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@Android:color/white"
            Android:orientation="horizontal">

        </LinearLayout>

    </LinearLayout>

    <ImageView
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:clickable="true"
        Android:src="@color/colorPrimary"
        app:layout_anchor="@+id/imageviewanchor"
        app:layout_anchorGravity="bottom|center" />

</Android.support.design.widget.CoordinatorLayout>

[〜＃〜]出力[〜＃〜]

enter image description here

1
Nilesh Rathod