Практика: Пользовательский интерфейс. View, основные атрибуты – Devcolibri

Практика: Пользовательский интерфейс. View, основные атрибуты

Для всех практических заданий в качестве коренного контейнера используйте LinearLayout, указанный ниже. А все виджеты добавляйте внутрь него:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <!--Сюда добавляйте свой код-->

</LinearLayout>

Задание 1. Атрибуты android:layout_width, android:layout_height

Создайте три TextView, как указано на картинке: PracticeWidthHeight

Условия:

  • Размер текста у всех элементов – 20sp.
  • Фоновый цвет – #E7E4E4.
  • Размер вертикального отступа между элементами – 20dp.

Задание 2. Атрибуты padding, margin

Создайте три TextView, как указано на картинке: PaddingMarginPractice

Условия:

  • Размер текста у всех элементов – 20sp.
  • Фоновый цвет – #E7E4E4.
  • Отступ сверху и слева снаружи у каждого элемента – 10dp.
  • Отступ со всех сторон внутри элемента – 5dp.

Отступы слева снаружи элементов можно делать двумя способами:

  • Указывая атрибут android:layout_marginStartу всех элементов.
  • Указывая атрибут android:paddingStart у коренного контейнера. Получится, что он сделает отступ внутри себя слева. Т.к. все элементы будут находиться внутри него, то у них появится отступ относительно контейнера.

Задание 2.1

Вначале используйте атрибут android:layout_margin у всех элементов для задания отступов снаружи.

Задание 2.2.

Удалите атрибуты android:layout_marginStart, и теперь используйте атрибут android:paddingStart у родительского элемента для задания отступов внутри него. Подумайте хорошенько, какие преимущества у такого варианта.

Задание 3. Атрибуты gravity, layout_gravity

Создайте три TextView, как указано на картинке: GravityPractice

Условия:

  • Размер текста у всех элементов – 20sp.
  • Фоновый цвет – #E7E4E4.
  • Размер вертикального отступа между элементами – 20dp.
  • Ширина нижнего элемента – 300dp.

Задание 4.* Реальный макет

Заказчик сказал, что хочет, чтобы вы сделали ему макет экрана логина. Прислал такой шаблон:

LoginForm

На экране располагается два поля для ввода символов. Этот элемент называется EditText. Используйте атрибут android:hint для отображения текста вместо android:text. Этот атрибут отображает текст только, пока пользователь не ввёл ничего. И снизу находится кнопка.

Исходные данные:

  • Ширина кнопки и текстовых полей – 180 dp. Высота кнопки – 30dp, у текстовых полей – высота должна совпадать с высотой текста.
  • Текст для имени и пароля написан курсивом, его размер – 16sp. Текст кнопки написан толстым шрифтом, размер текста – 14sp.
  • Фоновый цвет экрана – #E7E4E4. Цвет текста у кнопки такой же, как фоновый цвет полей пользователя – белый (#FFF).
  • У поля Имя сверху отступ – 15dp, у поля Пароль сверху отступ, такой же как у кнопки – 5dp.
  • У текстовых полей должны быть отступы внутри элемента со всех сторон – 5dp.
  • Все элементы должны быть центрированы горизонтально относительно родительского контейнера. Подсказка: можете использовать атрибуты gravity у родительского контейнера или layout_gravity у самих элементов.
Возникли проблемы при прохождении? Напишите нам в чат поддержки Вконтакте или Facebook. Мы поможем вам решить проблему и вы сможете продолжить обучение.
УВИДЕТЬ ВСЕ Добавить заметку
ВЫ
Добавить ваш комментарий