Create Background Shapes

To create custom background shapes clip the background colour using shapes

Code:

struct ContentView: View {
    var body: some View {
        
        Label {
            Text("Location")
                .foregroundColor(Color.white)
               
        } icon: {
            Image(systemName: "pin")
                            .foregroundColor(Color.white)
        }.padding(10)
        .background(Color.black)
        .clipShape(Capsule())
        }
        
}


	

Output:

To use shapes instead of images Example-

Code:

Label {
            Text("Location")
                .foregroundColor(Color.blue)
        } icon: {
            Rectangle()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.blue)


	

Output:

Additional-

Sometimes we may require vertical labels. To create vertical labels use VStacks with a custom label class we call verticalLabelStyle & call different parts of your label to be displayed in a vertical stack.

Code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        Label("Location", systemImage: "pin")
            .labelStyle(VerticalLabelStyle())
    }
        
    
}
struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon
            configuration.title
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
	

IOS TOPICS

IOS Introduction

Swift UI Label

Swift UI Button

Swift UI Text Field

Swift UI Slider

Swift UI Switch

Swift UI Stepper

Swift UI Date Picker

Swift UI Segmented Control

Views

Table View

Collection Views

SCROLL VIEW

iOS Content View

iOS View Controllers

iOS Bar interface

iOS Navigation interface

iOS Architect Pattern

iOS Libraries

iOS Web request and parsing

iOS user defaults

iOS Coredata and database

Create Background Shapes

To create custom background shapes clip the background colour using shapes

Code:

Output:

To use shapes instead of images Example-

Code:

Output:

Additional-

Sometimes we may require vertical labels. To create vertical labels use VStacks with a custom label class we call verticalLabelStyle & call different parts of your label to be displayed in a vertical stack.

Code:

Output: