3

Делаю первое приложение. Мне нужно, чтобы два таймера снизу - всегда находились в серединах двух половинок (по горизонтали). Иначе говоря, будто они в серединах двух столбцов таблицы. А черточки должны начинаться снизу, как на картинке.
Пока работал только с ConstraintLayout, и уже замучился. У него привязка идет к краю элемента. Т.е. если размер элемента меняется, то все двигается, да и он сам не остается на месте. А у меня, например 01 час меняется на 1. В сторону чего мне смотреть?

введите сюда описание изображения

9
  • 1
    вы должны понимать, что 01 (2 символа) и 1 (1 символ) - разное количество символов и ровно отформатировано никак быть не может. Вам в вопросе нужно показать, что получается и что бы вы хотели получить в итоге (ценрирование по левому краю, по ценру, по правому краю или как должно быть компенсировано разное количество символов), так же приложите саму разметку с которой у вас появились проблемы. скриншот того, как все ровно с одинаковым количеством символов в данном случае совершенно лишний, так как никак не поясняет проблему)
    – pavlofff
    Commented 13 янв. 2018 в 23:44
  • 1
    Пока не совсем ясно, в чем именно проблема (какой требуется результат), но смотреть скорее всего нужно в сторону опорных линий (guideline) с процентами и свойства gravity виджетов
    – pavlofff
    Commented 13 янв. 2018 в 23:48
  • 2
    вам нужен ConstraintLayout с Guideline привязками. Вложенные LinearLayout да еще и с weight параметром ухудшают перфоманс. Учитесь сразу на констреинте писать Commented 14 янв. 2018 в 9:15
  • 1
    вариантов реализации несколько, но просто вьюха с черным фоном в данном случае вполне подходит. растягиваете её от края до гайдлайна и готово Commented 14 янв. 2018 в 9:50
  • 2
    вопрос из тех, что сверстать в 100 раз быстрей, чем рассказывать. Commented 14 янв. 2018 в 10:07

1 ответ 1

4

Для верстки такого макета на понадобятся опорные линии (guidline).

На макет размещаем три опорных линии (правый клик на визуальном редакторе разметки: Helpers -> Add vertical\horizontal guidelines): две вертикальных (1 и 2) и одну горизонтальную (3). Вертикальные делят экран на 3 равные части (33% и 66%), горизонтальная - верхнюю четверть (25%). Чтобы изменить позицию опорной линии на проценты нужно щелкать на кружок.

scrn

Теперь закрепляем виджеты. Левые счетчики крепим правым краем к первой опорной линии,левым краем к краю экрана (чтобы можно было провести черту до конца экрана). При этом верхний низом к 3 опорной линии, а нижний верхом к ней же. Этим виджетам ставим атрибут android:gravity="right", чтобы текст начинался от правого края.
Правый счетчик крепим левой стороной ко второй опорной линии, правой стороной к краю экрана, а верхом и низом к верху и низу левого нижнего счетчика - так они будут располагаться на одном уровне по горизонтали.
Кнопку и текст равномерно распределяем на оставшееся пространство по вертикали через инструмент chains (правая кнопка мыши: Center -> Center Verticaly).

Линии под счетчиками можно сделать, просто указав этим виджетам в качестве фона изображение 9-path с чертой снизу - это самый простой вариант (в примере я делать этого не буду).

Вот что в итоге получилось:

scrn

Разметка:

<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>
1
  • Супер, спасибо!
    – keltkelt
    Commented 14 янв. 2018 в 12:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.