0

I am seeing the below UI a lot these days where there is a circle with image on top left of rounded rectangle. Is there a specific control or specific name to it?

I wish to implement it, but not sure where to start. I know how to make a rounded rectangle, but no idea of how to place an image on top left corner or on top right for RTL language. I thought image is an overlay, but looks like it's not.

enter image description here | enter image description here

Any idea or guidance on how to go about it would be great. Or if you are aware of any library in SwiftUI which has something similar than that would help me to implement the design.

Here is my rounded rectangle code:

VStack {
    Rectangle().frame(height: 0).foregroundColor(Color.green)
    Text("Title text").lineLimit(2).font(.headline)
    Spacer()
    Text("Subtitle text").font(.footnote).fixedSize(horizontal: false, vertical: true)
    Divider()
}.padding(5).background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255)).cornerRadius(10)

Edit: Adding code for something I tried so far. Tried adding an offset, which does move the image up top, but the image does get cut off.

VStack {
    Rectangle().frame(height: 0).foregroundColor(Color.green)
    ZStack {
        Circle()
            .foregroundColor(.white)
            .frame(width: 20, height: 20)
            .shadow(radius: 4)
        Image(systemName: "plus.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 20 , height: 20)
            .foregroundColor(Color.purple)
    }
    .offset(y: -30/2)
    Text("June 27, 2022").lineLimit(2).font(.headline)
    Spacer()
    Text("4:30 PM - 7:30 PM").lineLimit(2).font(.subheadline)
    Divider()
}.padding(5).background(Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255)).cornerRadius(10)

This is how it looks:

enter image description here

tech_human
  • 6,592
  • 16
  • 65
  • 107
  • The images you have shown are a standard part of watchOS. There is no SwiftUI component that provides this "out of the box". It is pretty simple to compose yourself. – Paulw11 Jun 28 '22 at 03:38
  • Got it. Thanks! I did see this design on some custom alerts on iOS too. Trying to make something myself so I can use it at various places in my watchOS and iOS app. – tech_human Jun 28 '22 at 03:56
  • try **offset(y: -30)** I use offset on iphone and ipad – Furkan Basoglu Jun 28 '22 at 06:03
  • With offset(y: -30) circle is going out of rectangle instead of overlapping on it. Is there something else that you are doing? – tech_human Jun 28 '22 at 11:13

0 Answers0