- Главная
- Информатика
- Изучение основ разработки интерфейсов мобильных приложений
Содержание
- 2. Цель практической работы Изучение основ разработки интерфейсов мобильных приложений Задачи практической работы: Изучить элементы интерфейса Практическим
- 3. Создание прототипа интерфейса Практическая работа посвящена разработке интерфейсов мобильных приложений. Работа содержит подробное описание построения гармоничного
- 4. Создание заготовки для приложения Выглядеть главное окно будет примерно так (см рисунок) На нём присутствуют поле
- 5. Создание заготовки для приложения После создания проекта откройте activity_main.xml из каталога res/layout/. Когда вы откроете файл
- 6. На рабочей области экрана остался один элемент. Это макет . В нём позиция дочерних элементов может
- 7. Создание заготовки для приложения. Добавление текстового поля Для начала добавьте элемент с горизонтальной ориентацией в ,
- 8. Создание заготовки для приложения. Добавление текстового поля Добавим в код ещё две строки: android:ems="10" - задает
- 9. Создание заготовки для приложения. Добавление кнопки Теперь добавьте в макет после элемента : Чтобы кнопка трансформировалась
- 10. Создание заготовки для приложения. Смена фона Идём дальше - попробуем поменять фон. Чтобы изменить цвет фона
- 11. Область просмотра изображений Теперь займемся созданием области отображения изображений, которые пользователь будет оценивать. Добавьте »изображение" в
- 12. Пришло время создать кнопки оценивания. Для этого добавьте на форму , задайте для него ширину и
- 14. Скачать презентацию
Цель практической работы
Изучение основ разработки интерфейсов мобильных приложений
Задачи практической работы:
Изучить элементы
Цель практической работы
Изучение основ разработки интерфейсов мобильных приложений
Задачи практической работы:
Изучить элементы
Практическим путём научиться размещать элементы и менять их свойства
Разработать прототип интерфейса собственного приложения
Создание прототипа интерфейса
Практическая работа посвящена разработке интерфейсов мобильных приложений. Работа содержит
Создание прототипа интерфейса
Практическая работа посвящена разработке интерфейсов мобильных приложений. Работа содержит
Рассмотрим пример разработки интерфейса приложения, которое ищет в сети Интернет изображения по запросу пользователя, позволяет оценивать их, скачивать, и посещать интернет-страницы сайтов, на которых было найдено изображение.
Создание заготовки для приложения
Выглядеть главное окно будет примерно так (см рисунок)
На
Создание заготовки для приложения
Выглядеть главное окно будет примерно так (см рисунок)
На
Итак, начнём с создания нового проекта. Назовём его "RatingImages" ("Рейтинг изображений").
Создание заготовки для приложения
После создания проекта откройте activity_main.xml из каталога res/layout/.
Когда вы откроете файл activity_main.xml,
Создание заготовки для приложения
После создания проекта откройте activity_main.xml из каталога res/layout/.
Когда вы откроете файл activity_main.xml,
Теперь щелкните по вкладке activity_main.xml в нижней части экрана. Открылся XML-редактор кода. Этот способ редактирования стандартный, но все изменения, вносимые в этот документ, можно так же ощутить визуально, перейдя на графический редактор.
Вернёмся на вкладку с графическим редактором. Во-первых, подготовим документ к началу работы, для этого удалите
На рабочей области экрана остался один элемент. Это макет . В нём
На рабочей области экрана остался один элемент. Это макет
Два атрибута, ширина и высота (android:layout_width и android:layout_height), требуются для всех элементов для того, чтобы указать их размер.
Так как
При установке этого значения мы увидим еще один возможный параметр: "wrap_content".
Параметр "wrap_content" указывает, что представление будет увеличиваться при необходимости, чтобы поддерживать соответствие содержанию экрана.
Создание заготовки для приложения
Создание заготовки для приложения.
Добавление текстового поля
Для начала добавьте элемент с горизонтальной ориентацией
Создание заготовки для приложения.
Добавление текстового поля
Для начала добавьте элемент
Возможно, появился желтый предупреждающий знак, но сейчас это не важно, со временем он исчезнет. Наличие таких предупреждений никак не влияет на компилируемость проекта.
При указании id, знак (@) требуется в том случае, если вы имеете в виду любой ресурс объекта из XML-файла. За ним следуют тип ресурса (в данном случае ID), косая черта (слеш) и имя ресурса (editText1).
Знак плюс (+) перед типом ресурсов необходим только тогда, когда вы впервые определяете идентификатор ресурса.
По сути, id, который создается автоматически, уже уникален, но грамотнее переименовывать id в соответствии со назначением элемента.
Зададим id для текстового поля. Для этого прямо в поле id вводим edit_message", открываем графический редактор и убеждаемся, что в свойствах текстового поля в графе id будет android:id="@+id/edit_message"
Создание заготовки для приложения.
Добавление текстового поля
Добавим в код ещё две строки:
android:ems="10" -
Создание заготовки для приложения.
Добавление текстового поля
Добавим в код ещё две строки:
android:ems="10" -
android:hint="@string/edit_message" - содержание тестового поля "по умолчанию", т.е. пока пользователь не начал вводить в поле текст. Вместо того, чтобы использовать просто слово (например android:hint="message"), что крайне не удобно при изменении основного языка приложения, используется ссылка на значение, хранящееся в файле strings.xml. Поскольку это относится к конкретному ресурсу (а не только к id), знак плюс не нужен.
Однако, мы ещё не определили строку ресурсов файле strings.xml, и потому вы получите следующее:
Для того, чтобы ссылка на ресурс начала работать, нужно этот ресурс создать.
Откройте файл res/values/strings.xml. Очевидно, что его тоже можно редактировать двумя способами: Open Editor и вручную.
Аналогично создадим id для
Создание заготовки для приложения.
Добавление кнопки
Теперь добавьте
Создание заготовки для приложения.
Добавление кнопки
Теперь добавьте
Теперь поменяем надпись на кнопке на "Go!" с помощью ссылки на ресурс в XML-коде главной активности и добавления одного ресурса в файл strings.xml:
Теперь, когда мы поместили два главных представления на
Речь идет о "приращении" правого и левого краёв лейаута к правому и левому краям
На виджете Constraint мы можем увидеть, к чему привязались края
Создание заготовки для приложения.
Смена фона
Идём дальше - попробуем поменять фон.
Чтобы изменить
Создание заготовки для приложения.
Смена фона
Идём дальше - попробуем поменять фон.
Чтобы изменить
android:background="#000000".
Сохраните и проверьте результат, открыв графический редактор.
Чтобы фоном сделать картинку нужно положить в папку drawable изображение - картинка например называется fon.png:
@drawable/fon
Несомненно, фон смотрится хорошо, но очевидно, что кнопка и поле ввода просто затерялись, а это значит, что для этого приложения такой фон не подходит. Можно продолжить подбирать изображения на фон, но лучше создать черепичную заливку небольшим изображением. На этом сайте можно найти узор на любой вкус!
В
Если вы выбрали тёмный фон, то стоит поменять цвет текста, вводимого в поле ввода, например на белый.
Для этого в блок
android:textColor="#ffffff"
Область просмотра изображений
Теперь займемся созданием области отображения изображений, которые пользователь будет
Область просмотра изображений
Теперь займемся созданием области отображения изображений, которые пользователь будет
Добавьте »изображение"
Укажем этому элементу ширину, высоту и id. Предупреждение должно пропасть.
Теперь для наглядности поместим туда изображение.
Сначала поместим само изображение в папку res/drawable/ и обновим её.
Это нужно для того, чтобы новые данные загрузились в проект.
Пришло время создать кнопки оценивания.
Для этого добавьте на форму , задайте для
Пришло время создать кнопки оценивания.
Для этого добавьте на форму
Снова в папку res/drawable/ нужно добавить файлы. Найдите изображения "Палец вверх" и "Палец вниз", и поместите их в эту папку, после чего обновите её.
Изображения и другие полезные файлы можно скачать здесь.
Добавьте
Добавьте еще одну кнопку - кнопку "Палец вниз". Она "наложилась" на первую кнопку. Чтобы это исправить, проделайте с
Теперь расставьте кнопки по краям так, чтобы они "прикрепились" к краям.
Готово! Теперь можно запустить эмулятор и посмотреть, что получилось.
Кнопки «Like» и «Dislike»