How to make Swift UI adaptive all Screen Size and Text Size in swift ui

Question

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

Walls

SwfitUI layout is adaptive by default, just use hardcode (in any sizes, distances, etc.) as less as possible, ideally don't use at all. – Hulbig

but when i use hardcore eg. frame(width : 330) but it will gonna be massed in iphone 8 – Walls

I wrote "as less as possible" - re-read carefully, till the end. – Hulbig

Answer 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

Dobson

Answer 2

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

Penthea

Answer 3

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)
        }
    }
}

Stepchild

Answer 4

You can work with a design dimensions, create a new file... maybe "CustomDimensions.swift" with this.

import SwiftUI

let ipadWidth = 1024.0
let ipadHeight = 768.0

func responsiveWidth(_ width: Double = ipadWidth) -> Double {
    (width / ipadWidth) * UIScreen.main.bounds.width
}

func responsiveHeight(_ height: Double = ipadHeight) -> Double {
    (height / ipadHeight) * UIScreen.main.bounds.height
}

func aspectRatio() -> Double {
    responsiveWidth() / responsiveHeight()
}

aspectRatio was usefull.

example:

.frame(height: responsiveHeight(24))

or how in previous example:

.frame(height: responsiveHeight() * 0.05)

Janayjanaya

Answer 5

You can use this as well, without GeometryReader class for images:

    var body: some View {
    VStack {
        Image(contact.imageName)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: UIScreen.main.bounds.width * 0.95, height: 205) //the width of the image will adapt to the 95% of the width of the VStack or to the width of the screen in which is displayed. In this case the height is fixed.
        .clipped()
        .cornerRadius(reader.size.width)
        .shadow(radius: 10)
    }
}

Caducous