В цьому уроці використаємо редактор макету (Layout Editor) Android Studio, щоб створити макет, який включає текстовий блок і кнопку. Пізніше зробимо програму, щоб при натисканні кнопки вміст текстового вікна пересилався до іншої Activity.

Рис. 1. Скріншот остаточного макета

Інтерфейс користувача для додатка Android будується за допомогою ієрархії макетів (об'єктів ViewGroup) та віджетів (об'єктів View). Макети - це невидимі контейнери, які контролюють, як розташовані на екрані створені вигляди. Віджети - це такі компоненти інтерфейсу користувача, як кнопки та текстові поля.

Рис 2. Ілюстрація того, як об'єкти ViewGroup утворюють відгалуження у макеті та містять об'єкти View

Android надає XML-словник для класів ViewGroup і View, тому більшість вашого інтерфейсу визначається файлами XML. Однак, замість того, щоб навчати писати деякий код XML, урок показує вам, як створити макет, використовуючи редактор макета Android Studio, що полегшує побудову макета за допомогою перетягування виглядів.

Відкриваємо редактор макета (Layout Editor)

Примітка. У цьому уроці очікується, що ви використовуєте Android Studio версії 2.3 або новішої версії, і що ви дотримувалися попереднього уроку, щоб створити свій проект Android.

Щоб розпочати, налаштуйте свій робочий простір таким чином:

1. У вікні проекту Android Studio відкрийте app > res > layout > activity_main.xml.
2. Щоб створити більше місця для редактора макета, приховайте вікно Project, вибравши View > Tool Windows > Project (або натисніть значок вікна Project ліворуч в Android Studio).
3. Якщо ваш редактор показує джерело XML, перейдіть на вкладку Design у нижній частині вікна.
4. Натисніть Show Blueprint, щоб було видно лише макет проекту.
5. Переконайтеся, що увімкнений параметр Show Constraints. Спливаюча підказка на панелі інструментів повинна виглядати як Hide Constraints (оскільки це зараз відображається).
6. Переконайтеся, що Autoconnect вимкнено. Підказка на панелі інструментів має виглядати як Turn On Autoconnect (оскільки він зараз вимкнений).
7. На панелі інструментів натисніть Default Margins і виберіть 16 (ви все ще зможете налаштувати розмір для кожного вигляду пізніше).
8. На панелі інструментів натисніть Device in Editor і виберіть Pixel XL.

Тепер ваш редактор повинен виглядати так, як показано на рис. 3.

Рис. 3. Редактор макета, що показує activity_main.xml

Вікно дерева компонентів (Component Tree) у нижній лівій частині показує ієрархію виглядів макета. У цьому випадку кореневий вигляд - це ConstraintLayout, що містить лише один об'єкт TextView.

ConstraintLayout - це макет, який визначає позицію для кожного представлення на основі обмежень для переглядів браузера та батьківського макета. Таким чином, ви можете створювати як прості, так і складні макети з плоским візерунковим виглядом. Це дозволяє уникнути необхідності вкладених макетів (макет всередині макета, як показано на рис. 2), що може збільшити час, необхідний для побудови інтерфейсу користувача.

Рис. 4. Ілюстрація двох виглядів, розташованих всередині ConstraintLayout

Наприклад, ви можете оголосити наступний макет (рис. 4):

а) Вигляд A з'являється на 16dp нижче від вершини батьківського макета.
б) Вигляд A з'являється на 16dp ліворуч від батьківського макета.
в) Вигляд B з'являється на 16dp праворуч від вигляду A.
г) Вигляд B вирівняний з верхньою частиною вигляду A.

У наступних розділах ви створите макет, подібний до цього.

Додаємо текстове поле

Рис. 5. Текстове вікно обмежене вгорі та ліворуч від батьківського макета

1. Спочатку потрібно видалити те, що вже знаходиться в макеті. Тож натисніть TextView у вікні Component Tree, а потім натисніть Delete.
2. У вікні Palette зліва натисніть кнопку Text на лівій панелі, а потім перетягніть Plain Text у редактор дизайну та відпустіть його у верхній частині макета. Це віджет EditText, який приймає звичайний текстовий ввід.
3. Клацніть вигляд у редакторі дизайну. Тепер можете побачити ручки для зміни розміру на кожному куті (квадрати), а також обмеження анкерів з кожної сторони (кола).
Для кращого керування можете збільшити масштаб у редакторі до 75% і більше за допомогою кнопок на панелі інструментів.
4. Натисніть і утримуйте прив'язку у верхній частині, а потім перетягніть її, доки вона не зафіксується у верхній частині макета та не виймається. Це обмеження - воно вказує, що для перегляду має бути 16dp від вершини макета (тому що ви встановлюєте значення полів в 16dp).
5. Подібним чином створіть обмеження з лівої сторони вигляду на лівій частині макета.

Результат повинен виглядати як скріншот на рис. 5.

ДодаЄмо кнопку

Рис. 6. Кнопка, прив'язана до правої сторони текстового поля та його базової лінії

1. У вікні Palette, клацніть Widgets на лівій панелі, а потім перетягніть Button в редакторі дизайну і відпустіть її поруч із правою стороною.
2. Створіть обмеження з лівої сторони кнопки праворуч від текстового поля.
3. Щоб обмежити вигляд в горизонтальному вирівнюванні, потрібно створити обмеження між базовими лініями тексту. Тож натисніть кнопку, а потім натисніть Baseline Constraint, яке з'являється в редакторі дизайну безпосередньо під вибраним представленням. Базова лінія з'являється всередині кнопки. Клацніть і утримуйте її якорем, а потім перетягніть до базового якоря, який з'явиться у текстовому полі.

