如何使ConstraintLayout使用百分比值？

Question

通过Android Studio 2.2的预览1,Google在其支持库中发布了一个新的布局:ConstraintLayout.使用ConstraintLayout,在Android Studio中使用设计工具更容易,但我没有找到一种方法来使用相对大小(像LinearLayout中的百分比或'权重').有没有办法根据百分比定义约束？例如,使视图占据屏幕的40%,在视图之间创建20%的边距,将视图的宽度设置为另一个视图宽度的50%？

Answer 1

您目前可以通过几种方式执行此操作.一种是创建指南(右键单击设计区域,然后单击添加垂直/水平指南).然后,您可以单击指南的"标题",将定位更改为百分比.最后,您可以将视图限制为指南.另一种方法是使用偏差(百分比)定位视图,然后将其他视图锚定到该视图.

也就是说,我们一直在考虑如何提供基于百分比的维度.我不能做出任何承诺,但这是我们想要添加的东西.

Answer 2

这里有一个快速参考可能是有用的.
使用:这样的指南app:layout_constraintGuide_percent:

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

然后,您可以将此指南用作其他视图的锚点.

Answer 3

从"ConstraintLayout1.1.0-beta1"开始,您可以使用百分比来定义宽度和高度.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

这将宽度定义为屏幕宽度的40%.百分比和此指南的组合允许您创建所需的任何基于百分比的布局.

Answer 4

使用ConstraintLayout v1.1的新版本,您现在可以执行以下操作:

<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.65" />

这会将按钮限制为屏幕高度的20%和屏幕宽度的65%.

Answer 5

如何使用指南

接受的答案有一点不清楚如何使用指南以及"标题"是什么.

脚步

首先添加一个指南.

选择Guidline或稍微移动它以使约束可见.

然后单击圆圈("标题"),直到它变为百分比.然后,您可以将此百分比拖动到50%或任何您想要的.

之后,您可以将视图限制为指南,使其占父级的一定百分比(match_constraint在视图上使用).

Answer 6

指南是非常宝贵的 - 应用程序:layout_constraintGuide_percent是一个很好的朋友......但有时我们想要没有指导的百分比.现在可以使用权重:

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

这是一个更完整的示例,它使用带有额外权重的指南:

<?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:padding="16dp"
    tools:context="android.itomerbu.layoutdemo.MainActivity">

    <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.44"/>

    <Button
        android:id="@+id/btnThird"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/btnThird"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/btnTwoThirds"
        app:layout_constraintHorizontal_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/btnTwoThirds"
        app:layout_constraintBottom_toBottomOf="@+id/btnThird"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
</android.support.constraint.ConstraintLayout>

Answer 7

约束布局 1.0 使视图占据屏幕的百分比需要制定两个准则。在约束布局 1.1 中，通过允许您轻松地将任何视图约束为百分比宽度或高度，它变得更加简单。

这不是很棒吗？所有视图都支持 layout_constraintWidth_percent 和 layout_constraintHeight_percent 属性。这些将导致约束固定为可用空间的百分比。因此，可以使用几行 XML 来使 Button 或 TextView 展开以填充屏幕的百分比。

例如，如果您想将按钮的宽度设置为屏幕的 70%，您可以这样做：

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

请注意，您必须将尺寸应用作 0dp 的百分比，因为我们在上面已将 android:layout_width 指定为 0dp。

同样，如果你想把按钮的高度设置为屏幕的 20%，你可以这样做：

<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_constraintHeight_percent="0.2" />

看！这次我们将 android:layout_height 指定为 0dp，因为我们希望按钮使用高度作为百分比。

Answer 8

使用ConstraintLayout v1.1.2时,应将维度设置为0dp,然后将layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为0到1之间的值,如:

<!-- 50% width centered Button -->
<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent=".5" />

(您无需设置app:layout_constraintWidth_default="percent"或app:layout_constraintHeight_default="percent"使用ConstraintLayout 1.1.2及以下版本)

Answer 9

试试这个代码.您可以使用app:layout_constraintHeight_percent和app:layout_constraintWidth_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">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".4"></LinearLayout>

</android.support.constraint.ConstraintLayout>

摇篮:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

Answer 10

你可以用app:layout_constraintVertical_weight同样的它layout_weight在linearlayout

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

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button5"
    app:layout_constraintVertical_weight="1"/>

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/button4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>

注:app:layout_constraintVertical_weight(app:layout_constraintHorizontal_weight)会与android:layout_width="0dp"(android:layout_height="0dp"

Answer 11

对于可能觉得有用的人，您可以layout_constraintDimensionRatio在 a 内使用任何子视图ConstraintLayout，我们可以定义高度或宽度与其他尺寸的比率（至少一个宽度或高度必须为 0dp）示例

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

在这种情况下，纵横比为 16:9，app:layout_constraintDimensionRatio="16:9" 您可以在此处找到更多信息

Answer 12

使用指南，您可以将定位更改为基于百分比

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

你也可以用这种方式

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"