Skip to content
BottomBar component for SwiftUI
Swift
Branch: master
Clone or download
Latest commit 933f0c8 Jul 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Sources/BottomBar-SwiftUI Updated for SwiftUI Beta 4 Jul 22, 2019
.gitignore Initial commit Jul 2, 2019
Package.swift Initial commit Jul 2, 2019
README.md Update README.md Jul 22, 2019
preview.gif Add files via upload Jul 2, 2019

README.md

BottomBar-SwiftUI

BottomBar component for SwiftUI inspired by this concept

Preview

Requirements

  • Xcode 11
  • iOS 13

Installation

In Xcode go to File -> Swift Packages -> Add Package Dependency and paste this repo url https://github.com/smartvipere75/bottombar-swiftui then Next -> Branch: master -> Next

Usage

  1. import BottomBar_SwiftUI
  2. Create array of BottomBarItem (maximum 4)
  3. Create @State private var selectedIndex within a View to keep track of BottomBar selected index
  4. Create BottomBarlike BottomBar(selectedIndex: $selectedIndex, items: items)

Example

import SwiftUI
import BottomBar_SwiftUI

let items: [BottomBarItem] = [
    BottomBarItem(icon: "house.fill", title: "Home", color: .purple),
    BottomBarItem(icon: "heart", title: "Likes", color: .pink),
    BottomBarItem(icon: "magnifyingglass", title: "Search", color: .orange),
    BottomBarItem(icon: "person.fill", title: "Profile", color: .blue)
]

struct BasicView: View {
    let item: BottomBarItem

    var detailText: String {
    "\(item.title) Detail"
}

var followButton: some View {
    Button(action: openTwitter) {
        VStack {
            Text("Developed by Bezhan Odinaev")
                .font(.headline)
                .color(item.color)

            Text("@smartvipere75")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
    }
}

var destination: some View {
    Text(detailText)
        .navigationBarTitle(Text(detailText))
}

var navigateButton: some View {
    NavigationLink(destination: destination) {
        ZStack {
            Rectangle()
                .fill(item.color)
                .cornerRadius(8)
                .frame(height: 52)
                .padding(.horizontal)

            Text("Navigate")
                .font(.headline)
                .foregroundColor(.white)
        }
    }
}

func openTwitter() {
    guard let url = URL(string: "https://twitter.com/smartvipere75") else {
        return
    }
    UIApplication.shared.open(url, options: [:], completionHandler: nil)
}

var body: some View {
    VStack {
        Spacer()

        followButton

        Spacer()

        navigateButton
        }
    }
}

struct ContentView : View {
    @State private var selectedIndex: Int = 0

    var selectedItem: BottomBarItem {
        items[selectedIndex]
    }

var body: some View {
        NavigationView {
            VStack {
                BasicView(item: selectedItem)
                    .navigationBarTitle(Text(selectedItem.title))
                BottomBar(selectedIndex: $selectedIndex, items: items)
            }
        }
    }
}

Extra

Follow me on Twitter for latest updates.

You can’t perform that action at this time.