如何在不使用 ConstraintLayout 中的边距属性的情况下相对于屏幕宽度设置 2 个视图之间的空间

Posted 2023-04-18

【中文标题】如何在不使用 ConstraintLayout 中的边距属性的情况下相对于屏幕宽度设置 2 个视图之间的空间

【英文标题】：How to set space between 2 views relative to screen width without using margin property in ConstraintLayout

【发布时间】：2021-11-27 04:47:23

【问题描述】：

我试图像这样在两个视图（水平和垂直）之间设置一个空间

<?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_
    tools:context=".Fragments.SetProfileFragment">

    <TextView
        android:id="@+id/textView1"
        android:layout_
        android:layout_
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:text="Test 1"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:layout_marginStart="12dp"
        android:layout_marginTop="4dp"
        android:text="Test 2"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

但我希望两个TextViews 之间的空间占屏幕的 1%。有可能吗？

【问题讨论】：

为此，您可以在运行时添加边距...就像您可以在运行时找出屏幕宽度和高度并将 1% 的边距添加到视图中一样

所以我必须以编程方式设置边距？

是的............

非常感谢，但它有点复杂，我想要响应式布局，如果我按边距硬编码空间，可以吗？

您也可以使用填充代替边距...请检查我添加的以下代码..

【参考方案1】：

但我想将两个 TextView 隔开 1% 的屏幕。有可能吗？

为父级设置起始和顶部约束：使用Horizontal & Vertical Guidelines 和根ConstraintLayout 的百分比：

1% 被认为是 0.01，因为 1% 等于全屏宽度 >> 所以，使用app:layout_constraintGuide_percent="0.01"

您可以将约束应用到textview1，为了不再重复，您可以将textView2 约束到textview1 的BaseLine。

用于在 TextView 之间设置 1% 的屏幕宽度： 使用限制到 textView1 末尾的空间，其百分比为屏幕宽度的 1%：app:layout_constraintWidth_percent="0.01"。然后将textView2 约束到空间，而不是textView。

<?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"
    android:layout_
    android:layout_
    tools:context=".Fragments.SetProfileFragment">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.01" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.01" />

    <TextView
        android:id="@+id/textView1"
        android:layout_
        android:layout_
        android:text="Test 1"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="@id/guideline"
        app:layout_constraintTop_toTopOf="@id/guideline2" />

    <Space
        android:id="@+id/space"
        android:layout_
        android:layout_
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintWidth_percent="0.01" />

    <TextView
        android:id="@+id/textView2"
        android:layout_
        android:layout_
        android:text="Test 2"
        android:textSize="20sp"
        app:layout_constraintBaseline_toBaselineOf="@id/textView1"
        app:layout_constraintStart_toEndOf="@id/space"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

【参考方案2】：

你可以试试这个代码

    val displayMetrics = DisplayMetrics()
    windowManager.defaultDisplay.getMetrics(displayMetrics)

    val width = displayMetrics.widthPixels
    val height = displayMetrics.heightPixels
    val widthPer = (1*100)/width  //1% percentage width
    val heightPer = (1*100)/height //1% percentage height
    textView1.setPadding(widthPer, heightPer, widthPer, heightPer)  //Adding padding
    textView2.setPadding(widthPer, heightPer, widthPer, heightPer) //Adding padding