En Android, un ImageView es un rectángulo por defecto. ¿Cómo puedo convertirlo en un rectángulo redondeado (recortar las 4 esquinas de mi mapa de bits para que sean rectángulos redondeados) en ImageView?
573
En Android, un ImageView es un rectángulo por defecto. ¿Cómo puedo convertirlo en un rectángulo redondeado (recortar las 4 esquinas de mi mapa de bits para que sean rectángulos redondeados) en ImageView?
ShapeableImageView
que hacer circular o redondeada imageView stackoverflow.com/a/61086632/7666442Respuestas:
Esto es bastante tarde en la respuesta, pero para cualquier otra persona que esté buscando esto, puede hacer el siguiente código para redondear manualmente las esquinas de sus imágenes.
http://www.ruibm.com/?p=184
Este no es mi código, pero lo he usado y funciona de maravilla. Lo utilicé como ayudante dentro de una clase ImageHelper y lo extendí solo un poco para pasar la cantidad de plumaje que necesito para una imagen determinada.
El código final se ve así:
¡Espero que esto ayude a alguien!
fuente
Si bien la respuesta anterior funciona, Romain Guy (un desarrollador principal de Android) muestra un mejor método en su blog que usa menos memoria al usar un sombreador que no crea una copia del mapa de bits. La esencia general de la funcionalidad está aquí:
Las ventajas de esto sobre otros métodos es que:
He creado un RoundedImageView basado en este código que envuelve esta lógica en un ImageView y agrega el
ScaleType
soporte adecuado y un borde redondeado opcional.fuente
/ example / res / layout / rounded_item.xml
¿por qué especifica una imagen src cuando todas sus fuentes están codificadas? Buena demostración, simplemente exagerada.Otra forma fácil es usar un CardView con el radio de la esquina y un ImageView dentro:
fuente
El recorte a formas redondeadas se agregó a la
View
clase en API 21.Solo haz esto:
res / drawable / round_outline.xml
android:background="@drawable/round_outline"
android:clipToOutline="true"
Desafortunadamente, hay un error y ese atributo XML no se reconoce. Afortunadamente, todavía podemos configurar el recorte en Java:
ImageView.setClipToOutline(true)
Así es como se verá:
Nota:
Este método funciona para cualquier forma dibujable (no solo redondeada). Recortará el ImageView a cualquier contorno de forma que haya definido en su xml Drawable.
Nota especial sobre ImageViews
setClipToOutline()
solo funciona cuando el fondo de la Vista está configurado en una forma dibujable. Si existe esta forma de fondo, Ver trata el contorno de la forma como los bordes con fines de recorte y sombreado.Esto significa que si desea usar
setClipToOutline()
para redondear las esquinas en un ImageView, su imagen debe configurarse enandroid:src
lugar deandroid:background
(ya que el fondo debe configurarse en su forma redondeada). Si DEBE usar el fondo para configurar su imagen en lugar de src, puede usar esta solución alternativa:fuente
android:clipToOutline
, uno debe usarandroid:outlineProvider="background"
.En la v21 de la biblioteca de Soporte ahora hay una solución para esto: se llama RoundedBitmapDrawable .
Básicamente es como un Drawable normal, excepto que le das un radio de esquina para el recorte con:
Entonces, comenzando con
Bitmap src
un objetivoImageView
, se vería así:fuente
android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory
así quev4
también es compatible con ella.v4
biblioteca de soporte, pero no hastaREVISION 21
la biblioteca de soportescaleType
centerCrop
(biblioteca de soporte v25.3.1)He hecho por Custom ImageView:
Cómo utilizar:
Salida:
Espero que esto te ayude.
fuente
Canvas.clipPath()
puede causarjava.lang.UnsupportedOperationException
en algunos casos. Ver stackoverflow.com/questions/13248904/…android:background
, pero noandroid:src
.Una solución rápida xml -
Puede establecer su ancho, altura y radio deseados en CardView y scaleType en ImageView.
Con AndroidX, use
<androidx.cardview.widget.CardView>
fuente
scaleType="fitXY"
que no se ve bien @ThemBonesDescubrí que ambos métodos fueron muy útiles para encontrar una solución de trabajo. Aquí está mi versión compuesta, que es independiente de píxeles y le permite tener algunas esquinas cuadradas con el resto de las esquinas que tienen el mismo radio (que es el caso de uso habitual). Gracias a las dos soluciones anteriores:
Además, anulé ImageView para poner esto para poder definirlo en xml. Es posible que desee agregar algo de la lógica que hace la súper llamada aquí, pero lo he comentado ya que no es útil en mi caso.
¡Espero que esto ayude!
fuente
Imagen redondeada Usando
ImageLoader
aquíCrear
DisplayImageOptions
:O puede usar la
Picasso
Biblioteca desde Square.puedes descargar el archivo de Transformación Redondeada aquí
fuente
Como todas las respuestas me parecieron demasiado complicadas solo para las esquinas redondeadas, pensé y encontré otra solución que creo que vale la pena compartir, solo con XML en caso de que tenga algo de espacio alrededor de la imagen:
Cree una forma bordeada con contenido transparente como este:
Luego, en un RelativeLayout, primero puede colocar su imagen y luego en la misma ubicación sobre la forma con otra ImageView. La forma de la cubierta debe ser mayor en tamaño por la cantidad del ancho del borde. Tenga cuidado de tomar un radio de esquina más grande ya que el radio exterior está definido, pero el radio interior es lo que cubre su imagen.
Espero que ayude a alguien también.
Edite según la solicitud de CQM el ejemplo de diseño relativo:
fuente
Comenzando con la versión
1.2.0-alpha03
de la Biblioteca de Componentes de Materiales, está la nuevaShapeableImageView
.Puedes usar algo como:
con:
O programáticamente:
fuente
Mi implementación de ImageView con widget de esquinas redondeadas, que (abajo || arriba) dimensiona la imagen a las dimensiones requeridas. Utiliza el código de CaspNZ.
fuente
Recientemente, hay otra forma: usar la API generada de Glide . Requiere un poco de trabajo inicial, pero luego le brinda todo el poder de Glide con la flexibilidad de hacer cualquier cosa porque redacta el código real, así que creo que es una buena solución a largo plazo. Además, el uso es muy simple y ordenado.
Primero, configure Glide versión 4+:
Luego cree la clase de módulo de aplicación de Glid para activar el procesamiento de anotaciones:
Luego cree la extensión Glide que realmente hace el trabajo. Puedes personalizarlo para hacer lo que quieras:
Después de agregar estos archivos, cree su proyecto.
Luego úsalo en tu código así:
fuente
RequestOptions
yoptions
en los params@GlideExtension
clase anotada y simplemente fui con.transform(new RoundedCorners(px))
wherepx
is the same (int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
).Hay una biblioteca genial que te permite dar forma a las vistas de imágenes.
Aquí hay un ejemplo:
Definición de forma:
Resultado:
fuente
Aquí hay un ejemplo simple que reemplaza imageView, luego también puede usarlo en el diseñador de diseño para obtener una vista previa.
Esto es para una solución rápida. El radio se usa en todas las esquinas y se basa en el porcentaje del ancho del mapa de bits.
Simplemente anulé
setImageDrawable
y utilicé el método de soporte v4 para el mapa de bits redondeado dibujable.Uso:
Vista previa con imageView e imageView personalizado:
fuente
Debes extender
ImageView
y dibujar tu propio rectángulo redondeado.Si desea un marco alrededor de la imagen, también puede superponer el marco redondeado en la parte superior de la vista de imagen en el diseño.
[editar] Superponga el marco para optar por la imagen original, usando un
FrameLayout
por ejemplo. El primer elemento de laFrameLayout
será la imagen que desea mostrar redondeada. Luego agregue otroImageView
con el marco. El segundoImageView
se mostrará en la parte superior del originalImageView
y, por lo tanto, Android dibujará su contenido sobre el originalImageView
.fuente
FrameLayout
poner unImageView
y agregar otroImageView
con el marco redondeado. De esa manera, el primeroImageView
mostrará la imagen seleccionada y el segundoImageFrame
mostrará el marco redondeado.Romain Guy está donde está.
Versión reducida de la siguiente manera.
fuente
Esta solución xml pura fue lo suficientemente buena en mi caso. http://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/
EDITAR
Aquí está la respuesta en pocas palabras:
En la carpeta / res / drawable, cree un archivo frame.xml. En él, definimos un rectángulo simple con esquinas redondeadas y un centro transparente .
En su archivo de diseño, agrega un LinearLayout que contiene un ImageView estándar, así como un FrameLayout anidado. FrameLayout utiliza relleno y el dibujo personalizado para dar la ilusión de esquinas redondeadas.
fuente
Apoyando a George Walters II arriba, tomé su respuesta y la extendí un poco para ayudar a redondear esquinas individuales de manera diferente. Esto podría optimizarse un poco más (algunas de las referencias objetivo se superponen), pero no mucho.
Sé que este hilo es un poco viejo, pero es uno de los mejores resultados para las consultas en Google sobre cómo redondear las esquinas de ImageViews en Android.
fuente
Aplique una forma a su
imageView
como a continuación:Puede ser útil para tu amigo.
fuente
¿Por qué no hacer clipping
draw()
?Aquí está mi solución:
Código:
fuente
Lo siguiente crea un objeto de diseño de rectángulo redondeado que dibuja un rectángulo redondeado alrededor de los objetos secundarios que se colocan en él. También muestra cómo crear vistas y diseños mediante programación sin usar los archivos xml de diseño.
La clase para el objeto de diseño RoundedRectangle es como se define aquí:
fuente
Kotlin
Para hacer
ImageView
Circular podemos cambiarcornerRadius
con:fuente
Muchas gracias por la primera respuesta. Aquí hay una versión modificada para convertir una imagen rectangular en una cuadrada (y redondeada) y el color de relleno se pasa como parámetro.
fuente
Si está utilizando Glide Library, esto sería útil:
fuente
si su imagen está en Internet, la mejor manera es usar glide y
RoundedBitmapDrawableFactory
(desde API 21, pero disponible en la biblioteca de soporte) de esta manera:fuente
centerCrop
puede usar solo
ImageView
en su diseño y usarglide
, puede aplicar esquinas redondeadas con este método.primero en tu gradle escribe,
para imagen con esquinas redondeadas,
método de llamada:
fuente
ImageView
.Responda a la pregunta que se redirige aquí: "¿Cómo crear un ImageView circular en Android?"
fuente
Con la ayuda de la biblioteca glide y la clase RoundedBitmapDrawableFactory es fácil de lograr. Es posible que deba crear una imagen de marcador de posición circular.
fuente
Para los que usan Glide y Kotlin, puedes lograrlo extendiendo
RequestBuilder
y usar como;
fuente
roundCorners
como arriba? @ Dr.aNdRO