Делаю первое приложение. Мне нужно, чтобы два таймера снизу - всегда находились в серединах двух половинок (по горизонтали). Иначе говоря, будто они в серединах двух столбцов таблицы. А черточки должны начинаться снизу, как на картинке.
Пока работал только с ConstraintLayout
, и уже замучился. У него привязка идет к краю элемента. Т.е. если размер элемента меняется, то все двигается, да и он сам не остается на месте. А у меня, например 01 час меняется на 1.
В сторону чего мне смотреть?
-
1вы должны понимать, что 01 (2 символа) и 1 (1 символ) - разное количество символов и ровно отформатировано никак быть не может. Вам в вопросе нужно показать, что получается и что бы вы хотели получить в итоге (ценрирование по левому краю, по ценру, по правому краю или как должно быть компенсировано разное количество символов), так же приложите саму разметку с которой у вас появились проблемы. скриншот того, как все ровно с одинаковым количеством символов в данном случае совершенно лишний, так как никак не поясняет проблему)– pavlofffCommented 13 янв. 2018 в 23:44
-
1Пока не совсем ясно, в чем именно проблема (какой требуется результат), но смотреть скорее всего нужно в сторону опорных линий (guideline) с процентами и свойства gravity виджетов– pavlofffCommented 13 янв. 2018 в 23:48
-
2вам нужен ConstraintLayout с Guideline привязками. Вложенные LinearLayout да еще и с weight параметром ухудшают перфоманс. Учитесь сразу на констреинте писать– Sviat VolkovCommented 14 янв. 2018 в 9:15
-
1вариантов реализации несколько, но просто вьюха с черным фоном в данном случае вполне подходит. растягиваете её от края до гайдлайна и готово– Sviat VolkovCommented 14 янв. 2018 в 9:50
-
2вопрос из тех, что сверстать в 100 раз быстрей, чем рассказывать.– Shwarz AndreiCommented 14 янв. 2018 в 10:07
1 ответ
Для верстки такого макета на понадобятся опорные линии (guidline).
На макет размещаем три опорных линии (правый клик на визуальном редакторе разметки: Helpers -> Add vertical\horizontal guidelines): две вертикальных (1 и 2) и одну горизонтальную (3). Вертикальные делят экран на 3 равные части (33% и 66%), горизонтальная - верхнюю четверть (25%). Чтобы изменить позицию опорной линии на проценты нужно щелкать на кружок.
Теперь закрепляем виджеты. Левые счетчики крепим правым краем к первой опорной линии,левым краем к краю экрана (чтобы можно было провести черту до конца экрана). При этом верхний низом к 3 опорной линии, а нижний верхом к ней же. Этим виджетам ставим атрибут android:gravity="right", чтобы текст начинался от правого края.
Правый счетчик крепим левой стороной ко второй опорной линии, правой стороной к краю экрана, а верхом и низом к верху и низу левого нижнего счетчика - так они будут располагаться на одном уровне по горизонтали.
Кнопку и текст равномерно распределяем на оставшееся пространство по вертикали через инструмент chains (правая кнопка мыши: Center -> Center Verticaly).
Линии под счетчиками можно сделать, просто указав этим виджетам в качестве фона изображение 9-path с чертой снизу - это самый простой вариант (в примере я делать этого не буду).
Вот что в итоге получилось:
Разметка:
<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>