Создайте приложение поздравительной открытки

В этой лаборатории кода вы создадите простое приложение для Android, которое отображает текст. Вы сможете размещать текст на экране, узнав больше о компонентах пользовательского интерфейса (UI) в Android.

Предпосылки

• Как создать новое приложение в Android Studio.
• Как запустить приложение в эмуляторе или на Android-устройстве.

Чему вы научитесь

• Что такое элементы пользовательского интерфейса, такие как Views и ViewGroups .
• Как отобразить текст в TextView в приложении.
• Как установить атрибуты, такие как текст, шрифт и поля в TextView .

Что вы будете строить

• Приложение для Android, отображающее поздравление с днем ​​рождения в текстовом формате.

Вот как будет выглядеть ваше приложение, когда вы закончите.

Что вам нужно

• Компьютер с установленной Android Studio.

Создайте проект пустой активности

1. Для начала создайте новый проект Kotlin в Android Studio, используя шаблон Empty Activity .
2. Назовите приложение «С днем ​​рождения» с минимальным уровнем API 19 (KitKat).

Важно: если вы не знакомы с созданием нового проекта в Android Studio, см. дополнительные сведения в разделе Создание и запуск вашего первого приложения для Android.

3. Запустите свое приложение. Приложение должно выглядеть так, как показано на скриншоте ниже.

Когда вы создали это приложение Happy Birthday с помощью шаблона Empty Activity, Android Studio настроила ресурсы для базового приложения Android, в том числе «Hello World!» сообщение посередине экрана. В этой лабораторной работе вы узнаете, как туда попадает это сообщение, как изменить его текст, чтобы он больше напоминал поздравление с днем ​​рождения, и как добавлять и форматировать дополнительные сообщения.

О пользовательских интерфейсах

Пользовательский интерфейс (UI) приложения — это то, что вы видите на экране: текст, изображения, кнопки и многие другие типы элементов. Это то, как приложение показывает что-то пользователю и как пользователь взаимодействует с приложением.

Каждый из этих элементов называется View . Почти все, что вы видите на экране своего приложения, — это View . Views могут быть интерактивными, такими как нажимаемая кнопка или редактируемое поле ввода.

В этой кодовой лаборатории вы будете работать с разновидностью View , которая предназначена для отображения текста и называется TextView .

Views в приложении для Android не просто плавают на экране сами по себе. Views имеют отношения друг к другу. Например, рядом с текстом может быть изображение, а кнопки могут образовывать ряд. Чтобы организовать Views , вы помещаете их в контейнер. ViewGroup — это контейнер, в котором могут находиться объекты View , и он отвечает за размещение Views внутри него. Расположение или макет может меняться в зависимости от размера и соотношения сторон экрана устройства Android, на котором запущено приложение, а макет может адаптироваться к тому, находится ли устройство в книжной или альбомной ориентации.

Одним из видов ViewGroup является ConstraintLayout , который помогает вам гибко упорядочивать Views внутри него.

О редакторе макетов

Создание пользовательского интерфейса путем организации Views и ViewGroups представлений — важная часть создания приложения для Android. Android Studio предоставляет инструмент, который поможет вам сделать это, который называется Layout Editor . Вы будете использовать редактор макетов , чтобы изменить «Hello World!» текст «С Днем Рождения!», а позже, чтобы стилизовать текст.

Когда открывается редактор макетов, он состоит из множества частей. Вы научитесь использовать большинство из них в этой лаборатории кода. Используйте приведенный ниже снимок экрана с комментариями для помощи в распознавании окон в Редакторе макетов . Вы узнаете больше о каждой части по мере внесения изменений в свое приложение.

• Слева (1) находится окно Проекта , которое вы видели ранее. В нем перечислены все файлы, из которых состоит ваш проект.
• В центре вы можете увидеть два рисунка (4) и (5), которые представляют макет экрана для вашего приложения. Представление слева (4) является близким приближением к тому, как будет выглядеть ваш экран при запуске приложения. Это называется представлением « Дизайн» .
• Представление справа (5) — это вид Blueprint , который может быть полезен для определенных операций.
• Палитра (2) содержит списки различных типов Views , которые вы можете добавить в свое приложение.
• Дерево компонентов (3) — это другое представление представлений вашего экрана. В нем перечислены все представления вашего экрана.
• Крайний справа (6) — Attributes . Он показывает вам атрибуты View и позволяет вам их изменить.

Подробнее о Редакторе макетов и о том, как его настроить, читайте в справочнике разработчика .

Аннотированный скриншот всего редактора макетов :

Давайте внесем некоторые изменения в редактор макетов , чтобы сделать ваше приложение более похожим на поздравительную открытку!

Изменить сообщение Hello World

