ConstraintLayout 垂直对齐项目顶部

Question

我在 RecyclerView 中有一个简单的 ConstraintLayout。 ConstraintLayout 仅包含图像和文本。

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/gridRv"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="16dp"
  android:layout_marginLeft="@dimen/size_8dp"
  android:layout_marginRight="@dimen/size_8dp"
  android:layout_marginBottom="@dimen/size_8dp"/>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/size_16dp"
    android:paddingBottom="@dimen/size_16dp"
    android:paddingLeft="@dimen/size_8dp"
    android:paddingRight="@dimen/size_8dp"
    android:background="@drawable/grid_item_state">

  <ImageView
      android:id="@+id/gridImage"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginBottom="12dp"
      android:scaleType="centerCrop"
      app:layout_constraintBottom_toTopOf="@+id/gridText"
      app:layout_constraintDimensionRatio="1:1"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintVertical_chainStyle="spread_inside"
      app:layout_constraintWidth_percent="0.45" />

  <TextView
      android:id="@+id/gridText"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:fontFamily="@font/montserrat_regular"
      android:hint="@string/global_option"
      android:textColor="@color/blue_600"
      android:textFontWeight="400"
      android:maxLines="4"
      android:gravity="top|center_horizontal"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/gridImage" />

</androidx.constraintlayout.widget.ConstraintLayout>

此代码生成以下内容：

我希望文本与顶部垂直对齐。文本需要紧接在图像之后开始（留有少量空白）。

当我将 TextView 的高度更改为 android:layout_height="0dp" 时，我几乎得到了我想要的结果。这里的问题是 TextView 无法缩放以包含整个文本。

我明白我为什么会遇到这个问题。因为我用的是app:layout_constraintVertical_chainStyle="spread_inside"。我可以使用 LinearLayout 代替，但我想要 ConstraintLayout 因为我需要图像在具有百分比宽度的同时保持其纵横比。

你们对如何达到我想要的结果有什么建议吗？

Answer 1

我想您需要从 TextView 中删除 app:layout_constraintBottom_toBottomOf="parent"，这使得文本刚好与顶部图像对齐

ConstraintLayout 垂直对齐项目顶部

ConstraintLayout vertical align items top

android

android-recyclerview

android-constraintlayout