0

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 :(

atomikpanda
  • 1,845
  • 5
  • 33
  • 47

4 Answers4

1

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

spring
  • 18,009
  • 15
  • 80
  • 160
  • Edit your question with the steps you took to build it (plus code). Unless I have a different idea than you of what you are trying to do, embedding a toolbar in a UIScrollView works fine and will scroll if the toolbar is wider than the scrollView. – spring Jul 10 '12 at 18:08
  • 2012-07-10 14:36:12.127 scrollView[5323:c07] myScrollView 0.000000 0.000000 0.000000 0.000000 2012-07-10 14:36:12.129 scrollView[5323:c07] toolbarRect 0.000000 0.000000 0.000000 0.000000 – atomikpanda Jul 10 '12 at 18:37
  • I Just Changed some code in the header file and the output is: – atomikpanda Jul 10 '12 at 18:39
  • 2012-07-10 14:38:40.487 scrollView[5371:c07] myScrollView 5.000000 111.000000 320.000000 252.000000 2012-07-10 14:38:40.489 scrollView[5371:c07] toolbarRect -15.000000 208.000000 394.000000 44.000000 – atomikpanda Jul 10 '12 at 18:39
  • I'm getting a scrollbar now but it still won't move. – atomikpanda Jul 10 '12 at 18:41
  • The values output represent x, y, width, height for each element. Try making your toolbar wider. – spring Jul 10 '12 at 18:43
  • I made a screen recording of Xcode [Here](http://s0ulp1xel.x10.mx/Uploads/scrollView.mov) – atomikpanda Jul 10 '12 at 18:51
  • It looks like it is scrolling (scroll bar appears). Why not put in more buttons so you can see what is going on. – spring Jul 10 '12 at 19:00
  • are you sure you just don't want to give me the Xcode Project? – atomikpanda Jul 10 '12 at 19:39
0

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!

George
  • 4,029
  • 1
  • 23
  • 31
0

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.

Community
  • 1
  • 1
benzo
  • 160
  • 1
  • 6
0

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.

Dinu Nicolae
  • 1,019
  • 2
  • 17
  • 42