Android 在两个堆叠视图旁边显示一个方形图像视图答案

【问题标题】：Android display a square image view next to two stacked viewsAndroid 在两个堆叠视图旁边显示一个方形图像视图
【发布时间】：2020-01-30 20:06:30
【问题描述】：

我正在尝试在标签和文本框旁边显示图像视图。最终结果应如下所示：

图像视图的高度应与标签和文本框占用的空间相同，宽度应与高度相同，因此是正方形。

我查看了this 的问题以制作具有相同宽度和高度的图像视图。

我还查看了this 其他与我的问题类似的问题，但使用weightSum 和layout_weight 会使图像视图占用太多空间或失真。我也尝试将这两个问题的答案结合起来，但没有任何效果。

【问题讨论】：

将它们全部放在一个 viewGroup 中，比如 relativeLayout 并使其成为正方形。

标签： android android-layout kotlin androidx

【解决方案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_width="match_parent"
  android:layout_height="match_parent"
  android:background="#f4f4f4"
  tools:context="MainActivity">


<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.3"
    android:elevation="6dp"
    android:layout_margin="8dp"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button2"
    android:background="@color/colorAccent"/>

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:elevation="6dp"
    android:layout_marginLeft="8dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2" />

<EditText
    android:id="@+id/editText4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:elevation="6dp"
    android:ems="10"
    android:layout_marginLeft="8dp"
    android:inputType="textPersonName"
    android:text="Name"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView2" />

</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样

重要属性：

使您的图像变成正方形：

app:layout_constraintDimensionRatio="1:1"
为了让您的观点得到回应：

app:layout_constraintWidth_percent
app:layout_constraintHeight_percent

与：

android:layout_width="0dp"
android:layout_height="0dp"
使您的视图看起来像在容器中（在此示例中，我使用了一个按钮，但您可以随意使用任何类型的视图）
android:elevation="6dp"

【讨论】：