DEV Community: D. Prameswara

SwiftUI Tips: Remove NavigationLink Arrow in List

D. Prameswara — Fri, 25 Apr 2025 09:54:30 +0000

If you are using a List in SwiftUI to display data, while also placing a NavigationLink for navigation transitions, by default the List will display an arrow icon on the right side of each List items. This arrow indicates that the data can be clicked to navigate to another page. But, in certain conditions, developers may want the arrow to be hidden. Unfortunately, at the time this was written, Apple has not provided an option to hide the arrow. But don't worry, with a little creativity, the arrow can easily be hidden.

Below are some alternative solutions to remove the arrow on a NavigationLink in a List.

#Appearance of Default NavigationLink in a List

This is the default appearance of a NavigationLink in a List. The arrow appears on the right side of each list item.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                Section {
                    ForEach(1 ... 10, id: \.self) { i in
                        NavigationLink(value: i) {
                            HStack {
                                Text("List Data : \(i)")
                                Spacer()
                                Image(.imgIcon)
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 100)
                            }
                        }
                    }
                }
            }
            .navigationDestination(for: Int.self) { i in
                Text("Selected Value : \(i)")
            }
            .navigationTitle("NavigationLink")
        }
    }
}

#Using ScrollView

To remove the arrow, you can add a ScrollView outside the NavigationLink. This trick may sound odd, but so far it works, albeit with some notes.

If you use a ScrollView , by default the text color inside the View will change like a Button. Therefore, you need to add .buttonStyle(.plain) modifier to the NavigationLink , and don't forget to add .contentShape(Rectangle()) modifier inside the content. With these modifiers, the Text in the List will look the same as before.

  Section {
      ForEach(1 ... 10, id: \.self) { i in
          ScrollView {
              NavigationLink(value: i) {
                  HStack {
                      Text("List Data : \(i)")
                      Spacer()
                      Image(.imgIcon)
                          .resizable()
                          .aspectRatio(contentMode: .fit)
                          .frame(width: 100)
                  }
                  .contentShape(Rectangle())
              }
              .buttonStyle(.plain)
          }
      }
  }

The downside of this solution is that the padding inside the content does not look the same as before. The top padding appears smaller compared to the bottom.

#Using Background Modifier

A better alternative solution is to move the NavigationLink into the Background , with an EmptyView as the content.

Move the NavigationLink into .background modifier of the content. Don't forget to add an EmptyView as the content for the NavigationLink; otherwise, an error will occur. The result is perfect. There is no change in padding, and the NavigationLink works well.

  Section {
      ForEach(1 ... 10, id: \.self) { i in
          HStack {
              Text("List Data : \(i)")
              Spacer()
              Image(.imgIcon)
                  .resizable()
                  .aspectRatio(contentMode: .fit)
                  .frame(width: 100)
          }
          .background {
              NavigationLink(value: i) {
                  EmptyView()
              }
          }
      }
  }

#Using Overlay Modifier

This solution is essentially the same as using the Background above. The difference is that this time the NavigationLink is not placed in .background modifier, but in .overlay modifier.

If you use .overlay modifier, make sure to add .opacity(0) modifier to the NavigationLink ; otherwise, the arrow will still appear. The result is exactly the same as using Background modifier.

Section {
    ForEach(1 ... 10, id: \.self) { i in
        HStack {
            Text("List Data : \(i)")
            Spacer()
            Image(.imgIcon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 100)
        }
        .overlay {
            NavigationLink(value: i) {
                EmptyView()
            }
            .opacity(0)
        }
    }
}

#Conclusion

Of the several alternatives above, it seems we agree that the easiest and most appropriate solution is to use Background modifier. However, you can still choose the solution that best suits your needs.

That's the trick to remove the arrow mark on a NavigationLink in a List. Good luck and hopefully this little bit is helpful.

meshwara / SwiftUI-Remove-Arrow-NavigationLink

Easy Way to Display Markdown in SwiftUI using Text

D. Prameswara — Sun, 24 Sep 2023 01:45:47 +0000

Since the release of SwiftUI for iOS 15 , SwiftUI has had a built-in feature for displaying Markdown text using the Text widget. While not all Markdown formats are supported yet, it's sufficient if you only want to display text in some formats or perhaps embed links.

To write Markdown within SwiftUI, you simply use the Text widget and write Markdown within that Text.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("This is just regular Text")
            Text("This with **Bold** style")
            Text("This with *Italic* style")
            Text("This one with ~Strikethrough~ style")
            Text("This one with `Monopace`")
            Text("This one with [Goto Google](www.google.com) Link")
        }
        .padding()
    }
}

#Writing Markdown in a Variable

If you want to display Markdown using a variable, you will most likely use the following code.

struct ContentView: View {
    @State private var text: String = " **SwiftUI** helps you build great-looking apps across all _Apple_ platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any Apple device, using just one set of tools and APIs.[SwiftUI](https://developer.apple.com/xcode/swiftui/)"

    var body: some View {
        VStack {
            Text(text)
        }
        .padding()
    }
}

Unfortunately, this approach won't work. Instead of displaying Markdown, it will only display the text as regular text.

This is because if you write Markdown text directly into the Text widget, SwiftUI will automatically convert that text into a LocalizedStringKey. On the other hand, if the text is stored in a variable with String data type, than Text widget will not consider it as a LocalizedStringKey but rather as a regular String.

Therefore, if you want to write Markdown text into a variable, make sure to change the variable type to LocalizedStringKey or convert the String into a LocalizedStringKey first.

