ButtonBar LayerKit UITransitionView Demo
Submitted by drunknbass on December 2, 2007 - 1:15pm.
here is the header for the "ButtonBarView.h" , i know the name of the class isnt very good.. :O
also i have ALOT of headers in this that you dont need.. so feel free to remove them.. this was a test class for me so i have alot that isnt needed for this particular example.
here is a sample class you can load up into your main class with this
( im loading it into mainView but you can use whatever )

buttonBarView = [[ButtonBarView alloc] initWithFrame:CGRectMake(0,0,320,460)];
[mainView addSubview:buttonBarView];
[buttonBarView release];
[mainView addSubview:buttonBarView];
[buttonBarView release];
here is the header for the "ButtonBarView.h" , i know the name of the class isnt very good.. :O
also i have ALOT of headers in this that you dont need.. so feel free to remove them.. this was a test class for me so i have alot that isnt needed for this particular example.

#import <Foundation/Foundation.h>
#import <LayerKit/LayerKit.h>
#import <UIKit/UIKit.h>
#import <UIKit/UIView-Geometry.h>
#import <UIKit/UIImageAndTextTableCell.h>
#import <UIKit/UIApplication.h>
#import <UIKit/UIWindow.h>
#import <UIKit/UIView.h>
#import <UIKit/UIView-Hierarchy.h>
#import <UIKit/UIView-UIImageViewImplementation.h>
#import <UIKit/UIButtonBar.h>
#import <UIKit/UINavigationBar.h>
#import <UIKit/UINavBarButton.h>
#import <UIKit/UINavigationBarBackground.h>
#import <UIKit/UINavigationItem.h>
#import <UIKit/UIPreferencesTable.h>
#import <UIKit/UIPreferencesTableCell.h>
#import <UIKit/UITableColumn.h>
#import <UIKit/UISegmentedControl.h>
#import <UIKit/UIPreferencesTextTableCell.h>
#import <UIKit/UIPreferencesControlTableCell.h>
#import <UIKit/UIPreferencesDeleteTableCell.h>
#import <UIKit/UISwitchControl.h>
#import <UIKit/UITransformAnimation.h>
#import <UIKit/UIKeyboard.h>
#import <UIKit/UIAnimator.h>
#import <UIKit/UIPushButton.h>
#import <UIKit/CDStructures.h>
#import <UIKit/UITextField.h>
#import <UIKit/UITransitionView.h>
#import <CoreGraphics/CoreGraphics.h>
#import <GraphicsServices/GraphicsServices.h>
#import "WebCore/WebFontCache.h"
@interface ButtonBarView : UIView {
UITransitionView *_transitionView;
UITransitionView *_barTransitionView;
UIButtonBar *_buttonBar;
UIView *testview1;
UIView *testview2;
UIView *testview3;
UIView *testview4;
UIView *testview5;
UIView *blankView;
int currentView;
int barStatus;
struct CGRect rect;
struct CGRect _offScreenRect;
struct CGRect _onScreenRect;
}
-(id)initWithFrame:(struct CGRect)frame;
- (UIButtonBar *)createButtonBar;
- (void)buttonBarItemTapped:(id)sender;
- (NSArray *)buttonBarItems;
- (void)reloadButtonBar;
- (void)mouseDown:(struct __GSEvent *)event;
- (UITransitionView *)createTransitionView;
- (UITransitionView *)createBarTransitionView;
-(void)testAnimation;
#define CB_1 0x00
#define CB_2 0x01
#define CB_3 0x02
#define CB_4 0x03
#define CB_5 0x04
extern NSString *kUIButtonBarButtonAction;
extern NSString *kUIButtonBarButtonInfo;
extern NSString *kUIButtonBarButtonInfoOffset;
extern NSString *kUIButtonBarButtonSelectedInfo;
extern NSString *kUIButtonBarButtonStyle;
extern NSString *kUIButtonBarButtonTag;
extern NSString *kUIButtonBarButtonTarget;
extern NSString *kUIButtonBarButtonTitle;
extern NSString *kUIButtonBarButtonTitleVerticalHeight;
extern NSString *kUIButtonBarButtonTitleWidth;
extern NSString *kUIButtonBarButtonType;
@end
#import <LayerKit/LayerKit.h>
#import <UIKit/UIKit.h>
#import <UIKit/UIView-Geometry.h>
#import <UIKit/UIImageAndTextTableCell.h>
#import <UIKit/UIApplication.h>
#import <UIKit/UIWindow.h>
#import <UIKit/UIView.h>
#import <UIKit/UIView-Hierarchy.h>
#import <UIKit/UIView-UIImageViewImplementation.h>
#import <UIKit/UIButtonBar.h>
#import <UIKit/UINavigationBar.h>
#import <UIKit/UINavBarButton.h>
#import <UIKit/UINavigationBarBackground.h>
#import <UIKit/UINavigationItem.h>
#import <UIKit/UIPreferencesTable.h>
#import <UIKit/UIPreferencesTableCell.h>
#import <UIKit/UITableColumn.h>
#import <UIKit/UISegmentedControl.h>
#import <UIKit/UIPreferencesTextTableCell.h>
#import <UIKit/UIPreferencesControlTableCell.h>
#import <UIKit/UIPreferencesDeleteTableCell.h>
#import <UIKit/UISwitchControl.h>
#import <UIKit/UITransformAnimation.h>
#import <UIKit/UIKeyboard.h>
#import <UIKit/UIAnimator.h>
#import <UIKit/UIPushButton.h>
#import <UIKit/CDStructures.h>
#import <UIKit/UITextField.h>
#import <UIKit/UITransitionView.h>
#import <CoreGraphics/CoreGraphics.h>
#import <GraphicsServices/GraphicsServices.h>
#import "WebCore/WebFontCache.h"
@interface ButtonBarView : UIView {
UITransitionView *_transitionView;
UITransitionView *_barTransitionView;
UIButtonBar *_buttonBar;
UIView *testview1;
UIView *testview2;
UIView *testview3;
UIView *testview4;
UIView *testview5;
UIView *blankView;
int currentView;
int barStatus;
struct CGRect rect;
struct CGRect _offScreenRect;
struct CGRect _onScreenRect;
}
-(id)initWithFrame:(struct CGRect)frame;
- (UIButtonBar *)createButtonBar;
- (void)buttonBarItemTapped:(id)sender;
- (NSArray *)buttonBarItems;
- (void)reloadButtonBar;
- (void)mouseDown:(struct __GSEvent *)event;
- (UITransitionView *)createTransitionView;
- (UITransitionView *)createBarTransitionView;
-(void)testAnimation;
#define CB_1 0x00
#define CB_2 0x01
#define CB_3 0x02
#define CB_4 0x03
#define CB_5 0x04
extern NSString *kUIButtonBarButtonAction;
extern NSString *kUIButtonBarButtonInfo;
extern NSString *kUIButtonBarButtonInfoOffset;
extern NSString *kUIButtonBarButtonSelectedInfo;
extern NSString *kUIButtonBarButtonStyle;
extern NSString *kUIButtonBarButtonTag;
extern NSString *kUIButtonBarButtonTarget;
extern NSString *kUIButtonBarButtonTitle;
extern NSString *kUIButtonBarButtonTitleVerticalHeight;
extern NSString *kUIButtonBarButtonTitleWidth;
extern NSString *kUIButtonBarButtonType;
@end
and here is the "ButtonBarView.m"

