https://github.com/smartvipere75/bottombar-swiftui

BottomBar component for SwiftUI
https://github.com/smartvipere75/bottombar-swiftui

Last synced: about 2 months ago
JSON representation

BottomBar component for SwiftUI

• Host: GitHub
• URL: https://github.com/smartvipere75/bottombar-swiftui
• Owner: smartvipere75
• License: mit
• Created: 2019-07-02T17:19:26.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-15T14:14:42.000Z (about 2 years ago)
• Last Synced: 2024-06-28T04:34:20.354Z (3 months ago)
• Language: Swift
• Homepage:
• Size: 12.8 MB
• Stars: 489
• Watchers: 6
• Forks: 39
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-about-SwiftUI - bottombar-swiftui

README

        
# BottomBar-SwiftUI

BottomBar component for SwiftUI inspired by this [concept](https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern)

![Preview](./preview.gif "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 `BottomBar`like `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)

                .foregroundColor(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

Check out my app [Spendy](https://apps.apple.com/us/app/spendy-spendings-reimagined/id1524435907)

Follow me on [Twitter](https://twitter.com/smartvipere75) for latest updates.