it-swarm.com.ru

Как наполовину перекрывать изображения в макете ограничений Android

Есть ли способ разместить изображения наполовину поверх другого изображения, используя только макет ограничения. Я знаю, что это может быть сделано с использованием относительной и рамочной компоновки, но в случае компоновки ограничений в любом случае? предпочитают способы, которые не требуют какого-либо жесткого кодирования высоты/ширины

требование будет выглядеть так

 enter image description here

5
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

9
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 ЭТО

<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