darioGzlez/FloatingSegmentedControl

Implementation of iOS Photos app segmented control in SwiftUI

SwiftUI reusable implementation of the iOS 13 photos app picker.

✨ Features

• Auto resizable view based on the number of items and the size of them.
• OnSelectedItem method to execute logic for item selection.

📖 Next features

• Ability to customize the color of the bar, items and selector.
• Customization of disable the drop shadow of the view.

⚙️ Requirements

• iOS 13+
• Xcode 11+

Installation

Using Xcode's Swift Package Manager, it can be installed by going to File -> Swift Packages -> Add Package Dependency and pasting the URL of this repository.

dependencies: [
  .package(url: "https://github.com/darioGzlez/FloatingSegmentedControl.git", from: "1.0.0")
]

Usage

The floating segmented control takes two parameters: a string array of the elements to display and a callback function that's given the selected element index.

public init(_ items: [String], title: String, onSelected: @escaping (Int) -> ()) {
      self.items = items
      self.title = title
      self.onSelected = onSelected
  }

Demo app

Simple app that uses the Floating Segmented Control to switch beetween satellite and standard modes for a MapView.

import FloatingSegmentedControl

struct ContentView: View {
    @State var items = ["Satellite", "Standad"]
    @State var mapType: MKMapType = .hybrid
    
    var body: some View {
        ZStack {
            Map(mapType: $mapType).edgesIgnoringSafeArea(.top)
            VStack {
                FloatingSegmentedControlView(
                  items,
                  title: "Map view",
                  onSelected: onSelected)
                  .padding(.top)
                Spacer()
            }
        }
    }
    
    func onSelected(index: Int) {
        switch index {
        case 0:
            mapType = .hybrid
        case 1:
            mapType = .standard
        default:
            mapType = .hybrid
        }
    }
    
}

Licence

FloatingSegmentedControl is under the MIT license. See the LICENSE file for more info.