Пример разработки интерфейса приложения, которое ищет в сети Интернет изображения по запросу пользователя, позволяет оценивать их, скачивать, и посещать интернет-страницы сайтов, на которых было найдено изображение.
 |
| Интерфейс главной активности. На нём присутствуют поле ввода текста для запроса пользователя и кнопка, начинающая поиск изображений. Внизу экрана две кнопки: "like" и "dislike", с их помощью пользователь сможет оценить изображение. После того, как пользователь сделает оценку изображения, текущее изображение закрывается и загружается следующее. |
ШАГ 1. Создание проекта
Начнём с создания нового проекта. Назовём его "RatingImages" ("Рейтинг изображений").
Во-первых, подготовим документ к началу работы, для этого удалите <TextView>.
На рабочей области экрана остался один элемент. Это макет <RelativeLayout>. В нём позиция дочерних элементов может быть описана по отношению друг к другу или к родителю. Подробнее о макетах можно узнать здесь.
Два атрибута, ширина и высота (android:layout_width и android:layout_height), требуются для всех элементов для того, чтобы указать их размер.
Так как <RelativeLayout> - это корень в макете, то нужно, чтобы он заполнял всю область экрана. Это достигается при помощи установки параметра "match_parent" для ширины и высоты. Это значение указывает, что ширина и высота элемента будет равна ширине и высоте родителя.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> </RelativeLayout>
При выполнении первого способа вы увидели еще два возможных параметра: "fill_parent" и "wrap_content". На самом деле, match_parent = fill_parent, но "fill_parent" считается устаревшим, и к использованию в новых проектах предлагается "match_parent". Параметр "wrap_content" указывает, что представление будет увеличиваться при необходимости, чтобы поддерживать соответствие содержанию экрана.
ШАГ 2. Создание поля ввода текста для запроса пользователя
Для начала добавьте элемент <LinearLayout> с горизонтальной ориентацией в <RelativeLayout>, и укажите для ширины и высоты параметр "wrap_content".
Теперь, для создания пользовательского редактируемого текстового поля, добавьте элемент <EditText> с параметром "wrap_content" для ширины и высоты в <LinearLayout>.
Теперь, для создания пользовательского редактируемого текстового поля, добавьте элемент <EditText> с параметром "wrap_content" для ширины и высоты в <LinearLayout>.
Для многих элементов нужно назначать id, он обеспечивает уникальный идентификатор, который можно использовать как ссылку на объект из кода вашего приложения для управления им.
<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/edit_message"> <requestFocus/> </EditText>
Строка <requestFocus/> появляется добавлением элемента requestFocus (папка Advanced), и позволяет установить фокус на нужном компоненте. Важно использовать этот элемент, когда у вас имеется, к примеру, три текстовых поля, и нужно, чтобы фокус был на втором из них.
При указании id, знак (@) требуется в том случае, если вы имеете в виду любой ресурс объекта из XML-файла. За ним следуют тип ресурса (в данном случае ID), косая черта (слеш) и имя ресурса (editText1).
Знак плюс (+) перед типом ресурсов необходим только тогда, когда вы впервые определяете идентификатор ресурса.
По сути, id, который создается автоматически, уже уникален, но грамотнее переименовывать id в соответствии со назначением элемента.
Добавим в код ещё две строки:
- android:ems="10" - задает соответствия для симметричного отображения шрифтов,
- android:hint="@string/edit_message" - содержание тестового поля "по умолчанию", т.е. пока пользователь не начал вводить в поле текст. Вместо того, чтобы использовать просто слово (например android:hint="message"), что крайне не удобно при изменении основного языка приложения, используется ссылка на значение, хранящееся в файле strings.xml. Поскольку это относится к конкретному ресурсу (а не только к id), знак плюс не нужен.
<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/edit_message" android:ems="10" android:hint="@string/edit_message"> <requestFocus/> </EditText>
Для того, чтобы ссылка на ресурс начала работать, нужно этот ресурс создать. Откройте файл res/values/strings.xml. Подробнее о ресурсах - здесь.
<resources> <string name="app_name">RatingImages</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="edit_message">Enter your text here</string> </resources>
Аналогично создадим id для <LinearLayout>
android:id="@+id/linear1"
ШАГ 3. Создание кнопки начинающей поиск изображений
Теперь добавьте <Button> в макет после элемента <EditText>. Чтобы кнопка трансформировалась в соответствии с текстом кнопки, ширина и высота должны быть установлены во "wrap_content".
Теперь поменяем надпись на кнопке на "Go!" с помощью ссылки на ресурс в XML-коде главной активности и добавления одного ресурса в файл strings.xml.
Теперь, когда мы поместили два главных представления на <LinearLayout> элемент, настало время добавить ещё два параметра для этого элемента. Речь идет о "приращении" правого и левого краёв лейаута к правому и левому краям <RelativeLayout> элемента соответственно. А сделать это проще простого - просто потяните мышкой один край к другому! Зелёные стрелки по краям дают понять, к какому элементу удалось прицепить край. И, конечно, это отобразится в свойствах:
ШАГ 4. Смена фона
Чтобы изменить цвет фона на чёрный, нужно в XML-коде главной активности написать одну строку в блоке <RelativeLayout> элемента:android:background="#000000".
Красиво, но скучно. Как сделать фон ещё интереснее? Поместить на него рисунок На этом сайте можно найти узор на любой вкус! Когда вы выбрали узор и скачали его, скопируйте изображение в папку drawable/. Для этого сначала в папке res/ создадим папку drawable/ После того, как папка создана, нужно положить в эту папку изображение.
После этого в папке drawable/ нужно создать файл background.xml.
Как только новый файл открылся, пропишем в него одну строчку, с указанием на то, откуда и какой файл использовать:
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/paisley" android:tileMode="repeat"> </bitmap>
Атрибут android:tileMode задает тип заполнения, в данном случае простое повторение исходного изображения. Кроме repeat возможны варианты clamp и mirror. Помните, что данный приём применим только к bitmap, к фигурам, созданным при помощи XML, применить данную операцию нельзя.
 |
