ASSliderSegmentControl

[![CI Status](http://img.shields.io/travis/Svitlana Moiseyenko/ASSliderSegmentControl.svg?style=flat)](https://travis-ci.org/Svitlana Moiseyenko/ASSliderSegmentControl)

Features

Customizable UI
Selector line animation
Interaction with page scrolling
Following by scroll position

Demo

Requirements

Swift
Swift2

Installation

ASSliderSegmentControl is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "ASSliderSegmentControl"

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Create ASSliderSegmentControl

// create ASSliderSegmentControl with titles
lazy var segmentControl: ASSliderSegmentControl = {
    let segmentControl = ASSliderSegmentControl(frame:
      CGRect( x: 0, y: 0, width: self.view.bounds.width, height: self.navigationView.bounds.height),
        titleItems: [
            "Discover",
            "Home",
            "Settings"
      ])
    return segmentControl
  }()

// create ASSliderSegmentControl with images
lazy var segmentControlImage: ASSliderSegmentControl = {
   let segmentControl = ASSliderSegmentControl(frame:
   CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.navigationView.bounds.height),
        imageItems: [
             UIImage(named: "search")!,
             UIImage(named: "home")!,
             UIImage(named: "settings")!
            ],
        imageItemsHighlighted: [
             UIImage(named: "search_selected")!,
             UIImage(named: "home_selected")!,
             UIImage(named: "settings_selected")!
            ])
   return segmentControl
   }()

Add control to UI

navigationView.addSubview(segmentControl)

Customize control appearance

// remove separator line 
segmentControl.displaySeparator = false

// remove selected line 
segmentControl.isSelectorLine = false 
 
//Customize control appearance
segmentControl.setAppearance (
          UIColor.clearColor(),
          selectedBackgroundColor: UIColor.clearColor(),
          textColor: UIColor(named: UIColor.AppColor.LinkWater).colorWithAlphaComponent(0.3),
          font: UIFont(name: "Helvetica", size: 17)!,
          selectedTextColor: UIColor(named: UIColor.AppColor.BisonHide),
          selectedFont:UIFont(name: "Helvetica", size: 17)!,
          bottomLineColor: UIColor(named: UIColor.AppColor.LinkWater),
          selectorColor: UIColor(named: UIColor.AppColor.BisonHide),
          bottomLineHeight: 0.5,
          selectorHeight: 3
      )
      
// Or just change some parts like background color, text color, font, titleEdges, imageEdges
segmentControl.changeBackgroundControlStyle(UIColor.clearColor(), selectedBackgroundColor: UIColor(named:UIColor.AppColor.LinkWater).colorWithAlphaComponent(0.1))

Customize UI

// To react control's selector on page scrolling 
  func pageViewController(pageViewController: PageViewController, didUpdateScroll scrollView: UIScrollView) {
    segmentControl.moveSelectorLine(scrollView, targetView: view)
  }

Update contraint

// Additionaly if it need you can update constraints manually
  override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    segmentControl.updateControlConstraints()
  }

Author

https://github.com/alexnodejs

https://github.com/svetlanama

Referring Links

https://github.com/yemeksepeti/YSSegmentedControl

License

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

svetlanama / ASSliderSegmentControl