如何在Android中显示像Twitter这样的图像

问题描述

大家好，我想显示附件中显示的图像。我已经创建了一个视图，但是我无法一个接一个地设置图像，但是应该剪切第二个和第三个图像。有什么方法可以使用xml来实现此视图？

<RelativeLayout
    android:id="@+id/rlFeedPostNotification"
    android:layout_gravity="end"
    android:layout_alignParentEnd="true"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:background="@drawable/circular_notification">

    <ImageView
        android:id="@+id/ivDownArrow"
        android:tint="@color/white"
        android:src="@drawable/ic_keyboard_arrow_down"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <TextView
        android:id="@+id/tvPost"
        android:textSize="16sp"
        android:layout_centerInParent="true"
        android:layout_toEndOf="@id/ivDownArrow"
        android:textColor="@color/white"
        android:text="New Posts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/ivProfileImgOne"
        android:layout_marginStart="10dp"
        android:src="@drawable/default_image"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/tvPost"
        android:layout_width="40dp"
        android:layout_height="40dp"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/ivProfileImgTwo"
        android:src="@drawable/default_image"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/ivProfileImgOne"
        android:layout_width="40dp"
        android:layout_height="40dp"/>


    <TextView
        android:textColor="@color/white"
        android:layout_marginEnd="18sp"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:text="+4"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

这是我的观点：

解决方法

使用ConstraintLayout可以实现这种类型的布局。请在xml下面使用。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rlFeedPostNotification"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_gravity="end"
    android:background="#00BCD4">

    <ImageView
        android:id="@+id/ivDownArrow"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/download_arrow"
        app:tint="@color/white" />

    <TextView
        android:id="@+id/tvPost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toEndOf="@id/ivDownArrow"
        android:text="New Posts"
        android:textColor="@color/white"
        android:textSize="16sp" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/text_plus4"
        android:layout_toRightOf="@id/tvPost">

        <de.hdodenhof.circleimageview.CircleImageView
            android:background="Your Background"
            app:layout_constraintRight_toRightOf="@id/ivProfileImgTwo"
            app:layout_constraintLeft_toRightOf="@id/ivProfileImgTwo"
            android:id="@+id/ivProfileImgThree"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <de.hdodenhof.circleimageview.CircleImageView
            android:background="Your Background"
            app:layout_constraintRight_toRightOf="@id/ivProfileImgOne"
            app:layout_constraintLeft_toRightOf="@id/ivProfileImgOne"
            android:id="@+id/ivProfileImgTwo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <de.hdodenhof.circleimageview.CircleImageView
            app:layout_constraintLeft_toLeftOf="parent"
            android:id="@+id/ivProfileImgOne"
            android:background="Your Background"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/text_plus4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:layout_marginEnd="18sp"
        android:text="+4"
        android:textColor="@color/white"
        android:textSize="16sp" />

</RelativeLayout>

注意： 如果要添加其他图像，例如ivProfileImgFour，则将代码放在ConstraintLayout的确切顶部，否则，您的第四位图像总是显示在顶部。