主页 / 问题 / 770422
Accepted
keltkelt
Asked:2020-01-14 04:48:51 +0000 UTC2020-01-14 04:48:51 +0000 UTC

表还是约束布局？

  • 772

我正在做我的第一个申请。我希望底部的两个计时器 - 始终位于两半的中间（水平）。换句话说，就好像它们在表格的两列的中间。破折号应该从底部开始，如图所示。
到目前为止，我只工作过ConstraintLayout，我已经筋疲力尽了。它在元素的边缘有一个锚点。那些。如果元素的大小发生变化，那么一切都会移动，并且元素本身不会留在原地。对我来说，例如，01 小时变为 1。我应该看什么方向？

在此处输入图像描述

android

1 个回答

  1. Best Answer

    要布局这样的布局，您不需要参考线（指导线）。

    我们在布局上放置三个参考线（右键单击可视化标记编辑器：Helpers -> Add vertical\horizo​​ntal Guidelines）：两条垂直线（1 和 2）和一条水平线（3）。垂直的将屏幕分成 3 个相等的部分（33% 和 66%），水平的一个 - 上四分之一（25%）。要将参考线的位置更改为百分比，请单击圆圈。

    屏幕截图

    现在我们修复小部件。我们将左计数器的右边缘固定在第一条参考线上，左边缘固定在屏幕边缘（这样您就可以在屏幕末端画一条线）。在这种情况下，上底到第三条参考线，下上到第三条参考线。我们将属性android:gravity="right"设置为这些小部件，以便文本从右边缘开始。
    我们将右侧计数器的左侧连接到第二条参考线，右侧连接到屏幕边缘，顶部和底部连接到左下计数器的顶部和底部 - 所以它们将位于水平方向相同。
    使用链工具（鼠标右键：Center -> Center Verticaly）将按钮和文本均匀分布在剩余的垂直空间上。

    可以通过简单地为这些小部件提供一个带有破折号作为背景的 9 路径图像来完成计数器下的线条 - 这是最简单的选项（我不会在示例中这样做）。

    这是最后发生的事情：

    屏幕截图

    标记：

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

    <android.support.constraint.Guideline
        android:id="@+id/guidelineVertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineVertical2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.66" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.25" />

    <TextView
        android:id="@+id/count1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:gravity="right"
        android:text="01:00:15"
        android:textSize="21sp"
        app:layout_constraintBottom_toTopOf="@+id/guidelineHorizontal"
        app:layout_constraintEnd_toStartOf="@+id/guidelineVertical"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/count2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="right"
        android:text="1:00:00"
        android:textSize="21sp"
        app:layout_constraintEnd_toStartOf="@+id/guidelineVertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal" />

    <TextView
        android:id="@+id/count3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="12:00:00"
        android:textSize="21sp"
        app:layout_constraintBottom_toBottomOf="@+id/count2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guidelineVertical2"
        app:layout_constraintTop_toTopOf="@+id/count2" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/count2" />

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Test text ..."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

</android.support.constraint.ConstraintLayout>
    • 4

相关问题