Custom segmented picker for SwiftUI

Overview

SwiftySegmentedPicker

Custom segmented picker for SwiftUI

Usage example

struct SegmentedPickerExample: View {
    let titles: [String]
    @State var selectedIndex: Int = 0

    var body: some View {
        SegmentedPicker(
            titles,
            selectedIndex: Binding(
                get: { selectedIndex },
                set: { selectedIndex = $0 ?? 0 }),
            content: { item, isSelected in
                Text(item)
                    .foregroundColor(isSelected ? Color.black : Color.gray )
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
            },
            selection: {
                VStack(spacing: 0) {
                    Spacer()
                    Rectangle()
                        .fill(Color.black)
                        .frame(height: 1)
                }
            })
            .animation(.easeInOut(duration: 0.3))
    }
}

to get the following look:

or this guy with a capsule as selection view:

struct SegmentedPickerExample: View {
    let titles: [String]
    @State var selectedIndex: Int = 0

    var body: some View {
        SegmentedPicker(
            titles,
            selectedIndex: Binding(
                get: { selectedIndex },
                set: { selectedIndex = $0 ?? 0 }),
            content: { item, isSelected in
                Text(item)
                    .foregroundColor(isSelected ? Color.white : Color.gray )
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
            },
            selection: {
                Capsule()
                    .fill(Color.gray)
            })
            .animation(.easeInOut(duration: 0.3))
    }
}

Installation

Swift Package Manager.

SwiftySegmentedPicker is available through Swift Package Manager. To install it, in Xcode 11.0 or later select File > Swift Packages > Add Package Dependency...

and add SwiftySegmentedPicker repository URL:

https://github.com/KazaiMazai/SwiftySegmentedPicker.git

Licensing

SwiftySegmentedPicker is licensed under MIT license.

You might also like...
Aesthetic floating tab bar ––– SwiftUI & Combine ⛓️ Importable via Swift Package Manager 📦
Aesthetic floating tab bar ––– SwiftUI & Combine ⛓️ Importable via Swift Package Manager 📦

FloatingTabBar An aesthetic floating tab bar made with SwiftUI & Combine importabable via Swift Package Manager 📦 Based off BottomBar-SwiftUI Preview

AxisTabView for SwiftUI
AxisTabView for SwiftUI

AxisTabView for SwiftUI A library that allows you to easily create various styles of tab views. Supports iOS and macOS. Screenshot Style Style Style A

AxisSegmentedView for SwiftUI
AxisSegmentedView for SwiftUI

AxisSegmentedView for SwiftUI A library that allows you to easily create various styles of segmented views. Supports iOS, macOS and tvOS. Screenshot H

A segmented control with custom appearance and interactive animations. Written in Swift 3.0.
A segmented control with custom appearance and interactive animations. Written in Swift 3.0.

SJFluidSegmentedControl About If you are bored with using the default UISegmentedControl, this might save your day. SJFluidSegmentedControl is a custo

Easy to create & custom segmented view
Easy to create & custom segmented view

TCSegmentedView Easy to create & custom segmented view Usage Examples An Objective-C example project demonstrating customization options is included i

A SwiftUI List Picker to replace system Picker in List
A SwiftUI List Picker to replace system Picker in List

BetterListPicker An alternative customizable list picker in order to replace built-in non customizable Picker when we write settings view codes. Demo

A better SwiftUI Picker Use _Picker instead of Picker

BetterPicker A better SwiftUI Picker. Use _Picker instead of Picker. Create styles with _PickerStyle. The is a WIP This library is currently a work-in

Customizable segmented control with interactive animation.
Customizable segmented control with interactive animation.

LUNSegmentedControl Purpose LUNSegmentedControl is control designed to let developers use segmented control with custom appearance, customizable inter

AKASegmentedControl is a fully customizable Segmented Control for iOS
AKASegmentedControl is a fully customizable Segmented Control for iOS

#AKASegmentedControl AKASegmentedControl is a fully customizable Segmented Control for iOS ##Preview ##Usage Installation CocoaPods You can use CocoaP

A customizable Segmented Control for iOS. Supports text and image.
A customizable Segmented Control for iOS. Supports text and image.

YUSegment 中文文档 A customizable segmented control for iOS. Features Supports both (Attributed)text and image Supports show separator Supports hide indic

Animated top/bottom segmented control written in Swift.
Animated top/bottom segmented control written in Swift.

Segmentio Animated top/bottom segmented control written in Swift. Check this project on dribbble. Requirements Xcode 10 iOS 8.x+ Swift 5.0 Installatio

System Color Picker - The macOS color picker as an app with more features
System Color Picker - The macOS color picker as an app with more features

System Color Picker The macOS color picker as an app with more features Download Requires macOS 11 or later. Features Quickly copy, paste, and convert

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

 ALCameraViewController - A camera view controller with custom image picker and image cropping.
ALCameraViewController - A camera view controller with custom image picker and image cropping.

ALCameraViewController A camera view controller with custom image picker and image cropping. Features Front facing and rear facing camera Simple and c

A camera view controller with custom image picker and image cropping.
A camera view controller with custom image picker and image cropping.

ALCameraViewController A camera view controller with custom image picker and image cropping. Features Front facing and rear facing camera Simple and c

Image picker with custom crop rect for iOS written in Swift (Ported over from GKImagePicker)
Image picker with custom crop rect for iOS written in Swift (Ported over from GKImagePicker)

WDImagePicker Ever wanted a custom crop area for the UIImagePickerController? Now you can have it with WDImagePicker. Just set your custom crop area a

Custom Time Picker ViewController with Selection of start and end times in Swift 🔶
Custom Time Picker ViewController with Selection of start and end times in Swift 🔶

LFTimePicker Custom Time Picker ViewController with Selection of start and end times in Swift 🔶 . Based on Adey Salyard's design @ Dribbble One to tw

📸 iMessage-like, Image Picker Controller Provides custom features.

RAImagePicker Description RAImagePicker is a protocol-oriented framework that provides custom features from the built-in Image Picker Edit. Overview O

Custom iOS camera and photo picker with editing capabilities
Custom iOS camera and photo picker with editing capabilities

Overview Paparazzo is a component for picking and editing photos. Key Features 📷 Taking photos using camera 📱 Picking photos from user's photo libra

Comments
  • Alignment issue fix

    Alignment issue fix

    What has happened?

    There were cases, when selection view was not aligned appropriately at first appearance. For example, when SegmentedPicker was embedded into NavigationView and selection view itself was something like:

    VStack {
        Spacer()
        Color.black.frame(height: 1)
    
    }
    

    Actually, there are two issues:

    1. Incorrect selection view alignment 2 Incorrect selection view size

    Both occured at first rendering of selection view in different alignment positions and could be cured by selecting and re-selecting different items.

    Solution

    1. Incorrect selection view alignment

    New parameter - selectionAlignment of VerticalAlignment type was introduced. It allows to specify exactly how the selection view should be vertically aligned to segment content items and fixes unwanted jumps of the selection view.

    Default value is VerticalAlignment.center which is recommended config for capsule-style selection. However, for underline-style selections, VerticalAlignment.bottom is recommended.

    (See the Readme for example)

    2. Incorrect selection view size

    This is another first-render type of issues. The way we get content view sizes with geometry reader doesn't seems to be 100% exact.

    Button(
        content(...)
    ) 
    .background(GeometryReader { proxy in
        Color.clear.onAppear { frames[index] = proxy.frame(in: .global) }
    })
    
    

    I don't see any workarounds here other than to trigger segment view re-selection to get the correct appearance.

    
    @State var selectedIndex: Int?
    
    var body: some View {
        SegmentedPicker(...)
            .onAppear {
                selectedIndex = 0
             }
    }
    
    

    (See the Readme for example)

    opened by KazaiMazai 0
Releases(0.0.2)
Owner
Sergey Kazakov
Sergey Kazakov
:octocat: AdaptiveController is a 'Progressive Reduction' Swift UI module for adding custom states to Native or Custom iOS UI elements. Swift UI component by @Ramotion

ADAPTIVE TAB BAR 'Progressive Reduction' module for adding custom states to Native or Custom UI elements. We specialize in the designing and coding of

Ramotion 2k Nov 9, 2022
CustomUI in SwiftUI - Full Native Custom SwiftUI NavBar, TabBar, SearchBar, Dark mode, a little bit animations

CustomUI_in_SwiftUI Full Native Custom SwiftUI NavBar, TabBar, SearchBar, Dark m

Alexander Ryakhin 1 Jun 5, 2022
A prototype of custom tab bar using SwiftUI with techniques of mask + matchedGeometryEffect

SliderTabBar A prototype of custom tab bar using SwiftUI with techniques of mask

Ka Kui 1 Dec 24, 2021
Different Styles of Custom Tab Bar

LightCardTabBar An expiremental project exploring different types of custom-tabbar styles, screenshots as below. Screenshots Implementation The implem

Hussein Ryalat 31 Dec 23, 2022
A custom tab bar controller for iOS.

ESTabBarController ESTabBarController is a custom tab bar controller for iOS. It has a tab indicator that moves animated along the bar when switching

null 122 Oct 6, 2022
A custom tab bar controller for iOS written in Swift 4.2

A custom tab bar controller for iOS written in Swift 4.0 Screenshots Installation Cocoa Pods: pod 'AZTabBar' Swift Package Manager: You can use The Sw

Antonio Zaitoun 335 Dec 11, 2022
A custom ViewPager title strip which gives continuous feedback to the user when scrolling

SmartTabLayout A custom ViewPager title strip which gives continuous feedback to the user when scrolling. This library has been added some features an

ogaclejapan 7k Dec 30, 2022
CustomTabBar - A Custom TabBar Built Using Swift

CustomTabBar Thanks to Riccardo Cipolleschi for his awesome tutorial. The TabBar

SM Arif Ahmed 1 Feb 14, 2022
📱 TabBar – highly customizable tab bar for your SwiftUI application.

TabBar SwiftUI standard TabView component is not so flexible and to customize it you have to modify appearance proxy of UITabBar or implement your own

Tamerlan Satualdypov 162 Jan 5, 2023
Aesthetic floating tab bar ––– SwiftUI & Combine ⛓️ Importable via Swift Package Manager 📦

FloatingTabBar An aesthetic floating tab bar made with SwiftUI & Combine importabable via Swift Package Manager ?? Based off BottomBar-SwiftUI Preview

10011.co 135 Jan 8, 2023