0
votes

Création d'une mise en page avec plusieurs vues d'image les unes derrière les autres

J'essaie de créer une mise en page où les images peuvent être chargées derrière une autre. Voici un exemple:

Comment créer une mise en page comme celle-ci? Ou peut-être existe-t-il une bibliothèque que je ne connais pas?

Jusqu'à présent, je n'ai compris qu'en créant l'arrière-plan des vues d'images à un seul cercle:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorWhite"/>
    <stroke android:width="1dp"
        android:color="@color/dividerColor"/>
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/>

</shape>

Et en définissant l'arrière-plan sur ce dessinable et en le chargeant avec glide. Comment créer une mise en page où ils sont les uns derrière les autres?

android xml

0 commentaires

3 Réponses :

2
votes

Vous pouvez créer ce type de mise en page en utilisant LinearLayout (orientation horizontale) et ImageView , il suffit d'ajouter android: layout_marginStart = "- 20dp" avec chacun des ImageView horizontalement.

Vous pouvez également ajouter l'ImageView dynamiquement en utilisant view.addView (imageView) .

Ou vous pouvez utiliser cette bibliothèque pour la même implémentation StackImageView

0 commentaires

1
votes

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent">
    <ImageView
        app:srcCompat="@drawable/circle_background_on"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
    <ImageView
        android:layout_marginStart="30dp"
        app:srcCompat="@drawable/circle_background_on"
        android:tint="@color/red"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
    <ImageView
        android:layout_marginStart="60dp"
        app:srcCompat="@drawable/circle_background_on"
        android:tint="@color/green"
        android:layout_width="50dp"
        android:layout_height="50dp"/>
</RelativeLayout>

0 commentaires

1
votes

J'utilise personnellement FrameLayout pour ce type d'exigences d'interface utilisateur.

<FrameLayout
    android:layout_gravity="center"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <ImageView
        android:background="@drawable/shape_1"
        android:layout_gravity="end"
        android:layout_height="100dp"
        android:layout_width="100dp" />

    <ImageView
        android:background="@drawable/shape_2"
        android:layout_gravity="end"
        android:layout_height="100dp"
        android:layout_marginEnd="40dp"
        android:layout_width="100dp" />

    <ImageView
        android:background="@drawable/shape_3"
        android:layout_gravity="end"
        android:layout_height="100dp"
        android:layout_marginEnd="80dp"
        android:layout_width="100dp" />


</FrameLayout>

0 commentaires