Программирование приложений для мобильных устройств под управлением Android. Часть 1

Следующей view, о которой я буду говорить, является Checkbox (чекбокс, флажок, галочка). Используется, например, в анкете, где вы можете отметить и выбрать нужный пункт. Флажок – фактически просто другой вид кнопки с двумя состояниями, как переключатель. Основное различие в том, как он выглядит для пользователя. Флажки обычно изображаются в виде пустого квадратика, когда флажок не отмечен. И показывают галочку или символ «x», когда флажок находится в отмеченном состоянии. Код приложения для использования чекбокса аналогичен двум предыдущим.

И последняя view, о которой мы поговорим – AutoCompleteTextView. Это поле для ввода и редактирования текста с функцией автозавершения является немного более усовершенствованной разновидностью TextView (надпись или нередактируемый текст) и EditText (поле для ввода и редактирования текста). Автозавершение показывает пользователю список вариантов для ввода текста. И мы будем фильтровать этот список в зависимости от того, что вы вводите. И как только вы сузите список, вы сможете коснуться единственной записи, которая будет тогда помещена в текстовое поле.

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

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

Самый распространенный способ обработать событие – это присоединить «слушателя» (listener) к вьюшке. Android определяет много различных видов интерфейсов «слушателя». И методы, определенные этими интерфейсами, будут вызваны каждый раз, когда произойдут определенные события с вьюшкой.

Например, класс View определяет интерфейс «слушателя» onClickListener, который имеет метод onClick. Этот метод вызывается каждый раз, когда по вьюшке кликнули.

Класс View также определяет «слушателя» длинного клика – onLongClickListener. Он имеет метод onLongClick, и этот метод вызывается каждый раз, когда вьюшку нажимают и удерживают нажатой в течение определенного промежутка времени.

Класс View также определяет «слушателя» изменения фокуса onFocusChangeListener. Он имеет метод onFocusChange, и этот метод вызывается, когда вьюшка получила или потеряла фокус. Также есть много других событий, которые вы также можете прослушивать.

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

Например, у вас могло бы быть приложение, которое спрашивает пользователя, какого он возраста, и позволяет выбрать из ряда возрастных диапазонов: до 20, 20–34, 35–49, и более чем 50. Чтобы это реализовать, у вас был бы набор текстовых вью для всех различных возрастных диапазонов, и затем рядом с каждым текстовым вью вы поместили бы флажок. Но вы хотели бы удостовериться, что только один из флажков отмечается, потому что возрастные диапазоны, очевидно, являются взаимоисключающими.

Чтобы поддерживать такие сложные представления как это, у Android есть класс под названием ViewGroup – это невидимые группы, которые содержат другие вью. И таким образом, вы можете использовать их, чтобы сгруппировать и организовать по нескольку вьюшек. ViewGroup – базовый класс для контейнеров вью и лейаутов. Точно так же, как с простыми вью, Android обеспечивает много предопределенных групп вью. Это такие, как: RadioGroup, TimePicker, DatePicker, WebView, MapView, Gallery и Spinner. Давайте рассмотрим каждый из них по отдельности.

Давайте начнем с RadioGroup. Это ViewGroup, содержащий ряд взаимоисключающих флажков или переключателей. Таким образом, в любой момент может быть установлен только один из переключателей. Давайте посмотрим на пример приложения.

Приложение выводит на экран текстовое вью и RadioGroup. Текстовое вью выводит на экран текст «No Choice Made», поскольку прямо сейчас ни один из переключателей не установлен. Теперь выберем «Choice 1». Как видите, текст изменяется, чтобы отразить выбор, который был сделан. Теперь, если выбрать «Choice 2», «Choice 1» автоматически отменится, и будет выбран «Choice 2». И то же произойдет, если выбрать «Choice 3».

Следующий ViewGroup – TimePicker – позволяет пользователю выбирать и устанавливать определенное значение времени. Рассмотрим приложение «UITimePicker», которое выводит на экран текстовую вью, показывающую текущее время и кнопку, подписанную «Change the time». Если кликнуть по кнопке, появится средство выбора времени – TimePicker.

