Сделать поле между элементами масштабируемым и одинаковое значение в зависимости от размера экрана устройства

Question

У меня в приложении 7 ToggleButton в форме овал (как в будние дни - см. Приложение часов AOSP), и я хотел бы реализовать поле между ними, которое будет везде одинаковым, и ToggleButtons заполнит всесмотреть по горизонтали.Чтобы сказать это более справедливо, я выгляжу примерно как android:layout_weight, но вместо того, чтобы масштабировать ширину элемента (навести форму), чтобы масштабировать поле между ними.

Код для моих кнопок ToggleButtons:

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

Answer 1

Самый простой способ сделать это - использовать 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 впервое мнение является ключевым здесь;это делает пространство равномерно распределенным только между видами.Вы также можете попробовать другие значения, чтобы увидеть, что вам больше нравится.

Если вы не хотите использовать 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>