Android button textview imageview

ImageView

Общая информация

Компонент ImageView предназначен для отображения изображений. Находится в разделе Widgets.

Для загрузки изображения в XML-файле используется атрибут android:src, в последнее время чаще используется атрибут app:srcCompat.

ImageView является базовым элементом-контейнером для использования графики. Можно загружать изображения из разных источников, например, из ресурсов программы, контент-провайдеров. В классе ImageView существует несколько методов для загрузки изображений:

• setImageResource(int resId) — загружает изображение по идентификатору ресурса
• setImageBitmap(Bitmap bitmap) — загружает растровое изображение
• setImageDrawable(Drawable drawable) — загружает готовое изображение
• setImageURI(Uri uri) — загружает изображение по его URI

Метод setImageResource()

Сначала нужно получить ссылку на ImageView, а затем используется идентификатор изображения из ресурсов:

Метод setImageBitmap()

Используется класс BitmapFactory для чтения ресурса изображения в объект Bitmap, а затем в ImageView указывается полученный Bitmap. Могут быть и другие варианты.

Метод setImageDrawable()

Если у вас есть готовое изображение, например, на SD-карте, то его можно использовать в качестве объекта Drawable.

Drawable можно получить и из ресурсов, хотя такой код выглядит избыточным, если можно сразу вызвать setImageResource().

Метод setImageURI()

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

Загружаем Drawable через URI.

Другие методы

Также вам часто придется использовать методы, связанные с размерами и масштабированием: setMaxHeight(), setMaxWidth(), getMinimunHeight(), getMinimunWidth(), getScaleType(), setScaleType().

Масштабирование через свойство Scale Type

Для масштабирования картинки в ImageView есть свойство Scale Type и соответствующий ему атрибут android:scaleType и перечисление ImageView.ScaleType.

• CENTER
• CENTER_CROP
• CENTER_INSIDE
• FIT_CENTER
• FIT_START
• FIT_END
• FIT_XY
• MATRIX

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

Для наглядности я задал красный цвет для фона ImageView.

Режим android:scaleType=»center» выводит картинку в центре без масштабирования. Если у вас будет картинка большего размера, то края могут быть обрезаны.

Режим android:scaleType=»centerCrop» также размещает картинку в центре, но учитывает ширину или высоту контейнера. Режим попытается сделать так, чтобы ширина (или высота) картинки совпала с шириной (или высотой) контейнера, а остальное обрезается.

Режим android:scaleType=»centerInside» масштабирует картинку, сохраняя пропорции. Можно увидеть задний фон контейнера, если его размеры отличаются от размера картинки.

Режим android:scaleType=»fitCenter» (по умолчанию) похож на предыдущий, но может не сохранять пропорции.

Если выбрать режим android:scaleType=»fitStart», то картинка прижимается к левому верхнему углу и таким образом заполняет верхнюю половину контейнера.

Значение android:scaleType=»fitEnd» сместит картинку в нижнюю часть контейнера.

Режим android:scaleType=»fitXY» растягивает/сжимает картинку, чтобы подогнать её к контейнеру. Может получиться вытянутая картинка, поэтому будьте осторожны.

Последний атрибут android:scaleType=»matrix» вывел картинку без изменений в левом верхнем углу с обрезанными краями.

Атрибут android:adjustViewBounds=»true»

При использовании атрибута scaleType=»fitCenter» из предыдущего примера Android вычисляет размеры самой картинки, игнорируя размеры ImageView. В этом случае ваша разметка может «поехать». Атрибут adjustViewBounds заставляет картинку подчиниться размеру компонента-контейнера. В некоторых случаях это может не сработать, например, если у ImageView установлен атрибут layout_width=»0dip». В таком случае поместите ImageView в RelativeLayout или FrameLayout и используйте значение 0dip для этих контейнеров.

Загрузка изображения из галереи

Предположим, у вас есть на экране компонент ImageView, и вы хотите загрузить в него какое-нибудь изображение из галереи по нажатию кнопки:

