CODEWITHSUNDEEP
cocoa-touchuser-interfaceuitoolbar
atomikpanda
atomikpanda

Reputation: 1886

Create Scrolling UIToolbar

Is it possible to create a scrolling UIToolbar for an iOS device in Xcode? I am using Xcode version 4.5 beta.

ViewController.m ⬇

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
myScrollView.contentSize = CGSizeMake(myToolBar.frame.size.width, myToolBar.frame.size.height);
}

ViewController.h ⬇

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{

IBOutlet UIScrollView *myScrollView;
IBOutlet UIToolbar *myToolBar;
IBOutlet UIBarButtonItem *toolbarItem;
}

@property (strong, nonatomic) UIWindow *window;


@end

Not Working :(

Upvotes: 0

Views: 3242

Answers (4)

Dinu Nicolae
Dinu Nicolae

Reputation: 1281

A swift 4 version

func addToolBar(textField: UITextView){
let toolBar = UIToolbar()
toolBar.barStyle = UIBarStyle.default
toolBar.isTranslucent = true
toolBar.tintColor = UIColor(red: 76/255, green: 217/255, blue: 100/255, alpha: 1)
let bold = UIBarButtonItem(image: #imageLiteral(resourceName: "download 12.01.19.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(boldFunc))
let italic = UIBarButtonItem(image: #imageLiteral(resourceName: "italic-png-image-54776.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(italicFunc))
let underlined = UIBarButtonItem(image: #imageLiteral(resourceName: "underlined_font-512.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(underlineFunc))
let strikeThrough = UIBarButtonItem(image: #imageLiteral(resourceName: "Strikethrough_font_awesome.svg.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(strikeFunc))
let size = UIBarButtonItem(title: "\(fontSize)", style: UIBarButtonItemStyle.done, target: self, action: #selector(changeSize))
let textColor = UIBarButtonItem(image: #imageLiteral(resourceName: "text_color1600.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(changetextColor))
let backgroundColor = UIBarButtonItem(image: #imageLiteral(resourceName: "background color.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(changebackgroundColor))
let textLeft = UIBarButtonItem(image: #imageLiteral(resourceName: "left-27877_960_720.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(alignLeft))
let textRight = UIBarButtonItem(image: #imageLiteral(resourceName: "align_right_filled1600.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(alignRight))
let textCenter = UIBarButtonItem(image: #imageLiteral(resourceName: "center.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(alignCenter))
let pic = UIBarButtonItem(image: #imageLiteral(resourceName: "add.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(appendPic))
let bulletpoint = UIBarButtonItem(image: #imageLiteral(resourceName: "bulletpoint.png"), style: UIBarButtonItemStyle.done, target: self, action: #selector(makeBulletpoints))
toolBar.setItems([bold, italic, underlined, strikeThrough, size, textColor, backgroundColor, textLeft, textRight, textCenter, pic, bulletpoint], animated: false)
toolBar.isUserInteractionEnabled = true
toolBar.sizeToFit()
toolBar.frame = CGRect(x: 0, y: 0, width: 33 * 12, height: toolBar.frame.size.height)
textField.delegate = self
//////////try to add a scroll view
let scrollView = UIScrollView()
scrollView.frame = toolBar.frame;
scrollView.bounds = toolBar.bounds;
scrollView.autoresizingMask = toolBar.autoresizingMask;
scrollView.showsVerticalScrollIndicator = false;
scrollView.showsHorizontalScrollIndicator = false;
scrollView.contentSize = toolBar.frame.size;
scrollView.addSubview(toolBar)
textField.inputAccessoryView = scrollView
}

when you calculate the width

toolBar.frame = CGRect(x: 0, y: 0, width: 33 * 12, height: toolBar.frame.size.height)

the width will depend on the size of the buttons you use. I had 12 buttons, all images on the buttons were 25 x 25, and there is one button with text. first I wrote 25 x 12 but they did not fit in, I think there are automatically some margins added, I did not go to much into detail on how the size of the buttons is calculated, so I just experimented till I found the number that worked well for me.

Upvotes: 0

benzo
benzo

Reputation: 160

hope this helps some people. i found the answer here: How to add scrolling for buttons on UIToolbar?

basically, you need to remove the toolbar from its superview, re-set some properties for the toolbar, set it as the subview of your scrollview, and then set your scrollview as the subview of the superview you initially removed. it's all in that link. worked perfectly for me.

Upvotes: 0

spring
spring

Reputation: 18487

Yes, it can be done - just tried it (not so good UI design but perhaps it suits your reqs.). You have to set the contentSize of the scrollview.

Add a UIScrollView to your storyboard. Add a UIToolBar inside that and make it as wide as you need it to be (presumably wider than the UIScrollView). Add whatever toolbar items you need.

Make IBOutlets for the scrollView and the toolbar (and your toolbar items). Then in viewDidLoad set the scrollView.contentSize:

myScrollView.contentSize = CGSizeMake(myToolBar.frame.size.width, myToolBar.frame.size.height);

Update

Try this code to see what the dimensions of your elements really are

- (void)viewDidLoad
{
    [super viewDidLoad];

    myScrollView.contentSize = CGSizeMake(myToolBar.frame.size.width, myToolBar.frame.size.height);

    CGRect myScrollViewRect = myScrollView.frame;
    NSLog(@" myScrollView %f  %f  %f  %f", myScrollViewRect.origin.x,
          myScrollViewRect.origin.y,
          myScrollViewRect.size.width,
          myScrollViewRect.size.height);

    CGRect toolbarRect = myToolBar.frame;
    NSLog(@" toolbarRect %f  %f  %f  %f", toolbarRect.origin.x,
          toolbarRect.origin.y,
          toolbarRect.size.width,
          toolbarRect.size.height);
}

I get the output below. Notice how the toolbar is wider than the scrollView? if your's is not wider, it is not going to scroll (how could it - there is no place to scroll to).

2012-07-10 14:29:34.494 Junk[4275:707] myScrollView 0.000000 605.000000 778.000000 128.000000 2012-07-10 14:29:34.498 Junk[4275:707] toolbarRect 0.000000 52.000000 1200.000000 44.000000

Upvotes: 1

George
George

Reputation: 4029

Just had to do that myself. You cannot. The best you can do is place a toolbar and add a UIScrollView on top of it. Hope this helps. Cheers!

Upvotes: 0

Related Questions