Appcompat CardView y Picasso sin esquinas redondeadas
No sé dónde exactamente debería dirigir este problema, si es mi culpa, hay algo en Picasso Lib Wrong o en la Biblioteca Cardview.
Básicamente tengo un CardView
contiene una imagen (Full Card Covered) y una superposición de TextView
.
- Picasso no conserva la proporción de aspecto al cambiar el tamaño de la imagen
- Memoria de Android y cliente de caché de caché http utilizando Picasso
- Compruebe si la imagen existe en Cache Picasso
- Picasso + convertView: ¿qué estoy haciendo mal aquí?
- Cómo Picasso realmente Cache las imágenes
Al ejecutar el código en un dispositivo Android 5.0 , todo funciona bien y la imagen obtiene sus esquinas redondeadas .
Sin embargo, si lo ejecuto en un dispositivo pre 5.0 , la imagen se superpone al Cardlayout
y no tiene esquinas redondeadas.
Usted puede ver una comparación en esta imagen:
Éstos son algunos fragmentos de código:
Layout_row.xml
<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/pandaImage" android:layout_width="match_parent" android:layout_height="200dp" android:layout_centerInParent="true" android:scaleType="centerCrop" /> <TextView android:id="@+id/pandaName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBottom="@+id/pandaImage" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:background="@color/photo_tint" android:clickable="true" android:focusable="true" android:gravity="center" android:textColor="@android:color/white" android:textSize="24sp" /> </RelativeLayout>
And the Recycler Adapter Cargando imagen:
@Override public void onBindViewHolder(ViewHolder viewHolder, int i) { Photo p = photos.get(i); Picasso.with(mContext).load(p.getUrl()).fit().into(viewHolder.mImage); viewHolder.mPandaName.setText(p.getTitle()); }
- Uso del objetivo en Picasso en el adaptador
- Android: utilice picasso para cargar imágenes sin almacenarlas en caché
- Picasso Image library - Menor calidad manteniendo la relación de aspecto y las dimensiones de la imagen
- Cómo obtener un contexto en un adaptador de vista de reciclador
- Picasso no puede cargar imágenes grandes (de la cámara y Uri local)
- Picasso - obtener el camino de la imagen cargada
- Imágenes que no se cargan con Picasso sin error
- Android: falla en la imagen de carga de Picasso. Cómo mostrar mensaje de error
Según los documentos, esto como diseñado:
Debido a la naturaleza costosa del recorte de esquina redondeado, en las plataformas antes de L, CardView no acorta a sus hijos que se cruzan con las esquinas redondeadas. En su lugar, agrega relleno para evitar dicha intersección (consulte setPreventCornerOverlap (boolean) para cambiar este comportamiento).
Vea los CardView
para más información.
Como @kcoppock mencionado, esto es por diseño.
Esto es lo que haría en esta situación.
1) Puede utilizar la interfaz de transformación de Picasso para especificar la transformación personalizada para su imagen (en nuestro caso, la imagen con esquinas redondeadas)
2) Aplicar esta transformación a la solicitud de Picasso en dispositivos pre-L
3) Puesto que CardView añade un poco de margen para la imagen – deshágase de ella en dispositivos pre-L llamando a setPreventOverlap(false)
Volver al código:
Transformación personalizada:
public class RoundedTransformation implements com.squareup.picasso.Transformation { private final int radius; private final int margin; public RoundedTransformation(final int radius, final int margin) { this.radius = radius; this.margin = margin; } @Override public Bitmap transform(final Bitmap source) { final Paint paint = new Paint(); paint.setAntiAlias(true); paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint); if (source != output) { source.recycle(); } return output; } @Override public String key() { return "rounded(radius=" + radius + ", margin=" + margin + ")"; } }
Picasso:
//feel free to play with radius to match your CardView Picasso.with(mContext).load(p.getUrl()).transform(new RoundedTransformation(12, 0)).fit().into(viewHolder.mImage);
Si desea tener una solución global para ese problema, puede utilizar Carbon CardView . Corrige correctamente su contenido en las esquinas redondeadas de todos los dispositivos de vuelta a Froyo. Vea la imagen:
Funciona para mí así:
- Reemplace el
ImageView
porRoundedImageView
( https://github.com/vinc3m1/RoundedImageView ). - Establezca el atributo
riv_corner_radius
en elRoundedImageView
para que sea igual al de la esquina deCardView
. - Defina
cardPreventCornerOverlap
como false enCardView
(app:cardPreventCornerOverlap="false"
). - Se ve igual en L y pre-L ahora.
Utilice el siguiente código.
Importante: no establezca el fondo para ImageView en XML.
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="130dp" app:cardCornerRadius="5dp" app:cardElevation="0dp" app:cardUseCompatPadding="true"> <RelativeLayout android:id="@+id/rl_target_marry" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@+id/textView2" > <ImageView android:id="@+id/img_target_marry" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:foreground="?attr/selectableItemBackground"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_gravity="right|center_vertical" android:layout_marginRight="16dp" android:text="Marry" android:textColor="@color/colorWhite" android:textSize="28sp"/> </FrameLayout> </RelativeLayout> </android.support.v7.widget.CardView>
- Enviar notificaciones cuando la aplicación esté cerrada
- Cordova build –release android siempre elige el nivel de api más alto