Добавьте изображение в приложение «Поздравительная открытка»

В этой лаборатории кода вы узнаете, как добавлять изображения в ваше приложение с помощью ImageView .

Предпосылки

• Как создать и запустить новое приложение в Android Studio.
• Как добавлять и удалять, а также устанавливать атрибуты в TextViews с помощью редактора макетов.

Что вы узнаете

• Как добавить изображение или фотографию в приложение для Android.
• Как отобразить изображение в вашем приложении с помощью ImageView .
• Как извлечь текст в строковый ресурс, чтобы упростить перевод приложения и повторное использование строк.
• Как сделать ваше приложение доступным для наибольшего количества людей .

Что вы будете строить

• Расширьте приложение Happy Birthday, чтобы добавить изображение.

Что вам нужно

• Компьютер с установленной Android Studio.
• Приложение из кодовой лаборатории "Создать приложение для поздравительных открыток".

1. Откройте свой проект из предыдущей лаборатории кода «Создание приложения поздравительной открытки» в Android Studio.
   Когда вы запустите приложение, оно должно выглядеть так.
   

Добавьте изображение в свой проект

В этом задании вы загрузите изображение из Интернета и добавите его в свое приложение Happy Birthday.

1. Зайдите на этот сайт , чтобы найти изображение для вашей поздравительной открытки .
2. Нажмите кнопку « Загрузить » справа. Это отображает изображение само по себе.
   
3. Щелкните изображение правой кнопкой мыши и сохраните файл на свой компьютер под именем androidparty.jpg . Запомните, где вы его сохранили (например, в папке « Загрузки »).
4. В Android Studio нажмите « Вид» > «Окна инструментов» > «Диспетчер ресурсов » в меню или щелкните вкладку « Диспетчер ресурсов » слева от окна « Проект» .
5. Щелкните + под диспетчером ресурсов и выберите Import Drawables . Откроется файловый браузер.
   
6. В файловом браузере найдите загруженный файл изображения и нажмите « Открыть» .
7. Нажмите «Далее» .
   Android Studio показывает вам предварительный просмотр изображения.
8. Щелкните Импорт .
9. Если изображение было успешно импортировано, Android Studio добавит его в список Drawable . Этот список включает все ваши изображения и значки для приложения. Теперь вы можете использовать это изображение в своем приложении.
   
10. Вернитесь к представлению проекта, щелкнув « Просмотр»> «Окна инструментов»> «Проект» в меню или вкладку « Проект » слева.
11. Убедитесь, что изображение находится в папке drawable вашего приложения, развернув app > res > drawable .
    

Чтобы отобразить изображение в вашем приложении, ему нужно место для отображения. Точно так же, как вы используете TextView для отображения текста, вы можете использовать ImageView для отображения изображений.

В этой задаче вы добавите ImageView в свое приложение и назначите его изображение загруженному вами изображению торта. Затем вы поместите его и отрегулируете его размер, чтобы он заполнил экран.

Добавьте ImageView и установите его изображение

1. В окне проекта откройте activity_main.xml ( app > res > layout > activity_main.xml ).

Совет: Если вы не видите Редактор макетов , нажмите кнопку Режим дизайна в правом верхнем углу.

2. В редакторе макетов перейдите в палитру и перетащите ImageView в свое приложение. Поместите его рядом с центром и не перекрывайте текст.

Откроется диалоговое окно «Выбрать ресурс ». В этом диалоговом окне перечислены все ресурсы изображений, доступные вашему приложению. Обратите внимание на изображение дня рождения, указанное на вкладке Drawable . Рисуемый ресурс — это общая концепция графики, которую можно нарисовать на экране. Он включает в себя изображения, растровые изображения, значки и многие другие типы рисованных ресурсов.

3. В диалоговом окне « Выбор ресурса » найдите изображение торта в списке Drawable .
4. Нажмите на изображение, а затем нажмите OK .
   

Это добавит изображение в ваше приложение, но, вероятно, оно находится не в том месте и не заполняет экран. Вы исправите это на следующем шаге.

Позиция и размер ImageView

1. Нажмите и перетащите ImageView в редакторе макетов . Обратите внимание, что при перетаскивании вокруг экрана приложения в представлении « Дизайн» появляется розовый прямоугольник. Розовый прямоугольник указывает границы экрана для позиционирования вашего ImageView .
2. Отбросьте ImageView так, чтобы левый и правый края совпадали с розовым прямоугольником. Android Studio будет «привязывать» изображение к краям, когда вы находитесь рядом. (Сейчас вы позаботитесь о верхней и нижней частях.)
   

Views в ConstraintLayout должны иметь горизонтальные и вертикальные ограничения, чтобы сообщить ConstraintLayout , как их расположить. Вы добавите их дальше.

