如何使 ConstraintLayout 使用百分比值?
How to make ConstraintLayout work with percentage values?
Studio 2.2 Android 的预览版 1 Google 在其支持库中发布了一个新布局:ConstraintLayout
。使用 ConstraintLayout 可以更轻松地在 Android Studio 中使用设计工具,但我没有找到使用相对大小(百分比或 'weights' 就像在 LinearLayout 中一样)的方法。有没有办法根据百分比定义约束?例如。使一个视图占据屏幕的 40%,在视图之间创建 20% 的边距,将一个视图的宽度设置为另一个视图宽度的 50%?
您目前可以通过多种方式执行此操作。
一种是创建指南(右键单击设计区域,然后单击添加 vertical/horizontal 指南)。然后您可以单击指南的 "header" 将定位更改为基于百分比。最后,您可以将视图限制为指南。
另一种方法是使用偏差(百分比)定位视图,然后将其他视图锚定到该视图。
也就是说,我们一直在考虑如何提供基于百分比的维度。我不能做出任何承诺,但这是我们想添加的内容。
在这里快速参考可能会有用。
观看次数
使用 指南 和 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"/>
然后您可以将此指南用作其他视图的定位点。
或
使用 bias 和 app:layout_constraintHorizontal_bias
and/or app:layout_constraintVertical_bias
在可用 space 允许时修改视图位置
<Button
...
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.25"
...
/>
浏览量
另一个基于百分比的值是元素的高度 and/or 宽度,app:layout_constraintHeight_percent
and/or app:layout_constraintWidth_percent
:
<Button
...
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.5"
...
/>
一个有用的补充是相对于第一个维度设置另一个维度,例如-根据宽度按比例设置高度:
app:layout_constraintDimensionRatio="1:1"
指南是无价的 - app:layout_constraintGuide_percent 是一个很好的朋友...但是有时我们想要没有指南的百分比。现在可以使用 weights:
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>
从 "ConstraintLayout1.1.0-beta1" 开始,您可以使用百分比来定义宽度和高度。
android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"
这会将宽度定义为屏幕宽度的 40%。
结合使用百分比和指南,您可以创建任何您想要的基于百分比的布局。
如何使用指南
接受的答案对于如何使用指南以及“header”是什么有点不清楚。
步骤
首先添加一个指南。
Select Guidline 或稍微移动它以使约束可见。
然后单击圆圈(“header”)直到它变成百分比。然后,您可以将该百分比向下拖动到 50% 或任何您想要的值。
之后,您可以将视图限制在指南中,使其占 parent 的一定百分比(在视图上使用 match_constraint
)。
您可以使用 app:layout_constraintVertical_weight
与 linearlayout
中的 layout_weight
相同
<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"
简单地说,只需将 , 替换为您的指南标签
app:layout_constraintGuide_begin="291dp"
和
app:layout_constraintGuide_percent="0.7"
其中 0.7 表示 70%。
此外,如果您现在尝试拖动参考线,拖动的值现在将显示在 %age 中。
使用新版本的 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%。
对于 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" />
(ConstraintLayout 1.1.2及以下版本不需要设置app:layout_constraintWidth_default="percent"
或app:layout_constraintHeight_default="percent"
)
试试这个代码。您可以使用 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>
Gradle:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}
我知道这不是 OP 最初要求的,但是当我遇到类似问题时,这对我有很大帮助。为希望更改布局 window 大小的人添加此内容(我经常使用),通过代码。在问题 activity 中将其添加到您的 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));
对于可能有用的人,您可以在 ConstraintLayout
内的任何子视图中使用 layout_constraintDimensionRatio
,我们可以定义高度或宽度与其他维度的比率(至少必须有一个宽度或高度为 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
使用指南,您可以将定位更改为基于百分比
<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"
Constraint Layout 1.0 使视图占据屏幕的一定百分比需要制定两个准则。在 Constraint Layout 1.1 中,它变得更简单,允许您轻松地将任何视图限制为百分比宽度或高度。
是不是很棒?所有视图都支持 layout_constraintWidth_percent 和 layout_constraintHeight_percent 属性。这些将导致约束固定为可用 space 的百分比。因此,只需几行 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,因为我们希望按钮使用高度作为百分比。
Studio 2.2 Android 的预览版 1 Google 在其支持库中发布了一个新布局:ConstraintLayout
。使用 ConstraintLayout 可以更轻松地在 Android Studio 中使用设计工具,但我没有找到使用相对大小(百分比或 'weights' 就像在 LinearLayout 中一样)的方法。有没有办法根据百分比定义约束?例如。使一个视图占据屏幕的 40%,在视图之间创建 20% 的边距,将一个视图的宽度设置为另一个视图宽度的 50%?
您目前可以通过多种方式执行此操作。
一种是创建指南(右键单击设计区域,然后单击添加 vertical/horizontal 指南)。然后您可以单击指南的 "header" 将定位更改为基于百分比。最后,您可以将视图限制为指南。
另一种方法是使用偏差(百分比)定位视图,然后将其他视图锚定到该视图。
也就是说,我们一直在考虑如何提供基于百分比的维度。我不能做出任何承诺,但这是我们想添加的内容。
在这里快速参考可能会有用。
观看次数
使用 指南 和 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"/>
然后您可以将此指南用作其他视图的定位点。
或
使用 bias 和 app:layout_constraintHorizontal_bias
and/or app:layout_constraintVertical_bias
在可用 space 允许时修改视图位置
<Button
...
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.25"
...
/>
浏览量
另一个基于百分比的值是元素的高度 and/or 宽度,app:layout_constraintHeight_percent
and/or app:layout_constraintWidth_percent
:
<Button
...
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.5"
...
/>
一个有用的补充是相对于第一个维度设置另一个维度,例如-根据宽度按比例设置高度:
app:layout_constraintDimensionRatio="1:1"
指南是无价的 - app:layout_constraintGuide_percent 是一个很好的朋友...但是有时我们想要没有指南的百分比。现在可以使用 weights:
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>
从 "ConstraintLayout1.1.0-beta1" 开始,您可以使用百分比来定义宽度和高度。
android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"
这会将宽度定义为屏幕宽度的 40%。 结合使用百分比和指南,您可以创建任何您想要的基于百分比的布局。
如何使用指南
接受的答案对于如何使用指南以及“header”是什么有点不清楚。
步骤
首先添加一个指南。
Select Guidline 或稍微移动它以使约束可见。
然后单击圆圈(“header”)直到它变成百分比。然后,您可以将该百分比向下拖动到 50% 或任何您想要的值。
之后,您可以将视图限制在指南中,使其占 parent 的一定百分比(在视图上使用 match_constraint
)。
您可以使用 app:layout_constraintVertical_weight
与 linearlayout
layout_weight
相同
<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"
简单地说,只需将 , 替换为您的指南标签
app:layout_constraintGuide_begin="291dp"
和
app:layout_constraintGuide_percent="0.7"
其中 0.7 表示 70%。
此外,如果您现在尝试拖动参考线,拖动的值现在将显示在 %age 中。
使用新版本的 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%。
对于 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" />
(ConstraintLayout 1.1.2及以下版本不需要设置app:layout_constraintWidth_default="percent"
或app:layout_constraintHeight_default="percent"
)
试试这个代码。您可以使用 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>
Gradle:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}
我知道这不是 OP 最初要求的,但是当我遇到类似问题时,这对我有很大帮助。为希望更改布局 window 大小的人添加此内容(我经常使用),通过代码。在问题 activity 中将其添加到您的 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));
对于可能有用的人,您可以在 ConstraintLayout
内的任何子视图中使用 layout_constraintDimensionRatio
,我们可以定义高度或宽度与其他维度的比率(至少必须有一个宽度或高度为 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
使用指南,您可以将定位更改为基于百分比
<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"
Constraint Layout 1.0 使视图占据屏幕的一定百分比需要制定两个准则。在 Constraint Layout 1.1 中,它变得更简单,允许您轻松地将任何视图限制为百分比宽度或高度。
是不是很棒?所有视图都支持 layout_constraintWidth_percent 和 layout_constraintHeight_percent 属性。这些将导致约束固定为可用 space 的百分比。因此,只需几行 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,因为我们希望按钮使用高度作为百分比。