TimePicker составлен из многих различных вью, но вместе они позволяют пользователю независимо устанавливать час, минуты и a.m. или p.m. Есть также кнопка в нижней части, чтобы указать, что выбор сделан. Как только вы нажмете эту кнопку, текстовая вью изменится, чтобы показать время, которое только что выбрали.

Подобно TimePicker, есть также группа вью DatePicker. Эта ViewGroup позволяет пользователю выбирать определенную дату. Рассмотрим приложение «UIDatePicker». Приложение выводит на экран текстовую вью, показывающую текущую дату и кнопку, подписанную «Change the date». Таким образом, если кликнуть по кнопке, появится средство выбора даты DatePicker.

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

Следующая ViewGroup – это веб-представление WebView, которое выводит на экран веб-страницы. Вот приложение, которое загрузит и выведет на экран знакомую веб-страницу www.google.com.

Следующая ViewGroup – MapView. Как предполагает ее имя, MapView выводит на экран карту и позволяет пользователю взаимодействовать с ней. Давайте рассмотрим пример приложения, который фактически использует класс MapFragment, но использует его, чтобы вывести на экран базовую MapView.

Это приложение выводит на экран карту, центрируемую на некоторой части Америки. Карта также выводит на экран два красных маркера – один около Вашингтона в США и другой – в Мексике.

Если кликнуть по верхнему маркеру, появляется надпись, указывающая, что пользователь находится у памятника Вашингтону. А если кликнуть по другому маркеру, то появится другая надпись о том, что пользователь в Мексике.

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

Рассмотрим, например, List view (список), которая может использоваться, чтобы показать список телефонных номеров, список песен, изображений и т. д. Для таких групп вью как List view, чтобы работать со всеми этими различными типами данных, Android обеспечивает подкласс под названием AdapterView. AdapterView – это ViewGroup, дочерние вью которой и базовые данные управляются не самой ViewGroup, а другим классом, называемым адаптером (Adapter). Класс Adapter ответственен за управление данными и за создание и обеспечение вьюшек данными по запросу AdapterView.

Давайте бросим более глубокий взгляд на класс ListView. ListView – это AdapterView, который выводит на экран прокручиваемый список выбираемых элементов. Этими элементами управляет адаптер, названный ListAdapter. ListView может также дополнительно фильтровать этот список элементов по введенному тексту точно так же, как AutocompleteTextView.

Рассмотрим приложение «UIListView». Вы видите, что в основе этого ListView лежат данные, которые являются длинным перечнем цветов. Красный, оранжевый, желтый, и так далее.

Этот ListView также вызывает клавиатуру в рабочее состояние. Мы будем использовать ее. Если ввести букву «O», ListView отфильтрует все цвета, которые не начинаются с буквы «O», останутся только оранжевый и оливковый. Если теперь ввести букву «l», то в списке останется только оливковый, поскольку только он начинается с введенных букв «Ol». И если кликнуть по оставшемуся слову «olive», то мы увидим, что «слушатель», который присоединён к ListView, выведет на экран наш выбор.

Давайте рассмотрим исходный код этого приложения. Откроем файл ListViewActivity. И давайте перейдем к методу onCreate. Здесь мы вызываем setListAdapter, чтобы установить ListAdapter для ListView. Фактически адаптер – ArrayAdapter, который реализует интерфейс адаптера. Конструктор для ArrayAdapter получает несколько параметров. Два, которые мы рассмотрим, являются идентификатором ресурса, который сообщает адаптеру как создать вью, содержащую каждую часть данных (R.layout.list_item). Второй параметр – сам массив данных (R.array.colors).

Давайте посмотрим на эти данные. Они определены как строковый массив в файле res/values/strings.xml. Он содержит набор цветов, точно такой же, как мы видели – красный, оранжевый, желтый, и т. д.

