在RecyclerView中未显示的PercentFrameLayout（方形表格）

Question

我尝试在RecyclerView的元素中将ImageView显示为方块，无论元素的高度如何。
这就是我想要的：

这是我的xml：

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

    <android.support.percent.PercentFrameLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        >
        <ImageView
            android:scaleType="centerCrop"
            app:layout_heightPercent="100%"
            app:layout_aspectRatio="100%"/>
    </android.support.percent.PercentFrameLayout>

    <!-- other views -->
</RelativeLayout>

这就是我所拥有的（ImageView消失了）：

（对不起，如果我的英语不好）

Answer 1

您需要在层次结构中将百分比布局向上移动一步：

<android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:scaleType="centerCrop"
        app:layout_heightPercent="100%"
        app:layout_aspectRatio="100%"/>

    <!-- other views -->
</android.support.percent.PercentRelativeLayout>

此方法假设您的其他视图具有设置的高度 - 如果它们具有可变高度，那么您的图像也将具有可变高度（因为它使用layout_heightPercent="100%"。

如果您想让图片保持一致的特定尺寸，那么您需要一个布局，例如

<android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:scaleType="centerCrop"
        app:layout_widthPercent="20%"
        app:layout_aspectRatio="100%"/>

    <!-- other views -->
</android.support.percent.PercentRelativeLayout>

在这种情况下，宽度将是您的总宽度的固定百分比（您也可以使用layout_width="@dimen/fixed_width"），高度将等于该宽度。

Answer 2

由于PercentFrameLayout和PercentRelativeLayout在26.0.0中都已弃用，因此您应该考虑使用ConstraintLayout来按{1}}的比例调整ImageView。

1）保持ImageView与浮动宽度/高度的比例为1：1

<强> item.xml

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

    <ImageView
        android:id="@+id/thumbnail_image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="w,1:1" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/subtitle_text" />

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subtitle"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/description_text" />

    <TextView
        android:id="@+id/description_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="0dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toBottomOf="@+id/thumbnail_image" />

</android.support.constraint.ConstraintLayout>

2）将ImageView以1：1的比例保持固定宽度

<强> item.xml

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

    <ImageView
        android:id="@+id/thumbnail_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="h,1:1" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/subtitle_text" />

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subtitle"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toTopOf="@+id/description_text" />

    <TextView
        android:id="@+id/description_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="0dp"
        app:layout_constraintStart_toEndOf="@+id/thumbnail_image"
        app:layout_constraintBottom_toBottomOf="@+id/thumbnail_image" />

</android.support.constraint.ConstraintLayout>

希望这有帮助！