осн прог. Цель лабораторной работы Установка и настройка среды программирования adt bundle Задачи лабораторной работы
 Скачать 3.46 Mb.
|
|
On Click. В этом методе и будет происходить все наше программирование в этой лабораторной работе. Нам потребуются две переменные: • целочисленная для хранения загаданного числа (случайное число от 1 до 100); • логическая для хранения состояния закончена игра или нет. Обе эти переменные имеет смысл объявить как поля класса активности, первоначальные значения присвоить в методе onCreate. Получить целочисленное значение из поля ввода, можно с помощью следующей конструкции: Integer.parseInt(etInput.getText().toString()) изменить значение текста в информационном поле можно с помощью следующей конструкции: tvInfo.setText(getResources().getString(R.string.ahead)); в данном случае в информационном поле появится значение строкового ресурса с именем ahead. Осталось реализовать логику приложения в методе onClick(). Предлагаем написать код этого метода самостоятельно, для контроля в приложении предложен листинг, который содержит один из вариантов кода описанного приложения. Задания для самостоятельной работы: Разумеется предложенная в приложении реализация не идеальна, требует доработок: • Что произойдет, если кнопка будет нажата до ввода какого-либо числа? Скорей всего приложение будет остановлено, необходимо как-то отслеживать этот вариант развития событий и адекватно реагировать. Предлагаем поработать самостоятельно над этой проблемой. • Что произойдет, если пользователь введет число меньшее нуля или большее 100? Скорей всего приложение обработает этот ввод, но было бы лучше, если бы появилось сообщение о том, что введенное число не удовлетворяет условиям задачи. • Как завершить приложение? И надо ли это делать? • Предлагаем подумать, как еще можно улучшить приложение и реализовать эти улучшения. 4.5 Немного о работе с эмулятором При выполнении данной работы мы использовали эмулятор для проверки работоспособности приложения. Рассмотрим некоторые возможности, облегчающие и ускоряющие взаимодействие с виртуальным устройством. Во-первых, существует набор полезных комбинаций клавиш для управления виртуальным устройством: • Alt+Enter - разворачивает эмулятор до размеров экрана; • Ctrl+F11 - меняет ориентацию эмулятора с портретной на альбомную и обратно; • F8 - включает/выключает сеть. Полный список комбинаций клавиш для работы с эмулятором можно найти по ссылке: http://developer.android.com/tools/help/emulator.html Во-вторых, кто бы ни работал с эмулятором, тот на себе прочувствовал насколько терпеливым надо быть, чтобы взаимодействовать с ним, так медленно он работает. Существует решение для ускорения работы эмулятора Android и этим решением является Intel Hardware Accelerated Execution Manager (Intel® HAXM). Intel Hardware Accelerated Execution Manager (Intel® HAXM) - это приложение с поддержкой аппаратной виртуализации (гипервизор), которое использует технологию виртуализации Intel для ускорения эмуляции приложений Android на компьютере для разработки. ( http://software.intel.com/ru- ru/android/articles/intel-hardware-accelerated-execution-manager ) Intel HAXM способен ускорить работу эмулятора для x86 устройств. При этом эмулятор будет работать со скоростью, приближенной к скорости работы реального устройства, что поможет сократить время на запуск и отладку приложения. Подробно познакомиться с установкой Intel HAXM и настройкой эмулятора на работу с ускорителем можно в статье по ссылке: http://habrahabr.ru/company/intel/blog/146114/ В-третьих, не стоит прерывать процесс запуска виртуального устройства, наберитесь терпения, на старых компьютерах первый запуск AVD может занять до 10 минут, на современных - от одной до трех минут. После того, как создали и запустили виртуальное устройство имеет смысл оставить его открытым, при всех последующих запусках приложения будет использоваться уже открытое виртуальное устройство, что позволит сэкономить время. 4.6 Заключение В лабораторной работе рассмотрен процесс разработки простого приложения переднего плана. Описано создание активности, настройка интерфейса и реализация логики приложения. Других компонентов в приложении не предусмотрено. В последующих работах будут рассматриваться приложения, содержащие несколько активностей. Смешанные приложения, работающие на переднем плане и при этом поддерживающие сервисы, работающие в фоновом режиме. Приложение 1. package com.example.projectn; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.widget.*; public class MainActivity extends Activity { TextView tvInfo; EditText etInput; Button bControl; int guess; boolean gameFinished; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tvInfo = (TextView)findViewById(R.id.textView1); etInput = (EditText)findViewById(R.id.editText1); bControl = (Button)findViewById(R.id.button1); guess = (int)(Math.random()*100); gameFinished = false; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } public void onClick(View v){ if (!gameFinished){ int inp=Integer.parseInt(etInput.getText().toString()); if (inp > guess) tvInfo.setText(getResources().getString(R.string.ahead)); if (inp < guess) tvInfo.setText(getResources().getString(R.string.behind)); if (inp == guess) { tvInfo.setText(getResources().getString(R.string.hit)); bControl.setText(getResources().getString(R.string.play_more)); gameFinished = true; } } else { guess = (int)(Math.random()*100); bControl.setText(getResources().getString(R.string.input_value)); tvInfo.setText(getResources().getString(R.string.try_to_guess)); gameFinished = false; } etInput.setText(""); } } Внимание! Если Вы увидите ошибку на нашем сайте, выделите её и нажмите Ctrl+Enter. © Национальный Открытый Университет "ИНТУИТ", 2016 | www.intuit.ru Самостоятельная работа 3. Основы разработки интерфейсов мобильных приложений Цель лабораторной работы: Изучение основ разработки интерфейсов мобильных приложений Задачи лабораторной работы: • Изучить элементы интерфейса • Практическим путём научиться размещать элементы и менять их свойства • Разработать прототип интерфейса собственного приложения 6.1 Введение Лабораторная работа посвящена разработке интерфейсов мобильных приложений. Работа содержит подробное описание построения гармоничного понятного пользовательского интерфейса для главной активности приложения и описание основных элементов интерфейса. Лабораторная работа поможет выбрать концепцию своего приложения и начать разработку его интерфейса. Более подробную информацию о разработке интерфейсов мобильных приложений под Android можно узнать на сайте Design [Android Developers] 6.2 Создание прототипа интерфейса Рассмотрим пример разработки интерфейса приложения, которое ищет в сети Интернет изображения по запросу пользователя, позволяет оценивать их, скачивать, и посещать интернет-страницы сайтов, на которых было найдено изображение. 6.2.1 Создание заготовки для приложения Выглядеть главное окно будет примерно так: Рис. 6.1. Интерфейс главной активности На нём присутствуют поле ввода текста для запроса пользователя и кнопка, начинающая поиск изображений. Внизу экрана две кнопки: "like" и "dislike", с их помощью пользователь сможет оценить изображение. После того, как пользователь сделает оценку изображения, текущее изображение закрывается и загружается следующее. Итак, начнём с создания нового проекта. Назовём его "RatingImages" ("Рейтинг изображений"). На данном этапе изучения программирования под Android не обязательно менять иконку запуска, но эта лабораторная работа направлена на разработку дизайна интерфейса, и потому, приступим. Создайте иконку на свой вкус. увеличить изображение Рис. 6.2. Создание иконки После создания проекта откройте activity_main.xml из каталога res/layout/. Когда вы откроете файл activity_main.xml, вы увидите графический редактор макета. Благодаря этому редактору создание интерфейсов стало ещё интереснее, поскольку добавить элемент на форму можно при помощи перетаскивания мышью, к тому же, благодаря графическому редактору, не обязательно запускать эмулятор, чтобы увидеть результат своих трудов. Теперь щелкните по вкладке activity_main.xml в нижней части экрана. Открылся XML-редактор кода. Этот способ редактирования стандартный, но все изменения, вносимые в этот документ, можно так же ощутить визуально, перейдя на графический редактор. Вернёмся на вкладку с графическим редактором. Во-первых, подготовим документ к началу работы, для этого удалите Результат выглядит так: увеличить изображение Рис. 6.3. Проект, готовый к началу разработки На рабочей области экрана остался один элемент. Это макет Два атрибута, ширина и высота (android:layout_width и android:layout_height), требуются для всех элементов для того, чтобы указать их размер. Так как Рис. 6.4. Свойства Как установить это значение? Будем разбираться. Однократным щелчком левой кнопкой мыши по надписи "Width" активируйте строку с параметрами ширины: Рис. 6.5. Свойства Щелчком левой кнопки мыши по области ввода вызовите диалоговое окно, и двойным щелчком сделайте выбор параметра: Рис. 6.6. Свойства Или щелчком правой кнопки мыши по Рис. 6.7. Контекстное меню При выполнении первого способа вы увидели еще два возможных параметра: "fill_parent" и "wrap_content". На самом деле, match_parent = fill_parent, но "fill_parent" считается устаревшим, и к использованию в новых проектах предлагается "match_parent". Параметр "wrap_content" указывает, что представление будет увеличиваться при необходимости, чтобы поддерживать соответствие содержанию экрана. 6.2.2 Добавление текстового поля Для начала добавьте элемент Сейчас должно получиться примерно следующее: увеличить изображение Рис. 6.8. Добавление текстового поля Возможно, появился желтый предупреждающий знак, но сейчас это не важно, со временем он исчезнет. Наличие таких предупреждений никак не влияет на компилируемость проекта. Теперь переходим к настройке добавленных нами элементов. Для многих элементов нужно назначать id, он обеспечивает уникальный идентификатор, который можно использовать как ссылку на объект из кода вашего приложения для управления им. Откроем редактор кода XML-файла и обратим внимание на элемент Строка При указании id, знак (@) требуется в том случае, если вы имеете в виду любой ресурс объекта из XML- файла. За ним следуют тип ресурса (в данном случае ID), косая черта (слеш) и имя ресурса (editText1). Знак плюс (+) перед типом ресурсов необходим только тогда, когда вы впервые определяете идентификатор ресурса. По сути, id, который создается автоматически, уже уникален, но грамотнее переименовывать id в соответствии со назначением элемента. Зададим id для текстового поля. Для этого прямо в коде строку android:id="@+id/editText1" заменяем на android:id="@+id/edit_message", жмём CTRL+S и открываем графический редактор. Если всё хорошо, то в свойствах текстового поля в графе id будет следующее: Рис. 6.9. Идентификатор текстового поля Добавим в код ещё две строки: android:ems="10" - задает соответствия для симметричного отображения шрифтов, android:hint="@string/edit_message" - содержание тестового поля "по умолчанию", т.е. пока пользователь не начал вводить в поле текст. Вместо того, чтобы использовать просто слово (например android:hint="message"), что крайне не удобно при изменении основного языка приложения, используется ссылка на значение, хранящееся в файле strings.xml. Поскольку это относится к конкретному ресурсу (а не только к id), знак плюс не нужен. Однако, мы ещё не определили строку ресурсов файле strings.xml, и потому вы получите следующее: Рис. 6.10. Предупреждение: не найден ресурс, на который прописана ссылка Для того, чтобы ссылка на ресурс начала работать, нужно этот ресурс создать. Откройте файл res/values/strings.xml. Очевидно, что его тоже можно редактировать двумя способами: графически и вручную. Выбирайте тот способ, который больше по душе. увеличить изображение Рис. 6.11. Редактирование файла ресурсов графическим способом; добавление нового ресурса увеличить изображение Рис. 6.12. Редактирование файла ресурсов графическим способом; выбор типа ресурса, выбран тип String Заполняем поля "Имя" и "Значение": увеличить изображение Рис. 6.13. Редактирование файла ресурсов графическим способом Сохраняем и любуемся результатом: Рис. 6.14. Отображение текста "По умолчанию" в поле ввода Подробнее о ресурсах - здесь Аналогично создадим id для Сохраните изменения. 6.2.3 Добавление кнопки Теперь добавьте Теперь поменяем надпись на кнопке на "Go!" с помощью ссылки на ресурс в XML-коде главной активности и добавления одного ресурса в файл strings.xml: Рис. 6.16. Редактор XML-кода файла strings.xml Сохраните. На графическом редакторе главной активности будут изменения: Рис. 6.17. Кнопка приняла новую форму, в соответствии с надписью на ней Теперь, когда мы поместили два главных представления на Речь идет о "приращении" правого и левого краёв лейаута к правому и левому краям Рис. 6.18. "Приращение" правого края Зелёные стрелки по краям дают понять, к какому элементу удалось прицепить край: Рис. 6.19. И, конечно, это отобразится в свойствах: Рис. 6.20. Свойства 6.2.4 Смена фона Идём дальше - попробуем поменять фон. Чтобы изменить цвет фона на чёрный, нужно в XML-коде главной активности написать одну строку в блоке Сохраните и проверьте результат, открыв графический редактор. увеличить изображение Рис. 6.21. Фон стал чёрным Красиво, но скучно. Как сделать фон ещё интереснее? Поместить на него рисунок! Для этого сначала в папке res/ создадим папку drawable/ увеличить изображение Рис. 6.22. Создание папки Рис. 6.23. Создание папки: имя папки После того, как папка создана, нужно положить в эту папку изображение - картинка называется got.png: Рис. 6.24. Изображение в папке drawable/ После этого в папке drawable/ нужно создать файл background.xml, важно при создании выбрать параметр bitmap. увеличить изображение Рис. 6.25. Создание нового XML-файла Рис. 6.26. Создание нового XML-файла Как только новый файл открылся, пропишем в него одну строчку, с указанием на то, откуда и какой файл использовать: Вернемся в редактор XML-кода, туда, где прописывали цвет фона. Вместо строки android:background="#000000" напишем ссылку на XML-файл android:background="@drawable/background". Сохраняем и видим результат: увеличить изображение Рис. 6.27. Новый фон Несомненно, фон смотрится хорошо, но очевидно, что кнопка и поле ввода просто затерялись, а это значит, что для этого приложения такой фон не подходит. Можно продолжить подбирать изображения на фон, но лучше создать черепичную заливку небольшим изображением. На этом сайте можно найти узор на любой вкус! Когда вы выбрали узор и скачали его, скопируйте изображение в папку drawable/. Рис. 6.28. Копирование изображения |