Результат повинен виглядати як скріншот на рис. 6.

Примітка. Ви також можете створити горизонтальне вирівнювання за допомогою верхнього або нижнього країв, але кнопка містить повзунки навколо свого зображення, тому візуальне вирівнювання неправильне, якщо ви вирівняєте ці перегляди таким чином.

Змінюємо рядки інтерфейсу користувача

Клацніть Show Design на панелі інструментів, щоб переглянути інтерфейс користувача. Зверніть увагу, що текстовий ввід задається як "Name", а кнопка позначена як "Button". Отже, тепер ви будете змінювати ці рядки.

1. Відкрийте вікно Project та перейдіть app > res > values > strings.xml.
Це файл рядкових ресурсів, в якому потрібно вказати всі рядки інтерфейсу користувача. Завдяки цьому ви зможете керувати всіма рядками користувацького інтерфейсу в одному місці, що полегшує пошук, оновлення та локалізацію (порівняно з жорстким кодуванням у вашому макеті чи коді програми).
2. Клацніть Open editor у верхній частині вікна редактора. Відкриється Translations Editor, який надає простий інтерфейс для додавання та редагування рядків за умовчанням, а також допомагає зберегти всі ваші перекладені рядки.

Рис. 7. Діалогове вікно для додавання нового рядка

Натисніть Add Key, щоб створити новий рядок як текст «hint text» для текстового поля.

1. Введіть "edit_message" для імені ключа.
2. Введіть "Enter a message" для значення.
3. Натисніть кнопку ОК.
4. Додати іншу клавішу з назвою "button_send" зі значенням "Send".

Тепер ви можете встановити ці рядки для кожного перегляду. Тому поверніться до файла макета, натиснувши activity_main.xml на панелі вкладок, і додайте рядки таким чином:

1. Клацніть на текстовому полі в макеті, і якщо вікно Properties ще не відображається справа, натисніть кнопку Properties на правій бічній панелі.
2. Знайдіть властивість підказки (hint), а потім натисніть кнопку Pick a Resource праворуч від текстового поля. У діалоговому вікні, що з'явиться, двічі клацніть на edit_message зі списку.
3. Переглядаючи далі властивості текстового поля, також видаліть значення властивості тексту (text) (наразі встановлено "Name").
4. Тепер натисніть кнопку у макеті, знайдіть властивість тексту (text), натисніть кнопку Pick a Resource, а потім виберіть пункт button_send.

Робимо гнучким розмір текстового поля

Щоб створити макет, який реагує на різні розміри екрана, необхідно розтягнути текстове поле, щоб заповнити весь залишок горизонтального простору (після врахування кнопки та полів).

Перш ніж продовжити, натисніть кнопку Show Blueprint на панелі інструментів редактора макета.

Рис. 8. Результат натискання кнопки Center Horizontally

Рис. 9. Натисніть, щоб змінити ширину на Match Constraints

Рис. 10. Текстове поле тепер розтягується, щоб заповнити залишковий простір

1. Виберіть обидва вигляди (натисніть один, а потім утримуючи клавішу Shift клацніть інший), а потім клацніть правою кнопкою миші будь-яку точку вигляду і виберіть Center Horizontally.
Хоча ваша мета полягає не в центрі вигляду, це швидкий спосіб створити ланцюжок між двома виглядами. Ланцюжок є двонаправленим обмеженням між двома або більше виглядами, що дозволяє виділити об'єднані вигляди. Однак це також усуває горизонтальні поля, тому доведеться змінювати їх знову.
2. Виберіть кнопку та відкрийте вікно Properties. Встановіть як ліве, так і праве поля в 16.
3. Виберіть текстове поле та встановіть лише лівий край в 16.
4. Продовжуючи переглядати властивості текстового поля, натисніть індикатор ширини, доки не буде встановлено значення Match Constraints, як показано на виносці 1 рис. 9.
"Match constraints" означають, що ширина тепер визначається горизонтальними обмеженнями та відступами. Тому текстове вікно розтягується, щоб заповнити горизонтальний простір (після врахування кнопки та всіх полів).

Тепер макет готовий і повинен з'явитися, як показано на рис. 10.

Якщо вам здається, що макет не вийшов, як очікувалося, натисніть нижче, щоб побачити, як виглядає ваш код XML, і порівняйте його з тим, що бачите на вкладці Text. (Якщо ваші атрибути з'являються в іншому порядку, то все гаразд.)

Останній макет XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android=http://schemas.android.com/apk/res/android
    xmlns:app=http://schemas.android.com/apk/res-auto
    xmlns:tools=http://schemas.android.com/tools
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myfirstapp.MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="@string/edit_message"
        android:inputType="textPersonName"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button"
        android:layout_marginLeft="16dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        app:layout_constraintBaseline_toBaselineOf="@+id/editText"
        app:layout_constraintLeft_toRightOf="@+id/editText"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

Щоб отримати додаткові відомості про ланцюжки та інші речі, які ви можете використовувати з ConstraintLayout, прочитайте розділ Створення відповідного інтерфейсу користувача з ConstraintLayout.

Запускаємо додаток

Якщо ваш додаток вже встановлений на пристрої з попереднього уроку, просто натисніть кнопку Apply Changes на панелі інструментів, щоб оновити додаток з новим макетом. Або натисніть Run, щоб встановити та запустити додаток.

Кнопка поки що нічого не робить. Щоб запустити іншу activity під час натискання кнопки, перейдіть до наступного уроку.

Попередній урок – Наступний урок

(Оновлено 31.07.2017)

(Джерело: developer.android.com)