осн прог. Цель лабораторной работы Установка и настройка среды программирования adt bundle Задачи лабораторной работы
 Скачать 3.46 Mb.
|
|
Рис. 6.29. Скопированное изображение Теперь немного изменим файл background.xml. Во-первых, нужно изменить имя изображение со старого на новое. android:src="@drawable/starring" Во-вторых, добавим такую строчку: android:tileMode="repeat" Сохраняем. Атрибут android:tileMode задает тип заполнения, в данном случае простое повторение исходного изображения. Кроме repeat возможны варианты clamp и mirror. Помните, что данный приём применим только к bitmap, к фигурам, созданным при помощи XML, применить данную операцию нельзя. Рис. 6.30. Варианты заполнения Настало время посмотреть, что из этого получилось: увеличить изображение Рис. 6.31. Фон из звездочек В Если вы выбрали тёмный фон, то стоит поменять цвет текста, вводимого в поле ввода, например на белый. Для этого в блок 6.2.5 Область просмотра изображений Теперь займемся созданием области отображения изображений, которые пользователь будет оценивать. Добавьте "рамку" увеличить изображение Рис. 6.32. Добавление "рамки" Обратите внимание, что предупреждающий жёлтый треугольник исчез, но появился у нового элемента, и это значит, что всё идёт по плану. Укажем этому элементу ширину, высоту и id. Предупреждение должно пропасть. Рис. 6.33. Свойства "рамки" Сейчас FrameLayout "заезжает" на поле ввода и кнопку. Чтобы исправить это, нужно задать для "рамки" параметр, который будет следить, чтобы "рамка" находилась ниже, чем поле ввода и кнопка. Выберите из списка Outline "рамку" и кликом правой кнопки мыши вызовите контекстное меню: Other Properties -> Layout Parametrs -> Layout Below… увеличить изображение Рис. 6.34. Контекстное меню "рамки" Появится окно. В нём выбираем из списка "ID" имя лейаута, на котором находятся поле ввода и кнопка: Рис. 6.35. Выбор элемента, ниже которого должна быть "рамка" Жмём ОК и "рамка" примет вид: увеличить изображение Рис. 6.36. Новое расположение "рамки" Теперь для наглядности поместим туда изображение. Сначала поместим само изображение в папку res/drawable/ и обновим её. Это нужно для того, чтобы новые данные загрузились в проект. Рис. 6.37. Обновление папки Теперь поместим внутрь "рамки" Рис. 6.38. Перемещение В появившемся окне выбираем нужное нам изображение и жмём OK Рис. 6.39. Выбор файла Изображение должно появится на активности: Рис. 6.40. Визуализация изображения Вместе с изображением появился новый предупреждающий знак. В описании предупреждения сказано: "[Accessibility] Missing contentDescription attribute on image". Давайте разберёмся, что это означает. Атрибут android:contentDescription используется в программах, которые поддерживают специальные возможности для людей с нарушениями зрения и слуха. То есть, текст, прописанный в этом атрибуте, не будет показан на экране, но при включенной в "Специальных возможностях" услуге "звуковые подсказки" этот текст будет проговариваться, когда пользователь переходит к этому элементу управления. Этот атрибут можно задать для ImageButton, ImageView и CheckBox, и задавать его или нет - дело каждого. Свойства у изображения должны быть следующими: Рис. 6.41. Свойства изображения 6.2.6 Кнопки "like" и "dislike" Пришло время создать кнопки оценивания. Для этого добавьте на форму Снова в папку res/drawable/ нужно добавить файлы. Найдите изображения "Палец вверх" и "Палец вниз", и поместите их в эту папку, после чего обновите её. Изображения и другие полезные файлы можно скачать здесь Добавьте Рис. 6.42. Новая кнопка Укажите "рамке" быть выше, чем поле с кнопкой оценки: увеличить изображение Рис. 6.43. Контекстное меню "рамки" увеличить изображение Рис. 6.44. Выбор элемента, выше которого должна быть "рамка" В результате должно получиться следующее: увеличить изображение Рис. 6.45. Новое расположение элементов Добавьте еще одну кнопку - кнопку "Палец вниз". Она "наложилась" на первую кнопку. Чтобы это исправить, проделайте с Рис. 6.46. Выравнивание области с кнопками Теперь расставьте кнопки по краям так, чтобы они "прикрепились" к краям. увеличить изображение Рис. 6.47. Выравнивание кнопок Готово! Теперь можно запустить эмулятор и посмотреть, что получилось. увеличить изображение Рис. 6.48. Главная активность 6.2.7 Листинги 1) 2) 3) 6.3 BuildingBlocks или элементы для построения интерфейса Среда разработки "AndroidIDE" открывает широкий выбор готовых к использованию элементов для создания выдающихся приложений. Кнопка (Button) состоит из текста и/или изображения, которые дают понять пользователю, что произойдёт, если нажать на эту кнопку. Важно помнить, что человек по своей природе привык взаимодействовать с объектами, поэтому фон у кнопки абсолютно не обязателен. Рис. 6.49a. Кнопка-изображение Рис. 6.49b. Кнопка-текст Текстовые поля (TextFields) Текстовые поля позволяют пользователю вводить текст в приложения. Они могут быть однострочными или многострочными. Одно касание текстового поля помещает курсор на поле ввода и автоматически выводит на экран клавиатуру. В дополнение к набору текста на клавиатуре текстовые поля позволяют выделять текст (вырезать, копировать, вставить). Поиск вариантов завершения слова помогает правописанию слов и упрощает поиск контактов в списке. увеличить изображение Рис. 6.50. 50 Текстовые поля, поиск контактов Рис. 6.51. Выделение текста Ползунки и слайдеры (Seek Bars and Sliders) Интерактивные ползунки позволяют выбирать значение из непрерывного или дискретного диапазона значений путем перемещения ползунка. Наименьшее значение находится слева, наибольшее справа. Рис. 6.52. Ползунки в светлой и темной темах Интерактивный характер слайдера делает его удобным для настроек, которые отражают уровни интенсивности, такие как громкость, яркость, или насыщенность цвета. Так, например, уровень громкости можно регулировать кнопками на корпусе устройства или при помощи жеста пальцем по экрану. Рис. 6.53. Настройка звука Прогресс-бары и активности (Progress&Activity) Прогресс-бары и показатели активности сигнализируют пользователям о происходящем в данный момент времени длительном действии, что означает для пользователя подождать завершения процесса некоторое время. увеличить изображение Рис. 6.54. Процесс загрузки приложения Переключатели (Switches) позволяют пользователю выбирать параметры. Есть три вида переключателей: флажки, радио-кнопки, и включение/выключение выключателей. Флажки используются в том случае, если из предлагаемого списка можно выбрать одновременно несколько вариантов. Рис. 6.55. Флажки Радио-кнопки позволяют выбрать только один вариант из списка. Радио-кнопки формируются в группы. Рис. 6.56. Радио-кнопки Выключатели дают возможность сделать флажок более наглядным, применив в качестве основы кнопку-значок, которая может фиксироваться в нажатом состоянии. Рис. 6.57. Выключатели Диалоговые окна (Dialogs) помогают приложению взаимодействовать с пользователем. Это может быть как банальный вопрос с двумя вариантами ответа (OK и Отмена), так и сложные окна с множеством настраиваемых пользователем параметров. увеличить изображение Рис. 6.58. Примеры диалоговых окон Средство выбора (Pickers) - это простой способ выбрать одно значение из набора путём последовательного перебора. Удобный перебор предлагаемых значений при помощи клика по стрелочкам или прокрутки, так же можно ввести значение с клавиатуры. увеличить изображение Рис. 6.59. Примеры пикеров Прокрутка (Scrolling), как интуитивно ожидаемый элемент, уже давно плотно сидит в головах у разработчиков и пользователей. Плавное или быстрое перемещение по содержимому экрана и контенту, который "вылез" за рамки экрана, осуществляется прокруткой, достаточно лишь провести пальцем по экрану в нужную сторону с желаемой скоростью. Для того чтобы индикатор прокрутки не занимал место у рабочей области экрана, после приостановки пользования прокруткой, индикатор исчезает, и появляется снова, стоит только начать "прокручивать" пальцем. Для удобства поиска чего-либо в алфавитном списке, рядом с индикатором прокрутки возникает индекс с указанием на то, в каком разделе находится индикатор. увеличить изображение Рис. 6.60. Индикатор и индекс прокрутки Выпадающий список (Spinner) обеспечивает удобный способ выбора одного значения из набора. Рис. 6.61. Спиннер для выбора типа e-mail адреса Вкладки (Tabs) позволяют легко просматривать и переключаться между различными окнами или функциональными элементами приложения. Вкладки, прокручиваемые движением пальца (ScrollableTabs), делают этот процесс еще прощё и приятнее. Основные вкладки (FixedTabs) удобны при отображении трех и менее вкладок, поскольку ширина вкладок фиксируется по самому длинному названию вкладки. увеличить изображение Рис. 6.62. Вкладки Списки (Lists) удобны для представления нескольких позиций информации в вертикальном расположении. Рис. 6.63. Список Сетки (GridLists) - это альтернатива стандартного списка. С помощью сетки можно создавать более удобное представление образных данных, нежели с помощью списка. Ещё одним плюсом сетки является то, что прокрутку можно осуществлять не только в вертикальном, но и в горизонтальном направлении. Однако нужно стараться избегать создания сетки с возможностью прокрутки в обоих измерениях сразу. Использование ярлычков для всех панелей сетки и полупрозрачных "занавесок" для неактивных панелей помогает пользователю быстрее понять, что скрывается под той или иной панелью. Рис. 6.64. Сетка с альбомами Задание 1. Создайте в приложении на главной активности строку, в которой будет выводиться адрес сайта, откуда загружено изображение, и кнопку для перехода на этот сайт. 2. Подумайте над интерфейсом собственного приложения. Какие элементы управления оно может содержать? Попробуйте воплотить его интерфейс на практике. Внимание! Если Вы увидите ошибку на нашем сайте, выделите её и нажмите Ctrl+Enter. © Национальный Открытый Университет "ИНТУИТ", 2016 | www.intuit.ru Самостоятельная работа 5. Демонстрации распознавания стандартных жестов Цель лабораторной работы: разработать простейшие приложения для демонстрации распознавания стандартных жестов. Задачи лабораторной работы: • рассмотреть распознавание всех поддерживаемых жестов; • рассмотреть распознавание только части поддерживаемых жестов. 10.1 Введение Для работы со стандартными жестами Android предоставляет класс GestureDetector. Этот класс содержит два вложенных интерфейса-слушателя: OnGestureListener и OnDoubleTapListener, эти интерфейсы задают методы, отслеживающие стандартные жесты. А также GestureDetector содержит вложенный класс SimpleOnGestureListener, который содержит пустые реализации, возвращающие значение false, где это необходимо, всех методов интерфейсов: OnGestureListener и OnDoubleTapListener. В лабораторной работе рассмотрим две возможности распознавания жестов: • случай распознавания всех поддерживаемых жестов, для этого реализуем в классе активности оба интерфейса; • случай распознавания только некоторого набора поддерживаемых жестов, для этого в классе активности объявим внутренний класс-наследник класса GestureDetector.SimpleOnGestureListener. 10.2 Распознавание всех поддерживаемых жестов Разработаем приложение, в котором продемонстрируем распознавание всех поддерживаемых жестов. Приложение содержит одну активность, одно информационное поле для вывода информации о распознанном жесте. Приложение работает следующим образом: пользователь выполняет один из поддерживаемых сенсорных жестов, в информационном поле отображается информация о распознанном жесте. 1. Создадим простое приложение и добавим на форму TextView для вывода информации. 2. Настроим логику приложения. В java класс, соответствующий активности внесем следующие дополнения. o Класс активности должен реализовывать интерфейсы: GestureDetector.OnGestureListener и GestureDetector.OnDoubleTapListener, для этого в объявление класса добавим конструкцию: o implements GestureDetector.OnGestureListener, o GestureDetector.OnDoubleTapListener o Нам понадобится экземпляр класса GestureDetectorCompat поэтому в качестве поля класса активности объявим следующую переменную: o GestureDetectorCompat mDetector; В методе onCreate() класса активности, создадим экземпляр класса GestureDetectorCompat и присвоим его переменной mDetector: mDetector = new GestureDetectorCompat(this,this); одним из параметров конструктора является класс, который реализует интерфейс GestureDetector.OnGestureListener, в нашем случае использовано слово this, т. е. параметром является сам класс активности. Этот интерфейс уведомляет пользователей когда появляется определенное сенсорное событие. В методе OnCreate() класса активности, следующая строка: mDetector.setOnDoubleTapListener(this); устанавливает слушатель событий, связанных с двойным касанием, это должен быть класс, реализующий интерфейс GestureDetector.OnDoubleTapListener. В нашем случае использовано слово this, т.е. слушателем будет опять сам класс активности. 1. Чтобы позволить вашему объекту GestureDetector получать события, необходимо переопределить метод onTouchEvent() для активности или элемента GUI. И передавать в экземпляр детектора все обнаруженные события. 2. public boolean onTouchEvent(MotionEvent event){ 3. this.mDetector.onTouchEvent(event); 4. // Be sure to call the superclass implementation 5. return super.onTouchEvent(event); 6. } 7. После проведенной подготовки пришло время реализовать все методы, объявленные в интерфейсах, отвечающих за прослушивание сенсорных событий. Методы интерфейса GestureDetector.OnGestureListener: onDown() - отслеживает появление касания, т. е. палец прижат к экрану; onFling() - отслеживает появление жеста смахивания; onLongPress() - отслеживает удерживание пальца прижатым к экрану длительное время; onScroll() - отслеживает появление жеста прокрутки (пролистывания); onShowPress() - отслеживает, что произошло событие касания и больше никаких событий не происходит короткое время; onSingleTapUp() - отслеживает появление жеста одиночного нажатия (клик). Методы интерфейса GestureDetector.OnDoubleTapListener: onDoubleTap() - отслеживает появление жеста двойного нажатия ("двойной клик"); onDoubleTapEvent() - отслеживает появление события во время выполнения жеста двойного нажатия, включая касание, перемещение, подъем пальца. onSingleTapConfirmed() - отслеживает появление жеста одиночного нажатия (клик). В листинге 10.1 представлен код приложения, в котором распознаются все поддерживаемые жесты, информация о появившемся и распознанном жесте выдается в информационное поле (TextView). В качестве практики предлагается воспроизвести данное приложение и проверить, как система распознает тот или иной жест. Очень полезно для понимания, как выполняются основные жесты. |