struct ContentView: View {
    @State private var text: String = " **SwiftUI** helps you build great-looking apps across all _Apple_ platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any Apple device, using just one set of tools and APIs.[SwiftUI](https://developer.apple.com/xcode/swiftui/)"

    // declare variable as LocalizeStringKey instead
    @State private var localizeText: LocalizedStringKey = " **SwiftUI** helps you build great-looking apps across all _Apple_ platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any Apple device, using just one set of tools and APIs.[SwiftUI](https://developer.apple.com/xcode/swiftui/)"

    var body: some View {
        VStack {
            // convert String to LocalizedStringKey first
            Text(LocalizedStringKey(text))
            Divider()
            Text(localizeText)
        }
        .padding()
    }
}

#Changing Link Color

By default, if you write a link in Markdown, SwiftUI will automatically render the link with the default Button text color, which is usually blue. If you want to change this color, you can add the .tint modifier to the Text widget.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Regular [link](https://apple.com) with default color")
            Text("Styled [link](https://apple.com) with custom color [hyperlink](https://apple.com)")
                .tint(.pink)
        }
        .padding()
    }
}

#Working with AttributedString

What is AttributedString ? An AttributedString is a value type for a string with associated attributes for portions of its text.

@dynamicMemberLookupstruct AttributedString

By using AttributedString, you can format specific parts of the text, such as with specific colors, sizes, and fonts. By combining the built-in Markdown feature, you can create Text displays with various formats, as shown in the example below.

struct ContentView: View {
    private var attrText: AttributedString {
        do {
            var text = try AttributedString(
                markdown: " **SwiftUI** helps you build great-looking apps across all _[Apple](https://apple.com)_ platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any ~Apple device~, using just one set of tools and APIs."
            )

            if let range = text.range(of: "SwiftUI") {
                text[range].backgroundColor = .yellow
                text[range].foregroundColor = .red
            }

            if let range = text.range(of: "Apple") {
                text[range].foregroundColor = .purple
                text[range].font = .system(size: 30)

            }
            if let range = text.range(of: "Apple device") {
                text[range].backgroundColor = .red
                text[range].foregroundColor = .white
                text[range].font = .boldSystemFont(ofSize: 25)
            }

            return text
        } catch {
            return "Error text attribute"
        }
    }

    var body: some View {
        VStack {
            Text(attrText)
        }
        .padding()
    }
}

#Markdown limitation in SwiftUI

As of the time of writing, SwiftUI does not yet support all Markdown syntax. Some of these unsupported elements include: images , numbered lists , and headings.

meshwara / SwiftUI-Markdown-Sample

Easy Way to Create a Floating Action Button (FAB) in SwiftUI.

D. Prameswara — Sun, 30 Jul 2023 12:59:14 +0000

The Floating Action Button, or FAB , is a distinctive component of Android UI design known as Material Design. The FAB is a button or a set of buttons that float in the bottom right corner of a page. This button design is not standard for iOS, but in reality, many applications include Floating Action Buttons, and they are quite popular and useful.

In the following, we will try to create a Floating Action Button with SwiftUI. Currently, SwiftUI does not come with a native Floating Action Button widget/view, but we can still create it using a combination of ZStack and Button views.

#Mockup

We will create a simple application with a layout that resembles the mockup below. A List with a FAB located in the bottom right corner. This layout is very common in Android applications, such as Gmail , Dropbox , and others.

Sample mockup page with FAB

#Creating a List

The first step is to create a page with a standard List as follows.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1 ... 30, id: \.self) { _ in
                HStack(spacing: 15) {
                    Image(systemName: "person.fill")
                        .padding(10)
                        .background(.green.opacity(0.3))
                        .clipShape(Circle())
                    VStack(alignment: .leading) {
                        Text("Fulan bin fulan")
                        Text("Aenean sagittis leo ut massa sagittis varius ac eu mauris. Nunc interdum tellus vestibulum bibendum pulvinar.")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                }
            }
        }
        .navigationTitle("Floating Action Button")
    }
}

List View

#Adding ZStack and Button

Next is to add a button with a plus (+) icon in the bottom right corner. Therefore, we wrap the List in a ZStack and then add a Button.

