2.5. Интерфейс пользователя. Язык разметки XML_211015


Чтобы посмотреть этот PDF файл с форматированием и разметкой, скачайте его и откройте на своем компьютере.
аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









1

Модуль 2. Объектно
-
ориентированное
программирование

Тема 2.D. Простейший интер1ейс
пользователя. Язык разметки I>=

T часа

Оглавление


2.5. Построение интерфейса приложения

................................
................................
................................

2

2.5.1. Структура проекта

................................
................................
................................
.........................

2

2.5.2. сзык разметки XML

................................
................................
................................
.......................

2

Правила построения XML
-
документа

................................
................................
................................

3

=онструкции языка

................................
................................
................................
..............................

4

олементы данных

................................
................................
................................
................................

4

Вложение элементов

................................
................................
................................
..........................

5

Специальные символы
................................
................................
................................
........................

6

Структура XML
-
документа

................................
................................
................................
..................

7

бпражнение 2.5.1

................................
................................
................................
................................
....

8

2.5.3. Описание ресурсов Android с помощью XML

................................
................................
............

11

2.5.4. Строковые ресурсы

................................
................................
................................
.....................

12

2.5.5. =нтерфейс пользователя. Разметка (layout)

................................
................................
.............

14

бпражнение 2.5.1.

................................
................................
................................
................................
.

17

2.5.6. Представления (Виджеты, Views)

................................
................................
..............................

18

аекстовые объекты

................................
................................
................................
............................

18

=нопки

................................
................................
................................
................................
................

22

Переключатели/включатели

................................
................................
................................
............

26

бпражнение 2.5.2

................................
................................
................................
................................
..

27

Задание 2.5.1
................................
................................
................................
................................
..........

27

Задание 2.5.2
................................
................................
................................
................................
..........

28

Задание 2.5.3*
................................
................................
................................
................................
........

28

Благодарности

................................
................................
................................
................................
.......

28


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









2

2Д5Д Построение интерфейса
приложения

2Д5Д1Д Структура проекта

На предыдущ
ем уроке было создано наше первое Android
-
приложение. Давайте еще раз
посмотрим его структуру. =так, проект содержит папки͗

-

src


папка, в которой хранятся “ava
-
файлы, называемые файлами кода. =ак правило, для
каждого класса создается свой файл к
ода, но иногда разработчики располагают все классы
в одном файле (не рекомендуем так делать, поскольку код становится неудобочитаемым)͖

-

gen


папка, содержащая файл R.“ava для связи ресурсов с кодом. Данный файл создается
системой при первой же комп
иляции проекта и не нуждается в редактировании,
поскольку обновляется автоматически. В этом файле для каждого android
-
ресурса
создается своя
целочисленная константа

(id), таким образом, мы получаем возможность
из кода обращаться к ресурсу. Дело в том, что
в Android
-
приложении написанном на “ava,
код и ресурсы размещаются отдельно, что дает возможность независимого
редактирования каждого из этих файлов͖

-


res


папка, в которой хранятся все ресурсы
приложения и разметки экрана. Ресурсами
являются текстовые
константы, картинки,
конфигурации экрана устройства (включая
управляющие элементы), меню приложения,
анимации, описание стилей объектов и подобные
элементы. Все файлы ресурсов представляют собой
гипертекстовые файлы x/l.

Структура и настройки приложения о
писываются в файле
AndroidManifest.x/l, так же как и файлы ресурсов,
написанном на языке гипертекстовой разметки x/l.

Заметим, что =DE создает только «заготовки» файлов
проекта, заполнять же их предстоит разработчику
самостоятельно. Для этого необходимо зн
ать язык
программирования Hava для кодирования приложения и
язык разметки гипертекста XML для описания ресурсов и разметки экрана.


2Д5Д2Д Язык разметки XML

ито же собой представляет язык разметки XML(англ.
Extensible Markup Language
-


расширяемый
язык

разметки, описывающий класс объектов, называемых XML
-

документами) и как на нем
описать ресурсы Android
-
приложения?


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









3


Гипертекст


термин, введённый аедом Нельсоном в 1963 году для обозначения текста
«ветвящегося или выполняющего действия по запросу».

Об
ычно гипертекст представляется набором текстов, имеющим свойства и
содержащим узлы перехода между текстами, которые позволяют избирать читаемые
сведения или последовательность чтения. Общеизвестным и ярко выраженным
примером гипертекста служат веб
-
страницы


документы :TML (язык разметки
гипертекста), размещённые в сети.

В компьютерной терминологии, гипертекст


текст, сформированный с помощью
языка разметки, потенциально содержащий в себе гиперссылки.


Начнем с того, что XML
2

это язык свободного описания с
труктур документов. ао есть, если мы
хотим, чтобы в документе присутствовал какой
-
либо элемент, то мы для него определяем
некоторый тег (маркер в тексте). Например, для описания элемента «текстовая строка» можно
условиться использовать тег g>, где первая метка указывает начало описания
элемента, а вторая (со знаком /)
-

конец описания. Между парой тегов помещается сам элемент.
Для каждого элемента применяется своя пара тегов, при этом однотипные элементы
описываются одинаковой парой тегов.
ааким образом, для описания двух строк нам нужны две
пары тегов͗

это первая строка и

это вторая строка.

В открывающем теге можно поместить атрибуты описываемого элемента, такие как цвет, размер,
начертание, выравнивание и

т.п., то есть описать особенности формируемого элемента.

Атрибут


это свойство описываемого элемента. При этом у однотипных элементов полный набор
атрибутов будет совпадать, но в описании можно использовать не все свойства. =аждому имени
атрибута присва
ивается значение, записанное в виде текстовой строки, то есть заключенное в
двойные кавычки. Разделяются свойства пробелом либо переносом строки.


Вернемся к нашему примеру͗ разметка

< string color = “red” align = “center”>
это

первая

строка
/string&#x/-6s;tr;&#xin4g;䀀

описы
вает текстовую строку, написанную красным шрифтом (начертание и размер установлены
по умолчанию, поскольку эти свойства не указаны при описании) с выравниванием в центре
страницы


это первая строка



Правила построения XML
-
документа

=аким бы свободным не б
ыл стиль XML
-
документа, все
-
таки существуют правила его
формирования.



В языке XML все теги парные. ото значит, что у каждого открывающего тега обязательно
должен присутствовать закрывающий тег. ото правило позволяет описывать вложенные
экземпляры, то есть
помещать внутри одного элемента другие. +сли тело тега пусто, то два
тега записываются в один, который завершается косой чертой͗

< string color = “red” align = “center”/>.

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









4



Документ должен содержать строку заголовка, в которой указывается версия языка и
и
спользуемая текстовая кодировка͗

?xml version="1.0" encoding="utf8"?&#x?-5x; m-4;&#xl 10;&#xv-4e;&#xrsi1;o-5;&#xn3=";-3;&#x.09";&#x -2e;&#xnc11;&#xo-5d;i13;&#xn3g4;&#x="-2;&#xu3tf;-4";?-; 