Примечание. Ограничение в контексте редактора макетов представляет собой соединение или выравнивание вида с другим видом, родительским макетом или невидимой направляющей. Например, вид может быть ограничен определенным расстоянием от края своего контейнера, или всегда находиться справа от другого вида, или всегда быть видом сверху внутри контейнера.

1. Наведите указатель мыши на кружок в верхней части контура ImageView , и он выделится другим кругом.
2. Перетащите круг к верхней части экрана приложения, и стрелка соединит круг с указателем при перетаскивании. Перетащите его, пока он не окажется в верхней части экрана. Вы добавили ограничение из верхней части ImageView в верхнюю часть ConstraintLayout .
   
   
3. Добавьте ограничение из нижней части ImageView в нижнюю часть ConstraintLayout .

Совет: Views ограничений может быть более сложным, если вы добавляете больше представлений на экран. Если вы добавите ограничение к неправильному View , вы можете отменить этот шаг с помощью Control+Z ( Command+Z на Mac). Или щелкните правой кнопкой мыши View , чтобы открыть меню, и выберите «Очистить ограничения выбора », которое удалить все ограничения на этот View .

4. На панели « Атрибуты » используйте виджет ограничения , чтобы добавить поля 0 слева и справа. Это автоматически создает ограничение в этом направлении.
   

Теперь изображение центрировано, но еще не занимает весь экран. Вы исправите это в следующих шагах.

1. Под виджетом Constraint в разделе Constraints установите для layout_width значение 0dp (ограничение совпадения) .
   0dp — это сокращение, указывающее Android Studio использовать ограничение соответствия для ширины ImageView . "Соответствие ограничений означает... Из-за ограничений, которые вы только что добавили, это делает его таким же широким, как ConstraintLayout , за вычетом любых полей.
   
2. Установите для layout_height значение 0dp (ограничение совпадения) .
   Из-за добавленных вами ограничений ImageView такой же, как у ConstraintLayout , за вычетом любых полей.
   
3. ImageView такой же ширины и высоты, как и экран приложения, но фотография находится в центре ImageView , и над и под фотографией есть куча пробелов. Поскольку это выглядит не очень привлекательно, вы настроите scaleType ImageView , который говорит, как изменить размер и выровнять изображение. Подробнее о ScaleType в справочнике разработчика . Теперь ваше приложение должно выглядеть так, как показано ниже.
   
4. Найдите атрибут scaleType . Возможно, вам придется прокрутить вниз или выполнить поиск этого атрибута. Попробуйте установить разные значения для scaleType , чтобы увидеть, что они делают.

Совет: Чтобы найти свойство в списке всех свойств, щелкните значок увеличительного стекла справа от атрибутов и начните вводить имя свойства. Android Studio покажет только те свойства, которые содержат эту строку.

5. Когда вы закончите, установите для scaleType значение centerCrop , потому что это заставляет изображение заполнять экран, не искажая его.

Изображение торта теперь должно занимать весь экран, как показано ниже.

Но теперь вы не можете увидеть свое поздравление с днем ​​рождения и подпись. Вы исправите это на следующем шаге.

Переместите ImageView за текст

После того, как ImageView заполнит экран, вы больше не увидите текст. Это потому, что изображение теперь закрывает текст. Оказывается, порядок элементов пользовательского интерфейса имеет значение. Сначала вы добавили TextViews , затем добавили ImageView , что означает, что он оказался сверху. Когда вы добавляете представления в компоновку, они добавляются в конец списка представлений и отображаются в том порядке, в котором они находятся в списке. ImageView был добавлен в конец списка представлений в Views , что означает, что он отрисовывается последним и ConstraintLayout поверх TextViews . Чтобы исправить это, вы измените порядок представлений и переместите ImageView в начало списка, чтобы он отображался первым.

1. В дереве компонентов щелкните ImageView и перетащите его над TextViews чуть ниже ConstraintLayout . Появится синяя линия с треугольником, показывающая, куда пойдет ImageView . Поместите ImageView чуть ниже ConstraintLayout .
   
   

ImageView теперь должен быть первым в списке под ConstraintLayout , а TextViews после него. Оба "С Днем Рождения, Сэм!" и «От Эммы». текст теперь должен быть виден, но "С Днем Рождения, Сэм!" может быть трудно читать, потому что это темный текст на темном фоне. (Пока не обращайте внимания на предупреждение об отсутствующем описании контента.)

Изменить цвет текста

Ваш текст приветствия и подпись теперь находятся перед изображением. Но их все еще может быть трудно увидеть, в зависимости от выбранного вами цвета текста. На этом шаге вы установите цвет текста, чтобы он лучше отображался на фоне изображения.