struct ContentView: View {
    var body: some View {
        ZStack {
            List {
                ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

ZStack with List and Button

By default, ZStack will place all components in the center of the stack. Therefore, change the alignment of the ZStack to .bottomTrailing. Why bottomTrailing? Because the position of the button is in the bottom right corner. So, the position of the + button will move to the bottom right corner.

If you want to change the position of the FAB , please adjust the alignment value of this ZStack accordingly.

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            List {
               ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

Change ZStack Alignment to bottomTrailing

#Setting style for button

Next, let's adjust the style of the button to make it resemble the mockup, starting with a rounded background in orange color. In this case, the modifier is placed on the Image , not on the Button.

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            List {
                ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
                    .font(.title2.weight(.bold))
                    .foregroundColor(.white)
                    .padding()
                    .background(.orange)
                    .clipShape(Circle())
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

Rounded FAB

#Add drop shadow

To add a floating effect to the FAB , don't forget to add the .shadow modifier to the button.

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            List {
                ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
                    .font(.title2.weight(.bold))
                    .foregroundColor(.white)
                    .padding()
                    .background(.orange)
                    .clipShape(Circle())
                    .shadow(radius: 5, x: 0, y: 3)
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

Rounded FAB with shadow

At this point, you have successfully created a Floating Action Button using SwiftUI. The result can be said to be almost identical to the FAB design for Material Design.

Hasil akhir FAB dengan SwiftUI

Here are the tips/tricks for now, good luck trying them out, and hopefully, this little bit is helpful.

meshwara / SwiftUI-FAB

How to Easily Create ScrollToTop in SwiftUI

D. Prameswara — Sat, 29 Jul 2023 06:58:00 +0000

Scroll to top is an easy way for users to return to the top of a page by pressing a specific button. Typically, this page contains a long list, requiring users to scroll to view more content. When users have scrolled too far, a scroll to top button becomes essential. Without it, users would have to scroll back multiple times to return to the top.

Just like web applications and others, we can create a scroll to top button in SwiftUI. This button is particularly useful when you are using a List or ScrollView.

#Widget/View ScrollViewReader

SwiftUI already provides a default widget/view that can be used for programmatic scrolling, and that is the ScrollViewReader.

@frozen
struct ScrollViewReader<Content> where Content : View

To scroll to a specific view, you need to assign an ID to that widget/view. Once the ID is defined, you can use the scrollTo method of ScrollViewReader to scroll to the widget/view. In general, if you want to scroll to the top of a List or ScrollView , you assign an ID to the topmost view.

#ScrollToTop for List

Here is an example of how to scroll to the top of a List. For this example, we are using the simplest data, which is just numbers from 1 to 100..

struct ContentView: View {
    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                List {
                    ForEach(1 ... 100, id: \.self) { i in
                        Text("Item number \(i)")
                            .id(i)
                    }
                }
                Button("Move to top") {
                    withAnimation(.easeIn(duration: 1.0)) {
                        proxy.scrollTo(1)
                    }                
                }
            }
        }
        .navigationTitle("Move to top")
    }    
}

In the example above, to scroll to the top, we use scrollTo(1), where 1 is the ID of the first element in the List. This example is straightforward because we can be sure that the ID of the first/topmost element in the List is always 1.

The withAnimation here is used to provide a smoother scrolling experience with animation.

ScrollToTop pada List

#ScrollToTop for ScrollView

To perform a scroll to the top in a ScrollView , it's similar. Here's an example:

struct WithScrollView: View {
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                LazyVStack {
                    ForEach(1 ... 100, id: \.self) { i in
                        Text("Item number \(i)")
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(.vertical, 5)
                            .id(i)
                    }
                }
                .padding()
            }

            Button("Move to top") {
                withAnimation(.easeIn(duration: 1.0)) {
                    proxy.scrollTo(1)
                }
            }
        }
        .navigationTitle("Move to top")
    }
}

In the example provided, we are using a ScrollView with a LazyVStack as its content. LazyVStack is a great choice when dealing with a potentially large number of items because it only creates and loads the views that are currently visible on the screen, which can improve performance and efficiency, especially with long lists of data. This approach is commonly used when creating scrollable views with SwiftUI.

ScrollToTop dengan pada ScrollView

#ScrollToTop with Struct Data

In the previous examples, the data displayed was simple numeric arrays. This time, we will attempt to implement scroll to top with complex data, typically represented as structs.

For the struct data example, we will create a data struct for a Person with properties id and name.

struct Person: Identifiable {
    var id: Int
    var name: String

    init(id: Int, name: String) {
        self.id = id
        self.name = name
    }
}

With mock data as follows. The IDs are intentionally created randomly to illustrate that the first ID is not necessarily the smallest or zero.

    private var persons: [Person] = [
        Person(id: 11649, name: "Elmer Oconnell"),
        Person(id: 14, name: "Montgomery Norman"),
        Person(id: 8, name: "Jake Bass"),
        Person(id: 20, name: "Nikodem Garza"),
        Person(id: 31, name: "Ashwin Salinas"),
        Person(id: 79, name: "Jason Mcgowan"),
        Person(id: 1002, name: "Natasha Fernandez"),
        Person(id: 21, name: "Chris Duncan"),
        Person(id: 231, name: "Kimberly Sloan"),
        Person(id: 154, name: "Amber Mcbride"),
        Person(id: 876, name: "Chris Duncan"),
        Person(id: 5041, name: "Chantelle Dyer"),
        Person(id: 3964, name: "Alexa Lucero"),
        Person(id: 805, name: "Timothy Graves"),
    ]

To implement scroll to top with the above data, it is typically structured as follows.

    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                List {
                    ForEach(persons) { person in
                        VStack(alignment: .leading) {
                            Text(person.name)
                            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ex id ex posuere blandit. Donec semper ligula ut velit molestie malesuada")
                                .font(.caption)
                                .foregroundColor(.secondary)
                                .multilineTextAlignment(.leading)
                        }
                        .id(person.id)
                    }
                }
                Button("Move to top") {
                    withAnimation(.easeIn(duration: 1.0)) {
                        proxy.scrollTo(0) // ????
                    }
                }
            }
        }
    }

Here, a problem arises because we don't actually know the ID of the topmost element in the List. This is because ForEach, up to now, does not provide the index of the array, so this approach with ForEach(persons) can't be used.

The solution is to use the index of the persons array, which can be obtained using .indices. By using this index, we can scroll to the top element because its ID will always be zero.

In this code, we use persons.indices with the .self key path to loop. Through the indices of the persons array, allowing us to scroll to the top element by using .id(0) and scrollViewProxy.scrollTo(0).

    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                List {
                    ForEach(persons.indices, id:\.self) { i in
                        let person = persons[i]
                        VStack(alignment: .leading) {
                            Text(person.name)
                            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ex id ex posuere blandit. Donec semper ligula ut velit molestie malesuada")
                                .font(.caption)
                                .foregroundColor(.secondary)
                                .multilineTextAlignment(.leading)
                        }
                        .id(i) // first index always 0
                    }
                }
                Button("Move to top") {
                    withAnimation(.easeIn(duration: 1.0)) {
                        proxy.scrollTo(0)
                    }
                }
            }
        }
    }