1. В Android Studio найдите окно проекта слева.
2. Обратите внимание на эти папки и файлы: В папке приложения находится большинство файлов для приложения, которое вы будете изменять. Папка res предназначена для ресурсов, таких как изображения или макеты экрана. Папка макета предназначена для макетов экрана. Файл activity_main.xml содержит описание вашего макета экрана.
3. Разверните папку приложения , затем папку res , а затем папку макета .
4. Дважды щелкните файл activity_main.xml .
   Это открывает файл activity_main.xml в редакторе макетов и показывает макет, который он описывает, в представлении « Дизайн» .
   

Примечание. В этих лабораториях кода вас часто будут просить открыть файл, как и в предыдущих шагах. Сокращенно это можно записать так:
1. Откройте activity_main.xml ( res > layout > activity_main.xml )
вместо того, чтобы перечислять каждый шаг отдельно.

5. Посмотрите на список представлений в дереве компонентов . Обратите внимание, что есть ConstraintLayout и TextView под ним.
   Они представляют пользовательский интерфейс вашего приложения. TextView имеет отступ, потому что он находится внутри ConstraintLayout . Когда вы добавите больше Views в ConstraintLayout , они будут добавлены в этот список.
6. Обратите внимание, что TextView имеет "Hello World!" рядом с ним — это текст, который вы видите при запуске приложения.
   
7. В дереве компонентов щелкните TextView .
8. Найдите атрибуты справа.
9. Найдите раздел « Объявленные атрибуты ».
10. Обратите внимание, что текстовый атрибут в разделе « Объявленные атрибуты » содержит « Hello World! ». .
    

Атрибут text показывает текст, который печатается внутри TextView .

11. Нажмите на текстовый атрибут, где отображается Hello World! текст есть.
12. Измените его на С Днем Рождения! , затем нажмите клавишу Enter . Если вы видите предупреждение о жестко заданной строке, пока не беспокойтесь об этом. Вы узнаете, как избавиться от этого предупреждения в следующей лаборатории кода.
13. Обратите внимание, что текст изменился в представлении « Дизайн» ..... (это здорово, вы сразу видите свои изменения!)
14. Запустите приложение, и теперь оно говорит: «С днем ​​рождения! »
    

Хорошо сделано! Вы внесли свои первые изменения в приложение для Android.

Поздравительная открытка, которую вы создаете, выглядит иначе, чем та, что есть в вашем приложении сейчас. Вместо маленького текста в центре вам нужны два больших сообщения, одно в левом верхнем углу и одно в правом нижнем углу. В этой задаче вы удалите существующий TextView и добавите два новых TextViews , а также узнаете, как расположить их в пределах ConstraintLayout .

Удалить текущий TextView

1. В редакторе макетов щелкните, чтобы выбрать TextView в центре макета.
   
2. Нажмите клавишу Удалить .
   Android Studio удаляет TextView , и теперь ваше приложение отображает только ConstraintLayout в редакторе макетов и в дереве компонентов .
   

Совет: Если вы хотите увеличить макет, вы можете использовать элементы управления в правом нижнем углу редактора макетов, чтобы отрегулировать размер. Нажмите на самый нижний значок, чтобы вернуться к уровню масштабирования, при котором весь макет помещается на экране.

Добавить текстовое представление

На этом шаге вы добавите TextView в левом верхнем углу вашего приложения для хранения поздравления с днем ​​рождения.

Палитра в левом верхнем углу редактора макетов содержит списки различных типов Views , организованных по категориям, которые вы можете добавить в свое приложение.

1. Найдите TextView . Он отображается как в категории « Общие », так и в категории « Текст ».
   
2. Перетащите TextView из палитры в левый верхний угол области конструктора в редакторе макетов и отпустите его.
   Вам не нужно быть точным, просто бросьте его в верхний левый угол.
   
3. Обратите внимание на добавленный TextView и красный восклицательный знак в дереве компонентов .
4. Наведите указатель мыши на восклицательный знак, и вы увидите предупреждающее сообщение о том, что представление не ограничено и будет переходить в другую позицию при запуске приложения. Вы исправите это на следующем шаге.
   

Разместите TextView

Для поздравительной открытки TextView должен быть в левом верхнем углу с небольшим пространством вокруг него. Чтобы исправить предупреждение, вы добавите в TextView некоторые ограничения, которые сообщат вашему приложению, как его позиционировать. Ограничения — это направления и ограничения того, где View может находиться в макете.

Ограничения, которые вы добавляете сверху и слева, будут иметь поля. Поле указывает, насколько далеко View находится от края своего контейнера.

1. В разделе « Атрибуты » справа найдите виджет «Ограничение » в разделе « Макет ». Квадрат представляет вашу точку зрения.
   