1. Выберите первый TextView , щелкнув его в дереве компонентов .
2. В атрибутах щелкните атрибут textColor и начните вводить белый цвет .
   Обратите внимание, что по мере того, как вы печатаете, Android Studio показывает список цветов, которые содержат текст, который вы уже набрали.
   
3. Выберите @android:color/white из списка цветов и нажмите Enter . Android определяет ряд цветов, поэтому вы можете последовательно использовать их в разных частях вашего приложения.
4. Сделайте то же самое с другим TextView .
5. Запустите приложение и обратите внимание, что текст стал намного легче читать.
   

Поздравляем! Вы добавили изображение в свое Android-приложение, и ваш текст на нем выглядит великолепно!!

Когда вы добавляли TextViews в предыдущей кодовой лаборатории, Android Studio помечала их предупреждающими треугольниками. На этом шаге вы исправите эти предупреждения, а также исправите предупреждение в ImageView .

Идет перевод

Когда вы пишете приложения, важно помнить, что в какой-то момент они могут быть переведены на другой язык. Как вы узнали из предыдущей кодовой лаборатории, строка — это последовательность символов, например «С днем ​​рождения, Сэм!».

Жестко закодированная строка — это строка, написанная непосредственно в коде вашего приложения. Жестко закодированные строки усложняют перевод вашего приложения на другие языки и затрудняют повторное использование строки в разных местах вашего приложения. Вы можете решить эти проблемы, «извлекая строки в файл ресурсов». Это означает, что вместо жесткого кодирования строки в вашем коде вы помещаете строку в файл, даете ей имя, а затем используете это имя всякий раз, когда хотите использовать эту строку. Имя останется прежним, даже если вы измените строку или переведете ее на другой язык.

1. Нажмите на оранжевый треугольник рядом с первым TextView с надписью «С днем ​​рождения, Сэм!»
   Android Studio открывает окно с дополнительной информацией и предлагаемым исправлением. Возможно, вам придется прокрутить страницу вниз, чтобы увидеть предлагаемое исправление .
   
   
2. Нажмите кнопку Исправить .
   Android Studio открывает диалоговое окно « Извлечение ресурса ». В этом диалоговом окне вы можете указать, как будет называться ваш строковый ресурс, а также некоторые сведения о том, как его хранить. Имя ресурса — это то, как будет называться строка. Значение Resource будет самой фактической строкой.
3. В диалоговом окне « Извлечение ресурса » измените имя ресурса на happy_birthday_text . Строковые ресурсы должны иметь имена в нижнем регистре, а несколько слов должны разделяться символом подчеркивания. Остальные настройки оставьте по умолчанию.
   
4. Нажмите кнопку ОК .
5. На панели « Атрибуты » найдите текстовый атрибут и обратите внимание, что Android Studio автоматически установила для вас значение @string/happy_birthday_text .
   
6. Откройте strings.xml ( app > res > values ​​> strings.xml ) и обратите внимание, что Android Studio создала строковый ресурс с именем happy_birthday_text .

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

Файл strings.xml содержит список строк, которые пользователь увидит в вашем приложении. Обратите внимание, что имя вашего приложения также является строковым ресурсом. Поместив все строки в одно место, вы можете легко перевести весь текст в своем приложении и более легко повторно использовать строку в разных частях вашего приложения.

7. Выполните те же шаги, чтобы извлечь текст для подписи TextView и назовите ресурс строки signal_text .

Ваш готовый файл должен выглядеть так.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

Проверьте свое приложение на доступность

Следование передовым методам кодирования для специальных возможностей позволяет всем вашим пользователям, включая пользователей с ограниченными возможностями, легче перемещаться и взаимодействовать с вашим приложением.

Примечание. Android предоставляет пользователям множество инструментов. Например, TalkBack — это программа чтения с экрана Google, включенная в устройства Android. TalkBack дает пользователям устную обратную связь, чтобы пользователи могли использовать свое устройство, не глядя на экран. Подробнее о специальных возможностях читайте в справочном руководстве для разработчиков .

Android Studio предоставляет подсказки и предупреждения, которые помогут вам сделать ваше приложение более доступным.

1. В дереве компонентов обратите внимание на оранжевый треугольник рядом с ImageView , который вы добавили ранее. Если вы наведете на него указатель, вы увидите всплывающую подсказку с предупреждением об отсутствующем атрибуте «contentDescription» на изображении. Описание содержимого может помочь сделать ваше приложение более удобным для использования с TalkBack, определяя назначение элемента пользовательского интерфейса.

Однако изображение в этом приложении предназначено только для украшения. Он ничего не делает, если пользователь нажимает на него, и не имеет особого значения для доступности. Вместо того, чтобы задавать описание содержимого, вы пометите ImageView , чтобы система знала, что это не важно для доступности. Затем средство чтения с экрана знает, что его нужно пропустить.