=мена тегов должны начинаться с буквы или символа «_» с соблюдением регистра,
поскольку XML различает регистры.



Для реализации возможности одинаковых имен элементов для различающихся с
труктур
используют понятие пространства имен. итобы различать схемы документов, для каждой
из них ставится в соответствие специальный уникальный идентификатор ресурса или UR=.
В результате схемы будут считаться тождественными только в том случае, если
уник
альные идентификаторы будут совпадать. В связи с этим в качестве идентификатора
чаще всего используется адрес своего (возможно, несуществующего) ресурса.
Пространство имен

определяется благодаря
атрибуту x/lns

в начальном теге
элемента͗

string xmlns:stri
ng="http͗///y_strings/styles/new" ͙
> ͙
.



В XML
-
тексте комментарии выделяются тегами --

и
--
� :

!
--

текст, не читаемый анализатором документа

--
� .


Конструкции языка

Содержимое XML
-
документа представляет собой набор элементов, секций CDATA,
директив
анализатора, комментариев, спец символов и текстовых данных.


Секции CDATA выделяют части документа, внутри которых текст не должен
восприниматься как разметка. CDATA означает буквально "character data"


символьные данные.

Разделы CDATA представ
ляют собой способ включения в документ текста, который
иначе бы интерпретировался анализатором как разметка. Обычно такая
потребность возникает для включения в текст документа примеров, содержащих
разметку, или кода функций на каком
-
нибудь языке программир
ования.


Элементы данных

олемент
-

это структурная единица XML
-
документа. =аждый документ содержит один или
несколько элементов. Границы элементов представлены начальным и конечным тегами. =мя
элемента в начальном и конечном тегах элемента должно совпадат
ь. олемент может быть также
представлен пустым тегом, то есть не включающего в себя другие элементы и символьные
данные.

Например, заключая число 167 в теги и, мы определяем непустой элемент,
называемый , содержимым которого являе
тся число 167. В общем случае в качестве
содержимого элементов могут выступать как просто какой
-
то текст, так и другие, вложенные,
элементы документа, секции CDATA, инструкции по обработке, комментарии,
-

т.е. практически
любые части XML
-

документа.

Любой
непустой элемент должен состоять из начального, конечного тегов и данных, заключенных
между ними. Например, следующие фрагменты будут являться элементами͗

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









5

&#xscho;&#xol00;school167/school&#x/12s; hoo;&#xl120;

ity;citySamara/c;&#xity0;/city

А вот эти элементами не являются͗

&#xscho;&#xol00;school

ity;city

Samara


Вложение элементов

Вложение


это размещение элементов внутри других элементов. оти новые элементы
называются дочерними элементами, а элементы, которые их окружают,


родительскими.

аипичная синтаксическая ошибка связана с вложенностью родительского и дочер
него элементов.
=аждый дочерний элемент должен быть целиком расположен между открывающим и
замыкающим тегами своего родительского элемента. Дочерние элементы должны заканчиваться
до начала следующего дочернего элемента.


Набором всех элементов, содержащихс
я в документе, задается его структура и определяются все
иерархическое соотношения. Например, можно описывать месторасположение Самарских
университетов. бказываем, что Самарские университеты расположены в городе Самара, который,
в свою очередь, находится в

России, используя для этого вложенность элементов XML͗

?
xml

version
=
"1.0"

encoding
=
"utf
-
8"
�?


country





name

Russia
/
name





city





name

Samara
/
name





universities





university





name

S
SU
/
name




/
university





university





name

SSAU
/
name




/
university




/
universities




/
city


/
country



Производя в последствии поиск в таком документе, специальная
программа будет опираться на
информацию, заложенную в структуру документа
-

используя элементы документа. а.е. если,
например, требуется найти нужный университет в нужном городе, используя приведенный
фрагмент, то необходимо просмотреть содержимое конкретн
ого элемента ,
находящегося внутри конкретного элемента . Поиск при этом гораздо более эффективен,
чем нахождение нужной последовательности по всему документу.

В XML документе определяется хотя бы один элемент, называемый корневым и с нег
о
программы
-
анализаторы начинают просмотр документа. В приведенном примере этим
элементом является .

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









6

В случае, если элемент не имеет содержимого, т.е. нет данных, которые он должен определять,
он называется пустым.

+ще одним примером может быть о
писание кулинарного рецепта͗

?
xml

version
=
"1.0"

encoding
=
"utf
-
8"
�?


recipe

name
=
"
хлеб
"

preptime
=
"5min"

cooktime
=
"180min"





title



Простой

хлеб
/
title





composition





ingredient

amount
=
"3"

unit
=
"
стакан
"

Мука
/
ingredient





ingr
edient

amount
=
"0.25"

unit
=
"
грамм
"

Дрожжи
/
ingredient





ingredient

amount
=
"1.5"

unit
=
"
стакан
"




Тёплая

вода



/
ingredient





ingredient

amount
=
"1"

unit
=
"
чайная

ложка
"

Соль
/
ingredient




/
composition





inst
ructions





step




Смешать все ингредиенты и тщательно замеситьŜ



/
step





step





Закрыть тканью и оставить на один час в тёплом



помещенииŜ



/
step





step






Замесить ещё разř положить на противень и поставить



в

духовку
.



/
step




/
instructions


/
recipe



Специальные символы

Для того, чтобы включить в документ символ, используемый для определения каких
-
либо
констру
кций языка (например, символ угловой скобки) и не вызвать при этом ошибок в процессе
разбора такого документа, нужно использовать специальный символьный, либо числовой
идентификатор. Например͗


или десятичная форма записи͗

"
-

апостроф


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









7

Строковые обо
значения спецсимволов могут определяться в XML документе при помощи
компонентов (entity).


Сущности (entity) могут представлять собой фрагменты текста или специальные
символы. Они могут указываться внутри документа или вне его. Во избежание
ошибок и для п
равильности отображения сущности должны быть надлежащим
образом объявлены и выражены.

В качестве сущностей можно определить фразы, такие как название компании, а
затем использовать их по всему тексту. итобы создать сущность, назначьте ей
имя и вставляйте э
то имя в текст после знака амперсанда (&), и заканчивая
точкой с запятой


например, &cona/e͖ (или другое имя). Затем укажите этот
код в строке DOCTYtE в квадратных скобках([]). отот код определяет текст,
который подставляется вместо сущности.

!DOCTYPE My
Docs SYSTEM "filename.dtd" [ !ENTITY coname
"RabidTurtleIndustries" ]�

=спользование сущностей помогает избежать многократного повторения одной
и той же фразы или информации. Оно может также облегчить редактирование
текста (например, если компания изменит

название) сразу во многих местах с
помощью простой настройки строки определения сущности.


Структура XML
-
документа

Получив сведения о различных синтаксических конструкциях, можно рассмотреть общую
логическую структуру документа. Любой XML
-
документ оформл
яется согласно следующей
структуре͗


а.е. состоит из трёх разделов͗

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









8



Пролог



аело документа



опилог (на рисунке выше не представлен)

Пролог

