Question

我想相对于彼此放置2个视图，而不只是简单地以顶部，底部，左侧或右侧放置，而是以成比例的方式。让我解释。以下是4种定位方式：

其中2）和4）易于实现，并且具有由标准布局容器（例如RelativeLayout，ConstraintLayout）提供的内置支持，但是我当前的任务需要场景1）/ 3）中描述的定位

这个问题的简单解决方案是为两个View父对象设置不同的左/上边距，但这意味着如果需要将两个View放到其他位置，则所有边距都必须更改。

相反，我想在这两个视图之间进行某种相对定位，以使它们相对于“正确”距离都保持相对，无论它们在父级中作为一个单元放置在何处。

我怎么能达到同样的目的？一个有效的解决方案（层次结构扁平化，没有视图漏洞）将受到赞赏。

Answer 1

是的，可以在Point 3的XML代码下面使用约束布局签出（相同的Point 2将被实现，让我知道是否有查询）

<?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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonA"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:text="Add"
            android:layout_marginTop="15dp"
    />

    <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/buttonA"
            app:layout_constraintEnd_toEndOf="@id/buttonA"
            app:layout_constraintTop_toBottomOf="@id/buttonA"
            android:text="Add"
    />

</androidx.constraintlayout.widget.ConstraintLayout>`

请查看下面的代码，这是一种补丁，但效果很好。在这里，我们可以将大块相对于小块放置在一起。由于我们使用了约束，因此无论放在哪里都可以粘在一起。让我知道我做错了什么。

在这里，我们使用一个dummyView和app:layout_constraintHorizontal_bias="0.1"使其相对值从0变为1，例如1表示从100％开始向小块smae方向，而0.5表示从开始的小斑点向左50％。 >

 <?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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonA"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:text="Add"
            android:layout_marginTop="15dp"
    />

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/dummyView"
              app:layout_constraintTop_toBottomOf="@id/buttonA"
              app:layout_constraintStart_toStartOf="@id/buttonA"
              app:layout_constraintEnd_toEndOf="@id/buttonA"
              app:layout_constraintHorizontal_bias="0.1"/>

    <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/buttonA"
            app:layout_constraintStart_toEndOf="@id/dummyView"
            android:text="Add"
    />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

一个有效的解决方案（层次结构扁平化，没有视图漏洞）将受到赞赏。，您可以将ConstraintLayout与guidelines结合使用。

指南具有app:layout_constraintGuide_percent属性，使它们响应屏幕尺寸。
您可以在添加按钮app:layout_constraintWidth_percent和app:layout_constraintHeight_percent属性的同时使用它（不是强制性的，您可以按照准则约束视图，但我认为它更简单）。

以下是您想要的具有扁平层次结构的布局的示例：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:layout_constraintWidth_percent=".3" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintHeight_percent=".1"
    app:layout_constraintWidth_percent=".3" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".5" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".4" />

<android.support.constraint.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".45" />
</android.support.constraint.ConstraintLayout>

它看起来像这样（我正在从预览中添加屏幕截图以更好地理解指南）：

这只是一个示例，但是使用这些工具，您可以按自己的意愿创建布局。

一些额外的信息

我的解决方案在视图中不包含任何固定尺寸的尺寸，这将使布局具有响应性（无需为每个屏幕尺寸都构建一个布局）
您可能还会发现与您的问题有关的ConstraintLayout: Circular Positioning，但在这种情况下，我认为这对您来说不是最好的选择。

如何相对于彼此放置2个视图？

2 个答案:

一些额外的信息