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

<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 подходит для карты, как я этого хочу.

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

как видно,ImageView не вписывается в CardView.
мой вопрос, как я могу сделать это ImageView подходит к макету CardView, когда он имеет закругленные углы.
7 ответов:
вам нужно сделать 2 вещи :
1) Вызов
setPreventCornerOverlap(false)на вашем CardView.2) Поставить округлый Imageview внутри CardView
о округлении вашего imageview, у меня была та же проблема, поэтому я сделал библиотеку, которую вы можете установить разные радиусы на каждом углу. Существует одна хорошая библиотека (Vinc3m1 RoundedImageView), которая поддерживает скругленные углы на ImageView, но она поддерживает только те же радиусы на каждом углы. Но я хотел, чтобы он был округлым только верхний левый и верхний правый углы.
наконец, я получил результат, что я хотел бы ниже.
https://github.com/pungrue26/SelectableRoundedImageView
я получил эту работу, поставив
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.xmlin . Дайте ему радиус, который совпадает с 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