Question 202883 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How to remove/fix extra pointed corners in images?

I have created this Facebook homeView using swiftUI. I have some issues with the stories View image. See the screenshot. How to remove/fix different pointed corners in images?

ZStack{
    Color(.secondarySystemGroupedBackground)
    ScrollView(.vertical){
        VStack{
            ScrollView(.horizontal,showsIndicators: false){
                HStack(spacing:3){
                    ForEach(stoires,id:.self) { name in
                        Image(name)
                            .resizable()
                            .aspectRatio( contentMode: .fill)
                            .frame(width: 140,height: 199,alignment: .center)
                            .background(Color.red)
                            .clipped()
                            .overlay(
                                RoundedRectangle(cornerRadius: 16)
                                    .stroke(Color(.systemGray5), lineWidth: 4)
                            )
                    }
                }.padding()
            }
        }
    }
}

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    enter image description here

    struct StoriesView: View {
    let stoires: [String]
    var body: some View {
        ScrollView(.horizontal,showsIndicators: false) {
            HStack(spacing:3){
                ForEach(stoires,id:.self) { name in
                    Image(name)
                        .resizable()
                        .aspectRatio( contentMode: .fill)
                        .frame(width: 140,height: 199,alignment: .center)
                        .background(Color.red)
                        .clipped()
                        .cornerRadius(20)//<-- add this cornerRadius
                        .overlay(
                            RoundedRectangle(cornerRadius: 20)//<-- add this cornerRadius
                                .stroke(Color(.systemGray5), lineWidth: 5)
                        )//<-- add this cornerRadius
                        .padding(.trailing,4)//<-- adding nice padding 
                }
            }.padding()
            Spacer()
        }
    }
}

  2. 0

    when try to use overlay then some time you can’t get appropiate result.

    try to use inset when trying to add rounded border

    .overlay(
    RoundedRectangle(cornerRadius: 24)
        .inset(by: 5) // inset value should be same as lineWidth in .stroke
        .stroke(.blue, lineWidth: 5)
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search