Here is the complete code.

struct Person: Identifiable {
    var id: Int
    var name: String

    init(id: Int, name: String) {
        self.id = id
        self.name = name
    }
}

struct WithStructData: View {
    private var persons: [Person] = [
        Person(id: 10, name: "Elmer Oconnell"),
        Person(id: 14, name: "Montgomery Norman"),
        Person(id: 8, name: "Jake Bass"),
        Person(id: 20, name: "Nikodem Garza"),
        Person(id: 31, name: "Ashwin Salinas"),
        Person(id: 79, name: "Jason Mcgowan"),
        Person(id: 1002, name: "Natasha Fernandez"),
        Person(id: 21, name: "Chris Duncan"),
        Person(id: 231, name: "Kimberly Sloan"),
        Person(id: 154, name: "Amber Mcbride"),
        Person(id: 876, name: "Chris Duncan"),
        Person(id: 5041, name: "Chantelle Dyer"),
        Person(id: 3964, name: "Alexa Lucero"),
        Person(id: 805, name: "Timothy Graves"),
    ]
    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                List {
                    ForEach(persons.indices, id:\.self) { i in
                        let person = persons[i]
                        VStack(alignment: .leading) {
                            Text(person.name)
                            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ex id ex posuere blandit. Donec semper ligula ut velit molestie malesuada")
                                .font(.caption)
                                .foregroundColor(.secondary)
                                .multilineTextAlignment(.leading)
                        }
                        .id(i)
                    }
                }
                Button("Move to top") {
                    withAnimation(.easeIn(duration: 1.0)) {
                        proxy.scrollTo(0)
                    }
                }
            }
        }
    }
}

ScrollToTop pada List dengan data Struct

That's the tip/trick for implementing scroll to top in SwiftUI, whether with List or ScrollView. Happy experimenting, and I hope this little bit is helpful.

meshwara / SwiftUI-ScrollToTop

Fixing the issue of an unclickable SwiftUI Plain Button when tapping on the empty area

D. Prameswara — Sat, 29 Jul 2023 00:55:11 +0000

If you're using a Button widget in SwiftUI, by default, the entire label of the Button is clickable. This is the default tap area for the Button if you use a button style other than Plain. For example:

struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button {
            show.toggle()
        } label: {
            HStack {
                Image(systemName: "plus")
                Text("Add data")
            }
            .padding()
            .frame(maxWidth: .infinity)
        }
        .background {
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(.primary, lineWidth: 0.2)
        }
        .padding()
        .sheet(isPresented: $show){
            Text("Pop Window")
        }
    }
}

The example above is a Button that contains an icon and text, with border modifier to make it appear as an outlined Button. The default style for this button is automatic.

And as you can notice, you can click on all parts of the button. Even in the areas that appear empty.

However, styles like this are sometimes not what you want, because all parts inside the button will appear as a hyperlink or be colored in blue. Therefore, the button style is usually changed to .plain, which makes the color of content inside the button become default , and than allows you to customize it as needed.

struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button {
            show.toggle()
        } label: {
            HStack {
                Image(systemName: "plus")
                Text("Add data")
            }
            .padding()
            .frame(maxWidth: .infinity)
        }
        .buttonStyle(.plain)
        .background {
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(.primary, lineWidth: 0.2)
        }
        .padding()
        .sheet(isPresented: $show){
            Text("Pop Window")
        }
    }
}

However, this style has a side effect, which is make not all parts of the button can be clicked. Only the parts containing text or an image can be clicked. This is why the empty parts of a plain button cannot be clicked.

To fix this issue, it's actually quite simple. Just add the .contentShape modifier within the Button's content. Remember, it should be inside the Button's content, not the Button it self.

func contentShape<S>(
    _ shape: S,
    eoFill: Bool = false
) -> some

So, the code can be modified as follows.

struct ContentView: View {
    @State private var show = false
    var body: some View {
        Button {
            show.toggle()
        } label: {
            HStack {
                Image(systemName: "plus")
                Text("Add data")
            }
            .padding()
            .frame(maxWidth: .infinity)
            .contentShape(RoundedRectangle(cornerRadius: 10.0))
        }
        .buttonStyle(.plain)
        .background {
            RoundedRectangle(cornerRadius: 10.0)
                .stroke(.primary, lineWidth: 0.2)
        }
        .padding()
        .sheet(isPresented: $show){
            Text("Pop Window")
        }
    }
}

With this modification, all parts of a button with the .plain style now will be clickable.

The .contentShape modifier is very useful in situations like above, or in other cases, such as when you want to add buttons inside List items.

Happy experimenting, and I hope this little tip is helpful.

meshwara / SwiftUI-Plain-Button-Click

5 ButtonStyles in SwiftUI

D. Prameswara — Sun, 15 Jan 2023 07:12:35 +0000

Button is one of the Views provided by SwiftUI by default and comes equipped with modifiers that make it easy to customize. You can adjust its size, color, and style. However, did you know that SwiftUI already provides 5 button styles by default that make it very easy to control the button's appearance?

The 5 default button styles provided by SwiftUI are as follows:

Default/Automatic (.automatic)
Borderless (.borderless)
Plain (.plain)
Bordered (.bordered)
BorderedProminent (.borderedProminent)

To determine the style of the button you desire, simply add the buttonStyle modifier with one of the values mentioned above.

func buttonStyle<S>(_ style: S) -> some View where S : ButtonStyle

#Default/Automatic

The default style is the style chosen by SwiftUI to display a Button if you don't configure anything. If you want to use this default appearance, you can simply add the buttonStyle modifier with the value .automatic."

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Automatic Button tanpa modifier"){

            }

            Divider()

            Button("Automatic Button dengan modifier"){

            }
                .buttonStyle(.automatic)
        }
        .padding()
    }
}

#Borderless

The borderless style is a button style without borders. In fact, this is the button style that is displayed when you choose the buttonStyle modifier with the value .automatic. It's a simple style and is suitable for creating button appearances in HTML similar to anchors.

To use the borderless style, you can use the modifier with the value .borderless or BorderlessButtonStyle()."

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderless Button"){

            }
                .buttonStyle(.borderless)

            Divider()

            Button("Borderless Button"){

            }
                .buttonStyle(BorderlessButtonStyle())

        }
        .padding()
    }
}

#Plain

The plain style is a borderless button style, but with a label color that matches the text. If the borderless style in HTML makes a button look like an anchor, plain style makes the button identical to the text but clickable.

To use the plain style, you can use the modifier with the value .plain or PlainButtonStyle().

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Plain Button"){

            }
                .buttonStyle(.plain)

            Divider()

            Button("Plain Button"){

            }
                .buttonStyle(PlainButtonStyle())
        }
        .padding()
    }
}

#Bordered

The bordered style is the opposite of borderless. With this style, the button will look like a typical button, with a background and border, but with a flat feel. If you want to make a button with this style, than use this modifier with the value .bordered or BorderedButtonStyle() .

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderer Button"){

            }
                .buttonStyle(.bordered)

            Divider()

            Button("Bordered Button"){

            }
                .buttonStyle(BorderedButtonStyle())
        }
        .padding()
    }
}

#BorderedProminent

Bordered prominent is a style that displays a button like a commonly recognized button for users. It has a primary background and white text. If you want to make a button with this style, than use the modifier with the value .borderedProminent or BorderedProminentButtonStyle()

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderer Button"){

            }
                .buttonStyle(.borderedProminent)

            Divider()

            Button("Bordered Button"){

            }
                .buttonStyle(BorderedProminentButtonStyle())
        }
        .padding()
    }
}

And here is an image of the buttons with each of the styles mentioned above.

So, these are the 5 button styles that you can use to customize the appearance of a Button in SwiftUI. Feel free to choose the one that suits your needs.

meshwara / SwiftUI-Button-Styles

Good luck, and please trying them out, and I hope this little information is helpful.

Creating a Simple Timer Using SwiftUI

D. Prameswara — Fri, 06 Jan 2023 07:41:13 +0000

In this article, we will attempt to create a simple Timer application using SwiftUI 3. This Timer should be able to display time up to milliseconds. The displayed time should only include minutes, seconds, and milliseconds.

For the layout design, we'll keep it as simple as possible, roughly like the image below. As for features, we'll have start, stop, mark (record time), display a list of times, and finally clear the list of times.

App Timer mockup

#What is Timer in Swift

Timer is a class provided by Swift for scheduling a task either once or repeatedly at specified intervals. Timers are typically used in time-based applications such as clock apps, countdowns, speed timers, and more.

In general, there are two ways to use Timer in SwiftUI: using scheduledTimer or using publish. Each has its own advantages and disadvantages, so we'll try both to see the differences.

As usual, for the initial step, let's create the layout of this Timer application according to the Mockup design above. Please write the code below and adjust it as needed.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            HStack() {
                Text("99:99:999")
            }
            .font(.system(size: 50))
            .fontDesign(.monospaced)
            .padding()

            HStack {
                Button {
                    // todo: start timer
                } label: {
                    Label( "Start", systemImage: "play.fill")
                        .padding(5)
                }
                .buttonStyle(.borderedProminent)
                .tint( .blue)

                Button {
                    // todo: mark timer
                } label: {
                    Label( "Mark", 
                        systemImage: "pencil.and.ruler.fill"
                    )
                    .padding(5)
                }
                .buttonStyle(.borderedProminent)
                .tint(.green)

                Button {
                    // todo: cleanup marking
                } label: {
                    Label( "Clean", systemImage: "trash.fill")
                        .padding(5)
                }
                .buttonStyle(.borderedProminent)
                .tint(.red)
            }
            .padding()

            List {
                ForEach(0...100, id: \.self) { i in
                    Text("99:99:9999")
                }
            }
        }
    }
}

Pay attention to the part where we display the time/timer. We use the fontDesign modifier with .monospaced to make the time display consistent (no jitter due to changing digit widths). You can try it without the fontDesign modifier to see the difference.

HStack() {
    Text("99:99:999")
}
.font(.system(size: 50))
.fontDesign(.monospaced)
.padding()

The result should be roughly like the image below.

Timer Mockup Implementation

#Preparing Variables

There are several variables/flags needed in this application, roughly like the code below. Make sure you don't forget to add @State to all variables.