Намерение ACTION_PICK вызывает отображение галереи всех изображений, хранящихся на телефоне, позволяя выбрать одно изображение. При этом возвращается адрес URI, определяющий местоположение выбранного изображения. Для его получения используется метод getData(). Далее для преобразования URI-адреса в соответствующий экземпляр класса Bitmap используется специальный метод Media.getBitmap(). И у нас появляется возможность установить изображение в ImageView при помощи setImageBitmap().

На самом деле можно поступить ещё проще и использовать метод setImageURI.

Сравните с предыдущим примером — чувствуете разницу? Тем не менее, приходится часто наблюдать подобный избыточный код во многих проектах. Это связано с тем, что метод порой кэширует адрес и не происходит изменений. Рекомендуется использовать инструкцию setImageURI(null) для сброса кэша и повторный вызов метода с нужным Uri.

В последних версиях системных эмуляторов два примера не работают. Проверяйте на реальных устройствах.

Получить размеры ImageView — будьте осторожны

У элемента ImageView есть два метода getWidth() и getHeight(), позволяющие получить его ширину и высоту. Но если вы попробуете вызвать указанные методы сразу в методе onCreate(), то они возвратят нулевые значения. Можно добавить кнопку и вызвать данные методы через нажатие, тогда будут получены правильные результаты. Либо использовать другой метод активности, который наступает позже.

Копирование изображений между ImageView

Если вам надо скопировать изображение из одного ImageView в другой, то можно получить объект Drawable через метод getDrawable() и присвоить ему второму компоненту.

Примеры

В моих статьях можно найти примеры использования ImageView.

Источник

Долгожданный View Binding в Android

Пару дней назад Google выпустил Android Studio 3.6 Canary 11, главным нововведением в которой стал View Binding, о котором было рассказано еще в мае на Google I/O 2019.

View Binding — это инструмент, который позволяет проще писать код для взаимодейтсвия с view. При включении View Binding в определенном модуле он генерирует binding классы для каждого файла разметки (layout) в модуле. Объект сгенерированного binding класса содержит ссылки на все view из файла разметки, для которых указан android:id .

Как включить

Чтобы включить View Binding в модуле надо добавить элемент в файл build.gradle :

Также можно указать, что для определенного файла разметки генерировать binding класс не надо. Для этого надо указать аттрибут tools:viewBindingIgnore=»true» в корневой view в нужном файле разметки.

Как использовать

Каждый сгенерированный binding класс содержит ссылку на корневой view разметки ( root ) и ссылки на все view, которые имеют id. Имя генерируемого класса формируется как «название файла разметки», переведенное в camel case + «Binding».

Например, для файла разметки result_profile.xml :

Будет сгенерирован класс ResultProfileBinding , содержащий 2 поля: TextView name и Button button . Для ImageView ничего сгенерировано не будет, как как оно не имеет id . Также в классе ResultProfileBinding будет метод getRoot() , возвращающий корневой LinearLayout .

Чтобы создать объект класса ResultProfileBinding , надо вызвать статический метод inflate() . После этого можно использовать корневой view как content view в Activity :

Позже binding можно использовать для получения view:

Отличия от других подходов

Главные преимущества View Binding — это Null safety и Type safety.

При этом, если какая-то view имеется в одной конфигурации разметки, но отсутствует в другой ( layout-land , например), то для нее в binding классе будет сгенерировано @Nullable поле.

Также, если в разных конфигурациях разметки имеются view с одинаковыми id, но разными типами, то для них будет сгенерировано поле с типом android.view.View .
(По крайней мере, в версии 3.6 Canary 11)

А вообще, было бы удобно, если бы сгенерированное поле имело наиболее возможный специфичный тип. Например, чтобы для Button в одной конфигурации и TextView в другой генерировалось поле с типом TextView ( public class Button extends TextView ).

При использовании View Binding все несоответствия между разметкой и кодом будут выявляться на этапе компиляции, что позволит избежать ненужных ошибок во время работы приложения.

Использование в RecyclerView.ViewHolder

Ничего не мешает использовать View Binding при создании view для RecyclerView.ViewHolder :

Однако, для создания такого ViewHolder придется написать немного бойлерплейта:

