A Pinterest-like segment control with masking animation.

Related tags

Segmented Control swift segment widget cocoapods pinterest ios-animation coreanimation
Overview

PinterestSegment

A Pinterest-like segment control with masking animation.

Xcode 9.0+ iOS 8.0+ Swift 4.0+ Build Status CocoaPods Carthage compatible License MIT

Requirements

  • iOS 8.0+
  • Xcode 9.0
  • Swift 4.0

Installation

CocoaPods

You can use CocoaPods to install PinterestSegment by adding it to your Podfile:

platform :ios, '8.0'
use_frameworks!
pod 'PinterestSegment'

To get the full benefits import PinterestSegment wherever you import UIKit

import UIKit
import PinterestSegment

Carthage

Create a Cartfile that lists the framework and run carthage update. Follow the instructions to add $(SRCROOT)/Carthage/Build/iOS/PinterestSegment.framework to an iOS project.

github "tbxark/PinterestSegment"

Manually

  1. Download and drop PinterestSegment.swift in your project.
  2. Congratulations!

Usage example

let  style = PinterestSegmentStyle()

style.indicatorColor = UIColor(white: 0.95, alpha: 1)
style.titleMargin: CGFloat = 15
style.titlePendingHorizontal: CGFloat = 14
style.titlePendingVertical: CGFloat = 14
style.titleFont = UIFont.boldSystemFont(ofSize: 14)
style.normalTitleColor = UIColor.lightGray
style.selectedTitleColor = UIColor.darkGray

let segment = PinterestSegment(frame: CGRect(x: 20, y: 200, width: w - 40, height: 40), style: style, titles: ["Everything", "Geek", "Humor", "Art", "Food", "Home", "DIY", "Wemoent' Style", "Man's Style", "Beauty", "Travel"])

segment.valueChange = { index in
  // Do something here
}

You can also add icon for each title, Just like the blow demo gif

@IBOutlet weak var ibSegment: PinterestSegment!

var titles = [PinterestSegment.TitleElement]()
for i in 1...7 {
    guard let image = UIImage(named: "icon_\(i)"),
    let selectedImage = image.maskWithColor(color: ibSegment.style.selectedTitleColor),
    let normalImage = image.maskWithColor(color: ibSegment.style.normalTitleColor)  else { continue }
    titles.append(PinterestSegment.TitleElement(title: "Face-\(i)", selectedImage: selectedImage, normalImage: normalImage))
}
ibSegment.setRichTextTitles(titles)

Article

   Fix automaticallyAdjustsScrollViewInsets bug in PinterestSegment https://tbxark.com/2016/12/08/2016-12-08-Swift-Pinterst/

Release History

  • 1.2.0 support swift 4.0

  • 1.0.1 fix bug

  • 1.0.0 first commit

Contribute

We would love for you to contribute to PinterestSegment, check the LICENSE file for more info.

Meta

TBXark – @tbxark – [email protected]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/TBXark

Comments
  • Invoke value change event automatically without any tap on the tabs

    Invoke value change event automatically without any tap on the tabs

    I want to get inside the value change event automatically during the viewWillAppear. There's an API call which indicates which tab should be active. I have achieved to set active tabs by

    self.pinterstSegment.setSelectIndex(index: tab ?? 0)

    But it doesn't catch up the value change event in -

    self.pinterstSegment.valueChange = {index in
            // print("Value change successful")
}

    (When i press any tab and then call goes back and forth. The "value change event" get called up automatically) Could you please guide me how i can invoke this value change event without clicking on any of the tabs in first go.

    opened by Travloper 1
  • add minimum width property, decorated images, and border color

    add minimum width property, decorated images, and border color

    Needed to add more customizable UI to this segment. I've added the following:

    • a minimumWidth property to style
    • a selectedBorderColor property to style
    • a new set titles method that also takes an array of selected and normal images that will decorate the right side of the segment bar
    opened by logansease 1
  • fix vertical alignment of image decorators

    fix vertical alignment of image decorators

    This is a small fix to the method that adds the image decorator. Without this there are occasional issues with image / text vertical alignment. This fixes those issues

    opened by logansease 0
  • Add ability to refresh title images

    Add ability to refresh title images

    I have converted my usage of the title images to your new refactor, which I definitely like. However, there are a few functions I had to improve in order to get the functionality I need. Specifically, I need to be able to update the images on the segment periodically while maintaining state. To do that I needed to:

    • make some small changes to the refresh so prevent the segment from reverting back to selected Index = 0
    • make the title attributes publicly accessible and added an equatable so I can know when i should update them
    • found a bug in adding extra horizontal space when setting images, so cleaned that up
    opened by logansease 0
  • How to give the border to the elements of the pinterest segments

    How to give the border to the elements of the pinterest segments

    I want to give a static border width & color to all the elements. The selected element will have a different color and the unselected will have a nol color but only a border. How can i give the borders?

    opened by Travloper 1
  • Init form storyboard not working

    Init form storyboard not working

    If I add a view on storyboard and mark it as PinterestSegment, than drag it as outlet in the view controller, it gives me error, specifically "Thread 1: Fatal error: init(coder:) has not been implemented". Is there an error...

    opened by elena-dare 3
  • Add closure for value selection.

    Add closure for value selection.

    First, thanks for the lib. It fits the layout and interaction I wanted for a project of mine, however I need to be notified of each selection in such project, even if it is the same value. I've forked and added an extra closure for this.

    Since it might be useful for others, I am opening this PR. I've increased the version for 1.2.3.

    opened by adrianod1as 0
  • storyboard load segment error

    storyboard load segment error 

    /PinterestSegment-master/Example/PinterestSegment/Base.lproj/Main.storyboard: error: IB Designables: Failed to render and update auto layout status for ViewController (vXZ-lx-hvc): The agent crashed
    opened by springlo 1
