![image](https://habrastorage.org/webt/1e/zt/td/1ezttdj1tpo08ltbm4ymiz1pshw.jpeg)
Вам уже пришла в голову гениальная идея мобильного приложения, которое завоюет весь мир? Дело за малым — воплотить ее в жизнь.
Эта полностью переработанная и обновленная книга поможет сразу приступить к работе. Вы на практике узнаете, как структурировать приложение, создавать гибкие и интерактивные пользовательские интерфейсы, сохранять информацию в базе данных и использовать новейшие возможности Android Jetpack и Jetpack Compose. Все, что вам нужно для успешного старта — это немного базовых знаний о языке Kotlin.
Приложения, которые что-то делают
![image](https://habrastorage.org/webt/pe/qg/gp/peqggp7uqdhh5m6rxhmlchbknpu.png)
Обычно приложение должно реагировать на действия пользователя.
В этой главе вы узнаете, как существенно повысить интерактивность ваших приложений. Вы узнаете, как добавить в код активности метод OnClickListener, чтобы приложение могло прослушивать действия пользователя и соответствующим образом на них реагировать. Также вы научитесь конструировать макеты и поймете, как каждый UI-компонент, добавляемый в макет, происходит от общего предка View. Попутно вы узнаете, почему строковые ресурсы настолько важны для гибких, хорошо спроектированных приложений.
![image](https://habrastorage.org/webt/nk/dk/yd/nkdkydz2kv_v--2ruz3wvjh6luu.png)
Что нужно сделать
Итак, приступим к построению приложения Beer Adviser. Работа состоит из нескольких шагов (все они будут подробно рассмотрены в этой главе):
![image](https://habrastorage.org/webt/5c/y6/pl/5cy6pld9koc3wr1u9bdplkxpgpq.png)
Начнем с создания проекта.
Создание проекта
![image](https://habrastorage.org/webt/us/tz/vu/ustzvuc16zpk6s3lxyjixtjnl34.png)
Мы создали макет и активность по умолчанию
![image](https://habrastorage.org/webt/0x/pc/eo/0xpceotba6zzs5cbu8jv5zwfjtu.png)
Подробнее о визуальном редакторе
Как вы узнали в главе 1, визуальный редактор предоставляет средства редактирования макетов
более наглядные, чем при прямом редактировании разметки XML. В нем имеется два разных
представления структуры макета. Одно показывает, как макет будет выглядеть на реальном
устройстве, а другое — эскиз его структуры:
![image](https://habrastorage.org/webt/1b/wp/cy/1bwpcy3ulwfah1sgvslege4rx_c.png)
Изменения, внесенные в визуальном редакторе, отражаются в XML
Начнем с добавления кнопки в макет. Найдите компонент Button в палитре, щелкните на нем и перетащите в область визуального редактора, чтобы он располагался над текстом. Кнопка появляется в изображении макета:
![image](https://habrastorage.org/webt/h7/ti/cb/h7ticbezgssqsbh9r-zw55eav6a.png)
Такое перетаскивание компонентов графического интерфейса является удобным способом обновления макета. Переключившись на редактор кода, вы увидите, что в результате добавления кнопки в визуальном редакторе в файле XML появилось несколько строк кода:
![image](https://habrastorage.org/webt/sg/xz/qj/sgxzqjuhk7rzfkjgkd67izwgyhq.png)
В activity_main.xml появилась новая кнопка
Как вы уже видели, визуальный редактор добавил новый элемент в файл activity_main.xml:
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
В мире Android пользователь нажимает кнопку, чтобы инициировать какое-либо действие. Элемент включает атрибуты, управляющие ее размером и внешним видом. Эти атрибуты существуют не только у кнопок — они есть и у других компонентов графического интерфейса, включая надписи.
Кнопки и надписи — субклассы одного класса Android View
![image](https://habrastorage.org/webt/--/b-/hd/--b-hdchzvc6mu1yqbsh0hbit_u.png)
Подробнее о коде макета
Давайте внимательнее рассмотрим код макета и разобьем его так, чтобы происходящее стало более понятным (не беспокойтесь, если ваш код выглядит немного иначе, просто следите за логикой):
![image](https://habrastorage.org/webt/qu/mg/nz/qumgnzpxeltc8uavx05ifkqgusm.png)
Элемент <LinеarLayout>
Код начинается с элемента <LinеarLayout>. Элемент сообщает Android, что компоненты графического интерфейса в макете должны следовать один за другим в строку или столбец.
Ориентация задается атрибутом android:orientation. В нашем примере:
android:orientation="vertical"
компоненты выводятся в один столбец.
Элемент <LinеarLayout> содержит еще два элемента: <Buttоn> и <TеxtView>.
Элемент <Buttоn>
На первом месте стоит элемент <Buttоn>:
...
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
...
Использование LinearLayout означает, что компоненты интерфейса отображаются по вертикали в столбец или по горизонтали в строку.
Так как это первый элемент внутри <LinеarLayout>, он первым выводится в макете у верхнего края экрана. Его атрибут layout_width содержит значение «match_parent», с которым его ширина выбирается по ширине родительского элемента, то есть . Атрибут layout_height содержит значение «wrap_content», это означает, что элемент должен иметь минимальную высоту, необходимую для вывода его текста.
Элемент <TеxtView>
Внутри элемента <LinеarLayout> последним идет элемент надписи <TеxtView>:
...
<TextView
android:id="@+id/brands"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beer types" />
...
![image](https://habrastorage.org/webt/w8/ve/6l/w8ve6la9s5vq94lw0dbphbzlijw.png)
Так как это второй элемент, а для элемента <LinеarLayout> выбрана вертикальная ориентация, он выводится под кнопкой (первым элементом). Его атрибутам layout_width и layout_height присвоено значение «wrap_content», чтобы элемент занимал минимальное место, необходимое для вывода его текста.
Вы уже видели, как добавление компонентов в визуальном редакторе приводит к их включению в разметку XML макета. Также справедливо и обратное: все изменения, вносимые в разметке XML макета, отражаются в визуальном редакторе. Посмотрим, как работает этот механизм.
Обновление разметки XML макета
Давайте обновим макет: мы добавим в него новый компонент Spinner и настроим уже существующие компоненты надписи и кнопки. Компонент Spinner представляет раскрывающийся список значений. Если щелкнуть на нем, он раскроется и выведет список, из которого вы сможете выбрать одно значение.
Внесите в файл activity_main.xml следующие изменения (выделены жирным шрифтом):
![image](https://habrastorage.org/webt/rp/55/ix/rp55ixhpuzf5sugk1ptank1ufim.png)
Изменения XML отражаются в визуальном редакторе
После изменения XML макета переключитесь в визуальный редактор. Вместо макета с кнопкой и расположенной под ней надписью визуальный редактор теперь отображает список Spinner, кнопку и надпись, выровненные горизонтально по центру в один столбец:
![image](https://habrastorage.org/webt/lj/kc/7w/ljkc7wc2iw9xygzgai7a5vhzo5g.png)
Тест-драйв
![image](https://habrastorage.org/webt/yy/sl/u9/yyslu9vibgaviyfsncrkzrovcou.png)
Об авторах
![image](https://habrastorage.org/webt/by/vb/ha/byvbhakncv8b6x1lqbjnytdjm0y.png)
Более подробно с книгой можно ознакомиться на сайте издательства:
» Оглавление
» Отрывок
По факту оплаты бумажной версии книги на e-mail высылается электронная книга.
Для Хаброжителей скидка 25% по купону — Head First