Теперь вернемся к Activity ListView и получим имя файла лейаута, который будет использоваться, чтобы создать вьюшку для каждого из этих цветов. Этот ресурс находится в res/layout/list_item.xml. Каждая часть данных вставлена в TextView с определенными отступами и размером шрифта. Далее код связывает ListView с ListActivity. И затем устанавливает setTextFilterEnabled (true). Это заставляет клавиатуру раскрываться, и включается фильтрация. И затем мы устанавливаем onItemClickListener, у которого есть метод OnItemClick. Этот метод выведет на экран цвет, который выбирает пользователь, когда он кликает по нему в ListView.

Следующий AdapterView – класс Spinner. Это AdapterView, который обеспечивает прокручиваемый выпадающий список элементов. Пользователь может кликнуть по этой вьюшке, которая заставляет появляться выпадающий список, и затем позволяет пользователю выбрать элемент из этого выпадающего списка. Данными для spinner управляет SpinnerAdapter. Давайте рассмотрим этот класс на примере приложения «UISpinner».

Это приложение демонстрирует текстовую вью, которая говорит: «Pick a Color, Any Color» («Выберите цвет, любой цвет»). В настоящее время красный используется в качестве выбора по умолчанию. Теперь, предположим, я хочу выбрать другой цвет. Чтобы сделать это, я кликну spinner, который сейчас показывает красный. И тогда появится выпадающий список со списком цветов.

Теперь я выберу желтый. Выпадающий список исчезнет. Желтый цвет теперь появляется как выбранный цвет.

Далее откроем файл SpinnerActivity и перейдем к методу onCreate. Во-первых, здесь присутствует вызов setContentView, использующий main.xml в качестве файла лейаута. У пользовательского интерфейса есть элемент spinner.

И, возвращаясь в SpinnerActivity, устанавливаем адаптер для spinner. Мы создаем этот адаптер, вызывая метод ArrayAdapter.createFromResource. Параметры этого метода включают список цветов и лейауты для каждой вью, которая появится в выпадающем списке.

Файл strings.xml содержит массив цветов. Откроем файл drop-down_item.xml. В нем содержится лейаут для выпадающих вьюшек, так что каждый цвет появится как TextView с определенным отступом и размером шрифта.

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

Следующий ViewGroup – класс Gallery (Галерея), он выводит на экран ряд данных с горизонтально прокручивающимся списком. Как у spinner, данными для объектов Галереи управляет SpinnerAdapter.

Пример – приложение «UIGallery». Данные для этого приложения – ряд изображений, которые можно смахнуть в сторону по дисплею, чтобы прокрутить вперед и назад список изображений. Когда пользователь выбирает определенное изображение, вызывается «слушатель», чтобы вывести на экран индекс выбранного изображения.

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

Давайте рассмотрим пример – приложение под названием «UILinearLayout».

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

Рассмотрим исходный код, чтобы увидеть, как этот лейаут фактически создавался. В файле main.xml вся разметка – это LinearLayout, и у него есть два дочерних элемента, каждый из которых является также LinearLayout. У внешнего LinearLayout есть параметры layout_width (ширина) и layout_height (высота), равные match_parent (совпадает с родителем). Это означает, что он занимает все пространство его родителя, в этом случае – все окно приложения. Ориентация – вертикальная, это означает, что дочерние элементы будут размещены один под другим.

Далее идет первый дочерний LinearLayout. Мы видим, что его layout_width установлен match_parent, таким образом его ширина будет такой же, как у родителя – внешнего LinearLayout.

Его layout_height установлена в 0. И у него также есть layout_weight = 1, об этом чуть позже. И последнее, ориентация – горизонтальная. Таким образом, дочерние элементы этого LinearLayout будут размещены друг рядом с другом горизонтально.

Теперь давайте перейдем ко второму дочернему элементу внешнего LinearLayout. Это тоже LinearLayout.

И у этого элемента layout_width установлен match_parent. И layout_height = 0. Но его layout_weight, однако, равен 3. Layout weight – это вес, означающий, какую часть пространства внутри родителя может занять этот элемент по отношению к своим соседям (сестрам). Принимая во внимание, что у первого дочернего элемента был вес 1, эти веса говорят, что первый дочерний LinearLayout должен получить одну четверть пространства, в то время как второй дочерний элемент получает оставшиеся 3 четверти. И у второго дочернего элемента ориентация вертикальная, а не горизонтальная.

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

