在最后一行上方有一些项目,它们可能全部不可见或仍然可见。
这是它们垂直对齐的方式:
[content_part-'Lorem ipsum ...']
[[media_image-红色块-具有app:layout_constraintTop_toBottomOf="@+id/content_part"
]
[[quoted_view-IMG-has app:layout_constraintTop_toBottomOf="@+id/media_image"
]
[评论-TEXTVIEW行-具有app:layout_constraintTop_toBottomOf="@+id/quoted_view"
]
当quoted_view
可见时,comment
按钮行很好(横向和纵向都::
但是,当quoted_view
在横向上不可见时,comment
行将不会正确显示
尽管在纵向模式下看起来不错
如何垂直对齐上述可能不可见的项目?
<?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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="52dp" />
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="3dp"
android:ellipsize="end"
android:maxLines="1"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="re-tweet werwer wer we rwe r wer " />
<ImageView
android:id="@+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="3dp"
android:scaleType="fitXY"
android:background="@mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title" />
<!-- -->
<TextView
android:id="@+id/content_part"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autoLink="web"
android:linksClickable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/title"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " />
<ImageView
android:id="@+id/media_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="matrix"
android:visibility="visible"
app:layout_constraintDimensionRatio="H,15:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/content_part"
app:layout_goneMarginBottom="8dp"
android:background="#ff0000" />
<androidx.cardview.widget.CardView
android:id="@+id/quoted_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="@color/colorAccent"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/media_image"
app:layout_goneMarginBottom="8dp"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="30dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher_round" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="@+id/imageView"
android:gravity="center_horizontal"
android:padding="8dp"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="12sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- quoted -->
<TextView
android:id="@+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/view"
app:layout_constraintEnd_toStartOf="@+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="@+id/guideline"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/quoted_view"
android:text="TextView" />
<TextView
android:id="@+id/response"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/view"
app:layout_constraintEnd_toStartOf="@+id/like"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/comment"
android:text="TextView" />
<TextView
android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/response"
android:text="TextView" />
<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
更新:
将app:layout_constraintTop_toBottomOf="@+id/comment"
添加到android:id="@+id/view"
似乎已解决。
<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/comment" />
但不是很了解为什么必须具有此约束,android:id="@+id/comment"
已经具有约束app:layout_constraintBottom_toTopOf="@+id/view"
。
<TextView
android:id="@+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/view"
app:layout_constraintEnd_toStartOf="@+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="@+id/guideline"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/quoted_view"
android:text="TextView" />
当您为app:layout_constraintDimensionRatio="H,15:3"
的高度和media_image
的宽度指定0dp
为0dp
时,ConstraintLayout将最大化视图的宽度并限制视图的高度,以使最终的宽高比为15:3(高度的5倍)。
因此,假设屏幕宽度为500dp
,则media_image
的宽度将变为500dp
,高度将为100dp
。因此,当屏幕的实际高度小于100dp
加上TextViews的高度时会发生什么?您会看到您的问题。 (例如,屏幕尺寸并不反映我所知道的实际屏幕尺寸。)
现在的问题取决于当您现在放置的东西尺寸不完全时,您希望布局如何处理。