A sideways-scrolling selection scroll view
ILSideScrollView
is a tool for presenting options for a user to select, usually for supporting data. As such, the scroller works horizontally instead of vertically like for the main data. This scroll view is perfect for letting the user select fonts, colors, and other options. The user can configure each item in the scroll view in many ways, including appearances and to optionally invoke a method when the item is tapped.
See ILSideScrollView
in action in this short demo on YouTube.
Seleting a color scheme (with preview):
Seleting a font (with preview):
Customization in the demo app:
A demo project ILSideScrollViewDemo
is included to show how ILSideScrollView
can be integrated into a project. It demos several ways that it can be put to good use.
- Copy the following 4 files into your Xcode project. Be sure to check "Copy items into destination's group folder".
ILSideScrollView.h
ILSideScrollView.m
ILSideScrollViewItem.h
ILSideScrollViewItem.m
- Add the
QuartzCore
framework to your project by clicking on your project's name at the top of the sidebar in Xcode, then going into "Build Phases". In this tab, expand "Link Binaries With Libraries" and addQuartzCore.framework
. - Add the line
#include "ILSideScrollView.h"
to the interface of the view controller that you wish to useILSideScrollView
in. If you intend to useILSideScrollView
in multiple view controllers, add the above include line to theYourAppName-Prefix.pch
file in the "Supporting Files" group. This way,ILSideScrollView
will be available to every file in your project without needing to keep adding a#include
.
-
Initialize a new mutable array. This array will contain only
ILSideScrollViewItem
objects.NSMutableArray *items = [NSMutableArray array];
-
Create a new
ILSideScrollViewItem
(subclass ofNSObject
) object for each item you need in the scroll view. This can be done in a loop or manually. Calling+item
will do this for you with the default appearance.ILSideScrollViewItem *item = [ILSideScrollViewItem item];
-
Set the desired appearance properties of each item to suit your needs. As of v1.0, the following self-explanatory properties are declared in
ILSideScrollViewItem.h
:NSString *title; UIImage *defaultBackgroundImage; UIImage *selectedBackgroundImage; UIColor *backgroundColor; UIColor *defaultTitleColor; UIColor *selectedTitleColor; UIFont *titleFont;
-
The tap action is also a property of
ILSideScrollViewItem
, but is designatedreadonly
. To give an item an action, use the-setTarget:action:withObject:
method.... UIColor *aColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0]; /* Tapping on a square will set the navigation bar to that color */ [item setTarget:self action:@selector(changeNavBarColor:) withObject:aColor]; ... - (void)changeNavBarColor:(UIColor *)color { self.navigationController.navigationBar.tintColor = color; }
The polymorphic
object
parameter is a way to pass an arbitrary object to the method call specified in theaction
parameter. In the example above, theaColor
object given to-setTarget:action:withObject:
will automatically be passed intochangeNavBarColor:
when theILSideScrollViewItem
is tapped.If no arguments are needed, set the
object
parameter tonil
. If multiple arguments need to be passed, encapsulate them in anNSDictionary
and setobject
to that dictionary.Note that any parameter after the first one in the given selector will be ignored.
-
Add the
ILSideScrollViewItem
instance to the mutable array.[items addObject:item];
-
In the view controller's
-viewDidLoad:
method, call-initWithFrame:
ILSideScrollView *scroller = [[ILSideScrollView alloc] initWithFrame: CGRectMake(x,y,w,h)];
-
To use the default appearance settings for the scroll view, skip this step. To customize, call
-setBackgroundColor:indicatorStyle:itemBorderColor:
[scroller setBackgroundColor:[UIColor blackColor] indicatorStyle:UIScrollViewIndicatorStyleWhite itemBorderColor:[UIColor whiteColor]];
-
Finally, populate the scroll view by calling
-populateSideScrollViewWithItems:
and pass it the array ofILSideScrollViewItem
objects you created earlier.[scroller populateSideScrollViewWithItems:items];
Note that this method raises an exception if
items
contains objects that are not of typeILSideScrollViewItem
. -
Add the completed scroll view to the view controller's view, and you're done!
[self.view addSubview:scroller];
- ARC
- iOS 5.0 or later
- The
QuartzCore
framework
Isaac Lim
isaacl.net
1.0
- First publish to Github
ILSideScrollView is distributed under the terms and conditions of the MIT license.
Copyright (c) 2013 isaacl.net. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.