Custom segmented picker for SwiftUI

Related tags

Tab Bar SwiftySegmentedPicker
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

10011.co 134 Jan 5, 2023
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

jasu 148 Jan 6, 2023
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

jasu 97 Dec 30, 2022
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

Sasho Jadrovski 904 Dec 30, 2022
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

Chuong Tran 22 Dec 4, 2022
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

Jinya 1 Apr 11, 2022
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

Eric Lewis 17 Dec 14, 2022
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

Stormotion 346 Dec 25, 2021
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

Ali Karagoz 389 Sep 1, 2022
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

YyGgQq 112 Jun 10, 2022
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

Yalantis 2.4k Jan 9, 2023
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

Sindre Sorhus 758 Dec 24, 2022
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

IBRAHIM YILMAZ 2 Jan 31, 2022
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

Alex Littlejohn 2k Dec 6, 2022
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

Alex Littlejohn 2k Dec 29, 2022
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

Wu Di 96 Dec 19, 2022
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

Awesome Labs 65 Nov 11, 2022
📸 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

Rashed Al-Lahaseh 14 Aug 18, 2022
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

avito.tech 757 Jan 4, 2023
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
GitHub
: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