Whatever I find interesting in my iOS dev journey

15_aug_2023.md

Hiding the scrollbar for lists

On iOS 16+ use the code below:

.scrollIndicators(.hidden)

For example:

List {
    ForEach(items, id: \.self) { item in
        Text("Item \(item)")
            .listRowInsets(EdgeInsets())
    }
}
.listStyle(PlainListStyle())
.scrollIndicators(.hidden)

Removing default styles of lists

Apply this to the list.

.listStyle(PlainListStyle())

Removing default padding of list items

Apply this modifier to the list items.

.listRowInsets(EdgeInsets())

Making a list

Just use the code below.

List {
    ForEach(items, id: \.self) { item in
        Text("Item \(item)")
    }
}

Getting device width and height

let deviceWidth = 
let deviceHeight = 

Using hexadecimal color codes

Apply the extension below on the Color class.

extension Color {
    init(hex: Int, opacity: Double = 1.0) {
        let red = Double((hex & 0xff0000) >> 16) / 255.0
        let green = Double((hex & 0xff00) >> 8) / 255.0
        let blue = Double((hex & 0xff) >> 0) / 255.0
        self.init(.sRGB, red: red, green: green, blue: blue, opacity: opacity)
    }
}

Then use it as below For example:

Color(hex: 0xF5F8FA)

How to ignore the safe area

Apply this modifier to your view

.edgesIgnoringSafeArea(.all)

Have multiple device previews

As easy as below. Bear in mind that the preview device name exactly matches the device name shows in Xcode.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDisplayName("iPhone 14 Pro Max")
            .previewDevice("iPhone 14 Pro Max")
        
        ContentView()
            .previewDisplayName("iPhone 14 Plus")
            .previewDevice("iPhone 14 Plus")
        
        ContentView()
            .previewDisplayName("iPhone SE")
            .previewDevice("iPhone SE (3rd generation)")
    }
}

Responsive font size

Avoid using static font sizes, instead, calculate it dynamically using the function below.

private func customFont(size: CGFloat) -> Font {
    let textStyle = UIFont.TextStyle.body
    let scaledSize = UIFontMetrics(forTextStyle: textStyle).scaledValue(for: size)
    return Font.system(size: scaledSize)
}

And then simply call this function on the static font size that you use. For example: Instead of applying the font size like below

.font(24)

Do it as below

.font(customFont(size: 24))

Making an image resizable

Simply apply the modifier below

.resizable()

Making an image to scale to fit its parent view

Simply apply the modifier below

.scaledToFit()

VStack and HStack alignment

Despite Flutter that both the Row and Column widgets could align their elements both horizontally and vertically, HStack can only align vertically and VStack can only align horizontally. How do we fix this flaw then? By a view called Spacer which is exactly similar to the Expanded widget in Flutter

To apply alignment to HStack do as below.

HStack(alignment: .top) {
    YourView()
    Spacer()
}

To apply alignment to VStack do as below.

VStack(alignment: .leading) {
    YourView()
    Spacer()
}