Створимо проект для цього уроку. Назвемо його LayoutFiles. Обираємо BlankActivity.
При розробці для кожного Activity створюється однойменний java-клас (спадкоємець класу android.app.Activity). При запуску програми, коли система повинна показати Activity і надалі працювати з ним, вона буде викликати методи цього класу. І від того, що ми в цих методах напишемо, залежить поведінка Activity.
При створенні модуля ми повинні були вказати, що потрібно створити Activity з ім'ям MainActivity.
Давайте переглянемо цей клас, відкривши його подвійним клацанням app\java\com.example.layoutfiles\MainActivity.java
Дивимося java-код. Нас цікавить метод onCreate; він викликається, коли додаток створює і відображає Activity. Подивимося код реалізації onCreate.
Перший рядок:
super.onCreate(savedInstanceState);
setContentView(R. layout.activity_main);
Метод setContentView(int) встановлює вміст Activity з layout-файлу. Але в якості аргументу ми не вказуємо шлях до layout-файлу (res/layout/activity_main.xml), а константу, яка є ID файлу. Це константа генерується автоматично в файлі R.java. В цьому класі будуть зберігатися згенеровані ID для всіх ресурсів проекту (з папки res/*), щоб ми могли до них звертатися. Імена цих ID-констант збігаються з іменами файлів ресурсів (без розширення).
Файл res/layout/activity_main.xml був створений середовищем розробки разом з Activity. Його назва вимагалось на тому ж екрані, де і назва Activity.
Відкриємо подвійним кліком res/layout/activity_main.xml та переглянемо вміст.
Все вірно - Activity відобразив те, що прописано в activity_main.xml.
Спробуємо відобразити вміст файлів. Створимо ще один layout-файл, наприклад myscreen.xml. Для цього виділимо папку res/layout в нашому модулі та натискаємо на ньому праву кнопку миші. У меню, вибираємо New→Layout resource file. Для любителів гарячих клавіш є більш зручний шлях: при вибраній теці res/layout натиснути ALT+Insert, і там вже Enter на пункті Layout resource file.
Відкриється майстер.
Вводимо ім'я файлу myscreen, решту поки не змінюємо, натискаємо OK.
У папці layout повинен з'явитися новий файл myscreen.xml.
Цей новий layout-файл повинен відразу відкритися на редагування. Додамо на екран елемент Plain TextView зі списку ліворуч і через Properties змінимо його текст: «new layout file myscreen for activity».
Обов'язково зберігаємо (CTRL+S).
При створенні нового layout-файлу myscreen, середовище додало в R.java нову константу для цього файлу - R. layout.myscreen. І ми тепер в коді зможемо через цю константу вказати на цей новий layout-файл.
Налаштуємо так, щоб Activity використовувало новий файл myscreen.xml, а не activity_main.xml, який був спочатку. Відкриємо MainActivity.java і поміняємо аргумент методу setContentView. Замініть «R. layout.activity_main», на «R. layout.myscreen» (ID нового layout-файлу). Повинно вийти так:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R. layout.myscreen);
}
Зберігаємо код (CTRL+S) і запускаємо додаток (SHIFT+F10).
Бачимо, що тепер він відображає вміст з myscreen.xml, т. я. ми явно йому це вказали у методі setContentView, який виконується при створенні (onCreate) Activity.
Layout-файл у вигляді XML:
Відкривши в Android Studio layout-файл activity_main або myscreen, ви бачите його візуальне подання. Тобто попередній перегляд, як це буде виглядати на екрані. Знизу ви можете бачити дві вкладки – Design і Text. Відкрийте вкладку Text.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="new layout file myscreen for activity"
android:id="@+id/textView" />
</LinearLayout>
Ми бачимо досить читабельний xml-опис всіх View нашого layout-файлу. Назви елементів xml - це класи View-елементів, xml-атрибути - це параметри View-елементів, тобто всі ті параметри, що ми міняємо через вкладку Властивості. Також ви можете вносити зміни прямо сюди і зміни будуть відображатися у вкладці Design. Наприклад, змінимо текст у TextView. Замість «new layout file myscreen for activity», напишемо текст «some new text».
Зберігаємо. Відкриваємо Design та спостерігаємо зміни.
Зазвичай автори підручників дають зміст layout-файлів саме у вигляді xml. Це зручно – ви можете просто скопіювати фрагмент і використовувати, і не треба вручну додавати View-елементи, бігати по Properties і налаштовувати все руками.
Layout-файл при зміні орієнтації екрану:
За замовчуванням ми налаштовуємо layout-файл під вертикальну орієнтацію екрану. Але що буде якщо ми повернемо смартфон і включиться горизонтальна орієнтація?
Змінимо myscreen.xml. Додамо вертикальний ряд кнопок і змінимо напис.
XML-код (ви можете скопіювати його і замінити ним вміст вашого layout-файлу myscreen у вкладці Text):
<?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">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Вертикальная ориентация экрана">
</TextView>
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button1">
</Button>
<Button
android:id="@+id/button2"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button2">
</Button>
<Button
android:id="@+id/button3"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button3">
</Button>
<Button
android:id="@+id/button4"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button4">
</Button>
</LinearLayout>
</LinearLayout>
Збережемо зміни та запустимо.
У вертикальній орієнтації все добре. Але натиснемо CTRL+F12 і орієнтація змінилась на горизонтальну.
Кнопки не поміщаються на екрані, тобто нам потрібний ще один layout-файл, який працює з горизонтальною орієнтацією.
Щоб Activity знала коли якою орієнтацією користуватись, творці Андроїд продумали наступну функцію.
В папці res/layout створюємо новий Layout resource file. Назву вказуємо ту ж саму: myscreen. Тепер додаємо кваліфікатор, який дає зрозуміти додатку, що цей layout-файл потрібно використовувати в горизонтальному положені. Для цього в списку кваліфікаторів зліва знизу знаходимо Orientation.
Та натискаємо кнопку зі стрілкою вправо.Тим самим ми ввімкнули використання кваліфікатору орієнтації. Потрібно вказати, що нас цікавить горизонтальна орієнтація. Обираємо з випадаючого списку Landscape.
Налаштуванням кваліфікатору ми вказали, що наш новий layout-файл буде створений в папці res/layout-land, а не res/layout. Тобто кваліфікатор -land вказує на горизонтальну орієнтацію екрану. Натискаємо ОК.
Ознайомтесь зі структурою проекту.
Відкриємо res/layout-land/myscreen та змінимо його код на наступний:
<?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">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Горизонтальная ориентация экрана">
</TextView>
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button1">
</Button>
<Button
android:id="@+id/button2"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button2">
</Button>
<Button
android:id="@+id/button3"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button3">
</Button>
<Button
android:id="@+id/button4"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Button4">
</Button>
</LinearLayout>
</LinearLayout>
Вкладка Design покаже наступне:
В цьому layout-файлі ми розмістили кнопки горизонтально, щоб вони адекватно відображались.
Зверніть увагу на назву файлу зверху. Там присутній кваліфікатор land, щоб ми розуміли який myscreen ми редагуємо.
Запустимо додаток.
Activity читає layout-файл, який ми вказували в методі setContentView, тобто myscreen.xml і відображає його вміст. При цьому воно враховує орієнтацію приладу, і в випадку горизонтальної орієнтації бере myscreen з папки res/layout-land (якщо він там існує).
Перемкнемо орієнтацію CTRL+F12.
Activity розуміє, що знаходиться в вертикальній орієнтації та використовує layout-файл myscreen з папки res/layout.
