如何使ConstraintLayout使用百分比值?

时间:2016-05-19 08:46:54

标签: android android-support-library android-constraintlayout

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

14 个答案:

答案 0 :(得分:188)

您目前可以通过多种方式执行此操作。

一种是创建指南(右键单击设计区域,然后单击添加垂直/水平指南)。然后,您可以单击指南的“标题”,将定位更改为百分比。最后,您可以将视图限制为指南。

另一种方法是使用偏差(百分比)定位视图,然后将其他视图锚定到该视图。

尽管如此,我们一直在考虑如何提供基于百分比的维度。我不能做出任何承诺,但这是我们想要补充的内容。

答案 1 :(得分:134)

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

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

然后您可以将此指南用作其他视图的定位点。

答案 2 :(得分:79)

&#34; ConstraintLayout1.1.0-beta1&#34;您可以使用百分比来定义宽度和宽度。高度。

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

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

答案 3 :(得分:58)

使用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%。

答案 4 :(得分:35)

如何使用指南

接受的答案有一点不清楚如何使用指南以及&#34;标题&#34;是

<强>步骤

首先添加指南。

enter image description here

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

enter image description here

然后点击圆圈(&#34;标题&#34;),直到它变为百分比。然后,您可以将此百分比降低至50%或任何您想要的值。

enter image description here

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

enter image description here

答案 5 :(得分:30)

指南非常宝贵 - 应用程序: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>

答案 6 :(得分:14)

Constraint Layout 1.0制作视图占据了制作两个准则所需的屏幕百分比。在Constraint Layout 1.1中,它使您可以轻松地将任何视图限制为一定的宽度或高度来简化它。

enter image description here

这不是很棒吗?所有视图都支持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" />

请注意,由于我们在上面将android:layout_width指定为0dp,因此必须将尺寸用作0dp的百分比。

类似地,如果要将按钮的高度设置为屏幕的20%,则可以这样做:

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

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

答案 7 :(得分:7)

对于ConstraintLayout v1.1.2,应将维度设置为0dp,然后将layout_constraintWidth_percentlayout_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" />

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

答案 8 :(得分:7)

尝试此代码。您可以使用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'
}

enter image description here

答案 9 :(得分:6)

您可以在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_weightapp:layout_constraintHorizontal_weight)适用于android:layout_width="0dp"android:layout_height="0dp"

答案 10 :(得分:2)

只需在指南标记

中替换即可
app:layout_constraintGuide_begin="291dp"

app:layout_constraintGuide_percent="0.7"

其中0.7表示70%。

此外,如果您现在尝试拖动指南,拖动的值现在将以%age显示。

答案 11 :(得分:1)

对于可能会有用的人,您可以在layout_constraintDimensionRatio内的任何子视图中使用ConstraintLayout,然后我们可以定义Height或Width与其他尺寸的比率(至少一个必须为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",您可以找到更多信息HERE

答案 12 :(得分:0)

我知道这不是OP最初要求的,但是在这种情况下,当我遇到类似的问题时,这对我有很大帮助。.为希望更改布局窗口大小(我经常使用)的人们添加了此功能,通过代码。将其添加到问题活动中的onCreate中。 (将其更改为80%)

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

int width = dm.widthPixels;
int height = dm.heightPixels;

getWindow().setLayout((int)(width * 0.8), (int)(height * 0.8));

答案 13 :(得分:0)

使用准则,您可以将排名更改为基于百分比

<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=".4"