Любой XML документ начинается с пролога. В пролог помещается описательная информация для
всего документа в целом, кото
рую требуется получить анализатору ещё до начала какой
-
нибудь
обработки документа. = ней относятся͗



=оманды обработки



Декларация типа документа



=омментарий

Пролог не является обязательной частью XML
-
документа, в том смысле, что его отсутствие не
должно выз
ывать каких
-
либо проблем у анализаторов. Необязательность пролога продиктована
лишь совместимостью с GML и :TML в версиях, существовавших до выхода XML. Однако,
правилом хорошего тона считается всегда помещать пролог в любой XML
-
документ.

аело документа

ае
ло документа включает в себя прикладную информацию и должно состоять ровно из одного
узла, называемого корневым элементом. С точки зрения иерархической структуры данных, все
другие прикладные данные обязаны быть дочерними этого одного единственного элемент
а
документа.

опилог

опилог завершает XML
-
документ и не является обязательным, однако если он имеется в
документе, то может состоять только из комментариев.

Упражнение 2Д5Д1

Рассмотрим пример иерархии плоских геометрических фигур͗

=ак подобную иерархию можн
о описать с помощью языка XML?

Первым шагом должен стать выбор родительского элемента, и в данном примере
2

это элемент
«фигура». Для этого элемента придумываем название соответствующего ему тега, например,
. тег с таким названием будет корневым эл
ементом документа͗

?xml version="1.0" encoding="utf
-
8"?�

igu;&#xre00;figure


i

/figure&#x/fig;&#xure1; 


По отношению к элементу «фигура» дочерними являются «открытая» и «закрытая». С точки
зрения XML
-
документа это означает вложенность тегов. Пусть тег для элемента «открытая»
на
зывается , а для «закрытая»
-

. аогда XML
-
документ выглядит следующим
образом͗

?xml version="1.0" encoding="utf
-
8"?�

igu;&#xre00;figure


&#xopen;opened

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









9



i


/opened&#x/ope;&#xned1; 


los;closed



i


/closed&#x/clo;&#xsed1; 

/figure&#x/fig;&#xure1; 


Стоит обратить внимание, что несмотря на то, что эл
ементов и
с точки зрения самого XML
-
документа может быть неограниченное количество,
с точки зрения логики, таких элементов может быть только по одному. = действительно, вряд ли в
реальном мире можно отыскать открытые фиг
уры, чья «открытость» отличалась бы.

Рассмотрим теперь отдельно фигуры «открытые» и «закрытые».

В «открытые» фигуры попало две
2

точка (будем обозначать ) и ломанная (). Про
каждую из этих фигур можно сказать, что у них могут быть следующи
е свойства͗ толщина и цвет.
аочке могут соответствовать координаты, а ломанной
2

длина.

=ак точек, так и ломанных может быть сколь угодно много, и на первый взгляд их все можно
просто разместить внутри элемента ͗

?
xml

version
=
"1.0"

encoding
=
"utf
-
8
"
�?


figure





opened





point

color
=
”red”

thick
=
”2”

(0;0)
/
point





point

color
=
”blue”

thick
=
”1”

(1;5,4)
/
point





polyline

color
=
”green”

thick
=
”1”

23,1
/
polyline





polyline

color
=
”green”

thick
=
”1с”

1,09
/
polyline




/
opened





closed





i



/
closed


/
figure



Однако, элементы, принадлежащие одному классу, принято группировать. Например͗


pointList





point

color
=
”red”

thick
=
”2”

(0;0)
/
point





point

color
=
”blue”

thick
=
”1”

(1;5,4)
/
point


/
pointList



аогда XML
-
документ приобретет вид͗

?
xml

version
=
"1.0
"

encoding
=
"utf
-
8"
�?


figure





opened





pointList





point

color
=
”red”

thick
=
”2”

(0;0)
/
point





point

color
=
”blue”

thick
=
”1”

(1;5,4)
/
point




/
pointList





polylineList


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









10




po
lyline

color
=
”green”

thick
=
”1”

23,1
/
polyline





polyline

color
=
”green”

thick
=
”1с”

1,09
/
polyline




/
polylineList




/
opened





closed




i



/
closed


/
figure



Подобные рассуждения верны и для классов многоугольник и эллипс и их подклассов. Причем
каждый конкретный представитель, например, класса эллипс, не обязан быть кругом. ото
означает, что у элемента эллипс может не быть дочерних элементов.


ellipseList





ellipse

filling
=
”red”

border
=
”2”

�/




ellipse

filling
=
”blue”

border
=
”1”

5
/
ellipse





ellipse

filling
=
”green”

border
=
”1”





circleList





circle

12,5
/
circle





circle

0,152
/
circle




/
circleList




/
ellipse


/
ellipseList



В результате XML
-
документ может иметь следующий вид͗

?
xml

version
=
"1.0"

encoding
=
"utf
-
8"
�?


figure





opened





pointList





point

color
=
”red”

thick
=
”2”

(0;0)
/
point





point

color
=
”blue”

thick
=
”1”

(1;5,4)
/
poin
t




/
pointList





polylineList





polyline

color
=
”green”

thick
=
”1”

23,1
/
polyline





polyline

color
=
”green”

thick
=
”1с”

1,09
/
polyline




/
polylineList




/
opened





closed





ellips
eList





ellipse

filling
=
”red”

border
=
”2”

�/




ellipse

filling
=
”blue”border=”1”




фокальноерасстояние

= 5



/
ellipse





ellipse

filling
=
”none”

border
=
”1”





circleList





circle

радиус

= 12,5
/
circle





circle

радиус

= 0,15
2
/
circle




/
circleList




/
ellipse




/
ellipseList


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









11




polygonList





polygon

angle
=
"4"





rectangleList

type
=
"square"





rectang
le

measurement
=
"sm"

сторона

=



20
/
rectangle





rectangle

measurement
=
"m"

сторона

=



0,45
/
rectangle




/
rectangleList





rectan
gleList

type
=
"rectangle"





rectangle

measurement
=
"sm"

площадь

=



17
/
rectangle





rectangle

measurement
=
"sm"

площадь

=



5,7
/
rectangle




/
rectangleList




/
polygon





polygon

angle
=
"5"

�/



/
polygonList




/
closed


/
figure



2Д5Д3Д Описание ресурсов Android с помощью XML

Ресурсы
-

один из основных компоненто
в, с которыми приходится работать. В Android принято
держать объекты такие, как изображения, строковые константы, цвета, анимацию, стили и т.п. за
пределами исходного кода. Система поддерживает хранение ресурсов во внешних файлах,
например, x/l. Внешние ре
сурсы легче поддерживать, обновлять и редактировать.

=аждое приложение на Android содержит каталог для ресурсов res/. =нформация в каталоге
ресурсов будет доступна в приложении через класс R, который автоматически генерируется
средой разработки. ао есть хр
анение файлов и данных в ресурсах (в каталоге res/) делает их
легкодоступными для использования в коде программы.

