skip to Main Content

can anyone tell how to make Responsive UI in Swift UI, which is compatible on all Device , and using figma Text like 24 then it shows iphone 8 and iphone 11 same view

3

Answers


  1. You’ll want to minimize the amount of hardcoded sizes or frames in your app as that will make your app less responsive across different phone models and orientations. Here are some links you can check out to learn responsive UI:

    https://www.youtube.com/watch?v=67ZCQ5ihj_I&t=186s

    https://www.youtube.com/watch?v=ALzrixd_hd8

    Consider trying out geometry reader as well. Here’s an article that goes into depth on what it is and how to use it: https://www.hackingwithswift.com/quick-start/swiftui/how-to-provide-relative-sizes-using-geometryreader

    Login or Signup to reply.
  2. For images you can do something like this. You can use GeometryReader class to make your images responsive. Do not use hardcoded size for images. In this snippet I used 50% width of the screen and for height it will also take 50% of the height.

    Also Be careful using GeometryReader class. The GeometryProxy returns the current view width and height.

    var body: some View {
        GeometryReader { reader in
            VStack {
                Image(contact.imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: reader.size.width * 0.5, height: reader.size.width * 0.5)
                .clipped()
                .cornerRadius(reader.size.width)
                .shadow(radius: 10)
            }
        }
    }
    
    Login or Signup to reply.
  3. A better way to do it without wrapping all your views in a geometry reader is to make an extension to get the screen with and height, which is also callable on all pages without having to do the extension on every page like a geometryreader.

    extension View{
       func getScreenBounds() -> CGRect{
       return UIScreen.main.bounds
       }
    }
    

    and to call it is the same as geometry reader:

     .frame(width: getScreenBounds().width * 0.5, height: getScreenBounds().width * 0.5
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search