Было бы удобнее, если при работе с RecyclerView.ViewHolder метод inflate(. ) не будет иметь параметр layoutInflater , а будет сам получать его из передаваемого parent .

Тут нужно ещё упомянуть, что при использовании View Binding поиск view через findViewById() производится только один раз при вызове метода inflate() . Это дает преимущество над kotlin-android-extensions , в котором кеширование view по умолчанию работало только в Activity и Fragment , а для RecyclerView.ViewHolder требовалась дополнительная настройка.

В целом, View Binding это очень удобная вещь, которую легко начать использовать в существующих проектах. Создатель Butter Knife уже рекомендует переключаться на View Binding.

Немного жаль, что такой инструмент не появился несколько лет назад.

Источник

Пользовательский интерфейс. View, основные атрибуты

Пользовательский интерфейс

Любое приложение отображает пользователю графический интерфейс. На картинке ниже вы можете увидеть примеры текстовых элементов ( TextView ), кнопок ( Button ), картинок ( ImageView ).

Пользовательский интерфейс представлен layout файлом (рус. Макетом), который создаётся, используя язык разметки XML. Макет определяет структуру пользовательского интерфейса экрана. Все элементы макета построены с использованием иерархии объектов View и ViewGroup . View – компонент, который пользователь может видеть и взаимодействовать с ним. В то время как ViewGroup является невидимым контейнером, который определяет структуру макета, как показано на рисунке.

Объекты View обычно называют «виджетами». Они могут быть представлены одним из классов-наследников, таких как Button , TextView , ImageView . Объекты ViewGroup обычно называют «контейнерами». Они определяют, как именно будут располагаться элементы внутри экрана. Подробнее с ViewGroup мы познакомимся в следующих уроках.

Вы можете работать с макетами двумя способами:

• Объявлять элементы пользовательского интерфейса в XML коде. Android предоставляет простой XML файл, в котором можно добавлять разные View и ViewGroup вручную. Вы также можете использовать редактор макетов Android Studio, чтобы создать свой XML-макет, не заглядывая в XML код.
• Создавать элементы макета во время выполнения программы из Java кода. Приложение может создавать объекты View и ViewGroup (и управлять их свойствами) программно.

В этом уроке мы подробнее будем рассматривать именно первый вариант. Откройте файл activity_main.xml . Для ознакомления с синтаксисом языка XML мы будем вносить изменения в этот файл.

XML синтаксис

XML – язык разметки, определяющий теги (элементы) и их атрибуты. Язык очень похож на HTML. Давайте разберём на примере.

Тег ограничивается скобками . Название тега в данном случае – LinearLayout . Всё, что находится между скобками – называется атрибутами. В примере два атрибута:

Атрибуты состоят из названия и значения, которые разделены символом = , причём значение атрибута всегда пишется в кавычках. У атрибута android:layout_width=»match_parent» название – android:layout_width , а значение – match_parent .

После открытия тега, его обязательно надо закрывать. Это можно сделать используя конструкцию (в примере – ).

У элемента могут быть вложенные элементы:

Если у какого-то тега нет вложенных элементов, то лучше сократить закрывающийся тег, используя конструкцию . Обратите внимание на тег TextView :

Пример макета

Layout должен содержать только один корневой элемент, который должен быть объектом View или ViewGroup (обычно используют ViewGroup ). После того, как вы определили корневой элемент, вы можете добавить дополнительные объекты в качестве дочерних элементов, чтобы постепенно создавать пользовательский интерфейс. Давайте изменим файл activity_main.xml . Например, вот код XML-макета, который использует контейнер LinearLayout в качестве корневого элемента и два виджета внутри него: TextView и Button .

При запуске приложения макет будет выглядеть так:

Связь XML и Java кода

Когда мы запускаем приложение, каждый файл макета XML компилируется в ресурс View . Связь XML файла и Activity происходит в методе onCreate класса MainActivity . Этот код также сгенерировала Android Studio при создании Activity .

