web-dev-qa-db-fra.com

Comment chevaucher à moitié les images dans Android disposition des contraintes

Existe-t-il un moyen de placer une image à moitié sur une autre image en utilisant uniquement la disposition des contraintes. Je sais que cela peut être fait en utilisant des dispositions relatives et des cadres, mais dans le cas de la disposition des contraintes, y a-t-il quand même? préférez les méthodes qui ne nécessitent aucun codage en dur des hauteurs/largeurs

l'exigence ressemblera à ceci

enter image description here

androidandroid-layoutandroid-imageviewandroid-viewandroid-constraintlayout
11
MarGin

vous pouvez définir la disposition en utilisant uniquement la disposition de contraintes comme 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">

    <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

Manière la plus simple 

<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

Vérifiez la marge. Mettez-le dans votre 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

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

[~ # ~] sortie [~ # ~]

enter image description here

OU CECI 

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

[~ # ~] sortie [~ # ~]

enter image description here

1
Nilesh Rathod