java - 使 ConstraintLayout 组件在简单的 UI 中填充整个显示

Question

我正在为一个项目开发一个简单的 Android UI，如下所示:

/image/vVQnr.png

我想知道是否有可能使所有约束布局的元素填充整个显示屏(我对 Android 世界完全陌生)。这是我的 XML:

<?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"
    tools:context=".MainActivity">

<Button
    android:id="@+id/tempSETTINGS"
    android:layout_width="53dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:background="@android:drawable/ic_menu_preferences"
    android:backgroundTint="@android:color/background_dark"
    app:layout_constraintBaseline_toBaselineOf="@+id/temperature"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/temperature"></Button>

<Button
    android:id="@+id/humSETTINGS"
    android:layout_width="53dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:background="@android:drawable/ic_menu_preferences"
    android:backgroundTint="@android:color/background_dark"
    app:layout_constraintBaseline_toBaselineOf="@+id/humidity"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/humidity"></Button>

<Button
    android:id="@+id/hrSETTINGS"
    android:layout_width="53dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:background="@android:drawable/ic_menu_preferences"
    android:backgroundTint="@android:color/background_dark"
    app:layout_constraintBaseline_toBaselineOf="@+id/hr"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/hr"></Button>

<Button
    android:id="@+id/empty1"
    android:layout_width="53dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:background="@android:color/transparent"
    android:backgroundTint="@android:color/transparent"
    app:layout_constraintBaseline_toBaselineOf="@+id/presence"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/presence"></Button>

<Button
    android:id="@+id/empty2"
    android:layout_width="53dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:background="@android:drawable/ic_menu_preferences"
    android:backgroundTint="@android:color/transparent"
    app:layout_constraintBaseline_toBaselineOf="@+id/accelerometer"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/accelerometer"></Button>

<Switch
    android:id="@+id/temperature"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Temperature Sensor"
    app:layout_constraintEnd_toStartOf="@+id/tempSETTINGS"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Switch
    android:id="@+id/humidity"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Humidity Sensor"
    app:layout_constraintEnd_toStartOf="@+id/humSETTINGS"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/temperature" />

<Switch
    android:id="@+id/hr"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Heart Rate Sensor"
    app:layout_constraintEnd_toStartOf="@+id/hrSETTINGS"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/humidity" />

<Switch
    android:id="@+id/presence"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Presence Sensor"
    app:layout_constraintEnd_toStartOf="@+id/empty1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/hr" />

<Switch
    android:id="@+id/accelerometer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Accelerometer"
    app:layout_constraintEnd_toStartOf="@+id/empty2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/presence" />

<Button
    android:id="@+id/log"
    android:layout_width="0dp"
    android:layout_height="43dp"
    android:layout_marginEnd="16dp"
    android:text="log"
    app:layout_constraintBaseline_toBaselineOf="@+id/alarmSettings"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/alarmSettings" />

<Button
    android:id="@+id/alarmSettings"
    android:layout_width="0dp"
    android:layout_height="44dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="alarm settings"
    app:layout_constraintEnd_toStartOf="@+id/log"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/accelerometer" />

</android.support.constraint.ConstraintLayout>

我还有一个问题。可以用齿轮更改 key 图标吗？我用谷歌搜索它，因为它不在 android studio 绘图中，但我没有发现任何有趣的东西。 提前致谢。

Answer 1

这应该可能取决于您希望对象填充的尺寸。至于你将如何实现它。

例如，如果您希望按钮从边缘延伸到边缘，但仅水平延伸，则需要修复这些属性。以您的为例:

<Button
    android:id="@+id/tempSETTINGS"
    android:layout_width="53dp"
    android:layout_height="0dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:background="@android:drawable/ic_menu_preferences"
    android:backgroundTint="@android:color/background_dark"
    app:layout_constraintBaseline_toBaselineOf="@+id/temperature"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/temperature"></Button>

要使其水平填充屏幕，您应该能够执行以下操作:

<Button
    android:id="@+id/tempSETTINGS"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="@android:drawable/ic_menu_preferences"
    android:backgroundTint="@android:color/background_dark"
    app:layout_constraintBaseline_toBaselineOf="@+id/temperature"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="parent"></Button>

或者，您可以在线性布局中定义布局权重，例如 1.0，然后在每个子级自己的 XML 中设置它们。每个 child 占总数的金额定义了他们覆盖屏幕的百分比。这也可以很好地适应不同的屏幕尺寸和宽高比。

至于设置图像，您可以将其设置为您想要的任何内容，只需将其添加到可绘制对象并分配适当的引用即可。如果您找不到 Google 的 Android 镜像之一，我建议您查看 Material.io 。它还可以让您获得每个资源的不同 dpi 变体，以及黑色或白色版本。然后使用与之前相同的属性，例如不透明度。