Сделать графическое представление ширине в CardView



у меня есть CardView с закругленными углами, я хочу иметь ImageView вверху, как показано в примере, взятом из приведенных ниже руководящих принципов проектирования материалов.



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>


затем внутри CardView у меня есть это 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" />


если у меня есть card_view:cardCornerRadius значение 0dp тут ImageView подходит для карты, как я этого хочу.



image_1



однако руководство по дизайну материалов заявляют, что карты должны иметь закругленные углы, а не квадратные углы.



проблема у меня есть, когда я установил card_view:cardCornerRadius к чему-то другому, чем 0dp, например,4dp, то происходит следующее:



image_2



как видно,ImageView не вписывается в CardView.



мой вопрос, как я могу сделать это ImageView подходит к макету CardView, когда он имеет закругленные углы.

702   7  

7 ответов:

вам нужно сделать 2 вещи :

1) Вызов setPreventCornerOverlap(false) на вашем CardView.

2) Поставить округлый Imageview внутри CardView

о округлении вашего imageview, у меня была та же проблема, поэтому я сделал библиотеку, которую вы можете установить разные радиусы на каждом углу. Существует одна хорошая библиотека (Vinc3m1 RoundedImageView), которая поддерживает скругленные углы на ImageView, но она поддерживает только те же радиусы на каждом углы. Но я хотел, чтобы он был округлым только верхний левый и верхний правый углы.

наконец, я получил результат, что я хотел бы ниже.

https://github.com/pungrue26/SelectableRoundedImageView

Rounded ImageView inside CardView

CardView with ImageView

я получил эту работу, поставив RoundedImageView внутри CardView. Также вам нужно установить соответствующий CardView атрибуты.

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

если ваш размер изображения (ширина) фиксируется с ImageView ширина, вам просто нужно только изменить свой ImageView атрибут :

android:scaleType="fitXY"

что есть. Нет дополнительного закругления угла изображения, нет напряженной работы. Кроме того, он эффективен для производительности приложения.

Примечание: мое предложение может не подходить для небольших изображений с большим размером ImageView.

изменить 2015/09/29

https://github.com/vinc3m1/RoundedImageView добавлена поддержка округления выбранных углов

вы также можете использовать makeramen RoundedImageView https://github.com/vinc3m1/RoundedImageView, и чтобы удалить автоматическое заполнение в CardView для предварительного использования леденца

yourCardView.setPreventCornerOverlap (false);

а затем установить отступ вам нужно, чтобы показать тени cardview

сделать bck_rounded.xml in . Дайте ему радиус, который совпадает с card_view.

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

применить внутри вашего imageView:android:background="@drawable/bck_rounded"

я решил проблему с установкой
1) app:cardUseCompatPadding="false"
2) Установка округлым imageView фон

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="4dp" />
</shape>

вы должны настроить свой ImageView.

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);
}
}

и в макете.xml

<com.example.widget.RoundedImageViewmageView
            android:id="@+id/ivProductImg"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="fitXY"
            />

Comments

    Ничего не найдено.