ConstraintLayout 相对距离百分比答案

【问题标题】：ConstraintLayout relative distance in percentage %ConstraintLayout 相对距离百分比
【发布时间】：2017-11-02 09:04:10
【问题描述】：

我正在使用ConstraintLayout，我想设置一个 percentage 从按钮 2 到位于屏幕 52% 处的 Textview 示例的顶部边距。

3% 当然是与屏幕高度相比。

位置应该相对于其他 UI 组件，指南仅从屏幕的顶部（或底部）参考

可以通过 xml完全做到这一点吗？

我知道可以通过编程方式和带有重量的标准布局来执行此操作，但我需要（如果存在）XML 解决方案。

代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="32dp"
        android:layout_weight="10"
        android:background="#00FF00"
        android:text="SAMPLE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="8dp"
        android:text="BUTTON 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

【问题讨论】：

PercentRelativeLayout 应该为您解决问题。
这个类已被弃用...但是你能举个例子吗？
您可以使用带有 android:weightSum 参数的 LinearLayout。然后，您可以根据需要添加视图。 Like Button 的权重为 0.5，而 textview 的权重为 0.3。您可以在按钮和文本视图之间添加一个视图。将权重设为 0.03，并将可见性设为不可见。我知道，这不是正确的方法：P 这是一种技巧
@appersiano 到目前为止，我认为没有办法仅使用 XML 来实现这一点。
How to make ConstraintLayout work with percentage values?的可能重复

标签： android android-constraintlayout

【解决方案1】：

经过一番研究，我终于找到了解决方法。

使用ConstraintLayoutLibrary 1.1.0-beta 的测试版，您可以以百分比模式定义高度。

    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.03"

所以我创建了一个空视图来创建空间。无论如何，目前还没有一种方法可以在百分比模式下定义 marginTop。

所以对于我的具体情况：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="10"
        android:background="#00FF00"
        android:text="SAMPLE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/spaceView" />

    <View
        android:id="@+id/spaceView"
        android:layout_width="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#FF0000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.03"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="8dp"
        android:text="BUTTON 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

【讨论】：

这是否正常工作？看到ConstraintLayout即使拥有如此强大的功能和如此多的功能，仍然不受欢迎。不用担心，如果您找不到它，我可以提供帮助。
接受您的回答，然后帮助需要的人。

【解决方案2】：

我复制了您的代码并添加了指南并在 TextView 中使用了它

<?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">

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

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

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:layout_weight="10"
        android:background="#00FF00"
        android:text="SAMPLE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/text_view_guideline" />

</android.support.constraint.ConstraintLayout>

【讨论】：

问题是我可以在按钮和文本视图之间有一个固定高度的视图
是的，你也可以使用约束布局来做到这一点。在 TextView 下方添加此代码<View android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:background="#ff00ff" app:layout_constraintBottom_toTopOf="@+id/textView4" app:layout_constraintTop_toBottomOf="@+id/button3" />
我更新了问题以更好地解释问题
好吧，我不明白你想要达到什么目的

【解决方案3】：

您可以在没有指南的情况下执行此操作。只需确保将ConstraintLayout 的子项设置为保持：

app:layout_constraintVertical_bias="0.52"
app:layout_constraintHeight_default="wrap"

例如，我们可以将一个自定义大小的容器放置在垂直 0.52 的屏幕位置：

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintVertical_bias="0.52"
            app:layout_constraintHeight_default="wrap"
            >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some text"/>


    </androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：