如何创建底部带弧度的ImageView？求实现方向指引

Hey there! Creating an ImageView with a curved bottom edge that matches your design mockup is totally achievable—let me break down both quick library solutions and a custom implementation so you can choose what works best for your project.

If you want to avoid writing custom code, these battle-tested libraries make it a breeze:

• ShapeImageView: This library supports all kinds of custom shapes, including bottom curves. Just add it to your project, then set attributes like app:shape_bottomLeftRadius and app:shape_bottomRightRadius in your layout to define the curve size.
• RoundedImageView: Despite the name, it lets you set rounded corners individually. Use app:riv_bottom_left_radius and app:riv_bottom_right_radius to target only the bottom edges—super straightforward.

If you prefer to build it yourself (no external dependencies!), here’s a step-by-step approach:

Step 1: Create the Custom View Class #

Extend AppCompatImageView and override onDraw to clip the canvas with a curved path:

public class CurvedBottomImageView extends androidx.appcompat.widget.AppCompatImageView {
    private Path clipPath;
    private float curveRadius = 30f; // Default curve size, adjust as needed

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

    public CurvedBottomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // Optional: Let users set curve radius via XML attributes
        TypedArray attrsArray = context.obtainStyledAttributes(attrs, R.styleable.CurvedBottomImageView);
        curveRadius = attrsArray.getDimension(R.styleable.CurvedBottomImageView_curveRadius, 30f);
        attrsArray.recycle();
        init();
    }

    private void init() {
        clipPath = new Path();
        setLayerType(LAYER_TYPE_SOFTWARE, null); // Needed for clipPath to work on some devices
    }

    @Override
    protected void onDraw(Canvas canvas) {
        clipPath.reset();
        // Define the path: top-left → top-right → bottom-right (curved) → bottom-left (curved) → close
        clipPath.moveTo(0, 0);
        clipPath.lineTo(getWidth(), 0);
        clipPath.lineTo(getWidth(), getHeight() - curveRadius);
        // QuadTo creates the curved corner: (control X, control Y, end X, end Y)
        clipPath.quadTo(getWidth(), getHeight(), getWidth() - curveRadius, getHeight());
        clipPath.lineTo(curveRadius, getHeight());
        clipPath.quadTo(0, getHeight(), 0, getHeight() - curveRadius);
        clipPath.close();

        canvas.clipPath(clipPath);
        super.onDraw(canvas);
    }
}

Step 2: Add Custom XML Attributes (Optional) #

To let users set the curve radius directly in layouts, add this to res/values/attrs.xml:

<declare-styleable name="CurvedBottomImageView">
    <attr name="curveRadius" format="dimension" />
</declare-styleable>

Step 3: Use It in Your Layout #

<com.your.package.name.CurvedBottomImageView
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:src="@drawable/your_image_resource"
    android:scaleType="centerCrop"
    app:curveRadius="45dp" />

Pro Tips #

• If you need shadows or borders, you’ll want to draw a background path first before clipping the image—just add a drawPath call with a stroke paint before super.onDraw(canvas).
• This custom view works seamlessly with image loaders like Glide or Picasso, no extra configuration needed.

Either route should get you that perfect curved bottom edge matching your design. Let me know if you hit any snags while implementing it!

内容的提问来源于stack exchange，提问作者javatar