Ресурсы в Android являются декларативными, т.е. они описывают свойства ресурсов, а не как их
создавать. В основном ресурсы хранятся в виде XML
-
файлов в каталоге res с такими
подкаталогами как, например, values, drawable
-
ldpi, drawable
-
mdpi, drawable
-
hdpi, layout.


Для удобства система создает идентификаторы ресурсов и использует их в файле
R.“ava (класс R, который содержит ссылки на все ресурсы

проекта), что позволяет
ссылаться на ресурсы внутри кода программы. Статический класс R генерируется на
основе заданных ресурсов и создается во время компиляции проекта. При создании класс
содержит статические подклассы для всех типов ресурсов, для которы
х был описан
хотя бы один экземпляр. аак как файл R генерируется автоматически, то нет смысла
его редактировать вручную, потому что все изменения будут утеряны при повторной
генерации.


В общем виде ресурсы представляют собой файл (например, изображение)
или значение
(например, заголовок программы), связанные с создаваемым приложением. бдобство
использования ресурсов заключается в том, что их можно изменять без повторной компиляции
аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









12

или новой разработки приложения. =мена файлов для ресурсов должны состоять
исключительно
из букв в нижнем регистре, чисел и символов подчеркивания.

Самыми распространенными ресурсами являются͗ разметка (layout), строки (string), цвета (color) и
графические рисунки (bit/ap, drawable).

В Android используются два подхода к процессу

создания ресурсов
-

первый подход заключается в
том, что ресурсы задаются в файле, при этом имя файла значения не имеет. Второй подход
-

ресурс задается в виде самого файла, и тогда имя файла уже имеет значение.

Общая структура каталогов, содержащих ресур
сы выглядит следующим образом͗

/res


/drawable



