AshComponents

AshComponents is a UI custom components package built using SwiftUI and avelable for iOS 15 and future versions.

Demo

| | |

Overview

AshComponents provides a better solution to SwiftUI's built-in compontents such as NavigationView and TabView.

• Installation
• Requirements
• Getting started

Installation

Swift Package Manager

AshComponents can be added to your progect through Swift Package Manager.

1. From the File menu, select Add Package...
2. Enter this repo URL or name into the search bar.
3. Click on Add Package.
4. At this point Xcode will verify the package and get the latest version.
5. Click again on Add Package.
6. Now the package should be added to your Xcode project.

Remember to verify if the package has been succesfully added into the Frameworks, Libraries and Embedded Content section of your project.

If not, just click on the + button and select it from the file tree that will be shown.

Now you just need to import the package on your SwiftUI file and enjoy it 🎉.

import AshComponents

Requirements

• iOS 15.0+
• Xcode 13+

Getting started

TabBar

The TabBar works exactly like the default SwiftUI TabView, but it looks way better 🙂

Floating TabBar

import SwiftUI
import AshComponents

struct AshTabBar_Test: View {
    
    @State private var tabSelection: TabBarItem = TabBarItem(iconName: "house", title: "Home", color: .blue)
    
    var body: some View {
        AshFloatingTabBarContainerView(selection: $tabSelection) {
            Color.blue
                .customTabBarItem(tab: TabBarItem(iconName: "house", title: "Home", color: .blue), selection: $tabSelection)
            Color.red
                .customTabBarItem(tab: TabBarItem(iconName: "heart", title: "Favorites", color: .pink), selection: $tabSelection)
        }
    }
}

Fixed TabBar

import SwiftUI
import AshComponents

struct AshTabBar_Test: View {
    
    @State private var tabSelection: TabBarItem = TabBarItem(iconName: "house", title: "Home", color: .blue)
    
    var body: some View {
        AshTabBarContainerView(selection: $tabSelection) {
            Color.blue
                .customTabBarItem(tab: TabBarItem(iconName: "house", title: "Home", color: .blue), selection: $tabSelection)
            Color.red
                .customTabBarItem(tab: TabBarItem(iconName: "heart", title: "Favorites", color: .pink), selection: $tabSelection)
        }
    }
}

You can customize the name, the color and the icon of the tab bar items using the modifier .customTabBarItem.

NavBar

The NavBar implements the functionalities of the default SwiftUI NavigationView including the useage of NavigationLink or the custom NavLink.

|

struct HomeView: View {
    var body: some View {
        AshNavView {
            VStack {
                Text("Home")
            }
            .customNavigationTitle("Home")
            .customNavigationSubtitle("This is the home page of your app")
            .customNavigationBackgroundColor(.blue)
            .customNavigationForegroundColor(.white)
            .customNavigationIcon("house")
            .customNavigationBackButtonHidden(true)
        }
    }
}

You can use the custom modifiers to adjust the NavBar to your needs.

Title

.customNavigationTitle("Home")

Subtitle

.customNavigationSubtitle("This is the home page of your app")

Background color

.customNavigationBackgroundColor(.blue)

Foreground color

customNavigationForegroundColor(.white)

Icon

.customNavigationIcon("house")

The image name refers to SF Symbols.