Средство выбора даты составлено из многих различных вью, которые вместе позволяют пользователю независимо устанавливать месяц, день и год. Также есть кнопка в нижней части, чтобы указать, что выбор сделан. Когда вы кликнете по этой кнопке, текстовая вью изменится, чтобы показать выбранную дату.
Следующая 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 четверти. И у второго дочернего элемента ориентация вертикальная, а не горизонтальная.
