web-dev-qa-db-de.com

Passen Sie ImageView auf die Breite von CardView an

Ich habe eine CardView mit abgerundeten Ecken, ich möchte oben eine ImageView haben, wie in dem Beispiel gezeigt, das den Materialdesign-Richtlinien unten entnommen ist.

components_cards8.png

<Android.support.v7.widget.CardView xmlns:card_view="http://schemas.Android.com/apk/res-auto"
     Android:id="@+id/card_view"
     Android:layout_width="wrap_content"
     Android:layout_height="wrap_content"
     card_view:cardCornerRadius="4dp">

     <!-- ... --> 
 </Android.support.v7.widget.CardView>

Dann in der CardView habe ich diese ImageView

<ImageView
    Android:id="@+id/imageView"
    Android:layout_width="fill_parent"
    Android:layout_height="150dp"
    Android:layout_alignParentLeft="true"
    Android:layout_alignParentStart="true"
    Android:layout_alignParentTop="true"
    Android:scaleType="centerCrop"
    Android:src="@drawable/default_cover" />

Wenn ich card_view:cardCornerRadius auf 0dp eingestellt habe, passt die ImageView die Karte so, wie ich es möchte.

image_1

Die Material Design Guidelines besagen jedoch, dass Karten abgerundete Ecken haben sollten und keine eckigen Ecken.

Mein Problem ist, wenn ich card_view:cardCornerRadius auf etwas anderes als 0dp stelle, z. 4dp, dann passiert folgendes:

image_2

Wie zu sehen ist, passt die ImageView nicht in die CardView.

Meine Frage ist, wie kann ich diese ImageView an das Layout der CardView anpassen, wenn sie abgerundete Ecken hat.

56
Dan

Sie müssen zwei Dinge tun:

1) Rufen Sie setPreventCornerOverlap(false) auf Ihrem CardView auf.

2) Fügen Sie gerundet Imageview in CardView ein

Beim Abrunden Ihrer Bildansicht hatte ich das gleiche Problem, also habe ich eine Bibliothek erstellt, in der Sie unterschiedliche Radien an jeder Ecke einstellen können. Es gibt eine gute Bibliothek (ved3m1s RoundedImageView), die abgerundete Ecken in ImageView unterstützt, aber an allen Ecken nur die gleichen Radien. Ich wollte, dass es abgerundet ist nur obere linke und obere rechte Ecke.

Endlich bekam ich das Ergebnis, was ich unten gerne wollte.

https://github.com/pungrue26/SelectableRoundedImageView

Rounded ImageView inside CardView

53
김준호

Wenn Ihre Bildgröße (Breite) mit Ihrer ImageView-Breite festgelegt ist, müssen Sie lediglich Ihr ImageView-Attribut in Folgendes ändern:

Android:scaleType="fitXY"

Das ist. Keine zusätzliche Bildeckenrundung, keine anstrengende Arbeit. Daneben effizient für die App-Leistung.

Hinweis: Mein Vorschlag eignet sich möglicherweise nicht für kleine Bilder mit großer ImageView.

18
james

 CardView with ImageView

Ich habe dieses Problem gelöst, indem ich eine RoundedImageView in eine CardView eingefügt habe. Außerdem müssen Sie die entsprechenden CardView-Attribute festlegen. 

https://medium.com/@etiennelawlor/layout-tips-for-pre-and-post-Lollipop-bcb2e4cdd6b2#.kmb24wtkk

15
toobsco42

EDIT 2015/09/29

https://github.com/vinc3m1/RoundedImageView Unterstützung für Rundung ausgewählter Ecken hinzugefügt

Sie können auch Makeramen RoundedImageView https://github.com/vinc3m1/RoundedImageView , Verwenden und die automatische Auffüllung in CardView für die Verwendung vor dem Lollipop entfernen 

yourCardView.setPreventCornerOverlap (false); 

Und dann setzen Sie die Auffüllung, die Sie benötigen, um Schatten von Cardview anzuzeigen

6
Penzzz

Erstellen Sie einen bck_rounded.xml im drawable-Ordner. Vergeben Sie einen Radius, der dem card_view entspricht.

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
        <corners Android:radius="4dp" />
    </shape>

Bewerben Sie sich in Ihrem imageView: Android:background="@drawable/bck_rounded"

3
Mohammed Ali

Ich habe das Problem mit der Einstellung gelöst
1) app:cardUseCompatPadding="false"
2) Einstellen eines gerundeten imageView-Hintergrunds

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <corners Android:radius="4dp" />
</shape>
1
S Ravi Kumar

Manchmal hilft es auch, Glide anstelle von Picasso zum Laden von Bildern zu verwenden.

0
Bek

