Giter VIP home page Giter VIP logo

urbsegmentedcontrol's Introduction

URBSegmentedControl

Overview

URBSegmentedControl is a more flexible alternative to the default UISegmentedControl available in UIKit that offers easier customization and more options for layout orientations with titles and images. However, much of the same functionality and API methods that are available in UISegmentedControl are also available in URBSegmentedControl, making it an easier drop-in replacement within your own projects.

Screenshot of the sample project example

Features

  • Segments can be just icons or titles, or titles with icons
  • Supports customizable colors and fonts
  • Supports using UIAppearance for setting the global styles on all instances
  • Supports blocks for value changes
  • Automatically tints images based on normal and selected image colors (no need for two separate versions of your icons)
  • Horizontal and vertial layout orientations for the overall control and for each individual segment
  • Uses ARC and targets iOS 5.0+

Installation

To use URBSegmentedControl in your own project:

  • import URBSegmentedControl.h and URBSegmentedControl.m files into your project, and then include "URBSegmentedControl.h" where needed, or in your precompiled header
  • link against the QuartzCore framework by adding QuartzCore.framework to your project under Build Phases > Link Binary With Libraries.

Once installed, you can then use URBSegmentedControl just as you would with UIKit's UISegmentedControl.

This project uses ARC and targets iOS 5.0+.

Usage

(see more detailed usage examples in the included project under /SampleProject)

The following is the most basic example of creating an URBSegmentedControl instance that mimics the same for UISegmentedControl:

NSArray *titles = [NSArray arrayWithObjects:[@"Item 1" uppercaseString], [@"Item 2" uppercaseString], [@"Item 3" uppercaseString], nil];
URBSegmentedControl *control = [[URBSegmentedControl alloc] initWithItems:titles];
[control addTarget:self action:@selector(handleSelection:) forControlEvents:UIControlEventValueChanged];
[viewController.view addSubview:control];

Instead of adding a target to the control to respond to value changes, you can set a handler block on each instance:

NSArray *titles = [NSArray arrayWithObjects:[@"Item 1" uppercaseString], [@"Item 2" uppercaseString], [@"Item 3" uppercaseString], nil];
URBSegmentedControl *control = [[URBSegmentedControl alloc] initWithItems:titles];
[control setControlEventBlock:^(NSInteger index, URBSegmentedControl *segmentedControl) {
	NSLog(@"control value changed - index=%i", index);
}];
[viewController.view addSubview:control];

If you just want a control with icons only, you would initialize the instance with initWithIcons::

NSArray *icons = [NSArray arrayWithObjects:[UIImage imageNamed:@"mountains.png"], [UIImage imageNamed:@"snowboarder.png"], [UIImage imageNamed:@"biker.png"], nil];
URBSegmentedControl *control = [[URBSegmentedControl alloc] initWithIcons:icons];
[viewController.view addSubview:control];

Alternative, you can initialize an instance with both titles and images (as long as both arrays provided for each are equal in length):

NSArray *titles = [NSArray arrayWithObjects:[@"Item 1" uppercaseString], [@"Item 2" uppercaseString], [@"Item 3" uppercaseString], nil];
NSArray *icons = [NSArray arrayWithObjects:[UIImage imageNamed:@"mountains.png"], [UIImage imageNamed:@"snowboarder.png"], [UIImage imageNamed:@"biker.png"], nil];
URBSegmentedControl *control = [[URBSegmentedControl alloc] initWithTitles:titles icons:icons];
[viewController.view addSubview:control];

Customization

Your URBSegmentedControl can be customized using the following properties:

// base styles
@property (nonatomic, strong) UIColor *baseColor;		// default [UIColor colorWithRed:0.35 green:0.35 blue:0.35 alpha:1.0];
@property (nonatomic, strong) UIColor *strokeColor;		// default [UIColor darkGrayColor]
@property (nonatomic, assign) CGFloat strokeWidth;		// default 2.0
@property (nonatomic) CGFloat cornerRadius;				// default 2.0

// segment styles
@property (nonatomic, strong) UIColor *segmentBackgroundColor;		// default [UIColor redColor]
@property (nonatomic, strong) UIColor *imageColor;					// default [UIColor grayColor]
@property (nonatomic, strong) UIColor *selectedImageColor;			// default [UIColor whiteColor]

By default, your images will be tinted with the colors you define using the imageColor and selectedImageColor properties. If you would rather keep your images in their original format, just set these color properties to nil:

control.imageColor = nil;
control.selectedImageColor = nil;

TODO

  • Support setting images to use for background and segment states instead of drawing in CoreGraphics within the class
  • Support for UISegmentedControl's momentary mode
  • Better support for customization using UIAppearance
  • Support installation via CocoaPods

Credits

The sample URBSegmentedControlDemo project uses the following icons from their respective authors (all from The Noun Project ):

License

This code is distributed under the terms and conditions of the MIT license. Review the full LICENSE for all the details.

Support/Contact

Think you found a bug or just have a feature request? Just post it as an issue, but make sure to review the existing issues first to avoid duplicates. You can also hit me up at @u10int for anything else, or to let me know how you're using this component. Thanks!

urbsegmentedcontrol's People

Contributors

u10int avatar

Watchers

Leo Pasquini avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.