How to add scrolling for buttons on UIToolbar?

Question

How to add scrolling for UIBarButtonItem buttons on UIToolbar (to place many buttons on the toolbar)?

buttonDone = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(buttonDoneDown)];
NSArray *itemsArray = [NSArray arrayWithObjects:buttonDone, nil];
[toolbar setItems:itemsArray];

Thanks a lot for the help!

Answer 1

For Swift

let's just say i want to add 7 UIBarButtonItem's to my UIToolBar

First Create a scrollView, then add toolBar as subview

// In viewDidLoad

let scrollView = UIScrollView(frame: CGRect(x: 0, y: view.frame.height-44, width: view.frame.width, height: 50))

    let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: 1000, height: scrollView.frame.height))

    let btn1 = UIBarButtonItem()
    let btn2 = UIBarButtonItem()
    let btn3 = UIBarButtonItem()
    let btn4 = UIBarButtonItem()
    let btn5 = UIBarButtonItem()
    let btn6 = UIBarButtonItem()
    let btn7 = UIBarButtonItem()
    toolBar.items = [btn1, btn2, btn3, btn4, btn5, btn6, btn7]

scrollView.addSubview(toolBar)

// The below line is important for scrollView to work
scrollView.contentSize = CGSize(width: 1000, height: 50)

Lastly add scrollView as your textField inputAccessoryView

textField.inputAccessoryView = scrollView

I hope it helps you :]

Answer 2

a swift 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.

Answer 3

Replace superView of the toolbar:

buttonDone = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(buttonDoneDown)];
NSArray *itemsArray = [NSArray arrayWithObjects:buttonDone, nil];

UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = toolbar.frame;
scrollView.bounds = toolbar.bounds;
scrollView.autoresizingMask = toolbar.autoresizingMask;
scrollView.showsVerticalScrollIndicator = false;
scrollView.showsHorizontalScrollIndicator = false;
//scrollView.bounces = false;
UIView *superView = toolbar.superview;
[toolbar removeFromSuperview];
toolbar.autoresizingMask = UIViewAutoresizingNone;
toolbar.frame = CGRectMake(0, 0, X, toolbar.frame.size.height);
toolbar.bounds = toolbar.frame;
[toolbar setItems:itemsArray];
scrollView.contentSize = toolbar.frame.size;
[scrollView addSubview:toolbar];
[superView addSubview:scrollView];

Answer 4

create a UIScrollView, set its contentSize according to ur requirement add it as a subview on UIToolbar. add as many buttons on UIScrollView and enjoy scrolling...