#import "ButtonBarView.h"
@implementation ButtonBarView
-(id)initWithFrame:(CGRect)frame
{
if ((self == [super initWithFrame:frame])!=nil) {
barStatus = 1;
rect = [UIHardware fullScreenApplicationContentRect];
_offScreenRect = frame;
_onScreenRect = frame;
_onScreenRect.origin.x = 0.0f;
rect.origin.x = rect.origin.y = 0.0f;
// Create some colors
float cyan[4] = {0, 0.6823, 0.9372, 1};
float yellow[4] = {1, 0.9490, 0, 1};
float magenta[4] = {0.9254, 0, 0.5490, 1};
float orange[4] = {1.0, 0.6588, 0, 1};
float white[4] = {1, 1, 1, 1};
// Create your views
testview1 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview2 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview3 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview4 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview5 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
[testview1 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), cyan)];
[testview2 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), yellow)];
[testview3 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), magenta)];
[testview4 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), orange)];
[testview5 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), white)];
// _transitionView is used for handling transitions of the views only
// _barTransitionView is used to handle the button bars transitioning
_transitionView = [ self createTransitionView ];
_barTransitionView = [ self createBarTransitionView ];
_buttonBar = [ self createButtonBar ];
[ self addSubview: _transitionView ];
[ self addSubview: _barTransitionView ];
[ _transitionView transition:6 toView:testview1 ];
[ _barTransitionView transition:6 toView:_buttonBar ];
}
return self;
}
- (UITransitionView *)createTransitionView {
UITransitionView *transitionView = [ [ UITransitionView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
return transitionView;
}
- (UITransitionView *)createBarTransitionView {
UITransitionView *transitionBarView = [ [ UITransitionView alloc ] initWithFrame:CGRectMake(0.0f, 411.0f, 320.0f, 49.0f)];
// Create empty(blank) view for to transition the button bar to
blankView = [ [ UIView alloc ] initWithFrame:CGRectMake(0.0f, 411.0f, 320.0f, 49.0f)];
return transitionBarView;
}
- (UIButtonBar *)createButtonBar {
UIButtonBar *buttonBar;
buttonBar = [ [ UIButtonBar alloc ]
initInView: self
withFrame: CGRectMake(0.0f, 0.0f, 320.0f, 49.0f)
withItemList: [ self buttonBarItems ] ];
[buttonBar setDelegate:self];
[buttonBar setBarStyle:1];
[buttonBar setButtonBarTrackingMode: 2];
int buttons[5] = { 1, 2, 3, 4, 5};
[buttonBar registerButtonGroup:0 withButtons:buttons withCount: 5];
[buttonBar showButtonGroup: 0 withDuration: 0.0f];
int tag;
for(tag = 1; tag < 5; tag++) {
[ [ buttonBar viewWithTag:tag ]
setFrame:CGRectMake(2.0f + ((tag - 1) * 64.0f), 1.0f, 64.0f, 48.0f)
];
}
[ buttonBar showSelectionForButton: 1];
return buttonBar;
}
- (NSArray *)buttonBarItems {
return [ NSArray arrayWithObjects:
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 1], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button1", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 2], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button2", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 3], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button3", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 4], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button4", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 5], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button5", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
nil
];
}
- (void)buttonBarItemTapped:(id) sender {
int button = [ sender tag ];
switch (button) {
case 1:
if (currentView == CB_1) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview1 ];
currentView = CB_1;
}
break;
case 2:
if (currentView == CB_2) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview2 ];
currentView = CB_2;
}
break;
case 3:
if (currentView ==CB_3) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview3 ];
currentView = CB_3;
}
break;
case 4:
if (currentView == CB_4) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview4 ];
currentView = CB_4;
}
break;
case 5:
if (currentView == CB_5) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview5 ];
currentView = CB_5;
}
break;
}
}
- (void)reloadButtonBar {
[ _buttonBar removeFromSuperview ];
[ _buttonBar release ];
_buttonBar = [ self createButtonBar ];
}
// Gets a mouse down event in the rect, but you can use it to catch mouse event in any rect you want
- (void)mouseDown:(GSEvent *)event {
NSLog(@"%s", _cmd);
CGPoint point = GSEventGetLocationInWindow(event);
if (CGRectContainsPoint(rect, point)) {
if (!barStatus) {
[ _barTransitionView transition:3 fromView:blankView toView:_buttonBar];
barStatus = 1;
}
else {
[ _barTransitionView transition:5 fromView:_buttonBar toView:blankView ];
barStatus = 0;
}
}
}
// Sample layerkit animation
-(void)testAnimation {
LKAnimation *animation = [LKTransition animation];
[animation setType: @"oglFlip"];
[animation setTimingFunction: [LKTimingFunction functionWithName: @"easeInEaseOut"]];
[animation setFillMode: @"extended"];
[animation setTransitionFlags: 3];
[animation setDuration: 10];
[animation setSpeed:0.35];
[animation setSubtype: @"fromLeft"];
[[self _layer] addAnimation: animation forKey: 0];
}
@end
@implementation ButtonBarView
-(id)initWithFrame:(CGRect)frame
{
if ((self == [super initWithFrame:frame])!=nil) {
barStatus = 1;
rect = [UIHardware fullScreenApplicationContentRect];
_offScreenRect = frame;
_onScreenRect = frame;
_onScreenRect.origin.x = 0.0f;
rect.origin.x = rect.origin.y = 0.0f;
// Create some colors
float cyan[4] = {0, 0.6823, 0.9372, 1};
float yellow[4] = {1, 0.9490, 0, 1};
float magenta[4] = {0.9254, 0, 0.5490, 1};
float orange[4] = {1.0, 0.6588, 0, 1};
float white[4] = {1, 1, 1, 1};
// Create your views
testview1 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview2 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview3 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview4 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
testview5 = [ [ UIView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
[testview1 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), cyan)];
[testview2 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), yellow)];
[testview3 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), magenta)];
[testview4 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), orange)];
[testview5 setBackgroundColor: CGColorCreate(CGColorSpaceCreateDeviceRGB(), white)];
// _transitionView is used for handling transitions of the views only
// _barTransitionView is used to handle the button bars transitioning
_transitionView = [ self createTransitionView ];
_barTransitionView = [ self createBarTransitionView ];
_buttonBar = [ self createButtonBar ];
[ self addSubview: _transitionView ];
[ self addSubview: _barTransitionView ];
[ _transitionView transition:6 toView:testview1 ];
[ _barTransitionView transition:6 toView:_buttonBar ];
}
return self;
}
- (UITransitionView *)createTransitionView {
UITransitionView *transitionView = [ [ UITransitionView alloc ] initWithFrame:CGRectMake(0,0,320,460)];
return transitionView;
}
- (UITransitionView *)createBarTransitionView {
UITransitionView *transitionBarView = [ [ UITransitionView alloc ] initWithFrame:CGRectMake(0.0f, 411.0f, 320.0f, 49.0f)];
// Create empty(blank) view for to transition the button bar to
blankView = [ [ UIView alloc ] initWithFrame:CGRectMake(0.0f, 411.0f, 320.0f, 49.0f)];
return transitionBarView;
}
- (UIButtonBar *)createButtonBar {
UIButtonBar *buttonBar;
buttonBar = [ [ UIButtonBar alloc ]
initInView: self
withFrame: CGRectMake(0.0f, 0.0f, 320.0f, 49.0f)
withItemList: [ self buttonBarItems ] ];
[buttonBar setDelegate:self];
[buttonBar setBarStyle:1];
[buttonBar setButtonBarTrackingMode: 2];
int buttons[5] = { 1, 2, 3, 4, 5};
[buttonBar registerButtonGroup:0 withButtons:buttons withCount: 5];
[buttonBar showButtonGroup: 0 withDuration: 0.0f];
int tag;
for(tag = 1; tag < 5; tag++) {
[ [ buttonBar viewWithTag:tag ]
setFrame:CGRectMake(2.0f + ((tag - 1) * 64.0f), 1.0f, 64.0f, 48.0f)
];
}
[ buttonBar showSelectionForButton: 1];
return buttonBar;
}
- (NSArray *)buttonBarItems {
return [ NSArray arrayWithObjects:
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 1], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button1", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 2], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button2", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 3], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button3", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 4], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button4", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
[ NSDictionary dictionaryWithObjectsAndKeys:
@"buttonBarItemTapped:", kUIButtonBarButtonAction,
@"imageup.png", kUIButtonBarButtonInfo,
@"imagedown.png", kUIButtonBarButtonSelectedInfo,
[ NSNumber numberWithInt: 5], kUIButtonBarButtonTag,
self, kUIButtonBarButtonTarget,
@"Button5", kUIButtonBarButtonTitle,
@"0", kUIButtonBarButtonType,
nil
],
nil
];
}
- (void)buttonBarItemTapped:(id) sender {
int button = [ sender tag ];
switch (button) {
case 1:
if (currentView == CB_1) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview1 ];
currentView = CB_1;
}
break;
case 2:
if (currentView == CB_2) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview2 ];
currentView = CB_2;
}
break;
case 3:
if (currentView ==CB_3) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview3 ];
currentView = CB_3;
}
break;
case 4:
if (currentView == CB_4) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview4 ];
currentView = CB_4;
}
break;
case 5:
if (currentView == CB_5) { }
else {
[self testAnimation];
[ _transitionView transition:0 toView:testview5 ];
currentView = CB_5;
}
break;
}
}
- (void)reloadButtonBar {
[ _buttonBar removeFromSuperview ];
[ _buttonBar release ];
_buttonBar = [ self createButtonBar ];
}
// Gets a mouse down event in the rect, but you can use it to catch mouse event in any rect you want
- (void)mouseDown:(GSEvent *)event {
NSLog(@"%s", _cmd);
CGPoint point = GSEventGetLocationInWindow(event);
if (CGRectContainsPoint(rect, point)) {
if (!barStatus) {
[ _barTransitionView transition:3 fromView:blankView toView:_buttonBar];
barStatus = 1;
}
else {
[ _barTransitionView transition:5 fromView:_buttonBar toView:blankView ];
barStatus = 0;
}
}
}
// Sample layerkit animation
-(void)testAnimation {
LKAnimation *animation = [LKTransition animation];
[animation setType: @"oglFlip"];
[animation setTimingFunction: [LKTimingFunction functionWithName: @"easeInEaseOut"]];
[animation setFillMode: @"extended"];
[animation setTransitionFlags: 3];
[animation setDuration: 10];
[animation setSpeed:0.35];
[animation setSubtype: @"fromLeft"];
[[self _layer] addAnimation: animation forKey: 0];
}
@end
youll prob need the latest toolchain because of layerkit and also the cgpoint used int his example.
you can easily set up an if statement to make the pages flip one way if you are going forward a view and flip the other way to go back a view..