为什么 layout_constraintStart_toEndOf 一直与 ConstraintLayout 中的第一个控件重叠？

Question

我正在设计一个视图，顶部的图片占屏幕的 33%，其余细节占 66%。但是，细节部分一直在重叠图片，如下所示：

这是我的代码：

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

    <FrameLayout
        android:id="@+id/llImg"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent=".33"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="1">
        <ImageView
            android:id="@+id/imgBackground"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />
        
        <TextView
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:textStyle="italic"
            android:textSize="12dp"
            android:layout_alignParentBottom="true"
            android:textColor="#4c8c4a"
            android:id="@+id/lblImgDescription" />
    </FrameLayout>

    <LinearLayout
        android:id="@+id/llTab"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent=".66"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/llImg">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/mTabOptions"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

我做了我认为应该是在第一个 FrameLayout 和底部 LinearLayout 添加 ID (llImg) 的合乎逻辑的操作，我指出了它应该从哪里开始在其底部：app:layout_constraintStart_toEndOf="@+id/llImg"。知道我做错了什么吗？

Answer 1

你应该改变

app:layout_constraintStart_toEndOf="@+id/llImg"

至

app:layout_constraintTop_toBottomOf="@+id/llImg"

Answer 2

app:layout_constraintTop_toBottomOf="@+id/llImg" 这就是你总体上缺少的东西。我做了一些改动尝试下面的布局。此外，您还缺少 1% 的屏幕，该屏幕将作为 llTab 的边距 top/bottom，因此请记住这一点。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<FrameLayout
    android:id="@+id/llImg"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent=".33"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imgBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/lblImgDescription"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:gravity="center_horizontal"
        android:textColor="#4c8c4a"
        android:textSize="12dp"
        android:textStyle="italic" />
</FrameLayout>

<LinearLayout
    android:id="@+id/llTab"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent=".66"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/llImg">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/mTabOptions"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

为什么 layout_constraintStart_toEndOf 一直与 ConstraintLayout 中的第一个控件重叠？

Why does a layout_constraintStart_toEndOf keep overlapping the first control in a ConstraintLayout?

android

android-tablayout

android-constraintlayout