Связь происходит при вызове метода setContentView(R.layout.activity_main) . Обращаться к layout файлу нужно в виде R.layout.имя_файла . Это связано с внутренним хранением ресурс файлов в Android системе. В нашем случае файл по умолчанию называется activity_main.xml , поэтому указываем R.layout.activity_main (постфикс xml опускается).

Метод onCreate() вызывается Android системой во время загрузки приложения (эту тему рассмотрим подробнее в следующих уроках).

XML Атрибуты

Каждый объект View и ViewGroup поддерживает множество атрибутов XML.

Вы можете заметить, что в названии атрибутов есть префикс android . Этот префикс называют пространством имён (англ. namespace). В данном случае он означает, что атрибуты объявлены в библиотеке android . Также вы могли заметить, что у корневого элемента в макете обязательно указывается атрибут xmlns:android=»http://schemas.android.com/apk/res/android» . Это сделано для объявления пространства имён.

Некоторые атрибуты специфичны для конкретного элемента. Например, TextView поддерживает атрибут android:textSize (русс. размер текста). Атрибуты наследуются View объектами при расширении класса другого виджета. Некоторые из атрибутов являются общими для всех виджетов, поскольку они наследуются от корневого класса View (например, текст – android:text , ширина – android:layout_width , высота – android:layout_height , идентификатор – android:id ).

Атрибут android:text

Атрибут android:text отвечает за текст, который будет отображаться на экране:

Обязательные атрибуты android:layout_width, android:layout_height

У любого View компонента необходимо объявить атрибуты android:layout_width (русс. ширина макета), android:layout_height (русс. высота макета), иначе приложение не скомпилируется.

Существует три варианта указания ширины и высоты:

• фиксированный размер в dp . Density-independent Pixel (сокр. dp) – это виртуальный пиксель, основанный на физической плотности экрана устройства. Android переводит это значение в соответствующее количество реальных пикселей для разных экранов.
• wrap_content означает, что элемент занимает место, необходимое для отрисовки его содержимого.
• match_parent означает, что элемент занимает столько же места, сколько и родительский элемент. Раньше вместо этого значения использовалось fill_parent . Но это устаревший вариант, поэтому не используйте его.

Создадим три TextView , чтобы показать эти значения:

В данном случае при размере wrap_content TextView занимает столько же места, сколько и текст в нём. Вы можете изменить текст, чтобы убедиться, что размер текста и элемента TextView будут совпадать.

Вы могли заметить, что в примере мы использовали атрибуты android:background (русс. цвет фона), android:marginTop (русс. отступ сверху), android:textColor (русс. цвет текста), android:textSize (русс. размер текста) для наглядности. Сейчас мы рассмотрим эти атрибуты детальнее.

Атрибут android:textSize

Атрибут android:textSize отвечает за размер текста, как вы догадались. Разберём на примере:

Размер текста нужно указывать в единицах sp (Scale-independent Pixels). Отличие от dp состоит в том, что этот размер изменяется в зависимости от настроек размера шрифта в телефоне. В Android системе у пользователя есть возможность в настройках изменить шрифт в своём телефоне на крупный, средний или маленький. Чтобы текст в приложении автоматически изменился вместе с этой настройкой рекомендуется использовать единицы sp для текста.

Атрибут android:background

Атрибут android:background определяет фоновый цвет элемента. Когда вы указываете атрибут android:background , то видите точно, сколько места занимает элемент. Разберём на примере:

Давайте разберём запись android:background=»#00FF00″ . #00FF00 – простой способ закодировать любой цвет. Вы можете генерировать нужные цвета онлайн на этом сайте. Для самых любопытных ниже объяснение, как работает задание цветов.

Цвет задаётся в формате ARGB. Это аббревиатура расшифровывается, как Alpha Red Green Blue. Дело в том, что любой цвет можно получить из сочетания в разной степени 3 цветов: красного, зелёного и синего. Также цвета могут быть прозрачными, именно это обозначает слово Alpha.

Чтобы задать цвет мы указываем символ # и 3 байта в шестнадцатеричной системе, которые отвечают за каждый цвет. Первый байт отвечает за красный цвет, второй – за зелёный, третий – за синий.