ich versuche, eine Kombination aus Karten- und Bildansicht zu verwenden. Das wird dann so aussehen:

    Android.support.v7.widget.CardView
            Android:layout_width="match_parent"
            Android:layout_height="160dp"
            Android:layout_marginStart="16dp"
            Android:layout_marginLeft="16dp"
            Android:layout_marginTop="8dp"
            Android:layout_marginEnd="16dp"
            Android:layout_marginRight="16dp"
            app:cardCornerRadius="8dp"
            Android:elevation="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView">

            <ImageView
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:src="@drawable/kmp_warna1"
                Android:scaleType="centerCrop"/>

  </Android.support.v7.widget.CardView>

Ich füge nur den Eckenradius und das Höhenattribut in der Kartenansicht und scaletype = centerCrop in der Bildansicht hinzu

Hoffe es wird helfen

0
Cevin Ways

Sie müssen Ihre ImageView anpassen.

import Android.content.Context;
import Android.graphics.Bitmap;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Matrix;
import Android.graphics.Paint;
import Android.graphics.Path;
import Android.graphics.RectF;
import Android.graphics.drawable.BitmapDrawable;
import Android.graphics.drawable.Drawable;
import Android.util.AttributeSet;

public class RoundedImageView extends Android.support.v7.widget.AppCompatImageView {
private Paint mPaint;
private Path mPath;
private Bitmap mBitmap;
private Matrix mMatrix;
private int mRadius = convertDpToPixel(10);
private int mWidth;
private int mHeight;
private Drawable mDrawable;

 public RoundedImageView(Context context) {
    super(context);
    init();
}

public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public RoundedImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mPaint = new Paint();
    mPaint.setColor(Color.WHITE);

    mPath = new Path();
}

public int convertDpToPixel(int dp) {
    DisplayMetrics displayMetrics = Resources.getSystem().getDisplayMetrics();
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics);
}

@Override
public void setImageDrawable(Drawable drawable) {
    mDrawable = drawable;
    if (drawable == null) {
        return;
    }
    mBitmap = drawableToBitmap(drawable);
    int bDIWidth = mBitmap.getWidth();
    int bDIHeight = mBitmap.getHeight();
    //Fit to screen.
    float scale;
    if ((mHeight / (float) bDIHeight) >= (mWidth / (float) bDIWidth)) {
        scale = mHeight / (float) bDIHeight;
    } else {
        scale = mWidth / (float) bDIWidth;
    }
    float borderLeft = (mWidth - (bDIWidth * scale)) / 2;
    float borderTop = (mHeight - (bDIHeight * scale)) / 2;
    mMatrix = getImageMatrix();
    RectF drawableRect = new RectF(0, 0, bDIWidth, bDIHeight);
    RectF viewRect = new RectF(borderLeft, borderTop, (bDIWidth * scale) + borderLeft, (bDIHeight * scale) + borderTop);
    mMatrix.setRectToRect(drawableRect, viewRect, Matrix.ScaleToFit.CENTER);
    invalidate();
}

private Bitmap drawableToBitmap(Drawable drawable) {
    Bitmap bitmap;
    if (drawable instanceof BitmapDrawable) {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
        if (bitmapDrawable.getBitmap() != null) {
            return bitmapDrawable.getBitmap();
        }
    }
    if (drawable.getIntrinsicWidth() <= 0 || drawable.getIntrinsicHeight() <= 0) {
        bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888); // Single color bitmap will be created of 1x1 pixel
    } else {
        bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
    }
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);
    return bitmap;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mWidth = MeasureSpec.getSize(widthMeasureSpec);
    mHeight = MeasureSpec.getSize(heightMeasureSpec);
    if ((mDrawable != null) && (mHeight > 0) && (mWidth > 0)) {
        setImageDrawable(mDrawable);
    }
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mBitmap == null) {
        return;
    }
    canvas.drawColor(Color.TRANSPARENT);
    mPath.reset();
    mPath.moveTo(0, mRadius);
    mPath.lineTo(0, canvas.getHeight());
    mPath.lineTo(canvas.getWidth(), canvas.getHeight());
    mPath.lineTo(canvas.getWidth(), mRadius);
    mPath.quadTo(canvas.getWidth(), 0, canvas.getWidth() - mRadius, 0);
    mPath.lineTo(mRadius, 0);
    mPath.quadTo(0, 0, 0, mRadius);
    canvas.drawPath(mPath, mPaint);
    canvas.clipPath(mPath);
    canvas.drawBitmap(mBitmap, mMatrix, mPaint);
}
}

Und in layout.xml

<com.example.widget.RoundedImageViewmageView
            Android:id="@+id/ivProductImg"
            Android:layout_width="match_parent"
            Android:layout_height="150dp"
            Android:scaleType="fitXY"
            />
0
Vishal G. Gohel