struct ContentView: View {
    // flag apakah timer sedang run
    @State private var timerRun: Bool = false
    // start date
    @State private var start: TimeInterval = 0.0
    // untuk menyimpan selisih antara waktu start dengan current
    @State private var interval: TimeInterval = 0.0
    // string dari selisih timer dalam format menit:detik:mili
    @State private var waktu = "00:00:000"
    // array untuk menyimpan hasil marking waktu
    @State private var mark = [String]()
    // timer
    @State private var timer: Timer?

Note that the start and interval variables are of type TimeInterval. Why TimeInterval? Because it will make it easier to calculate the difference between two times.

#Timer with scheduledTimer

In this application, the Timer will start when the user presses the Start button. Therefore, let's create a private function to set up and run the Timer as shown below.

private func startTimer() {
    if timerRun {
        return
    }
    interval = 0.0
    start = Date.timeIntervalSinceReferenceDate

    timer = Timer.scheduledTimer(withTimeInterval: 0.001, repeats: true){ _ in
        interval = Date.timeIntervalSinceReferenceDate - start

        let mili = Int((interval.truncatingRemainder(dividingBy: 1)) * 1000)
        let detik = Int(interval.truncatingRemainder(dividingBy: 60))
        let menit = Int(interval / 60)

        waktu = String(format: "%02d:%02d:%03d", menit, detik, mili)
    }
    timerRun = true
}

In this function, we set the start value to the current date in interval form using Date.timeIntervalSinceReferenceDate.

Please note the initialization of the Timer that using Timer.scheduledTimer.

class func scheduledTimer(
    withTimeInterval interval: TimeInterval,
    repeats: Bool,
    block: @escaping @Sendable (Timer) -> Void
) -> Timer

withTimeInterval is the parameter for specifying the time interval of the Timer in seconds. The smaller the value, the faster the Timer's interval. However, keep in mind that smaller intervals require more device energy. So make sure to choose an appropriate value. In the example above, it's set to 0.001 seconds or 1 millisecond.

repeats determines whether the process will be repeated or not. For this application's needs, it should be true.

block is the code that will be executed each time the Timer runs. For this application, it calculates the time difference between the current time and the start time, which results in the time difference. This difference is then stored in the interval variable prepared earlier. Additionally, this TimeInterval value is then extracted into milliseconds, seconds, and minutes, and then formatted into the waktu variable. This waktu variable will be displayed in the view.

Next, add two functions to stop the timer and record the timer's result.

private func stopTimer() {
    timer?.invalidate()
    timer = nil
    timerRun = false
}

private func markTimer(){
    mark.append(waktu)
}

To stop a Timer initialized with scheduledTimer, use the invalidate method.

Now, adjust the View to display the results and add click functions on the start, stop, and other buttons.

var body: some View {
    VStack {
        // info timer
        HStack {
            Text(waktu)
        }
        .font(.system(size: 50))
        .fontDesign(.monospaced)
        .padding()

        // tombol
        HStack {
            Button {
                if timerRun {
                    stopTimer()
                } else {
                    startTimer()
                }
            } label: {
                Label(timerRun ? "Stop" : "Start",
                      systemImage: timerRun ? "stop.fill" : "play.fill"
                )
                .padding(5)
            }
            .buttonStyle(.borderedProminent)
            .tint(timerRun ? .orange : .blue)

            if timerRun {
                Button {
                    markTimer()
                } label: {
                    Label("Mark",
                          systemImage: "pencil.and.ruler.fill"
                    )
                    .padding(5)
                }
                .buttonStyle(.borderedProminent)
                .tint(.green)
            }

            Button {
                mark = []
            } label: {
                Label("Clean", systemImage: "trash.fill")
                    .padding(5)
            }
            .buttonStyle(.borderedProminent)
            .tint(.red)
        }
        .padding()

        // list hasil
        List {
            ForEach(mark, id: \.self) { i in
                Text(i)
            }
        }
    }
}

Finally this is the final result.

Timer with scheduledTimer

In the final result, we can see how the Timer can record interval changes in milliseconds. However, please note that a Timer initialized with Timer.scheduledTimer will be paused when there is other user interaction. For example, when user scrolls the List.

Therefore, next, we will modify the code above so that the Timer is not paused when there are other user interactions.

#Timer with publish

In addition to being initialized with Timer.scheduledTimer, Timer can also be initialized with publish. The advantage of initializing with publish is that we can set the runLoop and mode of the Timer

static func publish(
    every interval: TimeInterval,
    tolerance: TimeInterval? = nil,
    on runLoop: RunLoop,
    in mode: RunLoop.Mode,
    options: RunLoop.SchedulerOptions? = nil
) -> Timer.TimerPublisher

To ensure the Timer is not affected by user interactions, the runLoop should be set to main , and the mode should be set to common.

First, add import Combine. Then, change the type of the timer variable from Timer? to Publishers.Autoconnect<Timer.TimerPublisher>?.

Next, modify the startTimer and stopTimer functions as follows.

import Combine
import SwiftUI

struct ContentView: View {
    ...
    // variable timer dengan publisher
    @State private var timer: Publishers.Autoconnect<Timer.TimerPublisher>? = nil
    // variable untuk menyimpan subscription
    @State private var subscription: AnyCancellable? = nil

    private func startTimer() {
        ...

        timer = Timer.publish(every: 0.001, on: .main, in: .common).autoconnect()
        subscription = timer?.sink(receiveValue: { _ in
            interval = Date.timeIntervalSinceReferenceDate - start

            let mili = Int((interval.truncatingRemainder(dividingBy: 1)) * 1000)
            let detik = Int(interval.truncatingRemainder(dividingBy: 60))
            let menit = Int(interval / 60)
            waktu = String(format: "%02d:%02d:%03d", menit, detik, mili)
        })
    }

