android - 为什么 layout_constraintStart_toEndOf 总是与 ConstraintLayout 中的第一个控件重叠?
问题描述
我正在设计一个视图,其中顶部的图片占屏幕的 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>
我做了什么认为应该是在第一个和底部添加一个 ID ( llImg
)的逻辑操作,我指出了它应该从底部开始的那个:. 知道我做错了什么吗?FrameLayout
LinearLayout
app:layout_constraintStart_toEndOf="@+id/llImg"
解决方案
app:layout_constraintTop_toBottomOf="@+id/llImg"
这就是你所缺少的。我做了一些更改尝试下面的布局。此外,您还缺少 1% 的屏幕将占据顶部/底部边距,llTab
因此请记住这一点。
<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>
推荐阅读
- python - 获取超过 10 个结果 Google 自定义搜索 API
- laravel - 如何在不覆盖布局部分中的脚本的情况下扩展布局(Laravel 5.8)
- php - 通过删除 Laravel 中的多余字符,从斜杠分隔的 url 中提取参数值
- javascript - 如何遍历包含 Javascript 中的对象的对象
- c++ - C++ 中具有 std::vector 数据成员的 constexpr 成员函数
- c# - xUnit 是否支持“相同的测试,不同的设置”?或者我如何编写在本地为 dev 运行的测试,并在管道中测试部署?
- swift - 快速从本地化数值中删除千位分隔符
- javascript - 用另一个对象数组过滤对象数组,并为匹配的对象添加额外的键
- bazel - 如何使用 genrule 输出作为字符串来扩展 Bazel 中的模板替换?
- flutter - 如何在 RaisedButton 右侧添加图标?