如何在 Android 中仅在侧面适合父布局时将 ImageView 的边角倒圆角？

Question

我是 Android 的初学者。现在我正在学习如何正确设计 Android 应用程序。但是我在使用 ImageView 时遇到了问题。我想把 ImageView 的角圆化，但只在一侧。

这张图片是我想要得到的：

如您所见，只有 ImageView 的左侧角是圆角以适合父视图。

这就是我现在得到的：

这是我的列表视图行的 XML 布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/list_row_bg"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:background="@color/colorPrimary"
            android:id="@+id/row_image"
            android:scaleType="fitCenter"
            android:layout_width="100dp"
            android:layout_height="100dp" />
    </LinearLayout>

    <LinearLayout
        android:padding="@dimen/list_item_content_padding"
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/row_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/row_duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/row_file_size"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/row_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

我关注了this tutorial。但是 ImageView 包含填充。但是当我删除填充时，它无法正常工作。

Answer 1

创建一个 xml 并将其设置为您的主布局背景

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ff000000"/>    

    <stroke android:width="1dp"
            android:color="#ff000000"
            />

    <padding android:left="1dp"
             android:top="1dp"
             android:right="1dp"
             android:bottom="1dp"
             /> 

    <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
     android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 
</shape>

更新

<ImageView
            android:background="@color/colorPrimary"
            android:id="@+id/row_image"
            android:scaleType="fitCenter"
            android:layout_margin="10"//add this
            android:layout_width="100dp"
            android:layout_height="100dp" />

Answer 2

为此，您必须创建一个可绘制对象 xml 并将其设置为要赋予该形状的视图的背景。

<corners 
  android:bottomRightRadius="0.1dp" android:bottomLeftRadius="2dp" 
  android:topLeftRadius="2dp" android:topRightRadius="0.1dp" />

Answer 3

我认为您应该在加载图像时应用转换。例如，如果您使用 picasso 加载图像，您可以应用此转换：

基础class:

public class RoundedCornersBitmap implements Transformation {

private static final float DEFAULT_RADIUS = 5.f;
private static final int DEFAULT_BORDER_COLOR = Color.WHITE;
private static final int DEFAULT_STROKE_WIDTH = 3;

protected float mCornerRadius;
protected int mBorderColor;
protected int mStrokeWidth;

@Override
public String key() {
    return "roundedCorners()";
}

public RoundedCornersBitmap() {
    mCornerRadius = DEFAULT_RADIUS;
    mBorderColor = DEFAULT_BORDER_COLOR;
    mStrokeWidth = DEFAULT_STROKE_WIDTH;
}

public RoundedCornersBitmap(float cornderRadius, int borderColor, int strokeWidth) {
    mCornerRadius = cornderRadius;
    mBorderColor = borderColor;
    mStrokeWidth = strokeWidth;
}

@Override
public Bitmap transform(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final Paint paint = new Paint();
    final Rect rect = new Rect(mStrokeWidth, mStrokeWidth, (bitmap.getWidth() - mStrokeWidth), bitmap.getHeight()
            - mStrokeWidth);
    final RectF rectF = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());

    paint.setAntiAlias(true);
    paint.setColor(mBorderColor);
    paint.setStrokeWidth(3);

    canvas.drawARGB(0, 0, 0, 0);
    canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);
    //canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);

    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    bitmap.recycle();
    return output;
}

/**
 * @return the mCornerRadius
 */
public float getCornerRadius() {
    return mCornerRadius;
}

/**
 * @param mCornerRadius
 *            the mCornerRadius to set
 */
public void setCornerRadius(float mCornerRadius) {
    this.mCornerRadius = mCornerRadius;
}

/**
 * @return the mBorderColor
 */
public int getBorderColor() {
    return mBorderColor;
}

/**
 * @param mBorderColor
 *            the mBorderColor to set
 */
public void setBorderColor(int mBorderColor) {
    this.mBorderColor = mBorderColor;
}

/**
 * @return the mStrokeWidth
 */
public int getStrokeWidth() {
    return mStrokeWidth;
}

/**
 * @param mStrokeWidth
 *            the mStrokeWidth to set
 */
public void setStrokeWidth(int mStrokeWidth) {
    this.mStrokeWidth = mStrokeWidth;
}

}

左圆角位图:

public class LeftRoundedCornersBitmap extends RoundedCornersBitmap {

    public LeftRoundedCornersBitmap() {
        super();
    }

    public LeftRoundedCornersBitmap(float cornderRadius, int borderColor, int strokeWidth) {
        super(cornderRadius, borderColor, strokeWidth);
    }

    @Override
    public Bitmap transform(Bitmap bitmap) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

       final Paint paint = new Paint();
       final Rect rect = new Rect(mStrokeWidth, mStrokeWidth, (bitmap.getWidth() - mStrokeWidth), bitmap.getHeight()
            - mStrokeWidth);
       final RectF rectF = new RectF(rect);
       final Rect topRightRect = new Rect(bitmap.getWidth() / 2, 0, bitmap.getWidth(), bitmap.getHeight() / 2);
       final Rect bottomRect = new Rect(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth(), bitmap.getHeight());

       paint.setAntiAlias(true);
       paint.setColor(mBorderColor);
       paint.setStrokeWidth(3);

       canvas.drawARGB(0, 0, 0, 0);
       canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);
       canvas.drawRect(topRightRect, paint);
       canvas.drawRect(bottomRect, paint);

       paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
       canvas.drawBitmap(bitmap, rect, rect, paint);
       bitmap.recycle();
       return output;
   }
}

gradle 文件中的 Picasso 依赖项：

compile 'com.squareup.picasso:picasso:2.5.2'

示例：

Picasso.with(context).load(imageUrl).transform(new LeftRoundedCornersBitmap()).into(youImageView);

如何在 Android 中仅在侧面适合父布局时将 ImageView 的边角倒圆角？

How to I round the corners of ImageView for only on side fit to the parent layout in Android?

android

android-layout

android-imageview

android-view