Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Разработка приложений под Android. Выпуск 19 от 31.01.2020


Уважаемые читатели! Перед вами девятнадцатый выпуск рассылки по созданию приложений для платформы Android. Сайт рассылки - http://mimags.ru, зеркало - http://inwoo.atwebpages.com.
В данном выпуске продолжим рассматривать использование редактора макетов Android Studio.
Ранее в выпусках 13 и 14 было создано приложение, при запуске которого на экране телефона выводилась фраза "Hello World!".
Изменим вид экрана с помощью редактора Android Studio.
Запустим созданное ранее приложение My First App.
При запуске приложения на экране телефона выводится фраза "Hello World!" (рис. 1).
Для того, чтобы при запуске приложения вместо этой фразы на экране телефона выводилось текстовое поле и кнопка (рис. 2), необходимо выполнить следующие действия:
1. Сначала нужно удалить то, что уже есть в макете. Нажмите TextView на панели « Дерево компонентов», а затем нажмите клавишу « Delete».
2. На панели «Palette» нажмите «Text », чтобы отобразить доступные текстовые элементы управления.
3. Перетащите обычный текст (Plain Text) в редактор дизайна и поместите его в верхней части макета. Это виджет EditText, предназначенный для ввода текста.
4. Нажмите на представление в редакторе дизайна. Теперь можно увидеть квадратные маркеры для изменения размера представления в каждом углу и круговые привязки с каждой стороны. Для лучшего контроля можно увеличеть рамер изображения.  Для этого используйте кнопки « Масштаб» на панели инструментов редактора макетов.
5. Нажмите и удерживайте якорь на верхней стороне, перетащите его вверх, пока он не защелкнется в верхней части макета, а затем отпустите его. После этого можно установить расстояние в 16 dp от вершины макета.
6. Также следует установить расстояние в 16 dp от левой стороны макета (рис. 3).
7. Для добавления кнопки на панели «Palette» нажмите «Buttons» .   
8. Перетащите виджет «Button» в редактор дизайна и поместите его рядом с текстовым полем правой стороной.
9. Установите расстояние в 16 dp между текстовым полем и кнопкой.
10. Чтобы выровнить текстовое поле и кнопку по горизонтали, создайте ограничение между базовыми линиями текстового поля и кнопки. Для этого нажмите на кнопку, а затем нажмите «Изменить базовую линию» (Edit Baseline) , которая появится в редакторе дизайна. Якорь (anchor) базовой линии появляется внутри кнопки. Нажмите и удерживайте этот якорь а затем перетащите его на якорь базовой линии текстового поля (рис. 4).
Результат должен выглядеть так, как показано на рисунке 5.
Примечание. Вы также можете использовать верхний или нижний края для создания горизонтального выравнивания. Однако изображение кнопки включает отступы вокруг него, поэтому визуальное выравнивание будет неправильным, если оно создано таким образом. 

 В результате будет создан макет, который показан на рисунке 6:
∙ Виджет A (текстовое поле) отображается в 16 dp от вершины родительского макета. 
∙ Виджет A отображается в 16 dp слева от родительского макета. 
∙ Виджет B (кнопка) отображается в 16 dp справа от виджета A. 
∙ Виджет B выровнен по верху виджетаа A.

При запуске приложения на экране телефона выводятся текстовое поле и кнопка (рис. 7).

В следующем выпуске продолжим корректировать приложение  My First  App.
Всего доброго, уважаемые читатели. Хорошего вам дня!

В избранное