如何在Android View中实现这种布局配置
Posted
技术标签:
【中文标题】如何在Android View中实现这种布局配置【英文标题】：How to achieve this layout configuration in Android View 【发布时间】：2021-12-22 04:11:34 【问题描述】：我当前的 android 应用程序需要如下复杂布局。
这是完成的视图
------------------------------------------------------------------------------------------
| |
| --------------- ------------------------------------------------- --------------- |
| | | | | | | |
| | | | | | | |
| | IV(1) | | TV(1) | | IV(2) | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| --------------- ------------------------------------------------- --------------- |
| --------------------------------------------------------------------------------- |
| | | |
| | | |
| | | |
| | TV(2) | |
| | | |
| | | |
| --------------------------------------------------------------------------------- |
| --------------- ------------------------------------------------- --------------- |
| | | | | | | |
| | | | | | | |
| | IV(3) | | TV(3) | | IV(4) | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| --------------- ------------------------------------------------- --------------- |
------------------------------------------------------------------------------------------
它由四个ImageViews（例如IV1 - 4）和三个TextViews（例如TV1 - 3）组成
我必须遵守其他限制
始终存在至少 1 个 ImageView，它可以是 显示四个 所有 textView 都是必需的 所有的 ImageViews 都有相同的 宽度和高度 所有 Textview 的高度必须与 图像视图对于上面显示的顶部和中间行，我已经设法达到以下布局
<RelativeLayout
android:id="@+id/top_row_container"
android:layout_
android:layout_
android:paddingStart="10dp"
android:paddingTop="10dp"
android:paddingEnd="10dp">
<ImageView
android:id="@+id/top_left_corner"
android:layout_
android:layout_
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:src="@drawable/ic_launcher_background" />
<TextView
android:id="@+id/top_text"
android:layout_
android:layout_
android:layout_alignBottom="@+id/top_left_corner"
android:layout_alignWithParentIfMissing="true"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_toStartOf="@+id/top_right_corner"
android:layout_toEndOf="@+id/top_left_corner"
android:text="@string/lorem_ipsum" />
<ImageView
android:id="@+id/top_right_corner"
android:layout_
android:layout_
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:src="@drawable/ic_launcher_background" />
</RelativeLayout>
<TextView
android:id="@+id/middle_text"
android:layout_
android:layout_
android:layout_weight="1"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="@string/lorem_ipsum" />
我想在不必开发自定义视图的情况下实现所需的 UI，但我觉得它可能是唯一的解决方案。
【问题讨论】：
我建议您了解ConstraintLayout 并在子视图上使用水平和垂直偏差，这可能是您实现它的方法。
@Gourav 我不是 ConstraintLayout 的忠实粉丝，但我会试一试
在我学会它之前，我也不是粉丝。它在很多情况下都有帮助。值得学习:)
【参考方案1】：
你可以使用ConstraintLayout实现这个布局
试试下面的代码：
<?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:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:orientation="vertical"
tools:context=".MainActivity"
android:padding="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/clMain1"
android:layout_
android:layout_
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:padding="10dp">
<ImageView
android:id="@+id/ivMain1"
android:layout_
android:layout_
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_
android:layout_
app:layout_constraintStart_toEndOf="@+id/ivMain1"
app:layout_constraintEnd_toStartOf="@id/ivMain2"
app:layout_constraintTop_toTopOf="@+id/ivMain1"
app:layout_constraintBottom_toBottomOf="@+id/ivMain1"
android:text="Text1"
android:gravity="center"/>
<ImageView
android:id="@+id/ivMain2"
android:layout_
android:layout_
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_
android:layout_
app:layout_constraintTop_toBottomOf="@+id/clMain1"
app:layout_constraintBottom_toTopOf="@+id/clMain2"
android:gravity="center"
android:text="Text2"
android:padding="10dp"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/clMain2"
android:layout_
android:layout_
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:padding="10dp">
<ImageView
android:id="@+id/ivMain3"
android:layout_
android:layout_
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_
android:layout_
app:layout_constraintStart_toEndOf="@+id/ivMain3"
app:layout_constraintEnd_toStartOf="@id/ivMain4"
app:layout_constraintTop_toTopOf="@+id/ivMain3"
app:layout_constraintBottom_toBottomOf="@+id/ivMain3"
android:text="Text3"
android:gravity="center"/>
<ImageView
android:id="@+id/ivMain4"
android:layout_
android:layout_
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
更多信息ContraintLayout查看官方link
Output 以上代码
【讨论】：
你加快了我的约束学习速度，我想到约束布局还不错。【参考方案2】：您可以了解ConstraintLayout或TableLayout，这两种安排可以解决您的问题。
【讨论】：
以上是关于如何在Android View中实现这种布局配置的主要内容，如果未能解决你的问题，请参考以下文章
如何通过正确的视图 z 顺序在 android 中实现这个基本布局
如何实现在动态布局中添加更多视图在android中实现滚动视图