|
Спочатку ми створимо макет у форматі XML, який включатиме текстове поле і кнопку. Далі, наш Android-додаток буде реагувати на натискання кнопки, відправляючи зміст текстового поля до іншої activity.
Графічний інтерфейс користувача для Android-додатка побудуємо з використанням ієрархії об'єктів View і ViewGroup. Об'єкти View, як правило, є UI віджетами, такими як кнопки та текстові поля. Об'єкти ViewGroup - невидимий вид контейнерів, які визначають, як виглядатимуть нащадки, викладені, наприклад, в сітці або вертикальному списку.
Android забезпечує словник XML, який відповідає підкласам View і ViewGroup, тому ви можете визначити свій інтерфейс користувача в XML використовуючи ієрархію елементів інтерфейсу користувача.
Layouts (Макети) є підкласами ViewGroup. У цьому завданні ви будете працювати з LinearLayout.
Альтернативні Layouts
Оголошення в XML Layouts інтерфейсу користувача раніше, до запуску коду, корисне з кількох причин, але це особливо важливо тому, що ви можете створювати різні макети для різних розмірів екрану. Наприклад, ви можете створити дві версії формату і повідомити системі, щоб одна використовувалась на «малих» екранах, а інша - на «великих» екранах.
Ілюстрація того, як об'єкти ViewGroup формують гілки в макеті і містять інші об'єкти View.
СТВОРЕННЯ ЛІНІЙНОГО МАКЕТУ
1. В Android Studio перейдіть в каталогу res/layout і відкрийте файл activity_my.xml.
Шаблон BlankActivity ви вибрали, коли створили цей проект, включає в себе файл activity_my.xml з кореневим виглядом RelativeLayout і виглядом TextView нащадків.
2. У вікні Preview (Попередній перегляд), натисніть значок Hide (Приховати)  , щоб закрити панель попереднього перегляду.
В Android Studio, коли ви відкриваєте файл макета, то спочатку показується панель попереднього перегляду. Натискання елементів в цій панелі відкриває інструменти WYSIWYG в панелі дизайну. Ми ж в цьому уроці будемо працювати безпосередньо з XML.
3. Видаліть елемент <TextView>.
4. Змініть елемент <RelativeLayout> на <LinearLayout>.
5. Додайте атрибут android:orientation і встановіть його в "horizontal".
6. Видаліть атрибути android:padding та атрибут tools:context.
Результат має виглядає наступним чином:
res/layout/activity_my.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
LinearLayout є групою вигляду (підклас ViewGroup), який надає вигляди нащадків у вертикальному або горизонтальному положенні, як зазначено в атрибуті android:orientation. Кожний нащадок LinearLayout з'являється на екрані в тому порядку, в якому він з'являється в XML.
Два інших атрибути, android:layout_width і android:layout_height, необхідні для всіх вивиглядів для того, щоб визначити їх розмір.
Тому що LinearLayout є кореневим виглядом в макеті, він повинен заповнити всю область екрану, яка доступна в додатку, встановивши ширину і висоту в "match_parent". Це значення декларує, що вигляд має розширити свою ширину або висоту, щоб відповідати (match) ширині або висоті батьківського вигляду.
ДОДАВАННЯ ТЕКСТОВОГО ПОЛЯ
Як і в будь-якому об'єкті View, необхідно визначити деякі XML-атрибути для задання властивостей об'єктам EditTex.
1. У файлі activity_my.xml, в елемента <LinearLayout>, визначіть <EditText>, встановивши атрибут id в @+id/edit_message.
2. Визначте атрибути layout_width і layout_height як wrap_content.
3. Визначте атрибут hint як рядковий об'єкт з назвою edit_message.
Елемент <EditText> повинен виглядати наступним чином:
res/layout/activity_my.xml
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
Пояснимо атрибути <EditText>, які додали:
android:id
Забезпечує унікальний ідентифікатор для вигляду, який можна використовувати в коді програми для посилання на об'єкт, наприклад, для читання і маніпулювати об'єктами (ви побачите це в наступному уроці).
Знак (@) є обов'язковим, якщо маєте на увазі який-небудь об'єкт ресурсу з XML. За ним слідує тип ресурсу (в даному випадку id), слеш, потім ім'я ресурсу (edit_message).
Resource Objects (Об’єкти ресурсу)
Об'єкти ресурсу - унікальне ціле число, ім'я, яке асоціюється з ресурсом додатку, таким як растрове зображення, файл макету, або рядок.
Кожен ресурс має відповідний об'єкт ресурсу, визначений в файлі gen/R.java вашого проекту. Ви можете використовувати імена об'єктів у класі R, щоб звернутися до своїх ресурсів, наприклад, коли потрібно вказати значення рядка для атрибуту android:hint. Ви також можете створювати довільні ідентифікатори ресурсів, які пов'язуєте з виглядами, використовуючи атрибут android:id, який дозволяє посилатися на цей вигнляд з іншого коду.
В інструментах SDK файл R.java генерується щоразу при компіляції вашої програми. Ви ніколи не повинні змінювати цей файл вручну.
Знак плюс (+) перед типом ресурсів необхідний тільки тоді, коли ви визначаєте ідентифікатор ресурсу вперше. При компіляції програми, в SDK-інструментах використовують ім'я ID, щоб створити новий ідентифікатор ресурсу в файлі gen/R.java вашого проекту, який посилається на елемент EditText. З ідентифікатором ресурсу задекларований лише цей шлях, іншим посиланням на ID не потрібен знак плюс. Використання знака плюс потрібно тільки при вказівці нового ідентифікатор ресурсу і не потрібне для конкретних ресурсів, таких як рядки або макети.
android:layout_width і android:layout_height
Замість того, щоб використовувати певні розміри ширини і висоти, значення "wrap_content" вказує, що вигляд повинен бути тільки настільки великий, скільки потрібно для форматування вмісту у вигляді. Якщо ви використали "match_parent", то елемент EditText повинен заповнити екран, бо він відповідав би розміру батьківської LinearLayout.
android:hint
Цей рядок буде відображатися за замовчуванням, коли текстове поле порожнє. Замість використання жорстко закодованих рядків як значення, значення "@string/edit_message" посилається на ресурс рядок, визначений в окремому файлі. Тому що це відноситься до конкретного ресурсу (а не тільки ідентифікатор), він не потребує знаку плюс. Тим не менш, тому що ви ще не вказали рядок ресурс, ви, в першу чергу, побачите помилку компілятора. Ви виправити її в наступному розділі, визначаючи рядок.
Примітка: Цей рядковий ресурс має те ж ім'я, що і елемент ID: edit_message. Однак, посилання на ресурси завжди оперує типом ресурсів (наприклад, id або string), тому використання такого ж імені не призведе до конфлікту.
ДОДАВАННЯ РЯДКОВИХ РЕСУРСІВ
За замовчуванням, ваш Android-проект включає в себе файл рядкового ресурсу res/values/strings.xml. Додайте в нього новий рядок з ім'ям "edit_message" і встановіть значення "Enter a message."
1. В Android Studio у каталозі res/values відкрийте strings.xml.
2. Додайте рядок з ім'ям "edit_message" зі значенням "Enter a message".
3. Додайте рядок з ім'ям "button_send" зі значенням, "Send".
Ви створите кнопку, яка використовує цей рядок, у наступному розділі.
4. Видаліть рядок "hello world".
Результат для strings.xml виглядає наступним чином:
res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">My First App</string>
<string name="edit_message">Enter a message</string>
<string name="button_send">Send</string>
<string name="action_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
Для тексту в інтерфейсі користувача завжди вказуйте кожен рядок як ресурс. Рядкові ресурси дозволяють вам управляти всім текстом інтерфейсу користувача в одному місці, що робить текст більш зручним для пошуку та оновлення. Винесення рядків також дозволяє локалізувати додаток на різних мовах шляхом надання альтернативних визначень для кожного рядка ресурсу.
ДОДАВАННЯ КНОПКИ
1. В Android Studio у каталозі res/layout відредагуйте файл activity_my.xml.
2. В елементі <LinearLayout> визначте елемент <Button> відразу після елемента <EditText>.
3. Встановіть ширину кнопки і висота атрибутом "wrap_content", щоб кнопка була настільки великою, скільки необхідно для розміщення текстової мітки кнопки.
4. Визначте текстову мітку кнопки за допомогою атрибуту android:text; встановіть його значення рядковий ресурс button_send, визначений у попередньому розділі.
Ваш <LinearLayout> повинен виглядати наступним чином:
res/layout/activity_my.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
Примітка: Цій кнопці не потрібний атрибут android:id, тому що на неї не будуть посилатися з коду activity.
Макет зараз розроблений таким чином, що обидва EditText і Button настільки великі, скільки необхідно, щоб розмістити зміст, як показано на зображенні:
Віджети EditText і Button мають свою ширину, встановлену параметром "wrap_content".
Це чудово працює для кнопки, але не так добре для текстового поля, тому що користувач може надрукувати що-небудь довше. Було б непогано заповнити невикористану ширину екрану текстовим полем. Ви можете зробити це всередині LinearLayout за допомогою параметра weight (ваги), який вказуєте за допомогою атрибута android:layout_weight.
Значення weight – це число, яке визначає скільки вільного простору повинен споживати кожен вигляд, відповідно до кількості виглядів використаних нащадками. Це працює на зразок кількості інгредієнтів у рецептурі напою: "2 частини соди, 1 частина сиропу" означає , що в напої дві третини соди. Наприклад, якщо ви надаєте одному вигляду вагу 2, а іншому вагу 1, то сума дорівнює 3 і перший вигляд наповнює 2/3 простору, що залишився, а другий вигляд заповнює все інше. Якщо ви додасте третій вигляд і надаєте йому вагу 1, то перший вигляд (при питомій вазі 2) тепер отримує 1/2 простору, що залишився, в той час як кожен з інших двох отримує 1/4.
Вага за замовчуванням для всіх виглядів є 0, тому, якщо вказано якесь значення ваги більше, ніж 0 тільки для одного вигляду, то цей вигляд заповнює весь простір, залишаючи всім виглядам отримувати місце, коли вони вимагатимуть.
РОБИМО INPUT BOX НА ВСЮ ШИРИНУ ЕКРАНУ
Щоб заповнити простір, що залишився в макеті, за допомогою елемента EditText, виконайте такі дії:
1. У файлі activity_my.xml, призначте елементу <EditText> значення атрибуту layout_weight рівне 1.
2. Крім того, призначте для елемента <EditText> значення атрибуту layout_width рівне 0dp.
res/layout/activity_my.xml
<EditText
android:layout_weight="1"
android:layout_width="0dp"
... />
Для підвищення ефективності макету при зазначення ваги, ви повинні змінити ширину EditText на рівну нулю (0dp). Установка ширини в нуль підвищує продуктивність макета, оскільки, використовуючи "wrap_content" для ширини, ми вимагаємо, щоб система розраховувала ширину, яка в кінцевому рахунку не має значення, тому що значення ваги вимагає іншого розрахунку ширини, щоб заповнити простір, що залишився.
Зображення нижче показує результат, коли ви призначаєте всі ваги елементу EditText:
Віджет EditText отримує всю вагу макета, тому він заповнює простір, що залишився в LinearLayout.
Ось як повинен виглядати ваш повний файл макету activity_my.xml:
res/layout/activity_my.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText android:id="@+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
ЗАПУСКАЄМО СВІЙ ДОДАТОК
Цей макет застосовується за замовчуванням класом Activity, який згенерований інструментом SDK при створенні проекту. Запустіть додаток, щоб побачити результати:
• В Android Studio, на панелі інструментів, виберіть пункт Run  .
• Або з командного рядка, перейдіть в каталог в корені вашого Android-проекту та виконайте:
ant debug
adb install bin/MyFirstApp-debug.apk
В наступному уроці ви дізнаєтеся, як реагувати на натискання кнопок, прочитати вміст з текстового поля, запустити нову activity, і багато іншого.
(Джерело: developer.android.com)
|