Releases(1.2.3)
Owner
TBXark
Gopher, Swift programmer
TBXark
GitHub http://tbxark.com/2016/12/08/2016-12-08-Swift-Pinterst/
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 AKASegmentedControl is a fully customizable Segmented Control for iOS ##Preview ##Usage Installation CocoaPods You can use CocoaP

Ali Karagoz 389 Sep 1, 2022
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
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
Runkeeper design switch control

DGRunkeeperSwitch Runkeeper design switch control (two part segment control) developed in Swift 2.0 Requirements Xcode 7-beta or higher iOS 8.0 or hig

Danil Gontovnik 1.9k Dec 2, 2022
RCalendarPicker A date picker control, Calendar calendar control, select control, calendar, date selection, the clock selection control.

RCalendarPicker RCalendarPicker Calendar calendar control, select control, calendar, date selection, the clock selection control. 日历控件 ，日历选择控件，日历，日期选择

杜耀辉 131 Jul 18, 2022
A smart and easy-to-use image masking and cutout SDK for mobile apps.

TinyCrayon SDK for iOS A smart and easy-to-use image masking and cutout SDK for mobile apps. TinyCrayon SDK provides tools for adding image cutout and

null 1.8k Dec 30, 2022
User input masking library repo.

Migration Guide: v.6 This update brings breaking changes. Namely, the autocomplete flag is now a part of the CaretGravity enum, thus the Mask::apply c

red_mad_robot 548 Dec 20, 2022
A segment switcher with dynamic text mask effect

DynamicMaskSegmentSwitch A segment switcher with dynamic text mask effect ##Preview: Indicator will bounce when progress less than 0 or larger than 1.

Qitao Yang 309 Oct 7, 2022
The hassle-free way to add Segment analytics to your Swift app (iOS/tvOS/watchOS/macOS/Linux).

Analytics-Swift The hassle-free way to add Segment analytics to your Swift app (iOS/tvOS/watchOS/macOS/Linux/iPadOS). Analytics helps you measure your

Segment 53 Dec 16, 2022
🔍 Awesome fully customize search view like Pinterest written in Swift 5.0 + Realm support!

YNSearch + Realm Support Updates See CHANGELOG for details Intoduction ?? Awesome search view, written in Swift 5.0, appears search view like Pinteres

Kyle Yi 1.2k Dec 17, 2022
The waterfall (i.e., Pinterest-like) layout for UICollectionView.

CHTCollectionViewWaterfallLayout CHTCollectionViewWaterfallLayout is a subclass of UICollectionViewLayout, and it trys to imitate UICollectionViewFlow

Nelson 4.4k Dec 24, 2022
🔍 Awesome fully customize search view like Pinterest written in Swift 5.0 + Realm support!

YNSearch + Realm Support Updates See CHANGELOG for details Intoduction ?? Awesome search view, written in Swift 5.0, appears search view like Pinteres

Kyle Yi 1.2k Dec 17, 2022
SwiftUI views that arrange their children in a Pinterest-like layout

SwiftUI Masonry SwiftUI views that arrange their children in a Pinterest-like layout. HMasonry A view that arranges its children in a horizontal mason

Ciaran O'Brien 88 Dec 27, 2022
This is a Swift based demo project to show how to make the transition Pinterest liked.

PinterestSwift Compatible with Xcode 11 / Swift 5.0 This is a Swift based demo project to show how to make the transition Pinterest 2.0+ liked. Refer

Nicholas Tau 1.9k Dec 20, 2022
🥺Pinterest Layout Tutorial

PinterestTutorial-iOS ?? Pinterest Layout Tutorial 이미지 크기에 따라서 동적으로 셀의 레이아웃을 설정하는 핀터레스트 레이아웃 구현해 보았다. 완성 코드 UICollectionViewDelegateFlowLayout 의 서브클래스

Hyungyu Kim 6 May 10, 2022
Context menu similar to the one in the Pinterest iOS app

VLDContextSheet A clone of the Pinterest iOS app context menu. Example Usage VLDContextSheetItem *item1 = [[VLDContextSheetItem alloc] initWithTitle:

Vladimir Angelov 173 Mar 28, 2022
A deep copy of Pinterest in Swift

Demo YouTube: Demo (2 minutes) 优酷：http://v.youku.com/v_show/id_XMzE3OTc5NDY2MA==.html?spm=a2h3j.8428770.3416059.1 The app is actually smoother than sh

Andy Tong 73 Sep 14, 2022
An experiment for using SwiftUI's custom timing Animation to create an orbital-like animation.

Orbital-SwiftUI-Animation An experiment for using SwiftUI's custom timing curve to create an orbital-like animation. How it looks: How it works: Apply

Mostafa Abdellateef 7 Jan 2, 2023
Control Room : a macOS app that lets you control the simulators for iOS, tvOS, and watchOS

Control Room is a macOS app that lets you control the simulators for iOS, tvOS, and watchOS – their UI appearance, status bar configuration, and more.

null 0 Nov 30, 2021