2. Нажмите на + в верхней части квадрата. Это для ограничения между верхней частью вашего текстового представления и верхним краем макета ограничения.
3. Появится поле с числом для установки верхнего поля. Маржа — это расстояние от TextView до края контейнера, ConstraintLayout . Число, которое вы видите, будет отличаться в зависимости от того, куда вы TextView . Когда вы устанавливаете верхнее поле, Android Studio также автоматически добавляет ограничение из верхней части текстового представления в верхнюю часть ConstrainLayout .
   
4. Измените верхнее поле на 16.

Примечание . Единицей измерения полей и других расстояний в пользовательском интерфейсе являются пиксели, не зависящие от плотности (dp). Это как сантиметры или дюймы, но для расстояний на экране. Android преобразует это значение в соответствующее количество реальных пикселей для каждого устройства. В качестве базового значения 1 dp составляет около 1/160 дюйма, но может быть больше или меньше для некоторых устройств.

5. Сделайте то же самое для левого поля.
   
6. Установите текст , чтобы поздравить друга с днем ​​рождения, например, «С днем ​​рождения, Сэм!» и нажмите Enter .
   
7. Обратите внимание, что представление « Дизайн» обновляется, чтобы показать, как будет выглядеть ваше приложение.
   

Добавить и разместить еще один TextView

Для вашей поздравительной открытки нужна вторая строка текста в правом нижнем углу, которую вы добавите на этом шаге так же, как и в предыдущей задаче. Как вы думаете, какими должны быть поля этого TextView ?

1. Перетащите новый TextView из палитры и поместите его в правом нижнем углу представления приложения в редакторе макетов.
   
2. Установите правое поле 16.
3. Установите нижнее поле 16.
   
4. В разделе « Атрибуты » установите текстовый атрибут для подписи открытки, например «От Эммы».
5. Запустите свое приложение. Вы должны увидеть свое пожелание на день рождения в левом верхнем углу и свою подпись в правом нижнем углу.
   

Поздравляем! Вы добавили и разместили некоторые элементы пользовательского интерфейса в своем приложении.

Вы добавили текст в свой пользовательский интерфейс, но он еще не выглядит как финальное приложение. В этой задаче вы узнаете, как изменить размер, цвет текста и другие атрибуты, влияющие на внешний вид TextView . Вы также можете поэкспериментировать с разными шрифтами.

1. Нажмите на первый TextView в дереве компонентов и найдите раздел « Общие атрибуты » в окне « Атрибуты ». Возможно, вам придется прокрутить вниз, чтобы найти его.
2. Обратите внимание на различные атрибуты, включая fontFamily , textSize и textColor .
   
3. Найдите textAppearance .
4. Если textAppearance не развернут, щелкните треугольник вниз.
5. Установите textSize на 36sp .
   

Примечание. Точно так же, как dp — это единица измерения расстояний на экране, sp — это единица измерения размера шрифта. Элементы пользовательского интерфейса в приложениях для Android используют две разные единицы измерения: независимые от плотности пиксели ( dp ), которые вы использовали ранее для макета, и масштабируемые пиксели ( sp ), которые используются при настройке размера текста. По умолчанию sp имеет тот же размер, что и dp, но изменяется в зависимости от предпочтительного размера текста пользователя.

6. Обратите внимание на изменения в редакторе макетов .
   
7. Измените fontFamily на casual .
8. Попробуйте разные шрифты, чтобы увидеть, как они выглядят. Есть еще больше вариантов шрифтов в нижней части списка, в разделе « Дополнительные шрифты… ».
9. Когда вы закончите пробовать разные шрифты, установите для fontFamily значение sans-serif-light .
10. Щелкните поле редактирования атрибута textColor и начните вводить значение black .
    Обратите внимание, что по мере того, как вы печатаете, Android Studio показывает список цветов, которые содержат текст, который вы уже набрали.
    
11. Выберите @android:color/black из списка цветов и нажмите Enter .
12. В TextView с вашей подписью измените textSize , textColor и fontFamily , чтобы они соответствовали.
13. Запустите приложение и посмотрите на результат.
    

Поздравляем, вы сделали первые шаги к созданию приложения для поздравительных открыток!

• Редактор макетов поможет вам создать пользовательский интерфейс для вашего приложения для Android.
• Почти все, что вы видите на экране своего приложения, — это View .
• TextView — это элемент пользовательского интерфейса для отображения текста в вашем приложении.
• ConstraintLayout — это контейнер для других элементов пользовательского интерфейса.
• Views должны быть ограничены по горизонтали и вертикали в пределах ConstraintLayout .
• Один из способов позиционировать View — с отступом.
• Поле указывает, насколько далеко View находится от края контейнера, в котором оно находится.
• Вы можете установить атрибуты TextView , такие как шрифт, размер текста и цвет.

• View
• TextView
• ConstraintLayout
• дп против сп
• Редактор макетов в Android Studio