В данном примере мы указали, что красного цвета будет 00 , зелёного цвета будет FF (максимальное значение), и синего будет 00 . Поэтому фон стал зелёным. Также можно не писать второе число, если оно такое же, как и первое. Т.е. мы можем записать этот же цвет : android:background=»#0F0″ . Если хотите узнать ещё больше о RGB формате, то читайте здесь.

Атрибут android:textColor

Атрибут android:textColor похож на атрибут android:background только он задаёт цвет текста:

Атрибут android:textStyle

Атрибут android:textStyle отвечает за стиль текста. Его возможные значения:

• normal – обычный текст (применяется по умолчанию, если вы не указали атрибут android:textStyle ).
• bold – толстый.
• italic – курсив.

Атрибут android:id

Атрибут android:id у View позволяет работать с ней из Java кода и ссылаться на эту View внутри макета. Покажем на примере работы с View элементом из Java кода:

Символы @+id/ в начале строки указывают, что будет создан новый идентификатор. После этого следует новое имя ресурса, которое должно быть создано и добавлено к нашим ресурсам (в данном случае – text ). Из java кода к этому элементу можно будет обратиться с помощью вызова R.id.text .

С помощью вызова метода findViewById(R.id.text) можно связать View из XML макета с Java объектом TextView . После этого можно вызывать любые методы, которые есть у данного объекта. Для примера мы вызвали метод setText() и указали текст Text from java code .

В результате увидим, что отобразился тот текст, который мы указали из Java кода:

Атрибуты android:padding, android:layout_margin

Рассмотрим атрибуты, которые задают отступы элементов:

• android:padding (top, bottom, right | end, start | left)
• android:layout_margin (top, bottom, right | end, start | left)

В xml коде они указываются так:

Параметры (top, bottom, right | end, start | left) означают, с какой стороны вы хотите сделать отступ. Параметры right | end , start | left означают практически одно и тоже. Только start, end добавляют поддержку для стран, в которых тексты читаются справа налево. Поэтому рекомендуется использовать их вместо значений left , right . Эти атрибуты поддерживаются с 17 версии устройств, значит мы можем их использовать (помните, что при создании проекта мы указали, что поддерживаем устройства 21 версии и выше).

Если указать padding , layout_margin без всякого параметра, то отступ будет сделан со всех сторон. Основное различие двух атрибутов состоит в том, что padding делает отступ внутри элемента, а layout_margin делает отступ снаружи. Пример:

Можно сделать тоже самое, указывая отступы со всех сторон явно:

Атрибуты android:gravity, android:layout_gravity

Атрибуты android:gravity и android:layout_gravity отвечают за выравнивание. Ключевое отличие состоит в том, что android:gravity отвечает за выравнивание содержимого внутри элемента, а layout_gravity отвечает за выравнивание элемента относительно родительского контейнера. Разберём на примере:

В данном примере текст в первом TextView выровнен по правому краю, т.к. мы указали атрибут android:gravity=»end» . Второй элемент прижался к правой стороне родительского контейнера, потому что указан атрибут android:layout_gravity=»end» .

Также у этого атрибута могут быть другие значения, которые указывают, как именно выровнять элемент. Перечислим основные из них: top, bottom, start, end, center, center_horizontal, center_vertical

Различные значения можно комбинировать, используя символ | . Если хотим выровнять содержимое по правому нижнему углу, то можем использовать значение end|bottom .

Верите или нет, профессиональные разработчики не запоминают всё – поиск информации является ключевой частью работы. Поэтому не пытайтесь запомнить все View объекты и атрибуты сразу. Google сделал специальный словарь, в котором вы можете найти тот компонент, атрибут или класс, который вам необходим.

Заключение

Сегодня вы познакомились с пользовательским интерфейсом в Android системе. Теперь вы знаете язык XML и основные компоненты пользовательского интерфейса, а также их атрибуты. Информации было много, поэтому это нормально, если вы её не запомнили. При необходимости в следующих уроках вы сможете возвращаться к этому уроку, как к справочнику. Скорее выполняйте практические задания к этому уроку, чтобы набить руку и создать первый макет реального приложения!

Источник