Программирование под Android. Для профессионалов
 Скачать 19.35 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
| Глава 25. Графические объекты Трехмерное оформление кнопок исчезло. Также вы увидите, что внешний вид кнопок перестал изменяться при нажатии. Почему все это произошло из-за одного безобидного изменения атрибута? Класс Button представляет собой не что иное, как View с применением стиля по умолчанию. Стиль берется из выбранной темы, а в качестве фона назначается объект Drawable Он отвечает за имитацию объема и изменения внешнего вида при нажатии. К концу этой главы вы будете знать, как наделить такими функциями ваши графические объекты. Начнем с создания цветных геометрических фигур в XML. Поскольку графические объекты XML не привязаны к конкретной плотности пикселов, обычно они разме- щаются в папке drawable по умолчанию (а не в одной из специализированных папок). На панели Package Explorer создайте каталог res/drawable . В этом каталоге создайте файл XML с именем button_shape_normal.xml . Назначьте его корневым элементом shape . (Почему кнопка названа «normal», то есть «нормальной»? Потому что скоро появится другая, менее нормальная.) Листинг 25.2. Создание кнопки на базе геометрической фигуры (drawable/button_shape_normal.xml) android:shape="rectangle" > android:angle="90" android:endColor="#cccccc" android:startColor="#acacac" /> Этот файл определяет прямоугольник с закругленными углами. Элемент corners задает радиус закругления, а элементы gradient задают направление и начальный/ конечный цвета градиента. Вы можете использовать элемент shape для создания других фигур: эллипсов, линий, колец и т. д., а также назначать им разное оформление. За подробностями обращайтесь к документации по адресу https://developer.android.com/guide/topics/resources/ drawable-resource.html В файле styles.xml обновите стиль Button , чтобы он использовал новый объект Draw- able в качестве фона. Листинг 25.3. Обновление стиля кнопки (values/styles.xml) Запустите приложение RemoteControl и посмотрите, что изменилось. Рис. 25.3. Теперь с закругленными углами Списки состояний Эти кнопки смотрятся хорошо, но по сути это простые статичные изображения. Во внутренней реализации старый фон Button использовал графический объект списка состояний (state list). Списки состояний позволяют выводить разные графические объекты для каждого состояния, в котором находится ассоциированный объект View . (Ранее мы использовали список состояний для изменения фона элементов списка в главе 18.) Существует много разных состояний, но в данном случае нас интересует лишь то, нажата кнопка или нет. Начнем с создания внешнего вида нажатой кнопки. Кнопка будет выглядеть так же, как обычная кнопка, отличаясь от нее только цветом. На панели Package Explorer создайте копию button_shape_normal.xml и присвойте ей имя button_shape_pressed.xml . Откройте файл button_shape_pressed.xml и увеличьте угол на 180 градусов, чтобы изменить направление градиента. 410 Глава 25. Графические объекты Листинг 25.4. Создание фигуры для нажатой кнопки (drawable/button_shape_pressed.xml) android:angle="270" android:endColor="#cccccc" android:startColor="#acacac" /> Затем нам понадобится графический объект списка состояний. Графический объект списка состояний должен иметь корневой элемент selector и один или несколько элементов item , описывающих разные состояния. Щелкните правой кнопкой мыши на каталоге res/drawable/ , создайте новый файл XML с именем button_shape.xml и на- значьте ему корневой элемент selector Листинг 25.5. Создание фигуры для интерактивной кнопки (drawable/button_shape.xml) android:state_pressed="false"/> android:state_pressed="true"/> Ненажатая кнопка имеет темный текст, который хорошо смотрится на светлом фоне. Теперь, когда фон стал более темным, в ненажатом состоянии светлый цвет будет смотреться лучше, а темный цвет можно использовать для фона в нажатом состоянии. Списки состояний для цветов создаются так же, как списки состояний для фигур, так что задача решается просто. Щелкните правой кнопкой мыши на каталоге res/drawable/ и создайте другой гра- фический объект списка состояний с именем button_text_color.xml Листинг 25.6. Изменение цвета текста в зависимости от состояния (drawable/button_text_color.xml) В файле styles.xml измените стиль Button , включите в него ссылки на новый графи- ческий объект фона и новый цвет текста. Списки слоев и смещение 411 Листинг 25.7. Обновление стиля кнопки (values/styles.xml) Запустите приложение RemoteControl. Посмотрите, как выглядит нажатая кнопка. Рис. 25.4. Нажатая кнопка Списки слоев и смещение Стандартные кнопки Android, которые вы видели в исходной версии приложения, имитируют эффект тени. К сожалению, у фигур нет свойства тени, однако вы можете реализовать эффект тени самостоятельно при помощи двух других разновидностей графических объектов XML: списков слоев и смещений. 412 Глава 25. Графические объекты Сначала создается тень такой же формы, как у текущей кнопки. Она объединяется с текущей кнопкой с использованием тега layer-list , а нижний край кнопки немного смещается с использованием тега inset , чтобы стала видна находящаяся внизу тень. Создайте новый файл XML в каталоге res/drawable/ . Присвойте ему имя button_shape_ shadowed.xml и назначьте корневым элементом layer-list Листинг 25.8. Имитация тени у кнопок (drawable/button_shape_shadowed.xml) android:angle="90" android:centerColor="#303339" android:centerY="0.05" android:endColor="#000000" android:startColor="#00000000" /> android:drawable="@drawable/button_shape" android:insetBottom="5dp" /> Список слоев содержит несколько графических объектов, упорядоченных в порядке их прорисовки на экране (от заднего плана к переднему). Вторым графическим объектом в списке является inset , который всего лишь смещает нижний край уже созданного графического объекта на 5dp, чтобы он находился выше созданной тени. Также обратите внимание на то, что вместо использования отдельных файлов для графического объекта тени мы встраиваем его непосредственно в список слоев. Этот способ также подходит и для других графических объектов — как, например, упоминавшихся выше списков состояний. Вкладывать ли графические объекты или выделять их в отдельные файлы, как было сделано ранее, — решайте сами. Выделение сокращает дублирование кода и упрощает файлы, но приводит к за- громождению каталога drawable/folder дополнительными файлами. Используйте код, который покажется вам наиболее понятным и удобочитаемым. В файле styles.xml включите в стиль кнопки ссылку на новый графический объект с тенью. Листинг 25.9. Последнее изменение стиля кнопки (values/styles.xml) И последнее изменение: создадим градиентный графический объект для всего главного представления, чтобы имитировать эффект освещения. Создайте новый файл с именем remote_background.xml и корневым элементом shape Добавьте в него следующий блок разметки (примечание: если фигура не указана, по умолчанию используется прямоугольник). Листинг 25.10. Новый фоновый графический объект для корневого представления (drawable/remote_background.xml) android:centerY="0.05" android:endColor="#dbdbdb" android:gradientRadius="500" android:startColor="#f4f4e9" android:type="radial" /> Добавьте новый графический объект в файл fragment_remote_control.xml Листинг 25.11. Включение графического объекта в макет (layout/fragment_remote_control.xml) android:id="@+id/fragment_remote_control_tableLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/remote_background" android:stretchColumns="*" > При внесении всех этих изменений мы ничего не делали с файлом макета фрагмента. (Не считая последнего изменения, и конечно, мы могли создать новый стиль для TableLayout .) Это хорошо, поскольку мы не изменяем содержимое макета, а только его презентацию. Добавление новых кнопок или перемещения потребуют обновле- ния файла макета, но изменения во внешнем виде можно вносить на уровне стиля. 9-зонные изображения Если вы привлечете к построению пользовательского интерфейса профессионально- го дизайнера, результат его работы не всегда может быть реализован графическими объектами XML. Тем не менее готовые изображения иногда удается использовать в разных местах. Для «растяжимых» (stretchable) элементов пользовательского интерфейса — например, для фонов кнопок — в Android существуют так называемые 9-зонные изображения (9-patch). Наша следующая задача будет связана с двумя виджетами TextView в верхней части экрана. Макет кнопок останется неизменным, но для фонов будут использоваться 414 Глава 25. Графические объекты растяжимые графические объекты. Оба объекта существенно уже TextView , так что они не займут много места. Первый — растяжимый фон window.png — придает TextView изящный цветовой переход, а также создает обрамление по краям. Рис. 25.5. Область для вывода канала Другой объект — bar.png — создает небольшую тень внизу и тонкую рамку наверху. Следующий рисунок заметно увеличен; изображение довольно маленькое. Рис. 25.6. Область для ввода канала Вы найдете эти изображения в архиве решений, в каталоге 25_XMLDrawables/RemoteCon- trol/res/drawable-hdpi . Скопируйте их в папку /res/drawable-hdpi проекта RemoteControl. Отредактируйте файл fragment_remote_control.xml и назначьте эти изображения фонами для соответствующих представлений. Также выберите цвет текста, более подходящий для новых фонов, — белый для верхней области, черный (используе- мый по умолчанию) для нижней. Затем включите для нижнего виджета TextView курсивное начертание, с которым текст будет лучше смотреться. Листинг 25.12. Добавление графических объектов в стили (layout/fragment_remote_control.xml) 9-зонные изображения 415 android:id="@+id/fragment_remote_control_selectedTextView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:background="@drawable/window" android:gravity="center" android:text="0" android:textColor="#ffffff" android:textSize="50dp" /> android:layout_height="0dp" android:layout_margin="15dp" android:layout_weight="1" android:background="#555555" android:background="@drawable/bar" android:gravity="center" android:text="0" android:textColor="#cccccc" android:text android:textSize="20dp" /> А теперь посмотрите, что происходит при запуске приложения. Рис. 25.7. Разбитые мечты 416 Глава 25. Графические объекты Каждое изображение было равномерно растянуто по всем направлениям для за- полнения представления. В некоторых ситуациях это именно то, что нужно — но не в нашем случае. Изображения размываются, а у цифр в нижнем виджете TextView нарушается выравнивание по центру. Для решения этой проблемы можно использовать 9-зонные изображения. Файл 9-зонного изображения специально форматируется так, чтобы система Android знала, какие части изображения можно или нельзя форматировать. При правильной реализации это гарантирует, что края и углы фона будут соответствовать изобра- жению в том виде, в котором оно было создано. Почему изображения называются «9-зонными»? Такие изображения разбиваются сеткой 3 × 3 — такая сетка состоит из 9 элементов, или зон (patches). Углы сетки не масштабируются, стороны масштабируются только в одном направлении, а цен- тральная зона масштабируется в обоих направлениях. Рис. 25.8. Как работает 9-зонное изображение 9-зонное изображение во всех отношениях напоминает обычный файл png , за ис- ключением двух аспектов: имя файла завершается суффиксом .9.png , и изображение имеет дополнительную рамку толщиной в один пиксел. Рамка задает местона- хождение центрального квадрата. Черными пикселами рамки обозначается центр, а прозрачными — края. 9-зонное изображение можно создать в любом графическом редакторе, но проще воспользоваться программой draw9patch , включенной в поставку Android SDK. Программа находится в каталоге tools установки SDK. Когда программа будет за- пущена, вы можете перетащить на нее нужный файл или открыть его из меню File Когда файл будет открыт, заполните черные пикселы на верхней и левой границе, чтобы обозначить растягиваемые области изображения. Добавьте пикселы в window. png , как показано на рис. 25.9. Левый и верхний участки границы отмечают растягиваемую область изображения. А как насчет правого и нижнего участка? Они отмечают необязательную область прорисовки — область, в которой должно выводиться некое содержимое (обычно текст). Если область прорисовки не задана, по умолчанию считается, что она со- впадает с растягиваемой областью. В нашем случае это именно так, поэтому область прорисовки не указывается. 9-зонные изображения 417 Рис. 25.9. 9-зонное изображение для отображения канала Когда работа будет завершена, сохраните результаты в файле с именем window_ patch.9.png . Будьте внимательны и следите за тем, чтобы имена 9-зонных файлов не конфликтовали с файлами других изображений; если у вас имеются файлы с именами window.9.png и window.png , приложение не построится. Затем отредактируйте 9-зонное изображение bar.png . Используйте область прори- совки для центровки текста по вертикали и горизонтали, а также создания со всех сторон полей толщиной 4 пиксела. Рис. 25.10. 9-зонное изображение для области вывода канала Сохраните готовое изображение в файле bar_patch.9.png 418 Глава 25. Графические объекты Щелкните правой кнопкой мыши на каталоге res/ и выберите команду Refresh . Eclipse живет в своем обособленном мире, а команда Refresh напоминает ему о необходи- мости снова свериться с файловой системой. Наконец, переключите две области TextView на использование 9-зонных изобра- жений вместо обычных. Рис. 25.11. Переработанная версия RemoteControl Листинг 25.13. Переход на 9-зонные изображения (layout/fragment_remote_control.xml) android:layout_height="0dp" android:layout_weight="2" android:background="@drawable/window" android:background="@drawable/window_patch" android:gravity="center" android:text="0" android:textSize="50dp" /> android:layout_height="0dp" 9-зонные изображения 419 android:layout_margin="15dp" android:layout_weight="1" android:background="@drawable/bar" android:background="@drawable/bar_patch" android:gravity="center" android:text="0" android:textColor="#cccccc" android:textSize="20dp" /> Запустите приложение. Вуаля! В нем появились работающие фоновые изображе- ния. Помните, как банально выглядел исходный интерфейс? Чтобы создать нечто куда более интересное, нам потребовалось совсем немного времени. Представьте, чего можно добиться с помощью профессионального дизайнера. Сделайте ваше приложение приятным для глаза, удобным в использовании — и ваши усилия окупятся его популярностью. HTTP и фоновые задачи В умах пользователей господствуют сетевые приложения. Чем заняты эти люди, которые за обедом возятся со своими телефонами вместо дружеской беседы? Они маниакально проверяют поставки новостей, отвечают на текстовые сообщения или играют в сетевые игры. Для экспериментов с сетевыми возможностями Android мы создадим новое при- ложение PhotoGallery. Это клиент для сайта фотообмена Flickr, который будет загружать и отображать последние общедоступные фото, отправленные на Flickr. Рисунок 26.1 дает примерное представление о внешнем виде приложения. Рис. 26.1. Приложение PhotoGallery 26 Создание приложения PhotoGallery 421 (На рис. 26.1 изображены наши фотографии вместо общедоступных фотографий с Flickr. Фотографии на сайте Flickr являются собственностью человека, отпра- вившего их, и не могут повторно использоваться без разрешения владельца. За дополнительной информацией об использовании независимого контента, за- груженного с Flickr, обращайтесь по адресу https://pressroom.yahoo.net/pr/ycorp/ permissions.aspx .) За созданием приложения PhotoGallery мы проведем шесть глав. Две главы будут посвящены основам загрузки и разбора XML, а также выводу изображений. В по- следующих главах будут реализованы дополнительные функции: поиск, сервисы, оповещения, получатели широковещательных рассылок и веб-представления. В этой главе вы научитесь использовать высокоуровневые сетевые средства HTTP в Android. Почти все программирование веб-служб в наши дни базируется на сетевом протоколе HTTP. К концу этой главы наше приложение будет загружать с Flickr, разбирать и отображать названия фотографий (загрузка и отображение самих фотографий откладывается до главы 27). Рис. 26.2. PhotoGallery в конце этой главы Создание приложения PhotoGallery Создайте новый проект приложения Android. Задайте его параметры так, как по- казано на рис. 26.3. | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