| Варианты заполнения |
Вернемся в редактор XML-кода, туда, где прописывали цвет фона.
Вместо строки android:background="#000000" напишем ссылку на XML-файл android:background="@drawable/background".
Сохраняем и видим результат:
В <RelativeLayout> стоит добавлять android:background только в том случае, если вы хотите неподвижный фон, а в <ScrollView> чтобы фон прокручивался вместе с контентом.
Если вы выбрали тёмный фон, то стоит поменять цвет текста, вводимого в поле ввода, например на белый.
Для этого в блок <EditText> добавим строчку
android:textColor="#ffffff"
Если вы выбрали тёмный фон, то стоит поменять цвет текста, вводимого в поле ввода, например на белый.
Для этого в блок <EditText> добавим строчку
android:textColor="#ffffff"
ШАГ 5. Создание области отображения изображений, которые пользователь будет оценивать
Добавьте "рамку" <FrameLayout> в <RelativeLayout>:
<FrameLayout android:id="@+id/imgview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/linear1"> </FrameLayout>
Сначала поместим само изображение в папку res/drawable/ и обновим её.
Теперь поместим внутрь "рамки" <ImageView>
Вместе с изображением появился новый предупреждающий знак.
В описании предупреждения сказано: "[Accessibility] Missing contentDescription attribute on image". Давайте разберёмся, что это означает.
Атрибут android:contentDescription используется в программах, которые поддерживают специальные возможности для людей с нарушениями зрения и слуха. То есть, текст, прописанный в этом атрибуте, не будет показан на экране, но при включенной в "Специальных возможностях" услуге "звуковые подсказки" этот текст будет проговариваться, когда пользователь переходит к этому элементу управления.
Этот атрибут можно задать для ImageButton, ImageView и CheckBox, и задавать его или нет - дело каждого.
Свойства у изображения должны быть следующими:
<FrameLayout android:id="@+id/imgview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/linear1"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView" android:layout_gravity="center" android:src="@drawable/xxx" /> </FrameLayout>
ШАГ 6. Создание кнопок "like" и "dislike"
Пришло время создать кнопки оценивания.Для этого добавьте на форму <RelativeLayout>, задайте для него ширину и высоту wrap_content, и укажите id.
Укажите "рамке" быть выше, чем поле с кнопкой оценки.
<FrameLayout android:id="@+id/imgview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/linear1" android:layout_above="@id/relative2">
Изображения и другие полезные файлы можно скачать здесь.
Добавьте <ImageButton>, выберите изображение "Палец вверх".
Добавьте еще одну кнопку - кнопку "Палец вниз". Она "наложилась" на первую кнопку. Чтобы это исправить, проделайте с <RelativeLayout> то же самое, что и с <LinearLayout>: растяните элемент влево и вправо. Теперь расставьте кнопки по краям так, чтобы они "прикрепились" к краям.
<RelativeLayout android:id="@+id/relative2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/buttonLike" android:src="@drawable/like" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/buttonDislike" android:src="@drawable/dislike" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> </RelativeLayout>
Листинги
1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" android:background="@drawable/background"> <LinearLayout android:id="@+id/linear1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:orientation="horizontal" > <EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:hint="@string/edit_message" android:textColor="#ffffff" > <requestFocus /> </EditText> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" /> </LinearLayout> <FrameLayout android:id="@+id/imgview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/relative2" android:layout_below="@id/linear1" > <ImageView android:id="@+id/puppy" android:layout_width="wrap_content" android:layout_height="match_parent" android:src="@drawable/puppy" /> </FrameLayout> <RelativeLayout android:id="@+id/relative2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imgview" android:layout_alignParentBottom="true" android:layout_alignRight="@+id/imgview" > <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:src="@drawable/dislike" /> <ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:src="@drawable/like" /> </RelativeLayout> </RelativeLayout>
2
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">RatingImages</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> <string name="edit_message">Enter your text here</string> <string name="button_send">Go!</string> </resources>
3
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/starring" android:tileMode="repeat" > </bitmap>
--
