» Программирование Android

Написание приложений для Android. Часть 1: Пользовательский интерфейс

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

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

Итак, как вывести на экран Google Maps? Компания Google уже предоставила владельцам Android-девайсов готовый интерфейс для работы со своими картами, потому давайте разберемся с основными видами интерфейса операционной системы Android. Существуют такие типы пользовательской оболочки:

Linear Layout – первая и основная схема отображения элементов пользовательского интерфейса. Всё содержимое отображается одно за другим, то есть линейно – просто и практично.

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

Table Layout – отображение пользовательской оболочки в виде таблицы. Структура описания данной схемы схожа с составлением таблицы в HTML при помощи тега <table>.

Grid View – схема для отображения элементов в виде сетки, которая состоит из столбцов и ячеек.

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

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

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

Date Picker – может служить для воплощения примера с датой рождения, или же, естественно, любой другой даты.

Time Picker – аналогично предыдущему, только служит для выбора времени, будь-то время напоминания, будильника или чего бы то ни было.

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

Spinner – отображение выпадающего списка с различными элементами.

Google Map View – то, что мы и собираемся использовать, виджет для работы с картами от Google.

Gallery – отображение горизонтального списка каких-либо элементов с возможностью их перелистывания, простейший пример – стандартная фотогалерея Android.

Web View – виджет для отображения web-страниц.

А также стандартные элементы-виджеты, вроде кнопок, полей для ввода текста, «галочек» и так далее.

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

Итак, что нам будет нужно для совершения задуманного? Конечно, это упомянутый Map View, который послужит основой приложения, кроме того это схемы Relative Layout, Tab Layout, Table Layout, Spinner, List View и стандартные элементы оболочки. Так придется научиться делать собственные меню, но не будем забегать вперед.

Что ж, приступим. Создаем новый проект в IDE. Назовем его CityBus, хотя, конечно, название особой роли не играет. Важно, что для использования Map View нужно использовать Android и Google API. Тогда все нужные для работы библиотеки будут подключены к проекту автоматически в процессе сборки.

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

Для использования библиотек Google Maps объявляем их в AndroidManifest.xml. Нашему приложению для работы понадобится соединение с интернетом, поэтому не забываем присвоить ему соответствующие права. В манифесте добавляем между тегами <application> следующую строку:

<uses-library android:name=»com.google.android.maps» />

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

А вот после </application> добавляем следующее:

            <uses-permission android:name=»android.permission.INTERNET» />

            Для освобождения дополнительного пространства на экране для отображения Google Maps уберем строку состояния в нашем приложении. В том же самом .xml-файле ищем нашу Activity и добавляем вот такой параметр:

            <activity android:name=».CityBus»

android:label=»@string/app_name»

android:theme=»@android:style/Theme.NoTitleBar»>

Теперь приступим к редактированию файла main.xml. Корневым у нас будет Map View. Заменяем содержимое файла main.xml, поменям apiKey на свой ключ, следующим:

<?xml version=»1.0″ encoding=»utf-8″?>

<com.google.android.maps.MapView

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

    android:id=»@+id/mapview»

    android:layout_width=»fill_parent»

    android:layout_height=»fill_parent»

    android:clickable=»true»

    android:apiKey=»Сюда нужно вставить ранее сгенерированный Map API Key»

/>

Открываем CityBus.java. Изменяем объявление класса приложения CityBus и указываем наследование MapActivity:

public class CityBus extends MapActivity {

После введения данной строки Eclipse любезно сообщит об ошибке в коде – однако, это не повод для беспокойства. Нажимаем сочетание клавиш Ctlr + Shift + O, автоматически добавляя строчку:

import com.google.android.maps.MapActivity;

Переопределяем метод isRouteDisplayed(), добавив его переопредление сразу после метода onCreate():

@Override

    protected boolean isRouteDisplayed() {

        return false;

    }

Данное переопределение – обязательно, без него приложение работать не будет. Осталось добавить в OnCreate() отрисовку элементов для масштабирования карты Google. Например вот так:

package com.training.citybus;

 import android.os.Bundle;

 import com.google.android.maps.MapActivity;

 public class CityBus extends MapActivity {

     /** Called when the activity is first created. */

     @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        MapView mapView = (MapView) findViewById(R.id.mapview);

        mapView.setBuiltInZoomControls(true);

     }

     @Override

    protected boolean isRouteDisplayed() {

        return false;

     }

 }

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

То есть вроде бы всё работает, но сама карта не отображается. Разберемся, в чем проблема. А проблема в AndroidManifest.xml, где мы поставили теги внутри другого тега – а это ошибка. Мы приводим такие примеры для наглядности. Итак, исправив ошибки, и запустим приложение еще раз, наблюдаем на экране устройства всё, как и нужно:

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