Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button to button when the user presses on them.

Overview

Swift-Underlined-Button-Bar

Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button to button when the user presses on them.

gif

Quick Setup:

1.) Copy and paste or download the underlinedButtonBar.swift file into your project.

2.) Instantiate and then add the underlinedButtonBar to a view of your choice.

3.) Call the moveUnderLineTo method inside of your button action methods to move the line between the buttons specified.

4.) Enjoy!

gif

Advanced Setup (Manual Manipulation of the underline with a scrollview):

1.) Integrate the underlinedButtonBar.swift file into your project.

2.) Instantiate and then add the underlinedButtonBar to a view of your choice.

3.) Create a paged scrollView that has an embedded stackview inside of it that will host the pages the button bar will navigate through.

3.) Override the scrollViewDidScroll method to recognize which ever scrollview you need it to recognize, and inside of it compute the current 'page' the paged scroll view is on by using the current content offset of the scrollview. Next you have to compute the distance between the first and last elements of the scrollview, which you then use in conjunction with the completion percentage of the contentOffset and the total scrollview width to manually move the underline on it's track for every percentage of the scrollview's total content you move. You can find this code inside the scrollViewExample.swift file.

4.) After computing the current page and translations you must set the origin of the buttonbar's underline to this translation. Following this create a switch statement that corresponds to the amount of pages inside of your paged scrollview / stackview, and in this you resize the underline to adjust to the title label of the button and you set a global current page variable to the computed page index you found in this method.

5.) Use the scrollViewDidEndDecelerating method to make the underline remain precisely under the current button, the underline may overshoot by a few pixels, hardly noticable, but forcing it to stick will get rid of this error. In the scrollView example file a custom method called turnPage() is used to style the buttons and set the scrollview's offset when one of the buttons is pressed, it's used in each button's action method.

6.) Finally, inside of the action methods for each button, set the content offset for the scrollView, an appropriate solution for this is the turnPage() method described previously where each button can be animated and their functions centralized in one method.

7.) Test everything to make sure the UI is behaving properly, if anything don't be afraid to tweak some settings.

8.) Again, enjoy!

You might also like...
UIView based progress bar that shows a progress based on duration in seconds

DurationProgressBar Create a progress bar based on a duration in seconds. The view is fully customisable. Install Add this repository to your swift pa

A tiny category on UIView that allows you to set one property:
A tiny category on UIView that allows you to set one property: "parallaxIntensity" to achieve a parallax effect with UIMotionEffect

NGAParallaxMotion A tiny category on UIView that allows you to set one property: parallaxIntensity to achieve a parallax effect with UIMotionEffect. S

Make your notification banners smaller and add some color to them

Liddell Liddell notification banners Installation Add this repository to your Package Manager: https://repo.litten.love Install Liddell Compiling Depe

Enables you to hide ur UIViews and make them screen/screen shot proof. objective c/c++ only

SecureView Enables you to hide ur UIViews and make them screen/screen shot proof. objective c/c++ only Usage UIWindow* mainWindow; - (void) setup {

A simple User Profile screen with scrollable detail area
A simple User Profile screen with scrollable detail area

User Profile Screen with Scrollable Detail Area This simple user profile screen skeleton project can be used as a starting point for creating more sop

SwiftUIWithSVG - User sag file with swift
SwiftUIWithSVG - User sag file with swift

更新 可以直接使用svg檔案, 調整下面設定可以直接用foregroundColor調整顏色. 專案下載 https://github.com/NullRa/S

A multi-user Mastodon client for iOS.

Tootbot A multi-user Mastodon client for iOS. Getting Started Tootbot must be built with Xcode 8.3 or later. The xcode-install gem can help with multi

LoadingButtton - Add button extendded from LoadingButton in the view and make it center horizontally
LoadingButtton - Add button extendded from LoadingButton in the view and make it center horizontally

LoadingButtton Usage/Examples Add button extendded from LoadingButton in the vie

An flexbox layout aimed at easy to use, which depend on Yoga.
An flexbox layout aimed at easy to use, which depend on Yoga.

DDFlexbox A flexbox framework for easy using. Install pod 'DDFlexbox' Template install Recommend using templates to create flexbox views. cd Script/

Releases(1.0.2)
  • 1.0.2(Jan 30, 2022)

    Includes a new method for keeping track of the currently selected button, as well as a fix that corrects a timing issue where the underline wouldn't be positioned correctly upon instantiation.

    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Dec 12, 2021)

Owner
Justin Cook
Electrical and Computer Engineering B.S at N.Y.I.T
Justin Cook
UIView category which makes it easy to create layout constraints in code

FLKAutoLayout FLKAutoLayout is a collection of categories on UIView which makes it easy to setup layout constraints in code. FLKAutoLayout creates sim

Florian Kugler 1.5k Nov 24, 2022
This "Calculator" application is a simple one screen design of calculator screen i have made this single screen design application just to practice AutoLayout concepts.

Calculator Layout This "Calculator" application is a simple one screen design of calculator screen i have made this single screen design application j

Chetan Parate 1 Oct 29, 2021
Registre-aqui - Mobile Application that displays infrastructure issues that your city may have

Registre Aqui About | Features | Technologies | Requirements About Mobile Applic

Gian Carlo Mantuan Dala Rosa 1 Jan 4, 2022
MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax, in addition, can be used in both Swift and Objective-C. Support Safe Area and Size Class.

MisterFusion MisterFusion makes more easier to use AutoLayout in Swift & Objective-C code. Features Simple And Concise Syntax Use in Swift and Objecti

Taiki Suzuki 316 Nov 17, 2022
Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Not Apple Autolayout wrapper. Provides placeholders. Linux support.

CGLayout Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Has cross-hierarchy coordinate space. Implemen

Koryttsev Denis 45 Jun 28, 2022
UIView extension that adds dragging capabilities

YiViewDrag Installation YiViewDrag is available through CocoaPods. To install it, simply add the following line to your Podfile: pod 'YiViewDrag' Usag

coderyi 1 Jan 20, 2022
FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView.

FlightLayout Introduction FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView. Functionally, it lives som

Anton 23 Apr 21, 2022
Demo App for Picture-in-Picture of Arbitrary UIView in iOS

> 日本語 UIPiPDemo This is a demo app for displaying an arbitrary UIView in iOS using picture-in-picture. It can be used to display information that chan

Akihiro Urushihara 61 Sep 26, 2022
This library allows you to make any UIView tap-able like a UIButton.

UIView-TapListnerCallback Example To run the example project, clone the repo, and run pod install from the Example directory first. Installation UIVie

wajeehulhassan 8 May 13, 2022
(Swift) iOS UIView layout reimagined

<UIViewprint/> iOS view layout completely reimagined Blueprint /ˈbluːˌprɪnt/ : a detailed outline or plan of action: a blueprint for success. class Vi

Alex Winston 8 Aug 26, 2022