Question

这是一个专门针对ConstraintLayout的问题 - 在处理 UI 元素的宽度时，我们可以使用 margins 作为属性或使用 layout_constraintWidth_percent 作为属性。

示例 - 我的用户界面中央有一个按钮，其左右各有一些空白区域。像这样说 -

方法 1- 使用“marginLeft”和“marginRight”


    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

或

方法 2- 使用“app:layout_constraintWidth_percent”


    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="40dp"
        app:layout_constraintWidth_percent="0.8"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

以下哪种方式会更有效地呈现 UI 元素？

Answer 1

对于两种方法的效率，不会有任何区别，至少您可以衡量，两者之间（IMO），但两种方法并不相同。

设置

android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"

将在 ConstraintLayout 的左右两侧放置 24dp 的边距，而不考虑 ConstraintLayout 的宽度。视图的宽度将占据宽度的其余部分，该宽度将根据 ConstraintLayout 的宽度而变化。

如果你设置

app:layout_constraintWidth_percent="0.8"

那么视图的宽度将是 ConstraintLayout 宽度的 80%，每个边距（左右）实际上是 ConstraintLayout 宽度的 10%（1/2 20%）。因此，视图的宽度及其边距将根据 ConstraintLayout 的宽度而变化。

如果它真的对您的设计无关紧要，那么就选择一个。但是由于这两种布局方式存在差异，我会查看您支持的最小屏幕和最大屏幕上的布局，并包括横向/纵向等的任何其他替代布局。您可能会发现有一个很好的理由更喜欢一个。

Answer 2

边距

无论是 Web 开发还是 Android 开发，边距都是用于定位和设置用户界面元素样式的标准参数。它在容器外提供额外的空间/间隙...
简单来说，边距意味着向外推。

layout_constraintWidth_percent

我们要实现如下图所示的布局。有两个 ImageView。两者都应占据屏幕宽度的 50%。

预期结果：

解决方案：

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

    <ImageView
        android:id="@+id/textA"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"
        tools:src="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/textB"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"
        tools:src="@tools:sample/avatars" />

</android.support.constraint.ConstraintLayout>

说明：

我们使用 layout_constraintWidth_percent 根据屏幕宽度以百分比值设置视图宽度。

Android - 约束布局 - 边距与 layout_constraintWidth_percent

2 个答案: