https://github.com/mosheberman/filterbar

A marriage of UINavigationBar and UISegmentedControl.
https://github.com/mosheberman/filterbar

Last synced: over 1 year ago
JSON representation

A marriage of UINavigationBar and UISegmentedControl.

• Host: GitHub
• URL: https://github.com/mosheberman/filterbar
• Owner: MosheBerman
• License: mit
• Created: 2015-05-07T20:05:24.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2017-11-01T06:24:26.000Z (over 8 years ago)
• Last Synced: 2024-10-19T19:23:50.983Z (over 1 year ago)
• Language: Swift
• Homepage:
• Size: 22.2 MB
• Stars: 34
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Promo](https://github.com/MosheBerman/FilterBar/raw/master/Promo.png)

# FilterBar

What happens if you combine UINavigationBar and UISegmentedControl? FilterBar.

FilterBar is a fancy implementation of UISegmentedControl that is designed to look good beneath navigation bars, search fields, and really anywhere else in your app. 

It's designed to stretch across its superview and handle segment layout nicely. 

Getting Started:

---

With CocoaPods:

    pod 'FilterBar', '~>5.0.0'

(Version 5.0.0 includes a release and shared Xcode scheme so Carthage may work. YMMV.)

If you're supporting older versions of iOS, or if you prefer, you can just drop `FilterBar.swift` to your project. 

Creating a FilterBar:

---

It's simple: 

        let filter : FilterBar = FilterBar()

        

That's it. We'll use our `filter` for the remainder of this README.

Setting the Segment Titles:

---

To choose what titles are shown on the filter bar, set the `titles` property of the filter bar. FilterBar will then trigger a layout update and automatically generate the segments. For example: 

    filter.titles = ["Albus", "Bathilda", "Charlie", "Harry"]    // Harry Potter!

    

Positioning the FilterBar:

---

FilterBar uses an intrinsic size and a pair of layout constraints to ensure that it it always centered in and stretched across its superview. You only need to provide a Y position constraint for it.

        //  Create a constraint that attaches the filter bar to the top layout guide.

        let topConstraint : NSLayoutConstraint = NSLayoutConstraint(item: filter, attribute: .Top, relatedBy: .Equal, toItem: self.topLayoutGuide, attribute: .Bottom, multiplier: 1.0, constant: 8.0)

        

        //	Add the constraint to the filter view.

        self.view.addConstraint(topConstraint)

        

Every FilterBar issued from the factory calls `setTranslatesAutoresizingMaskIntoConstraints` on itself so you don't have to.

FilterBar Tint Color

---

 To set the tint of the FilterBar, use `barTintColor`. For example:

        //  Color the filter bar

        filter.barTintColor = UIColor.whiteColor()

        

This will cause the filter bar to have a white background. 

**Note:** Previously, `barTintColor` was named `color`. The `color` property is deprecated. Setting the `color` property now sets the `barTintColor` property, but in future versions, `color` will be removed.

FilterBar Translucency

---

FilterBar can be opaque or translucent. Turn translucency on or off with the `translucent` property.

        //  Enable translucency

        filter.translucent = true

Segment Text Color

---

To set the color of the text in the FilterBar's segments, use the `tintColor` property.

        //  Color the text

        filter.tintColor = UIColor.whiteColor()

Border Color

---

FilterBar supplies a 0.5 point border that's black and transparent.

The previous version of FilterBar allowed the setting of a borderColor property. This is no longer supported, because FilterBar now mimics the appearance of UINavigationBar much more closely. 

The `borderColor` property is deprecated, and setting it does nothing.

Getting Events:

---

FilterBar is a subclass of `UIControl`, and uses the `.ValueChanged` event to handle changes.

    filter.addTarget(self, action: "segmentChanged:", forControlEvents: .ValueChanged)

This assumes that you have a handler called `segmentChanged:` that looks something like this:

    func segmentChanged(sender: AnyObject) {

    	//	Handle changes here

    }

Checking which Segment is Selected:

---

Use the `selectedSegmentIndex` property.

Interface Builder Support:

---

FilterBar supports Interface Builder in several ways. You can set the color of the bar, and FilterBar will render a preview in interface builder.

To use FilterBar with Interface Builder, drag a UIView out on to your view (controller) and change the class to FilterBar. 

How it works:

---

Take a look at [this post on Stack Overflow](http://stackoverflow.com/questions/30154753/matching-the-color-of-the-transparent-navbar/30154915#30154915) for an in-depth explanation of how I built this control.

License:

---

FilterBar is released under the MIT license. See LICENSE for details.