How to create a custome shape in which image could be displayed?

Question

In a project I have to show profile image and other images in a different shape. I don't know how to create a shape like it, and how to show an image in it. I have to put this type of shape in list view also. Please suggest me.

Thanks in advance.

Answer 1

Try something like that:

profileImageview=[[UIImageView alloc]initWithFrame:CGRectMake(2,10,100,80)];
    UIBezierPath *path = [UIBezierPath new];
    [path moveToPoint:(CGPoint){0, 0}];
    [path addLineToPoint:(CGPoint){100, 0}];
    [path addLineToPoint:(CGPoint){70, 80}];
    [path addLineToPoint:(CGPoint){0, 80}];
    [path addLineToPoint:(CGPoint){0, 0}];

     CAShapeLayer *mask = [CAShapeLayer new];
    mask.frame = profileImageview.bounds;
    mask.path = path.CGPath;

    // Mask the imageView's layer with this shape
    profileImageview.layer.mask = mask;

Answer 2

I tried and got the solution for Android. I am sharing whatever I did.

• I just created a class CustomShape that extended View class.
• Override the onDraw() method.
• Created a Paint and Path object.
• Drew lines to coordinates.
• Created a Bitmap from resource to show an image inside shape.
• Created a BitmapShader object and set it to Paint.
• Drew canvas with Path and Paint object.
• Created a layout in XML and added CustomeShape.
• Created and instantiated CustomShape object.

Here is the code of CustomShape Class:

public class CustomShape extends View {
Bitmap bitmap;
BitmapShader bitmapShader;

public CustomShape(Context context) {
    super(context);
    // TODO Auto-generated constructor stub

}

public CustomShape(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CustomShape(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}


@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);

    Paint p = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    Path pth = new Path();
    pth.moveTo(0, 0);

    pth.lineTo(100, 0);
    pth.lineTo(70, 100);
    pth.lineTo(0, 100);

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.ppp);
    bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,
            Shader.TileMode.REPEAT);
    p.setShader(bitmapShader);
    canvas.drawPath(pth, p);
}

Here is the code of MainActivity.java

public class MainActivity extends Activity {

CustomShape customShape;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.layout_main);

    customShape = (CustomShape) findViewById(R.id.customeShape);

    }

}

Here is the layout

 <com.example.btndemo.CustomShape
      android:id="@+id/customeShape"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

Answer 3

use bezier paths as you required using bazie rpaths and create layer of shape you need and add as sublayer to your image view.

for example circular imageView code is below:

     UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width/2, self.height/2) radius:MIN(self.width, self.height)/2 startAngle:0.0f endAngle:2 * M_PI clockwise:YES]; 
     CAShapeLayer *maskCircularShapeLayer = [CAShapeLayer layer]; maskCircularShapeLayer.path = path.CGPath;
     [self.layer addSublayer:maskCircularShapeLayer];