Imagen de Android con relación de aspecto y borde correctos

Quiero tener una caja de tamaño fijo 120×180 dp que contiene una imagen con la relación de aspecto correcta y un borde pintado a su alrededor.

XML:

<android.support.constraint.ConstraintLayout android:layout_width="120dp" android:layout_height="180dp" app:layout_gravity="center"> <ImageView android:id="@+id/picture" android:layout_width="0dp" android:layout_height="0dp" android:background="@drawable/game_border" app:srcCompat="@drawable/pic_lion" android:scaleType="centerInside" /> 

Diseño de Game_border:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle" > <solid android:color="#55111111" /> <padding android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp" /> <corners android:radius="6dp" /> </shape> </item> </layer-list> 

Este ajuste scaleType funciona bien porque rellena el interior de la baldosa completa y el fondo no se anula. Pero para demostrar la relación de aspecto incorrecta he aumentado el margen superior. Vea la imagen abajo. Traté de valores restantes, pero ya sea pintar sobre el borde o no llenar parte interna completa.

¿Cómo puedo tener la baldosa que tiene el borde alrededor de una parte de la imagen con la relación de aspecto correcta? La imagen se puede cortar. Creo que esta técnica se llama centro de cultivo. Lo encontré en la biblioteca de Picasso.

Introduzca aquí la descripción de la imagen

FitXY deforma la imagen:

Aspecto malo

Imagen pintada manualmente cuando recorté la imagen mientras conservaba la relación de aspecto. Lo siento, parece feo, pero la recompensa termina muy pronto.

Introduzca aquí la descripción de la imagen

La respuesta de Bjorn:

Introduzca aquí la descripción de la imagen

Rahul respuesta no tiene frontera inferior

Introduzca aquí la descripción de la imagen

6 Solutions collect form web for “Imagen de Android con relación de aspecto y borde correctos”

Utilice un Framelayout simple para el fondo y use centerCrop para el ImageView:

 <FrameLayout android:layout_width="120dp" android:layout_height="180dp" android:background="@drawable/background_with_rounded_corners" android:padding="4dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/> </FrameLayout> 

Y mover el relleno en el FrameLayout, por lo que para su archivo de recursos de fondo que sólo necesita color y esquinas:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#55111111" /> <corners android:radius="6dp" /> </shape> </item> </layer-list> 
 <ImageView android:id="@id/img" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" /> 

ScaleType = "fitCenter" (predeterminado cuando se omite)

  • Lo hará tan amplio como lo permita el padre y subir / bajar la escala según sea necesario, manteniendo la relación de aspecto.

    ScaleType = "centerInside"

  • Si el ancho intrínseco de src es más pequeño que el ancho de los padres, centrará la imagen horizontalmente

  • F el ancho intrínseco de src es mayor que el ancho de los padres lo hará tan amplio como lo permita el padre y reduciendo la escala de la relación de aspecto.

No importa si usas android:src o ImageView.setImage* .key es android: adjustViewBounds

O utilizando el CardView también puede hacer esquinas redondeadas para imageView.

  <android.support.v7.widget.CardView android:layout_width="120dp" android:layout_height="180dp" android:layout_gravity="center" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" android:layout_marginTop="6dp" app:cardCornerRadius="@dimen/_5dp" app:cardBackgroundColor="#D3D3D3" app:cardPreventCornerOverlap="false" card_view:cardPreventCornerOverlap="false"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="3dp" android:background="@drawable/image" android:scaleType="fitXY" /> </android.support.v7.widget.CardView> 

Tener la esquina redondeada ImageView puede ser un poco de una tarea dolorosa. Lo que puede hacer es utilizar una biblioteca que admita esquinas redondeadas y bordes. Por ejemplo

https://github.com/vinc3m1/RoundedImageView

Si usted entiende lo que hace entonces usted puede crear fácilmente su propio ImageView. El truco consiste en anular el método onDraw del ImageView y el clip mediante rutas. Puedes encontrar algunos artículos relacionados con este tema.

Puede utilizar dos imágenes distintas: una para el marco y otra para la imagen. De esta manera puede utilizar el ScaleType "centerCrop" en la imagen ImageView, y la imagen resultante siempre estará en la relación de aspecto deseada con un borde alrededor de ella.

Sólo asegúrese de que las restricciones en ambos ImageViews se establezcan de modo que ambos ImageViews abarquen el padre.

Código:

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="120dp" android:layout_height="180dp"> <ImageView android:layout_width="0dp" android:layout_height="0dp" app:srcCompat="@drawable/game_border" android:id="@+id/frame" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> <ImageView android:layout_width="0dp" android:layout_height="0dp" app:srcCompat="@drawable/lion" android:id="@+id/picture" android:scaleType="centerCrop" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="4dp" android:layout_marginStart="4dp" android:layout_marginLeft="4dp" android:layout_marginEnd="4dp" android:layout_marginRight="4dp" android:layout_marginBottom="4dp" /> 

Resultado: Picture_with_border

Ya que ya está usando ConstraintLayout , hay esta práctica aplicación de atributos : layout_constraintDimensionRatio que le permite especificar dimensiones de relación de aspecto. Aquí está el código de diseño para la imagen de abajo.

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/picture" android:layout_width="120dp" android:layout_height="0dp" android:background="@drawable/game_border" android:scaleType="centerInside" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="h, 2:3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/vertical_deploy" /> </android.support.constraint.ConstraintLayout> 

ejemplo

Prueba esto:

 <LinearLayout android:layout_width="120dp" android:layout_height="180dp" android:background="@drawable/game_border"> <ImageView android:id="@+id/picture" android:layout_width="match_parent" android:layout_height="match_parent" app:srcCompat="@drawable/pic_lion" android:scaleType="centerCrop" /> </LinearLayout> 

Esperanza le ayudará!

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.