CODEWITHSUNDEEP
iphoneiosobjective-ckeyboarduitoolbar
Vinh Nguyen
Vinh Nguyen

Reputation: 826

iPhone - How to create a scrolling UIToolbar above keyboard?

How do you create a scrolling UIToolbar, the one with extra accessory buttons above keyboard that is also scrollable through its width? Like Day One and Byword did.

Edit: I'm using in UITextView

From Byword

enter image description here

This is what I have done with my input accessory view, I had already implemented the bar button items. Now I curious if I could make it scroll horizontally to reveal more buttons.

enter image description here

Upvotes: 3

Views: 3461

Answers (5)

Mahendra Thotakura
Mahendra Thotakura

Reputation: 341

Create number of bar buttons based on your requirement and add them to an array. Now create a scrollview inside an view. And give the scrollview as an input accessory view to text field.

Here is an example : 1. Create bar buttons based on your requirement

UIBarButtonItem* button1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(done:)];
    UIBarButtonItem* button2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(done:)];
    UIBarButtonItem* button3 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemEdit target:self action:@selector(done:)];
    UIBarButtonItem* button4 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPlay target:self action:@selector(done:)];
    UIBarButtonItem* button5 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRedo target:self action:@selector(done:)];

  1. Add them to an array 

     NSArray *itemsArray = [NSArray arrayWithObjects:button1,button2,button3,button4,button5,nil];

  2. Create a scrollview inside an UIView

    UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = toolbar.frame;
scrollView.bounds = toolbar.bounds;
scrollView.autoresizingMask = toolbar.autoresizingMask;
scrollView.showsVerticalScrollIndicator = true;
scrollView.showsHorizontalScrollIndicator = true;
scrollView.scrollEnabled = YES;

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

  3. Add the scrollview as inputAccessoryView to textField

    self.textField.inputAccessoryView = scrollView;

Upvotes: 4

nitin kachhadiya
nitin kachhadiya

Reputation: 969

while begin aditing text you should set uiview animation.

[UIView beginAnimations:nil context:nil];
CGRect rect=self.view.frame;
rect.origin.y=-50;
self.view.frame=rect;
[UIView commitAnimations];

after end editing then

[UIView beginAnimations:nil context:nil];
CGRect rect=self.view.frame;
rect.origin.y=0;
self.view.frame=rect;
[UIView commitAnimations];

Upvotes: 1

Nishith Shah
Nishith Shah

Reputation: 523

Create one view which contains your all buttons within scrollview and assign that view as inputAccessoryView or you TextField. Hope you will get my ans.

Upvotes: 5

LE SANG
LE SANG

Reputation: 11005

You need to subclass UIView and add a UIToolbar as background view. Add UIScrollView inside it add Add UIButtons in this UIScrollView. Ex:

@implementation CustomAccessoryView
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        // Make toolbar as faked background
        UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:self.frame];
        toolbar.barStyle = UIBarStyleBlackTranslucent;
        [toolbar setAutoresizingMask:UIViewAutoresizingFlexibleWidth];

        [self addSubview:toolbar];
        [self sendSubviewToBack:toolbar]; 

        //Insert UIScrollVIew as subview and add button inside it

    }
    return self;
}

@end

Upvotes: 1

Abdullah Shafique
Abdullah Shafique

Reputation: 6918

Use this code in viewDidLoad:

UIToolbar* numberToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 50)];
numberToolbar.barStyle = UIBarStyleBlackTranslucent;
numberToolbar.items = [NSArray arrayWithObjects:[[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(done:)],nil];
[numberToolbar sizeToFit];
self.yourTextView.inputAccessoryView = numberToolbar;

This basically adds a toolbar on the keyboard with a bar button that reads "Done".

Upvotes: 5

Related Questions