2

我尝试将 ImageView 显示为 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 消失了）： 错误的设计

（如果我的英语不好，请原谅）

4

2 回答 2

2

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

<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"），并且高度将等于该宽度。

于 2016-06-28T20:18:47.610 回答
2

由于 PercentFrameLayout 和 PercentRelativeLayout 在 26.0.0 中都已弃用，因此您应该考虑使用ConstraintLayoutImageView以1:1 的比例调整您的大小。

1）保持你的 ImageView 在 1:1 的比例与浮动宽度/高度

1:1 比例

项目.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) 以 1:1 的比例保持您的 ImageView 与固定宽度

1:1 比例

项目.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>

希望这可以帮助！

于 2017-08-31T16:36:39.387 回答