Основы разработки интерфейсов мобильных приложений

6.2.6 Кнопки "like" и "dislike"

Пришло время создать кнопки оценивания.

Для этого добавьте на форму <RelativeLayout>, задайте для него ширину и высоту wrap_content, и укажите id.

Снова в папку res/drawable/ нужно добавить файлы. Найдите изображения "Палец вверх" и "Палец вниз", и поместите их в эту папку, после чего обновите её.

Изображения и другие полезные файлы можно скачать здесь.

Добавьте <ImageButton>, выберите изображение "Палец вверх", и переместите <RelativeLayout> в такое положение:

увеличить изображение
Рис. 6.42. Новая кнопка

Укажите "рамке" быть выше, чем поле с кнопкой оценки:

увеличить изображение
Рис. 6.43. Контекстное меню "рамки"

увеличить изображение
Рис. 6.44. Выбор элемента, выше которого должна быть "рамка"

В результате должно получиться следующее:

увеличить изображение
Рис. 6.45. Новое расположение элементов

Добавьте еще одну кнопку - кнопку "Палец вниз". Она "наложилась" на первую кнопку. Чтобы это исправить, проделайте с <RelativeLayout> то же самое, что и с <LinearLayout>: растяните элемент влево и вправо, до получения такого результата:

увеличить изображение
Рис. 6.46. Выравнивание области с кнопками

Теперь расставьте кнопки по краям так, чтобы они "прикрепились" к краям.

увеличить изображение
Рис. 6.47. Выравнивание кнопок

Готово! Теперь можно запустить эмулятор и посмотреть, что получилось.

увеличить изображение
Рис. 6.48. Главная активность