2. В дереве компонентов выберите ImageView .
3. В окне « Атрибуты » в разделе « Все атрибуты » найдите ImportantForAccessibility и установите для него значение « нет ».
   

Оранжевый треугольник рядом с ImageView исчезнет.

4. Запустите приложение еще раз, чтобы убедиться, что оно все еще работает.

Поздравляем! Вы добавили изображение в свое приложение Happy Birthday, выполнили рекомендации по специальным возможностям и упростили перевод на другие языки!

Код решения для приложения Happy Birthday был загружен на GitHub, если вы хотите увидеть код, который у нас получился.

GitHub — это сервис, который позволяет разработчикам управлять кодом своих программных проектов. Он использует Git — систему контроля версий, которая отслеживает изменения, внесенные в каждую версию кода. Если вы когда-либо видели историю версий Документа Google, вы можете увидеть, когда и какие изменения были внесены в документ в прошлом. Точно так же вы можете отслеживать историю версий кода в проекте. Это очень полезно, если вы работаете над проектом индивидуально или в команде.

На GitHub также есть веб-сайт, на котором вы можете просматривать и управлять своим проектом. Эта ссылка GitHub позволяет вам просматривать файлы проекта Happy Birthday в Интернете или загружать их на свой компьютер.

URL-адрес кода решения: https://github.com/g oogle-developer-training/android-basics-kotlin-<APPNAME>

Чтобы получить код для этой лаборатории кода и открыть его в Android Studio, выполните следующие действия.

Получить код

1. Щелкните URL-адрес кода решения. Откроется страница GitHub для проекта в браузере.
2. На странице GitHub для проекта нажмите кнопку « Клонировать или загрузить », чтобы открыть диалоговое окно « Клонировать ».

3. В диалоговом окне нажмите кнопку « Загрузить ZIP », чтобы сохранить проект на свой компьютер. Дождитесь завершения загрузки.
4. Найдите файл на своем компьютере (скорее всего, в папке « Загрузки »).
5. Дважды щелкните ZIP-файл, чтобы распаковать его. Это создает новую папку, содержащую файлы проекта.

Откройте проект в Android Studio.

1. Запустите Android-студию.
2. В окне Добро пожаловать в Android Studio щелкните Открыть существующий проект Android Studio.

Примечание. Если Android Studio уже открыта, вместо этого выберите пункт меню « Файл» > « Создать » > «Импорт проекта» .

3. В диалоговом окне « Импорт проекта » перейдите туда, где находится распакованная папка проекта (вероятно, в папке « Загрузки »).
4. Дважды щелкните папку этого проекта.
5. Подождите, пока Android Studio откроет проект.
6. Нажмите кнопку « Выполнить» для создания и запуска приложения. Убедитесь, что он работает так, как ожидалось.
7. Просмотрите файлы проекта в окне инструментов Project , чтобы увидеть, как было реализовано приложение.

Справка: обратитесь к справке и руководству по устранению неполадок , если загруженный код не загружается или не работает должным образом.

• Диспетчер ресурсов в Android Studio помогает добавлять и упорядочивать изображения и другие ресурсы.
• ImageView — это элемент пользовательского интерфейса для отображения изображений в вашем приложении.
• ImageViews должны иметь описание содержимого, чтобы сделать ваше приложение более доступным.
• Текст, который показывается пользователю, например поздравление с днем ​​рождения, должен быть извлечен в строковый ресурс, чтобы упростить перевод вашего приложения на другие языки.

• Менеджер ресурсов в Android Studio
• Класс ImageView
• Доступность
• Поддержка разных языков
• Начало работы с GitHub

Примечание. Практики необязательны. Они дают вам возможность попрактиковаться в том, что вы узнали в этой лаборатории кода.

Сделайте следующее:

1. Создайте свое собственное приложение поздравительной открытки на основе вашего дизайна.
2. Начните с размышлений о том, какие Views вам понадобятся.
3. В каком порядке было бы проще их добавить?
4. Какие изображения вам нужно добавить в папку с возможностью рисования?

Существует два типа растровых изображений, обычно используемых для приложений Android: файлы JPEG и файлы PNG. Файлы PNG могут иметь прозрачные (пустые) области. Подробнее о форматах изображений читайте в справочнике разработчика .

5. Не Views сначала расположить представления с ограничениями и полями, а затем стилизовать их.
6. Чтобы сделать текст более заметным на некоторых изображениях, попробуйте поэкспериментировать с shadowColor , shadowDx , shadowDy и shadowRadius .
   

Проверьте свою работу:

Готовое приложение должно работать без ошибок и отображать созданную вами поздравительную открытку.