根据设备的屏幕尺寸使项目之间的边距可缩放且值相同

Make margin between items scalable and same value depending on device's screen size

我的应用程序中有 7 个 椭圆形 形状的 ToggleButton(如工作日 - 请参阅 AOSP 时钟应用程序),我很乐意在它们之间实现边距,这将无处不在相同并且 ToggleButtons 将水平填充整个视图。更公平地说,我看起来像 android:layout_weight 但不是缩放项目的宽度(导致它的形状)来缩放它们之间的边距。

我的切换按钮代码:

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="1dp"
                android:layout_marginRight="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="1dp"
                android:background="?android:attr/selectableItemBackground"
                android:orientation="horizontal">

            <ToggleButton
                android:id="@+id/monday"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:textOff="M"
                android:textOn="M"
                android:layout_marginLeft="5sp"
                android:background="@drawable/round_button"
                android:textSize="15sp"
                android:layout_marginBottom="20dp"
                android:layout_marginTop="20dp"
                />
                <ToggleButton
                    android:id="@+id/tuesday"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:textOff="T"
                    android:textOn="T"
                    android:background="@drawable/round_button"
                    android:textSize="15sp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"/>
                <ToggleButton
                    android:id="@+id/wednesday"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:textOff="W"
                    android:textOn="W"
                    android:background="@drawable/round_button"
                    android:textSize="15sp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"/>
                <ToggleButton
                    android:id="@+id/thursday"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:textOff="T"
                    android:textOn="T"
                    android:background="@drawable/round_button"
                    android:textSize="15sp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"/>
                <ToggleButton
                    android:id="@+id/friday"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:textOff="F"
                    android:textOn="F"
                    android:background="@drawable/round_button"
                    android:textSize="15sp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"/>

                <ToggleButton
                    android:id="@+id/saturday"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"
                    android:background="@drawable/round_button"
                    android:textOff="S"
                    android:textOn="S"
                    android:textSize="15sp" />
                <ToggleButton
                    android:id="@+id/sunday"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:textOff="S"
                    android:textOn="S"
                    android:background="@drawable/round_button"
                    android:textSize="15sp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginRight="5sp"/>

            </LinearLayout>

最简单的方法是使用 ConstraintLayout 作为父视图组,然后在视图之间创建 spread_inside 水平链:

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

    <View
        android:id="@+id/one"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/two"/>

    <View
        android:id="@+id/two"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintStart_toEndOf="@+id/one"
        app:layout_constraintEnd_toStartOf="@+id/three"/>

    <View
        android:id="@+id/three"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintStart_toEndOf="@+id/two"
        app:layout_constraintEnd_toStartOf="@+id/four"/>

    <View
        android:id="@+id/four"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintStart_toEndOf="@+id/three"
        app:layout_constraintEnd_toStartOf="@+id/five"/>

    <View
        android:id="@+id/five"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintStart_toEndOf="@+id/four"
        app:layout_constraintEnd_toStartOf="@+id/six"/>

    <View
        android:id="@+id/six"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintStart_toEndOf="@+id/five"
        app:layout_constraintEnd_toStartOf="@+id/seven"/>

    <View
        android:id="@+id/seven"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintStart_toEndOf="@+id/six"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

第一个视图的 app:layout_constraintHorizontal_chainStyle 属性是这里的关键;它使 space 仅在视图之间均匀分布。您也可以尝试其他值,看看您最喜欢哪个。

如果您不想使用 ConstraintLayout,另一种方法是使用 LinearLayout,但在每个主视图之间添加一个 Space 视图观看次数,并赋予 Space 观看次数权重:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="horizontal">

    <View
        android:id="@+id/one"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:id="@+id/two"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:id="@+id/three"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:id="@+id/four"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:id="@+id/five"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:id="@+id/six"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:id="@+id/seven"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="#caf"/>

</LinearLayout>