/*.png



/*.jpg



/*.gif


/layout



/*.xml


/values



/strings.xml



/colors.xml



итобы создать x/l файл ресурсов в Eclipse нужно проследовать по цепочке File > New >
Other > Android и выбрать графу Andr
oid XML File.

В зависимости от того, какой элемент (папка/файл) проекта был в этот момент
выделен, Eclipse может сам определить корневой элемент файла XML, либо
предложить список подходящих вариантов.

В

Android Studio
цепочка

действий

выглядит

так
: File�
New� Values resource file


2Д5Д—Д Строковые ресурсы

Любой используемый в программе текст
2

это отдельный ресурс, такой же как изображение или
звук.

При создании нового приложения, среда разработки (например, Eclipse) создает файл strings.x/l,
в котором х
ранятся строки для заголовка приложения и выводимого им (приложением)
сообщения. Можно редактировать данный файл, добавляя новые строковые ресурсы. аакже
можно создавать новые файлы с любым (осмысленным) именем, которые будут содержать
строковые ресурсы. В
се эти файлы должны находиться в подкаталоге /res/values. иисло файлов
может быть любым.

Строковые ресурсы обозначаются тегом .


аипичный файл выглядит следующим образом͗

?
xml

version
=
"1.0"

encoding
=
"utf
-
8"
�?


resources





string

name
=
"app_name
"


Hello world!
/
string





string

name
=
"hello_world"

Hello world!
/
string


/
resources


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









13

где na/e
2

имя строкового ресурса, с помощью которого можно отличить один ресурс от другого,
а также обратиться к данному ресурсу в программе или в другом файле x/l
.

Подход, при котором строковые ресурсы хранятся в отдельном файле, удобен по двум причинам͗

1.

+сли одна и та же строка используется в нескольких частях программы, то благодаря
использованию ссылки на текстовый ресурс в дальнейшем правку (если, например,
зах
отели изменить текст какого
-
то заголовка) нужно будет делать только в одном
исходном файле ресурса.

2.

Создание отдельных файлов с текстовыми значениями удобно и для локализации
приложения на несколько языков. Все, что нужно будет сделать


это создать отдель
ный
файл с переводом, например, на французский язык, и создать для него отдельную
директорию res/values
-
fr (fr
2

сокращение для French).

При именовании строковых ресурсов необходимо придерживаться нескольких правил͗



название строкового ресурса должно состо
ять из строчных букв͖



в случае, если название состоит из двух или трех слов, то их рекомендуется разделять
нижним подчеркиванием͖



в названиях рекомендуется использовать только латиницу.

Во многих случаях можно задействовать системные строковые ресурсы
-

эт
о строки типа OK,
Cancel и др. В таких ситуациях используется схожий формат (добавляется слово android)͗

android:text="@android:string/cancel"

Здесь часть строки вида @android͗string
2

обращение к системному строковому ресурсу android.

Вот список некоторы
х системных строковых ресурсов android͗

@android:string/cancel

@android:string/no

@android:string/ok

@android:string/yes


аеперь строковые ресурсы можно использовать в x/l файле разметки формы. Например, если
открыть файл activity_/ain.x/l, расположенный
в res/layout/, то можно увидеть͗


TextView



android:layout_width
=
"wrap_content"



android:layout_height
=
"wrap_content"



android:text
=
"@string/hello_world"

�/


Среда разработки Eclipse автоматически создает код для
Activity
, в котором размещается
т
екстовый виджет TextView. В качестве значения для текста помещена ссылка на текстовый
ресурс͗

android:text="@string/hello_world"


Сам ресурс находится в файле res/values/strings.x/l͗

string name="hello_wo&#xstri;&#xng 1;nam;=12;&#x"hel;&#xlo12;&#x_wo1;rld;&#x"000;rld"Hello world!/str&#x/12s;&#xtr12;&#xing0;ing

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









14


В приложении можно пр
именять жестко написанные строки кода. Но такой подход не
рекомендуется
-

вместо жестко написанных строк следует использовать соответствующие
идентификаторы, что позволяет изменять текст строкового ресурса, не изменяя исходного кода.

Пример жестко написанн
ой строки͗

androidśtext="нажми на меня"


Пример строки с использованием строкового ресурса͗

android:text="@string/close"


Применение ресурсов позволяет использовать механизм динамического выбора нужного ресурса
в программе. Можно задать определенную стру
ктуру каталогов в проекте, чтобы создавать
ресурсы для конкретных языков, регионов и аппаратных конфигураций. Во время выполнения
программы Android выберет нужные значения для конкретного телефона пользователя.




=огда =DE Eclipse открывает Android XML
файлы, внизу можно заметить несколько
вкладок (их количество и названия зависят от самого XML файла). аак, например, для
файла strings.x/l их две͗ Resources и strings.x/l. +сли открыть вторую, то можно
увидеть текст, содержащийся в файле. +сли нужно отреда
ктировать файл в таком
представлении, то придется вручную печать всё необходимое. Первая же вкладка
(Resources) показывает ресурсы, расположенные в файле, в виде объектов. В таком
представлении ресурсы гораздо удобнее добавлять, удалять и редактировать.

ID
E Eclipse позволяет быстро создавать строковые ресурсы. Для этого нужно
щелкнуть правой кнопкой мыши по строке и выбрать Quick Fix.

В Android Studio вкладок нет и сразу видно весь текст со всеми тегами. Быстрое
создание строковых ресурсов в данной =DE осуществяется по щелчку правой кнопки
мыши и выбору пункта Generate, или сочетанием клавиш Alt + =nsert


2Д5Д5Д Интерфейс пользователяД

Разметка (layout)

Графический интерфейс создается с помощью представлений (View) и групп представлений
(ViewGroup). оти элементы размещаются на активности, их описания помещаются в файл
манифеста, а действия с объектами прописываются программно в файле ко
да MainActivity.“ava в
виде методов классов, наследуемых от классов View и ViewGroup или атрибутивно в файле
разметки layout/activity_/ain.x/l. б файла разметки так же имеется графический вид Graphical
layout
-

системная имитация мобильного устройства.


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









15



В окне talette можно выбрать вид представления объектов͗ значки, названия, названия и значки.
Выберите удобный для себя вид для работы с графическими представлениями.

Eclipse при создании нашего проекта разместил в активности единственный объект


относи
тельную разметку RelativeLayout с дочерним элементом
-

текстовой строкой TextView,
значение которой находится в файле ресурсов res/value/strings.x/l в текстовой константе string.

Мы уже знаем, как изменять значения таких констант. А как же изменить парамет
ры самого
представления? Во
-
первых, это можно сделать в графическом представлении, во
-
вторых
-

редактируя x/l
-
файл разметки. Графический редактор очень прост в использовании, поэтому мы
не будем останавливаться на его рассмотрении, а рассмотрим содержимое

текстового файла.

Переключимся на вкладку activity_/ain.x/l и посмотрим свойства объектов, которые
присутствуют в нашей активности.



RelativeLayout

xmlns:android
=
"http://schemas.android.com/apk/res/android"


xmlns:tools
=
"http://schemas.android.com/tool
s"


android:layout_width
=
"match_parent"


android:layout_height
=
"match_parent"


android:paddingBottom
=
"@dimen/activity_vertical_margin"


android:paddingLeft
=
"@dimen/activity_horizontal_margin"


android:paddingRight
=
"@dimen/activity_horizontal_margin"


andro
id:paddingTop
=
"@dimen/activity_vertical_margin"


tools:context
=
"com.example.my_aap.MainActivity"







TextView




android:layout_width
=
"wrap_content"




android:layout_height
=
"wrap_content"




android:text
=
"@string/hello"

�/

/
RelativeLayout



Lay
out


это разметка окна. Разметка может быть одного из четырех типов͗



LinearLayout


линейная разметка, при которой виджеты (Views) размещаются
вертикально или горизонтально. Расположение объектов в данной разметке
осуществляется строго друг под другом в о
дин столбец, если ориентация разметки
аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









16

вертикальная (
androidśorientation=”vertical”
) или в одну строку рядом, если
ориентация горизонтальная (
androidśorientation=”horizontal”
). Линейная разметка
позволяет объектам пропорционально заполнять пространство (
a
ndroid:layout_weight
).



FrameLayout


разметка в виде фреймов, когда все объекты выравниваются по левому
верхнему углу экрана. Очень неудобна в качестве корневой, но можно применять как
вложенную для размещения в ней одного объекта и резервирования свобод
ного
пространства рядом с ним.



TableLayout


табулированная разметка, позволяющая располагать представления по
строкам и столбцам. =аждый столбец таблицы в x/l
-
файле ресурсов выделяется парным
тегом . В данной разметке во всех строках
выделяется одинаковое
количество столбцов. +сли в строках было описано разное количество объектов, то длина
строки измеряется по максимальному количеству элементов в TableRow. В строках
меньшей длины крайние правые ячейки остаются свободными. Для того, что
бы оставить
пустой не крайнюю правую ячейку, в нее помещают пустой объект, например, TextView
без текста и форматирования.



RelativeLayout


относительная разметка, при которой позиции объектов можно
определять относительно родительского виджета, а так же о
тносительно друг друга.
Данный вид разметки используется по умолчанию.

С Android 4.0 в проектах появился новый вид разметки
-

GridLayout
-

табличная разметка, в
которой элементы фиксируются в определенных ячейках таблицы, независимо от заполненности
друг
их ячеек. Все дочерние элементы в этой разметке имеют размеры по размеру данных, по
этому один объект может занимать несколько ячеек. ото свойство регулируется атрибутами
android͗layout_colu/nSpan и android͗layout_rowSpan.

Для всех видов разметок обязател
ьно имеются атрибуты высоты и ширины, при этом каждая
разметка имеет свой набор атрибутов.


Разметка является корневым элементом активности. б окна может быть ровно один корневой
элемент, в котором размещаются дочерние объекты. Потомком может быть предс
тавление
любого типа, включая и тип родительского объекта.

Свойства описываются внутри парных тегов представления. Атрибут описывается пространством
имен ”android͗” и названием свойства с присвоением ему значения.

androidśproperty = “property_value”

Опис
ание свойств можно прочитать, выделив соответственную строку в ниспадающем списке,
который появляется при нажатии комбинации клавиш + <Пробел> в процессе написания
имени атрибута.



В составе Android SDK имеется утилита :ierarchy Viewer, позволяюща
я отследить
разметку интерфейса пользователя. Запустить утилиту можно после запуска
приложения на устройстве. Запустите файл tool/hierarchyviewer.bat, находящийся в
папке установки Android SDK и после его запуска выберите устройство, затем
Focused Window
>, и нажмите кнопку Load View :ierarchy.




аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









17

иасто используемые атрибуты объектов приведены в таблице

атрибут

описание

возможные значения

android:id

маркировка объекта по имени




@+id/name”

Знак + говорит о добавлении
нового id объектаŜ


android:orienta
tion

выравнивание разметки на
экране

vertical,

horizontal


android:layout_width




ширина объекта




fill_parent (match_parent)
-

родительский

размер
;

wrap_content
-

по размеру
содержимого͖

или фиксированный размер с
указанием единиц измерения






andro
id:layout_height








высота объекта




fill_parent (match_parent)
-

родительский

размер
;

wrap_content
-

по размеру
содержимого͖

или фиксированный размер с
указанием единиц измерения

android:layout_weight




весовой коэффициент объекта




по умолчанию 0
,

или принимает натуральные значения
-

доля объекта в линии разметки



android:gravity

android:layout_gravity

выравнивание

содержимого потомков или
самих дочерних объектов





center, left, right




Более подробно о видах разметок и тонкостей работы
с ними можно почитать в
цикле статей͗



Android. Всё о LinearLayout
-

1



Android. Всё о LinearLa
yout
-

2



Android. Всё о LinearLayout
-

3



Android. Обзор RelativeLayout



Android. Обзор TableLayout



Android. Обзор Fra/eLayout

Упражнение 2Д5Д1Д

=зучение атрибутов разметки Layout

1.


мените относительную разметку на линейную, внутри нее создайте еще две разметки
по ширине родительской разметки и по высоте относящиеся 1͗2 сверху вниз. Нижнюю
разметку разделите на две равные вертикальные. Самым нижним элементом корневой
разметки должно о
статься текстовое поле. бстановите для всех объектов различные
значения цветового атрибута. =зучите возможности остальных типов разметок, изменяя
корневую и дочерние разметки экрана.

2.

=спользуя табличную разметку, нарисуйте экран игры «Пятнашки».

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









18



2Д5Д6Д П
редставления (Виджеты, Views)

Разметка является основой для расположения других полей (виджетов) приложения. В x/l
-
файле
разметки описание объекта помещается в парные теги <аип_объекта> , а в “ava
-
файле необходимо импортировать стандартный кл
асс из пакета
androidŜwidgetŜТип_объекта
,
а затем создать константу или переменную этого типа.

В программном коде доступ к объекту осуществляется посредством его id, установленного
атрибутом android͗id, поэтому данный атрибут необходимо устанавливать все
м создаваемым
представлениям, к которым планируется обращение. б EditText имеется возможность установить
подсказки (hint) о вводимой информации. Для этого необходимо добавить атрибут android͗hint =
“текст подсказки”.

В файле разметки͗

android:id

=
“@+id/na
me”

android:hint

=
“@string/text_hint”

В “ava
-
файле͗

Type_object

var_name = (
Type_object
)
findViewById
(R.id.
name
);

Здесь инструкция findView.y=d() находит виджет по его id, считывая адрес из класса R.


=ласс R, описание которого хранится в файле Проект/
gen/=мя_пакета/R.“ava,
создается в процессе компиляции. В этом классе создаются константы для каждого
вновь созданного (в разметке или в программном коде) объекта. При каждом запуске
проекта данный класс создается снова. Для очистки класса R достаточно
вып
олнить команду меню tro“ect|Clean͙ При следующей компиляции файл R.“ava
снова будет заполнен константами.


Текстовые объекты

Различают два вида текстовых полей͗ текстовая константа (TextView) и редактируемый текст
(EditText).

TextView предназначается для

отображения на экране стационарного фрагмента текста. +сли
содержимое не помещается в размеры объекта, то автоматически появляется полоса прокрутки.
После создания в программе экземпляра текстового класса, здесь же можно установить его
атрибуты. Например
, программным аналогом атрибута файла разметки android͗text = “значение”
является вызов метода setText(string)͗

android͗text = “:ello!” <=> txt.setText (“:ello!”).

Мы видим, что для отображения текста в Textview в файле разметки используется атрибут
an
droid͗text, например͗

androidśtext="Погладь котаř ŜŜŜ!"

=ак уже упоминалось, такой подход является нежелательным. Вместо этого лучше создать
строковый ресурс в файле strings.x/l͗

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









19

string name=&#xstri;&#xng 1;nam;=12;&#x"cat;&#x"000;"cat"
Погладь

кота
, ...!!!/string&#x-3/8;&#xs-3t;&#x-3r8;&#xi-3n;&#x-3g-; 

А затем уже использовать э
тот строковый ресурс͗

android:text="@string/cat"

б элемента TextView есть многочисленные методы и XML атрибуты для работы с текстом.
Например, основные XML атрибуты, отображающие свойства элемента TextView͗

1.

android:textSize


размер текста. При установке р
азмера текста используются несколько
единиц измерения͗



рх


пикселы͖



dp


независимые от плотности пикселы. ото абстрактная единица измерения,
основанная на физической плотности экрана͖



sp


независимые от масштабирования пикселы, т.е. зависимы от пользова
тельских
настроек размеров шрифтов͖



in


дюймы, базируются на физических размерах экрана͖



pt


1/72 дюйма, базируются на физических размерах экрана͖



mm


миллиметры, также базируются на физических размерах экрана.

Обычно при установке размера текста исполь
зуются единицы измерения sp, которые наиболее
корректно отображают шрифты.

android:textSize="48sp"


2.

android: textStyle


стиль текста. =спользуются константы͗



normal;



bold;



italic.

Пример установки стиля через атрибуты͗

android:textStyle="bold"


3.

android:
textColor


цвет текста. =спользуются четыре формата в шестнадцатеричной
кодировке͗



#rgb



#argb



#rrggbb



#aarrggbb

где r, g, b


соответствующий цвет, а


прозрачность (alpha channel). Значение a, установленное в
0, означает прозрачность 100%. Значение по умо
лчанию, без указания значения alpha,


непрозрачно.

Например, можно создать цветовой ресурс в файле colors.x/l͗

color name=" olo;&#xr n1;*me;&#x="12;&#xtext;&#x"000;text"#87CEFA/co&#x/co1;lor;lor

= тогда в атрибуте указываем͗

android:textColor="@color/text"

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









20


+сли же мы хотим реализовать ввод и редактир
ование текста, нам придется использовать объект
класса EditText, основным методом которого является получение вводимого значения


метод
getText(). Данный метод возвращает значение типа Editable
-

надстройка над String, обладающая
возможностью динамическог
о изменения в процессе выполнения программы. Приведем
описание текстовых полей͗ простой текст с надписью “:ello!” и текстовое поле для ввода с
подсказкой (hint) “=nput your text”.


TextView



android:id
=
"@+id/textView1"



android:layout_width
=
"wrap_c
ontent"



android:layout_height
=
"wrap_content"



android:layout_alignParentLeft
=
"true"



android:layout_alignParentTop
=
"true"



android:layout_marginTop
=
"31dp"



android:text
=
"Hello!"
�/




EditText


android:id
=
"@+id/etext1"


android:lay
out_width
=
"wrap_content"


android:layout_height
=
"wrap_content"


android:layout_alignLeft
=
"@+id/textView1"


android:layout_below
=
"@+id/textView1"


android:hint
=
"Input your text"



/
EditText


олемент интерфейса EditText


это текстовое поле для ввода польз
овательского текста, которое
используется, если необходимо редактирование текста. EditText является наследником TextView.



=ак и для файлов ресурсов (например, strings.x/l), так и для файлов разметки

(activity_/ain.x/l), когда открываем его в Eclipse, вн
изу можно заметить несколько
вкладок͗ GraphicalLayout и activity_/ain.x/l
.

В

AndroidStudio вкладки называются Design и Text. Открыв первую, на панели
инструментов слева в папке TextFields можно найти текстовые поля под разными
именами. Например, tlainText,

Password, E
-
/ail и т.д.

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









21



Eclipse AndroidStudio


Для быстрой и удобной разработки текстовые поля снабдили различными свойствами и дали
разные имена. Рассмотрим некоторые из них.

PlainText

PlainTe
xt
-

самый простой вариант текстового поля. При добавлении в разметку его XML
-
представление будет следующим͗


EditText



android:id
=
"@+id/editText1"



android:layout_width
=
"match_parent"



android:layout_height
=
"wrap_content"

�/


Password

При испо
льзовании типа tassword в свойстве inputType используется значение texttassword. При
вводе текста сначала показывается символ, который заменяется на звёздочку или точку.


EditText



android:id
=
"@+id/editText2"



android:layout_width
=
"match_parent"



android:layout_height
=
"wrap_content"



android:inputType
=
"textPassword"

�/





аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









22

E
-
mail

б элемента E
-
/ail используется атрибут android͗inputType="textE/ailAddress". В этом случае на
клавиатуре появляется дополнительная клавиша с символом @, который обязате
льно
используется в любом электронном адресе.


аекст
-
подсказка

Подсказка видна, если текстовый элемент не содержит пользовательского текста. =ак только
пользователь начинает вводить текст, то подсказка исчезает. Соответственно, если удалить
пользовательск
ий текст, то подсказка появляется снова. ото очень удобное решение во многих
случаях, когда на экране мало места для элементов.

В Android у многих элементов есть свойство :int (атрибут hint), который работает аналогичным
образом. бстановите у данного свойс
тва нужный текст и у вас появится текстовое поле с
подсказкой.

androidśhint="подсказка"



Кнопки

Кнопка (Button)

-

это управляющий элемент. =нопки позволяют управлять процессом
выполнения приложения в ходе его работы.

=нопка описывается тегами <.utton><
/.utton> и является наследником класса
android.widget..utton. Сам по себе объект .utton ничего не делает, то есть при нажатии на кнопку
ничего не происходит. итобы действия выполнялись, необходим обработчик события нажатия
кнопки. Методом, устанавливающим
обработчик событий для кнопки, является метод


Создадим относительную разметку экрана приложения и поместим в нее следующие текстовые
поля и кнопки͗

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









23


TextView

android:id
=
"@+id/txt1"

android:layout_width
=
"wrap_content”

android:layout
_height
=
"wrap_content”

android:text
=

Текст
"
�/


EditText

android:layout_width
=
"fill_parent"

android:layout_height
=
"wrap_content”

android:id
=
"@+id/etxt1“

android:layout_below
=
"@id/txt1"

android:hint
=
"Вводите текст сюда"
�/


Button

android:layout_width
=
"wrap
_content“

android:layout_height
=
"wrap_content“

android:id
=
"@+id/bt1“

android:layout_below
=
"@id/etxt1“

android:text
=
"
Ввести
"
�/


Button

android:layout_width
=
"wrap_content"

android:layout_height
=
"wrap_content"

android:id
=
"@+id/bt2"

android:layout_below
=
"@id/
etxt1"

android:layout_toRightOf
=
"@id/bt1"

android:text
=
"
Отменить
"
�/


Button

android:layout_width
=
"match_parent"

android:layout_height
=
"wrap_content"

android:id
=
"@+id/bt3"

android:layout_below
=
"@id/bt1"

android:text
=
"Выход"
�/

Откроем файл “ava
-
кода (если

вы его не переименовали, то по умолчанию это MainActivity.“ava)


и создадим объекты для виджетов͗

import

android.view.View;

import

android.widget.Button;

import

android.widget.TextView;

import

android.widget.EditText;


public

class
MainActivity
extends
Ac
tivity{


TextView txt;


EditText etxt;


Button bt1;


Button bt2;


Button bt3;


@Override


public void

onCreate
(
Bundle
savedInstanceState
) {


super
.
onCreate
(
savedInstanceState
);


SetContentView(R.layout.
main_activity
);



txt
= (TextView)findViewById(R.id.
txt
);


= (EditText)findViewById(R.id.
etxt
);


bt1
= (Button)findViewById(R.id.
bt1
);


bt2
= (Button)findViewById(R.id.
bt2
);


bt3
= (Button)findViewById(R.id.
bt3
);


А теперь напишем обра
ботчики событий для каждой из кнопок (продолжаем работать в методе
onCreate()):

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









24

import

android.view.View.OnClickListener;
//импортируем класс обработчика

...

OnClickListener l1 =
new

OnClickListener(){
//
первый

объект
-
обработчик

@Override
//переопределяем р
одительский метод по своему усмотрению

public

void

onClick(View v){



//
этот

обработчик

копирует

текст

//
из

EditText
в

TextView

};

OnClickListener l2 =
new

OnClickListener(){
//
второй

объект
-
обработчик

@Override

public

void

onC
lick(View v){



txtŜsetText(“ничего не напишу!”)h}
//этот обработчик меняет

// содержимое TextView на константу “ничего не напишу!”

};

OnClickListener l3 =
new

OnClickListener(){
//
третий

объект
-
обработчик

@Override

public

void

onClick(View v){
//этот обрабо
тчик останавливает работу Activity



finish();}

};

}

//и вызовем каждый обработчик к определенной кнопке





=з кода видно, что мы создали два текстовых поля, три кнопки и т
ри обработчика, то есть всего 8
объектов. = это для такого простого приложения. ием сложнее приложение, тем больше
объектов, соответственно, больше занятой оперативной памяти (сравнительно небольшой у
мобильных устройств). По этому необходимо стараться

уменьшить количество создаваемых
объектов. аак, мы можем объединить все три обработчика (l1, l2, l3) в один, используя оператор
выбора при его определении͗

OnClickListener l =
new

OnClickListener(){
//
создаем

один

обработчик

@Override

public

void

onClick
(View v){


switch
(v.getId()){


case

R.id.
bt1
:
txt
.setText(
.getText());
break
;


case

R.id.
bt2
:
txt
.setText(
"
ничего

не

напишу
!"
);
break
;


case

R.id.
bt3
: finish();
break
;
}


}

};
//и вызываенм его к каждой кнопке

bt1
.setOnClickLis
tener(l);

bt2
.setOnClickListener(l);

bt3
.setOnClickListener(l);

Выполняемое действие зависит от того, какой id у нажатой кнопки. Для идентификации кнопки
применяется метод get=d(), считывающий атрибут из класса R.

Ну и самый простой способ вызова обработ
чика
-

это вызов его из атрибутов кнопки в x/l
-

файле.
Для этого нам не нужно создавать объект
-
обработчик, а достаточно просто определить метод
onClick() для различных случаев (назовем методы l)͗

В

файле

разметки

activity_main.xml:

...


Button

android:la
yout_width
=
"wrap_content“

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









25

android:layout_height
=
"wrap_content“

android:id
=
"@+id/bt1“

android:onClick
=
"l1“

android:layout_below
=
"@id/etxt1“

android:text
=
"
Ввести
"
�/


Button

android:layout_width
=
"wrap_content"

android:layout_height
=
"wrap_content"

android:id
=
"@+id/bt2"

android:onClick
=
"l2“

android:layout_below
=
"@id/etxt1"

android:layout_toRightOf
=
"@id/bt1"

android:text
=
"
Отменить
"
�/


Button

android:layout_width
=
"match_parent"

android:layout_height
=
"wrap_content"

android:id
=
"@+id/bt3"

android:onClick
=
"l3“

andro
id:layout_below
=
"@id/bt1"

android:text
=
"
Выход
"
�/


В

файле

кода

MainActivity.java

...

public

void

l1(View v){

txt
.setText(
etxt
.getText());

}

public

void

l2(View v){

txt
.setText(
"
нет

текста
"
);

}

public

void

l3(View v){

finish();

}

Обратите внимание на то,
что в данном случае для обработчиков никаких объектов не создается,
мы обходимся только самими виджетами. аакой же экономный способ написания обработчиков
событий нажатия кнопок получается, если в качестве обработчика использовать Activity. оту
возможность

мы рассмотрим далее при знакомстве с =нтерфейсами.

+сли же при описании кнопки мы применим теги <=/age.utton>, то на кнопке
вместо текста будет изображение, например, иконка приложения, находящаяся в папке ресурсов
drawable
-
* (в зависимости

от параметров экрана будет выбрана одна из папок). В файле разметки
установка изображения на кнопку осуществляется командой

androidśsrc = “@drawable/
имя
_
файла
_
с
_
картинкой


в

программе

2

методом

где

ic_launch
er.png


имя

файла

с

картинкой

из

папки

drawable
-
*.


ImageButton



android:id
=
"@+id/button1"



android:layout_width
=
"wrap_content"



android:layout_height
=
"wrap_content"



android:src
=
"@drawable/abc_menu_dropdown_panel_holo_dark"

�/


аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









26

Переклю
чатели/включатели

RadioButton
. Представления этого типа позволяют выбирать одну из предложенных позиций и
относятся к “ava
-
классу RadioGroup. Группа переключателей в файле разметки выделяется тегами
, каждый из переключателей описы
вается тегами
. В группе активным может быть только один переключатель. +сли
теги не ставить, то кнопки будут независимы друг от друга. аак делать не стоит,
поскольку для независимых переключателей предусмотрен класс

Check.ox. Атрибуты
переключателей ничем не отличаются от атрибутов остальных виджетов. Определение группы
переключателей из двух кнопок выглядит так͗


RadioGroup


android:id
=
"@+id/radioGroup1"


android:layout_width
=
"wrap_content"


android:layout_height
=
"w
rap_content"




RadioButton


android:id
=
"@+id/radio1"


android:layout_width
=
"wrap_content"


android:layout_height
=
"wrap_content"


android:checked
=
"true"


android:text
=
"RadioButton 1"
�/



RadioButton


android:id
=
"@+id/radio2"


android:layout_width
=
"wrap_con
tent"


android:layout_height
=
"wrap_content"


android:text
=
"RadioButton 2"
�/

/
RadioGroup



Для программирования поведения приложения при выборе определенной кнопки применяется
метод
isChecked().
При создании в приложении текстового поля c
id =
textView1

и

кнопки

button1
можно задать событие на вывод текстовой строки в поле
textView1
при выборе
переключателя и нажатия кнопки
button1.

import

android.widget.Button;

import

android.widget.RadioButton;

import

android.widget.TextView;


public

class
MainActivity
e
xtends

ActionBarActivity {


@Override


public

void

onCreate(Bundle savedInstanceState) {


super
.onCreate(savedInstanceState);


setContentView(R.layout.
activity_main
);


final

RadioButton r1 = (RadioButton)findView
ById(R.id.
radio1
);


final

RadioButton r2 = (RadioButton)findViewById(R.id.
radio2
);


final

Button b = (Button)findViewById(R.id.
button1
);




final

TextView t = (TextView)findViewById(R.id.
textView1
);


b.setOnClic
kListener(
new
View.OnClickListener() {



@Override


public

void

onClick(View v) {


if

(r1.isChecked()) t.setText(
"Case 1"
);


if

(r2.isChecked()) t.setText(
"Case 2"
);

}


});


}

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









27

}



CheckBox.

Об этом классе объектов уже упоминалось ранее. =ласс Check.ox не привязывает свои
объекты к какой
-
либо группе, то есть представления работают независимо. Для описания в
разметке используются теги . Проверка включения кнопки проверяетс
я
тем же методом isChecked(), что и у Radio.utton.

Другие представления.

В активность приложения можно добавлять шкалу прогресса
(trogress.ar), часы (AnalioClock, DigitalClock), календарь (Calendar), секундомер (:rono/eter) и
другие объекты. аакие объекты
проще добавлять в графическом представлении разметки.
Ознакомиться с полным списком виджетов можно на сайте разработчика
http://developer.android.com/reference/android/
.

Упражнение 2Д5Д2

Добавление и редактирование объектов в активности

Создайте активность

со следующими элементами͗

-

полями ввода логина и пароля͗ они должны задаваться в коде в виде констант и
содержать подсказку (hint)͖

-

кнопкой «Вход»͖

-

текстовым полем, отображающим верно ли введен пароль͗ если верно, то вывести
зеленым цветом «Верно», е
сли не верно
-

красным «Вы ошиблись в логине или пароле»,
при этом поля ввода очищаются.

Задание 2Д5Д1

Создание простого интерфейса пользователя.

Создайте приложение “Анкета”, содержащее относительную разметку. Разместите внутри
разметки следующие виджеты͗

1.

Слева в столбец расположите TextView с пунктами анкеты͗



дамилия



=мя



Отчество



Год рождения



Город



йкола



Опыт программирования



Знание языков программирования

2.

В центре экрана для каждого поля установите виджеты для ввода данных͗



EditText для полей “дамилия”,

“=мя”, “Отчество”, “Год рождения”.



Radio.utton для полей “Город” и “Опыт программирования”.



Check.ox для поля “Знание языков программирования”.

3.

В правой части экрана расположите календарь и часы.

4.

В конце анкеты добавьте кнопки “Отправить”, “Отмена” и “Вы
ход”.

аема 2.5. Простейший интерфейс пользователя. сзык разметки XML




© =T й=ОЛА SAMSUNG









28

Задание 2Д5Д2

Создать Activity с следующими элементами͗

-

полями ввода логина и пароля͗ они должны задаваться в коде в виде констант и содержать
подсказку (hint)͖

-

кнопкой «Вход».

-

текстовым полем, отображающим верно ли введен пароль͗ если верно
вывести зеленым цветом
«Верно», если не верно красным «Вы ошиблись в логине или пароле», при этом поля ввода
очищаются.

Для текстового поля использовать метод visibly.

Задание 2Д5Д3г

Добавление и редактирование переключателей.

Создайте приложение с экран
ом тестовой системы, содержащим два вопроса͗ один вопрос с
выбором ровно одного ответа из четырех предложенных, второй


с множественным выбором,
то есть среди приведенных ответов есть более одного правильного. Предусмотрите кнопку ввода
ответа. Результат
проверки правильности ответа выводите текстовой строкой, расположенной
сразу же под вариантами ответа͗ зеленого цвета строка «верно!» при выборе правильного ответа
или красного цвета строка «не верно!», если ответ был ошибочным.

бвеличьте количество вопрос
ов. Доработайте приложение так, чтобы вопросы выводились по
очереди. Разместите на активности еще две кнопки͗ одну для продолжения

теста, вторую
для его завершения.

Благодарности

=омпания Sa/sung Electronics выражает благодарность за участие в подготовке
данного
материала преподавателям =T й=ОЛм SAMSUNG Покровской Валерии Павловне и Дружинской
+лене Владимировне.


Приложенные файлы

  • pdf 8903342
    Размер файла: 1 MB Загрузок: 1

Добавить комментарий