Как сделать ImageView с закругленными углами?
В Android ImageView по умолчанию представляет собой прямоугольник. Как сделать прямоугольник с закругленными углами (обрезать все 4 угла моего растрового изображения, чтобы получились прямоугольники с закругленными углами) в ImageView?
30 ответов
Это довольно поздно для ответа, но для всех, кто ищет это, вы можете выполнить следующий код, чтобы вручную скруглить углы ваших изображений.
Это не мой код, но я его использовал, и он прекрасно работает. Я использовал его в качестве помощника в классе ImageHelper и немного расширил его, чтобы передать степень растушевки, которая мне нужна для данного изображения.
Окончательный код выглядит так:
Надеюсь, это кому-то поможет!
Хотя приведенный выше ответ работает, Ромен Гай (основной разработчик Android) показывает лучший метод в его блоге, который использует меньше памяти за счет использования шейдера, а не создания копии растрового изображения. Общая суть функциональности здесь:
Преимущества этого метода перед другими в том, что он:
- не создает отдельную копию растрового изображения , которое использует много памяти для больших изображений [по сравнению с большинством других ответов здесь]
- поддерживает сглаживание [против метода clipPath]
- поддерживает альфа [по сравнению с методом xfermode + porterduff]
- поддерживает аппаратное ускорение [по сравнению с методом clipPath]
- только выводится на холст один раз [по сравнению с методами xfermode и clippath]
Я создал RoundedImageView на основе этого кода, который включает эту логику в ImageView и добавляет правильные ScaleType поддержка и необязательная закругленная граница.
Просто сделайте это:
- Создайте округлую фигуру, которую можно рисовать, примерно так:
Рез / вытяжка / round_outline.xml
- Установите объект для рисования в качестве фона вашего ImageView: android:background=»@drawable/round_outline»
- Согласно этой документации, все, что вам нужно сделать, это добавить android:clipToOutline=»true»
К сожалению, есть ошибка, и этот атрибут XML не распознается. К счастью, мы все еще можем настроить отсечение в Java:
- В вашей активности или фрагменте: ImageView.setClipToOutline(true)
Вот как это будет выглядеть:
Примечание.
Этот метод работает для любой фигуры, которую можно рисовать (а не только с закругленными углами). Он будет обрезать ImageView по любому контуру формы, который вы определили в своем Drawable xml.
Особое примечание об ImageViews
setClipToOutline() работает только тогда, когда фон представления установлен на фигуру, которую можно рисовать. Если эта фоновая фигура существует, View обрабатывает контур фигуры как границы для целей обрезки и затенения.
Это означает, что если вы хотите использовать setClipToOutline() для закругления углов в ImageView, ваше изображение должно быть установлено с использованием android:src вместо android:background (поскольку фон должен быть установлен в соответствии с закругленной формой) . Если вы ДОЛЖНЫ использовать фон для установки изображения вместо src, вы можете использовать этот обходной путь:
- Создайте макет и установите его фон в соответствии с вашей фигурой, которую можно рисовать
- Оберните этот макет вокруг вашего ImageView (без отступов)
- ImageView (включая все остальное в макете) теперь будет отображаться с закругленной формой макета.
В версии 21 библиотеки поддержки теперь есть решение этой проблемы: оно называется RoundedBitmapDrawable.
Это в основном похоже на обычный Drawable, за исключением того, что вы задаете ему радиус угла для отсечения с помощью:
Итак, начиная с Bitmap src и цели ImageView , это будет выглядеть примерно так:
Начиная с версии 1.2.0-alpha03 материала Библиотека компонентов — это новый ShapeableImageView .
Вы можете использовать что-то вроде:
С помощью jetpack compose 1.0.0 (протестированного с 1.0.0-beta08 ) вы можете применить clip Modifier с использованием RoundedCornerShape :
Быстрое решение xml —
Вы можете установить желаемую ширину, высоту и радиус в CardView и scaleType в ImageView.
В AndroidX используйте
Я сделал Custom ImageView:
Вывод:
Надеюсь, это поможет тебе.
Я обнаружил, что оба метода очень помогли найти рабочее решение. Вот моя составная версия, которая не зависит от пикселей и позволяет иметь несколько квадратных углов, а остальные углы имеют тот же радиус (что является обычным вариантом использования). Благодаря обоим вышеперечисленным решениям:
Кроме того, я переопределил ImageView, чтобы вставить это, чтобы я мог определить его в xml. Вы можете добавить сюда часть логики, которую выполняет супервызов, но я прокомментировал это, так как в моем случае это бесполезно.
Надеюсь это поможет!
Котлин
Чтобы создать ImageView Циркуляр, мы можем изменить cornerRadius с помощью:
Вы должны расширить ImageView и нарисовать свой собственный прямоугольник с закругленными углами.
Если вам нужна рамка вокруг изображения, вы также можете наложить закругленную рамку поверх изображения в макете.
[править] Наложите рамку на исходное изображение, например, используя FrameLayout . Первым элементом FrameLayout будет изображение, которое вы хотите отобразить скругленным. Затем добавьте еще один ImageView с рамкой. Второй ImageView будет отображаться поверх исходного ImageView , и поэтому Android отобразит его содержимое над исходным ImageView .
Подсказка Джорджу Уолтерсу II выше, я просто взял его ответ и немного расширил его, чтобы поддерживать скругление отдельных углов по-разному. Это можно было бы еще немного оптимизировать (некоторые из целевых рек перекрываются), но не очень сильно.
Я знаю, что эта ветка немного устарела, но это один из лучших результатов по запросам в Google о том, как скруглить углы ImageViews на Android.
Ромен Гай — вот где это.
Уменьшенная версия выглядит следующим образом.
Примените форму к своему imageView , как показано ниже:
Это может быть полезно для вас, друг.
ИЗМЕНИТЬ
Вот краткий ответ:
В папке / res / drawable создайте файл frame.xml. В нем мы определяем простой прямоугольник с закругленными углами и прозрачным центром.
В файл макета вы добавляете LinearLayout, который содержит стандартный ImageView, а также вложенный FrameLayout. FrameLayout использует отступы и настраиваемую возможность рисования, чтобы создать иллюзию закругленных углов.
Почему бы не сделать вырезку в draw() ?
Вот мое решение:
- Расширить RelativeLayout с помощью отсечения
- Поместите ImageView (или другие представления) в макет:
Ни один из методов, представленных в ответах, у меня не работал. Я обнаружил, что следующий способ работает, если ваша версия Android 5.0 или выше:
Никакие формы xml не должны определяться, и приведенный выше код создает углы только для вершины, что обычные методы не будут работать. Если вам нужно скруглить 4 угла, удалите:
Из параметра для нижней части в setRoundRect. Вы можете расширить фигуру до любой другой, указав контуры, которые соответствуют вашим потребностям. Ознакомьтесь со следующей ссылкой:
Обратите внимание, что, как и в случае с любой другой мерой в Android, вы должны «конвертировать» размер, как правило, из DP. В приведенном выше примере, скажем, вы хотите, чтобы радиус был 24
Например, вы можете позже добавить границу в чертеж с радиусом, установленным как «24», и вы хотите, чтобы она совпадала. Следовательно,
Следующий код создает объект макета прямоугольника с закругленными углами, который рисует прямоугольник с закругленными углами вокруг всех размещенных в нем дочерних объектов. Он также демонстрирует, как создавать представления и макеты программно без использования XML-файлов макета.
Класс для объекта макета RoundedRectangle определен здесь:
Если вы используете библиотеку Glide, это будет полезно:
Большое спасибо за первый ответ. Вот модифицированная версия для преобразования прямоугольного изображения в квадратное (и округленное), а цвет заливки передается в качестве параметра.
Если ваше изображение находится в Интернете, лучше всего использовать скольжение и RoundedBitmapDrawableFactory (из API 21, но доступно в библиотеке поддержки), например:
В макете можно использовать только ImageView , а с помощью glide можно применять скругленные углы с помощью этого метода.
первый в вашем Gradle напишите,
для изображения с закругленными углами
метод вызова:
Просто нужно использовать androidx.cardview.widget.CardView
Код
Ответ на вопрос, который перенаправлен сюда: «Как создать круговой ImageView в Android?»
Другой простой способ — использовать CardView с угловым радиусом и ImageView внутри:
Закругленное изображение. Используется ImageLoader здесь
Или вы можете использовать библиотеку Picasso от Square.
Вы можете скачать файл RoundedTransformation здесь здесь
Поскольку все ответы казались мне слишком сложными только для углов, я подумал и пришел к другому решению, которым, как мне кажется, стоит поделиться, просто с XML, если у вас есть место вокруг изображения:
Создайте фигуру с рамкой и прозрачным содержимым, например:
Затем в RelativeLayout вы можете сначала разместить свое изображение, а затем в том же месте над фигурой с другим ImageView. Форма обложки должна быть больше по размеру на величину ширины границы. Будьте осторожны, выбирайте больший угловой радиус, поскольку внешний радиус определен, но внутренний радиус — это то, что покрывает ваше изображение.
Надеюсь, это тоже кому-то поможет.
Изменить в соответствии с запросом CQM, относительный пример макета:
Моя реализация ImageView с виджетом со скругленными углами, который (вниз || вверх) изменяет изображение до требуемых размеров. Он использует кодовую форму CaspNZ.
В последнее время есть другой способ — использовать созданный API Glide. Это требует некоторой начальной работы, но затем дает вам всю мощь Glide с гибкостью, чтобы делать что угодно, потому что вы пишете фактический код, поэтому я думаю, что это хорошее решение на долгую перспективу. Кроме того, использование очень простое и удобное.
Сначала настройте Glide версии 4+:
Затем создайте класс модуля приложения Glid, чтобы запустить обработку аннотации:
Затем создайте расширение Glide, которое действительно выполняет всю работу. Вы можете настроить его так, чтобы делать все, что захотите:
После добавления этих файлов соберите свой проект.
Затем используйте его в своем коде так:
Существует классная библиотека, которая позволяет формировать просмотры изображений.
Источник
Как сделать ImageView с закругленными углами?
В Android, ImageView по умолчанию является прямоугольником. Как я могу сделать это округленным прямоугольником (клип со всех четырех углов моего растрового изображения, чтобы быть закругленными прямоугольниками) в ImageView?
Это довольно поздно в ответ, но для тех, кто ищет это, вы можете сделать следующий код для ручного округления углов ваших изображений.
Это не мой код, но я использовал его, и он работает чудесно. Я использовал его в качестве помощника в классе ImageHelper и немного расширил его, чтобы передать количество оперения, которое мне нужно для данного изображения.
Окончательный код выглядит следующим образом:
Надеюсь, это поможет кому-то!
Хотя вышеупомянутый ответ работает, Ромен Гай (основной разработчик Android) показывает лучший метод в своем блоге, который использует меньше памяти, используя шейдер, не создающий копию растрового изображения. Общий смысл функциональности:
Преимущества этого по сравнению с другими методами заключаются в том, что он:
- Не создает отдельную копию растрового изображения, в которой используется большая память с большими изображениями [в отличие от большинства других ответов здесь]
- Поддерживает метод сглаживания [vs clipPath]
- Поддерживает альфа [vs xfermode + porterduff method]
- Поддерживает аппаратное ускорение [vs clipPath method]
- Только рисует один раз на холст [vs xfermode и методы клипа]
Я создал RoundedImageView, основанный на этом коде, который переносит эту логику в ImageView и добавляет правильную поддержку ScaleType и дополнительную округленную границу.
В v21 библиотеки поддержки теперь есть решение: это называется RoundedBitmapDrawable .
Это в основном как обычный Drawable, за исключением того, что вы даете ему угловой радиус для отсечения с помощью:
Итак, начиная с Bitmap src и целевого ImageView , он выглядит примерно так:
Я обнаружил, что оба метода очень полезны при разработке рабочего решения. Вот моя композитная версия, которая не зависит от пикселя и позволяет иметь некоторые квадратные углы с остальными углами с одинаковым радиусом (что является обычным прецедентом). Благодаря двум вышеупомянутым решениям:
Кроме того, я перепробовал ImageView, чтобы поместить его, чтобы я мог определить его в xml. Возможно, вы захотите добавить в логику того, что делает супервызов, но я прокомментировал это, поскольку это не помогает в моем случае.
Надеюсь это поможет!
Округленное изображение Использование ImageLoader здесь
Или вы можете использовать Picasso Library на Square.
Вы можете скачать файл RoundedTransformation здесь
Обрезание до закругленных фигур было добавлено в класс View в API 21.
Просто сделайте это:
- Создайте закругленную фигуру, что-то вроде этого:
Рез / рисуем / round_outline.xml
- Установите для рисования в качестве фона вашего ImageView: android:background=»@drawable/round_outline»
- Согласно этой документации , все, что вам нужно сделать, это добавить android:clipToOutline=»true»
К сожалению, есть ошибка, и этот атрибут XML не распознается. К счастью, мы все же можем настроить обрезку в Java:
- В вашей деятельности или фрагменте: ImageView.setClipToOutline(true)
Вот как это будет выглядеть:
Заметка:
Этот метод работает для любой выталкиваемой формы (не только округленной). Он будет обрезать ImageView в любой форме, которую вы определили в своем Drawable xml.
Особое примечание о ImageViews
setClipToOutline() работает только тогда, когда фон View установлен в форму, пригодную для рисования. Если эта фоновая форма существует, View рассматривает контур фигуры как границы для целей отсечения и затенения.
Это означает, что если вы хотите использовать setClipToOutline() для округления углов в ImageView, ваше изображение должно быть установлено с помощью android:src вместо android:background (поскольку фон должен быть установлен на вашу закругленную форму). Если вы ДОЛЖНЫ использовать фон для установки изображения вместо src, вы можете использовать это обходное решение:
- Создайте макет и установите его фон в свою форму.
- Оберните этот макет вокруг вашего ImageView (без прокладки)
- ImageView (включая все остальное в макете) теперь будет отображаться с закругленной формой макета.
Еще один простой способ – использовать CardView с радиусом угла и ImageView внутри:
Я сделал Custom ImageView:
Вывод:
Надеюсь, это поможет вам.
Поскольку все ответы казались слишком сложными для меня только для круглых углов, я подумал и пришел к другому решению, которое, как мне кажется, стоит поделиться, просто с XML, если у вас есть некоторое пространство вокруг изображения:
Создайте граничную фигуру с прозрачным контентом следующим образом:
Затем в RelativeLayout вы можете сначала разместить свое изображение, а затем в том же месте над фигурой с другим ImageView. Форма крышки должна быть больше по размеру ширины границы. Будьте осторожны, чтобы получить больший радиус угла, поскольку внешний радиус определен, но внутренний радиус покрывает ваше изображение.
Надеюсь, это тоже поможет кому-то.
Измените в соответствии с запросом CQM пример относительной компоновки:
Моя реализация ImageView с виджетами с закругленными углами, которые (вниз || вверх) меняют изображение на требуемые размеры. Он использует форму кода CaspNZ.
Вы должны расширить ImageView и нарисовать собственный округленный прямоугольник.
Если вам нужна рамка вокруг изображения, вы также можете наложить закругленный кадр поверх представления изображения в макете.
[Edit] Настройте рамку на исходное изображение, используя FrameLayout например. Первым элементом FrameLayout будет изображение, которое вы хотите округлить. Затем добавьте еще один ImageView с фреймом. Второй ImageView будет отображаться поверх исходного ImageView и, таким образом, Android будет рисовать его содержимое над orignal ImageView .
Подкрепление к Джорджу Уолтерсу II выше, я только что взял его ответ и немного расширил его, чтобы поддерживать округление отдельных углов по-разному. Это может быть оптимизировано немного дальше (некоторые из пересекающихся целевых прямоугольников), но не много.
Я знаю, что эта тема немного устарела, но она является одним из лучших результатов для запросов в Google о том, как объединить углы ImageViews на Android.
Ромен Гай, где он.
Минимизированная версия выглядит следующим образом.
Далее создается объект макета прямоугольника с округлым прямоугольником, который рисует округленный прямоугольник вокруг любых дочерних объектов, которые помещаются в него. Он также демонстрирует, как создавать представления и макеты программно, не используя XML-файлы макета.
Класс для объекта макета RoundedRectangle имеет следующие значения:
Большое спасибо за первый ответ. Здесь изменена версия, чтобы преобразовать прямоугольное изображение в квадратное (и округленное), а цвет заливки передается как параметр.
Почему бы не сделать обрезку в draw ()?
Вот мое решение:
- Расширение RelativeLayout с отсечением
- Поместите ImageView (или другие виды) в макет:
РЕДАКТИРОВАТЬ
Вот ответ в двух словах:
В папке / res / drawable создайте файл frame.xml. В нем мы определяем простой прямоугольник с закругленными углами и прозрачным центром.
In your layout file you add a LinearLayout that contains a standard ImageView, as well as a nested FrameLayout. The FrameLayout uses padding and the custom drawable to give the illusion of rounded corners.
Apply a shape to your imageView as below:
it may be helpful to you friend.
Here is a simple example overriding imageView, you can then also use it in layout designer to preview.
This is for fast solution. Radius is used on all corners and is based of percentage of bitmap width.
I just overrided setImageDrawable and used support v4 method for rounded bitmap drawable.
Preview with imageView and custom imageView:
if your image is on internet the best way is using glide and RoundedBitmapDrawableFactory (from API 21 – but available in support library) like so:
You can try this library – RoundedImageView
A fast ImageView that supports rounded corners, ovals, and circles. A full superset of CircleImageView.
I’ve used it in my project, and it is very easy.
If any of you are facing this problem
Most probably , you are using Android Studio . Due to image re-size and all in Android Studio ,you may encounter this problem. An easy fix to this problem is to decrease the radius of circle in drawCircle() . In my case i use this fix
Using canvas.drawCircle(100, 100, 90, paint); instead of canvas.drawCircle(100, 100, 100, paint); this will definitely solve your problem.
Here is finally edited code:-
Use this to get circular image with border-
Answer for the question that is redirected here: «How to create a circular ImageView in Android?»
If you’re looking for a fast but dirty solution you can use this lib by Vincent Mi.
With the help of glide library and RoundedBitmapDrawableFactory class it’s easy to achieve. You may need to create circular placeholder image.
I’m using a custom view that I layout on top of the other ones and that just draws the 4 small inverted corners in the same color as the background.
- Does not allocate a bitmap.
- Works whatever the View you want to apply the rounded corners.
- Works for all API levels 😉
Wrap the ImageView with CardView and set cardCornerRadius
This isn’t exactly the answer, but it’s a solution that is similar. It may help people who were in the same boat as I was.
My image, an application logo, had a transparent background, and I was applying an XML gradient as the image background. I added the necessary padding/margins to the imageView in XML, then added this as my background:
Quite a lot of answers!
However, what I needed was a coloured circle, behind a transparent image. For anyone who is interested in doing the same…
Источник