Рассмотрим приложение «UIRelativeLayout», которое содержит вью редактирования текста и две кнопки.

Здесь внешней группой вью является RelativeLayout. В нем размещены элементы, которые мы видели на экране – EditTextView и две кнопки, подписанные «OK» и «Cancel». Если посмотреть ближе, мы увидим, что кнопка «ОК» должна быть выровнена по правому краю родителя (это – относительное расположение) и ниже поля редактирования текста, который определяется его ID. А кнопка «Cancel» должна быть выровнена слева от кнопки «ОК», и ее верх должен быть выровнен по верху кнопки «ОК».

Следующий лейаут – TableLayout. В TableLayout дочерние элементы расположены в строки и столбцы. Рассмотрим приложение «UITableLayout», в котором данные расположены в строках, а каждая строка содержит элементы, составляющие столбцы.

Если открыть файл лейаута, мы увидим TableLayout, у которого есть несколько строк таблицы (TableRow). В каждой строке таблицы есть несколько вью, которые, как предполагается, находятся в столбцах.

Но, если необходимо, можно определить столбец layout_column. Например, в этом примере ничего нет в нулевом столбце. Таким образом, мы можем сказать Android, что в первой строке текстовая вью должна быть размещена в столбец 1, а не в нулевом столбце. Также вы видите, что эта текстовая вью определяет gravity (притягивать) вправо, что означает, что текст вьюшки должен быть сдвинут вправо.

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

Рассмотрим приложение «UIGridView», которое считывает набор изображений и затем автоматически расставляет их в прямоугольной сетке. Если кликнуть по любому из этих изображений, то запустится другая Activity, которая выводит на экран целиком это изображение.

Давайте рассмотрим исходный код. Откроем лейаут-файл main.xml, где вы видите элемент GridView. Здесь определены такие элементы, как ширина столбцов (columnWidth) и интервал (horizontalSpacing), чтобы разделить изображения. Также установлено, что GridView сам определяет число используемых столбцов (numColumns).

Теперь откроем файл GridLayoutActivity. Там вы видите, что определен список ресурсов изображения, которые должны быть выведены на экран GridView.

Ниже в onCreate установлен contentView и затем установлен адаптер, который является экземпляром класса адаптера изображения (ImageAdapter). Давайте рассмотрим класс ImageAdapter. Первый адаптер изображения – это подкласс основного адаптера, который реализует интерфейс адаптера. У этого класса есть несколько методов, которые используются, когда GridView запрашивает данные.

Пройдемся через несколько методов этого класса. Во-первых, есть метод GetCount. Этот метод должен вернуть число элементов данных, которыми управляет адаптер. Другой метод – GetItemID, который возвращает ID для элемента данных в указанной позиции. Он используется, например, когда пользователь кликает по изображению в GridView, чтобы указать, какое изображение развернуть во весь эран. Последним методом, о котором упомянем, является GetView. Этот метод вызывают, когда GridView запрашивает у адаптера вью, которая войдет в сетку. Один из параметров этого метода – ConvertView может быть равен «no». Если так, тогда необходимо создать новую вью и сконфигурировать ее так, как вы хотите. Но по прошествии времени ConvertView станет неизвестен, фактически он сошлется на вью, которая была уже возвращена этим методом в прошлом.

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

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

Следующее, о чем мы поговорим, – меню и Action Bar (панель выбора действий). Activity могут поддерживать меню, которые могут быть представлены пользователю по-разному, но основная идея состоит в том, что меню дают пользователям быстрый способ получить доступ к важным функциям. Так, Activity могут добавить элементы к меню, и они могут реагировать, когда пользователь выбирает пункт меню, нажав на него. Вызов меню изменялся в Android в течение долгого времени. Сперва поговорим об основных видах меню, а затем о более новом классе – Action Bar.