[英]How to achieve this layout configuration in Android View
My current Android application requires a complex layout as follows.我当前的 Android 应用程序需要如下复杂的布局。
this is the completed view这是完成的视图
------------------------------------------------------------------------------------------
| |
| --------------- ------------------------------------------------- --------------- |
| | | | | | | |
| | | | | | | |
| | IV(1) | | TV(1) | | IV(2) | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| --------------- ------------------------------------------------- --------------- |
| --------------------------------------------------------------------------------- |
| | | |
| | | |
| | | |
| | TV(2) | |
| | | |
| | | |
| --------------------------------------------------------------------------------- |
| --------------- ------------------------------------------------- --------------- |
| | | | | | | |
| | | | | | | |
| | IV(3) | | TV(3) | | IV(4) | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| --------------- ------------------------------------------------- --------------- |
------------------------------------------------------------------------------------------
It consists of four ImageView
s, (eg IV1
- 4
) and three TextView
s (eg TV1
- 3
)它由四个ImageView
(例如IV1
- 4
)和三个TextView
(例如TV1
- 3
)组成
There are additional restrictions I have to adhere to我必须遵守其他限制
For the Top and middle rows shown above I have managed to get to the following layout对于上面显示的顶行和中间行,我设法获得了以下布局
<RelativeLayout
android:id="@+id/top_row_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingTop="10dp"
android:paddingEnd="10dp">
<ImageView
android:id="@+id/top_left_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:src="@drawable/ic_launcher_background" />
<TextView
android:id="@+id/top_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:src="@drawable/ic_launcher_background" />
</RelativeLayout>
<TextView
android:id="@+id/middle_text"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="@string/lorem_ipsum" />
I wanted to achieve the desired UI without having to develop a custom View, I've a feeling that it may be the only solution though.我想在无需开发自定义视图的情况下实现所需的 UI,但我感觉它可能是唯一的解决方案。
You can achieve this layout using ConstraintLayout
您可以使用ConstraintLayout
实现此布局
Try below code:试试下面的代码:
<?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_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:padding="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/clMain1"
android:layout_width="match_parent"
android:layout_height="0dp"
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_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="0dp"
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_width="match_parent"
android:layout_height="0dp"
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_width="match_parent"
android:layout_height="0dp"
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_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="0dp"
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>
For more info for ContraintLayout
Check this official link有关ContraintLayout
更多信息,请查看此官方链接
您可以了解ConstraintLayout
或TableLayout
,这两种安排可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.