时间戳

首页 > 解决方案 > Android：ConstraintLayout 尺寸比例+宽度百分比

android - Android：ConstraintLayout 尺寸比例+宽度百分比

问题描述

我希望下面布局中的图像可以使用不同的屏幕尺寸进行缩放。它必须保持 1:1 的纵横比，但不能大于150dp

在此处输入图像描述

我尝试使用Width_max, DimensionRatio&的组合Width_percent，但图像要么尊重宽度百分比，要么缩小到两个相邻文本视图的组合高度

<androidx.cardview.widget.CardView 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"
    android:layout_margin="4dp"
    android:background="@android:color/white"
    app:cardCornerRadius="4dp"
    app:cardElevation="@dimen/cardElevation"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/thumbnailImageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/darker_gray"
            android:scaleType="centerCrop"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/titleTextView"
            app:layout_constraintWidth_max="150dp"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintWidth_percent="0.2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="8dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="@string/placeholder"
            android:textColor="@android:color/black"
            android:textSize="@dimen/textMedium"
            app:layout_constraintBottom_toTopOf="@id/descriptionTextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/thumbnailImageView"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/descriptionTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="@string/placeholder"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@id/titleTextView"
            app:layout_constraintStart_toStartOf="@id/titleTextView"
            app:layout_constraintTop_toBottomOf="@id/titleTextView" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

标签： androidandroid-constraintlayout

解决方案

这是一个奇怪的行为ConstraintLayout

但是我找到了一种替代方法，可以使尺寸正确使用Guideline

Guideline在 20% 的宽度处添加ConstraintLayout

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".2" />

把重点放在指导方针layout_constraintEnd_toStartOf上ImageView

<ImageView
    ...
    app:layout_constraintEnd_toStartOf="@id/guideline2"
    ... />

app:layout_constraintWidth_percent="0.2"从 ImageView 中删除

离开at将layout_constraintWidth_max其限制为最大值，但如果指南在它之前，则遵循指南作为约束。ImageView150dp150dp150dp

推荐阅读