ConstraintLayout垂直对齐项目顶部。

Question

我有一个简单的 ConstraintLayout 里面 RecyclerView. 该 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

我想你需要删除 app:layout_constraintBottom_toBottomOf="parent" 来自 TextView 这使得文字只是顶部对准顶部的图像