    private func stopTimer() {
        timerRun = false
        timer?.upstream.connect().cancel()
        timer = nil
        subscription = nil
    }

With the changes, the Timer now will not be affected when there are user interactions, as shown in the final result above.

Timer dengan publish

That's the tutorial on how to create a simple Timer using SwiftUI. Hopefully, there's something new we can learn together.

Good luck, and I hope this little tip is helpful.

meshwara / SwiftUI-SimpleTimer

Creating an Intuitive Custom Swipe Experience with SwiftUI

D. Prameswara — Wed, 04 Jan 2023 22:33:45 +0000

One of the new features in SwiftUI 3 is the addition of the swipeActions() modifier for List rows. By using swipeActions , you can easily add buttons as left or right swipe actions in a List. This is something very popular and commonly used in mobile email client applications.

func swipeActions<T>(
    edge: HorizontalEdge = .trailing,
    allowsFullSwipe: Bool = true,
    content: () -> T
) -> some View where T : View

As shown in the description of the swipeActions modifier above, the edge parameter is used to set the swipe direction, whether from the left ( leading ) or from the right ( trailing ). allowsFullSwipe is used to determine whether a full swipe action can be performed (meaning swiping all the way to the left or right), which automatically triggers the action.

This is an example of how to use swipeActions with multiple buttons, both from left or right directions.

import SwiftUI

struct ContentView: View {
    @State private var info = ""
    var body: some View {
        VStack {
            Text("\(info)")           
            List {
                ForEach(0 ..< 10, id: \.self) { i in
                    Text("Item number \(i)")
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            Button {
                                info = "Mark read item \(i)"
                            } label: {
                                Label(
                                    "Mark read",
                                    systemImage: "envelope.open.fill"
                                )
                            }
                            .tint(.blue)

                            Button {
                                info = "Reply item \(i)"
                            } label: {
                                Label(
                                    "Reply",
                                    systemImage: "envelope.arrow.triangle.branch.fill"
                                )
                            }
                            .tint(.green)

                            Button {
                                info = "Favorite item \(i)"
                            } label: {
                                Text(
                                    "Favorite"
                                )
                            }
                            .tint(.brown)
                        }
                        .swipeActions(edge: .leading) {
                            Button {
                                info = "Archive item \(i)"
                            } label: {
                                Label(
                                    "Archive",
                                    systemImage: "archivebox.fill"
                                )
                            }
                            .tint(.cyan)


                        }
                }
            }
        }
    }
}

Example of using swipeActions

Demo swipeActions

In the example above, we use both Buttons with Labels and Buttons with Text. The difference is in their appearance. If you use Label, only the icon will appear, while with Text, the text will also appear.

Button {
    info = "Favorite item \(i)"
} label: {
    Text("Favorite")
}
.tint(.brown)

Button with Text

Button {
    info = "Archive item \(i)"
} label: {
    Label("Archive",systemImage: "archivebox.fill")
}
.tint(.cyan)

Button with Label

Feel free to also try changing the value of allowsFullSwipe to see the difference more clearly.

That's all for this tip/trick. Happy experimenting, and hopefully, this little tip will be useful.

meshwara / SwiftUI-SwipeActions

Demo how to use swipeActions in SwiftUI 3

Adding Custom Fonts to SwiftUI Applications

D. Prameswara — Mon, 26 Dec 2022 02:13:53 +0000

When building an application using SwiftUI, you can enhance its typography beyond the standard/default fonts. You have the flexibility to add custom fonts that you've downloaded from sources like fonts.google.com. By using the .font(.custom()) modifier, integrating custom fonts into your SwiftUI app becomes a straightforward process.

# Download Font Files

The first step in adding custom font s to your SwiftUI application is to prepare the font files. You can download custom font files from font service providers such as fonts.google.com.

In this example, we will use a custom font downloaded from fonts.google.com. Visit the fonts.google.com website, select your desired font, and download it by clicking the " Download family" button. For this example, let's consider a font named Dancing Script. Save the font file to a location of your choice.

# Identifying Font Names

To use custom font files , you need to know their exact font names. This is important because the file names may not always match the font names. Therefore, you must identify the font names correctly.

Before proceeding, make sure to extract the downloaded font files if necessary. Font files typically have TTF or OTF extensions, as seen in the image below.

File font with ttf or otf

One of the easiest ways to identify font names is by using the fc-scan tool, which is already available on your Mac by default. To do this, open your terminal, navigate to the folder where you downloaded and extracted the font files, and run the fc-scan command like this:

fc-scan --format "%{postscriptname}\n" NAMA_FILE_FONT

For example:

fc-scan --format "%{postscriptname}\n" DancingScript-VariableFont_wght.ttf

For the Dancing Script font in the example above, the usable font names are:

DancingScript-Regular
DancingScript_500wght
DancingScript_600wght
DancingScript_700wght

If needed, make a note of these font names.

# Adding Font Files to Your Project

After downloading the font files and identifying their names, the next step is to add these files to your project.

Before adding fonts to your project, it's a good practice to create a separate folder within your project to store all custom fonts. For example, create a folder called " Fonts".

Creating folder for Fonts

Next, add the font files with TTF or OTF extensions to the Fonts folder. This can be easily done by dragging and dropping the files into the folder.

Drag drop custom font files into project

When the " Choose options for adding these files" dialog appears, make sure to check the " Copy items if needed" option and select the target under " Add to targets".

If necessary, you can also rename the font files within your project to shorter names. This will make it easier to remember and reference these files in the project's Info.plist file.

Rename nama file custom font jika diperlukan

# Adding Font Names to Info.plist

Before you can use custom fonts, you need to inform your project about these fonts, so that it recognizes them as available fonts in the application.

Add the font file names to the Info.plist file of your Custom iOS target properties using the key " Fonts provided by application". Include all the font file names you want to use (more than one if needed). Make sure the font file names you enter match exactly with the names in the Fonts folder.

Steps for adding a custom font into info.plist

Adding custom font names to Info.plist

# Using Custom Fonts

Once you have added custom fonts, identified their names, and listed them in Info.plist, you are ready to use them. To apply custom fonts, simply use the .custom modifier within the .font modifier.

static func custom(
    _ name: String,
    size: CGFloat
) -> Font

Here's an example:

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 10) {
                Text("Dancing Script Font")
                    .font(.custom("DancingScript-Regular", size: 30))
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis elit fermentum, pulvinar tellus eu, placerat dolor.")
                    .font(.custom("DancingScript-Regular", size: 17))

                Text("Proin ut est lorem. Nam quis justo a sem finibus tempus. Morbi molestie sem rhoncus ex euismod eleifend. Proin placerat sit amet felis non lobortis. Nunc varius augue justo, eu ultrices nisl viverra vitae. Fusce quis accumsan turpis. Praesent id nisi et nisl pretium laoreet. Vivamus auctor convallis mi non sagittis.")
                    .font(.custom("DancingScript-Regular", size: 17))
            }

        }
        .padding()
    }
}

