Drawing background shape with one corner and two cutting edges - Android

问题

I want to draw a shape to set it as background. the shape has one corner and two cutting edges.

Here is the rough diagram of the shape I want with one round corner and two corners joined with straight line. I am using and to draw it. Could you help on this ?

回答1:

A 9-patch bitmap (as per UDI's answer) is probably the easiest, but if you want to do it in code, create a custom Shape:

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.drawable.shapes.Shape;
import android.graphics.RectF;

public class WeirdShape extends Shape {
    private static final int    COLOUR       = Color.RED;
    private static final float  STROKE_WIDTH = 1.0f;
    private static final float  CORNER = 10.0f;

    private final Paint border = new Paint();
    private final Path  path;  

    public WeirdShape() {
       path   = new Path();

        border.setColor      (COLOUR);
        border.setStyle      (Paint.Style.STROKE);
        border.setStrokeWidth(STROKE_WIDTH);
        border.setAntiAlias  (true);
        border.setDither     (true);
        border.setStrokeJoin (Paint.Join.ROUND);  
        border.setStrokeCap  (Paint.Cap.ROUND);  
    }

    @Override
    protected void onResize(float width, float height) {
        super.onResize(width, height);

        float dx = STROKE_WIDTH/2.0f;
        float dy = STROKE_WIDTH/2.0f;
        float x  = dx;
        float y  = dy;
        float w  = width  - dx;
        float h  = height - dy;

        RectF arc = new RectF(x,h-2*CORNER,x+2*CORNER,h);

        path.reset();
        path.moveTo(x + CORNER,y);
        path.lineTo(w - CORNER,y);
        path.lineTo(w,y + CORNER);
        path.lineTo(w, h);
        path.lineTo(x + CORNER,h);
        path.arcTo (arc,90.0f,90.0f);
        path.lineTo(dx,h - CORNER);
        path.lineTo(dx,y + CORNER);
        path.close();
    }

    @Override
    public void draw(Canvas canvas, Paint paint) {
       canvas.drawPath(path,border);
    }
}

and then use the custom Shape in a ShapeDrawable as the background Drawable:

view.setBackground(new ShapeDrawable(new WeirdShape()));

Which looks something like:

回答2:

There is no facility in ShapeDrawables for cutting the corner of a square like you have proposed. There is a 'radius' component.

You could try creating multiple images and stacking them on top of each other (using a LayeredList Drawable), but this is likely complicated, and will for sure cause overdraw (ie. bad drawing performance).

Your other alternative is to use the Paint API to create whatever image you want, which can then be cached, and used however.

回答3:

put this in drawable like rounded_edittext.xml -->

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
     <solid android:color="#FFFFFF"/>
        <corners
         android:bottomRightRadius="0dp"
         android:bottomLeftRadius="15dp"
      android:topLeftRadius="10dp"
      android:topRightRadius="5dp"/>
    </shape>


call drawable as edittext background
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    <EditText  
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:padding="5dip"
        android:background="@drawable/rounded_edittext" />
    </LinearLayout>

回答4:

I would say use photoshop to get the aspects right and use it as png drawable

来源：https://stackoverflow.com/questions/25849729/drawing-background-shape-with-one-corner-and-two-cutting-edges-android

标签

android

shape