Android - 約束布局 - 邊距與 layout_constraintWidth_percent

Question

這是一個專門針對ConstraintLayout的問題 - 我們可以在使用 UI 元素的寬度時使用margins作為屬性或layout_constraintWidth_percent作為屬性。

示例 - 我的 UI 中心有一個按鈕，其左右兩側有一些空白區域。 說這樣的話——

• Approach1 - 使用“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" />

或者

• Approach2 - 使用“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 的寬度如何，都會在ConstraintLayout的右側和左側放置24dp的邊距。 視圖的寬度將占據寬度的其余部分，這將根據ConstraintLayout的寬度而變化。

如果你設置

app:layout_constraintWidth_percent="0.8"

那么視圖的寬度將是ConstraintLayout寬度的 80%，並且每個邊距（左右）將有效地是ConstraintLayout 寬度的10%（20% 的 1/2）。 因此，視圖的寬度及其邊距將根據ConstraintLayout的寬度而變化。

如果它對您的設計真的無關緊要，那么只需選擇一個。 但由於兩種布局方式不同，我會查看您支持的最小屏幕和最大屏幕上的布局，並包括橫向/縱向等任何其他替代布局。您可能會發現有充分的理由喜歡一個勝過另一個。

Answer 2

利潤

無論是 web 開發還是 Android 開發，邊距都是 position 和樣式用戶界面元素的標准參數。 它在容器外部提供了額外的空間/間隙......
簡單來說，margin就是向外推的意思。

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根據屏幕寬度以百分比值設置視圖的寬度。