根据设备的屏幕尺寸使项目之间的边距可缩放且值相同
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>
我的应用程序中有 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>