Custom font in SwiftUI app

That's it! Using custom fonts in SwiftUI is indeed an easy and straightforward process.

# Conclusion

These steps provide a clear guide on how to add custom fonts to your SwiftUI application. We hope you find this tutorial helpful in enhancing your app's typography and design.

For further reference and contributions, you can check out the GitHub repository related to SwiftUI custom fonts.

meshwara / SwiftUI-Custom-Fonts

SwiftUI's Multiline Text Alignment Guide

D. Prameswara — Thu, 22 Dec 2022 09:05:40 +0000

When using Text views in SwiftUI that consist of multiple words or sentences, by default, the Text view will be displayed with left-aligned text that wraps across several lines. If you want to change this alignment , you can use a specific modifier called multilineTextAlignment.

func multilineTextAlignment(_ alignment: TextAlignment) -> some View

Where the values for TextAlignment can be center, leading, or trailing. Here's an example of how to adjust text alignment in a Text view with multiple lines:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae elementum lorem, id pharetra metus.")
            .multilineTextAlignment(.center)
            .padding()
    }
}

If you want to limit the maximum number of lines that can be displayed, then you can add the lineLimit modifier as well.

func lineLimit(_ number: Int?) -> some View


import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae elementum lorem, id pharetra metus.")
            .multilineTextAlignment(.center)
            .lineLimit(2)
            .padding()
    }
}

By adding the lineLimit, if the number of lines exceeds the limit, the text will automatically be displayed with an ellipsis (...).

Here is an example of implementing the multilineTextAlignment modifier:

That's all for this tips and tricks. Give it a try, and hopefully, this little insight proves to be useful.

[

GitHub - meshwara/SwiftUI-MultilineTextAlignment

Contribute to meshwara/SwiftUI-MultilineTextAlignment development by creating an account on GitHub.

GitHubmeshwara

](https://github.com/meshwara/SwiftUI-MultilineTextAlignment?ref=swift.my.id)

Creating Conditional Modifiers for SwiftUI Views

D. Prameswara — Thu, 17 Nov 2022 09:49:46 +0000

View modifiers are adjustments applied to a view or other view modifiers in SwiftUI to control the style or appearance of a view. For example, you can use .padding to adjust padding or .background to set the background of a view.

#View Modifier with a Ternary Condition

Sometimes, you may want to add a modifier to a view only when a specific condition is met. For instance, if a value is true, you want to add a red background; otherwise, you don't want any background. This can generally be achieved by adding a ternary condition, as shown in the example below.

import SwiftUI

struct ContentView: View {
    @State private var showColor: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Button("Toggle warna background"){
                showColor = !showColor
            }

            Text("Hello, world!")
                .padding()
                .background(Color( showColor ? .red : .clear))
        }
        .padding()

    }
}

The mentioned ternary condition is .background(Color(showColor ? .red : .clear)). While this approach is simple, it requires you to specify all conditions explicitly. This falls short of the requirement mentioned above, which is to add a modifier only when specific conditions are met.

#View Modifier with Conditional Modifier

Another solution is to create a conditional modifier. With this approach, you can add a modifier only when specific conditions are met. To achieve this, create an View extension for View as shown below.

extension View {
    @ViewBuilder func `if`<Content: View>(_ condition: Bool, modifier: (Self) -> Content) -> some View {
        if condition {
            modifier(self)
        } else {
            self
        }
    }
}

Then, modify the code as follows to use the conditional modifier.

struct ContentView: View {
    @State private var showColor: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Button("Toggle warna background"){
                showColor = !showColor
            }

            Text("Hello, world!")
                .padding()
                // gunakan conditional modifier
                .if(showColor){ view in
                    view.background(Color(.red))
                }
        }
        .padding()
    }
}

Take note of the line .if(showColor) { view in. Here, we apply the conditional modifier, adding the .background modifier to the view if the condition is met.

With this conditional modifier, your modifiers are easier to read and understand.

meshwara / SwifiUI-Conditional-Modifier

Give it a try, and hopefully, this small improvement will be beneficial.