How to customise the button toolbar for iOS App for mobile website


 

1. Go to Main_iPhone.storyboard

2. Press control + alt + cmd + 3 to show the object library on bottom right.

3. Search for bar button item. Drag it to the desired place in toolbar inside storyboard.

How to customise the button toolbar  for iOS App for mobile website

4. Each bar button item must have a flexible space bar button item around it. Drag one to the right place.

How to customise the button toolbar  for iOS App for mobile website

5. Press alt + cmd + enter to show assistant editor and set it to automatic and open ViewController.h there.
6. Ctrl + drag from new bar button item to the ViewController.m on the right at the end of the file but before @end statement.

How to customise the button toolbar  for iOS App for mobile website

7. A popup will appear. Select Action in Connection dropdown and name the connection and hit connect.

How to customise the button toolbar  for iOS App for mobile website

8. A new line will be added with a double dot on its left.

How to customise the button toolbar  for iOS App for mobile website

9. Now go to ViewController.m and search for the string newItem. This is an IBAction where you can write the logic to be performed when anyone click this button.

Changing Images.

1. Click a Bar button Item and press alt + cmd + 4 to show the property inspector on the right. There is an image field which has name of the image. Note that name down.

How to customise the button toolbar  for iOS App for mobile website

2. Go to image.xcassets and find the image. Replace the images by draggin and dropping to the thumbnails from finder. The icon must be in 3 sizes 30x30px (1x) 60x60px (2x) and 90x90px (3x).

How to customise the button toolbar  for iOS App for mobile website

3. Add and image in images.xcassets by clicking the plus icon in the left bottom and then selecting New Image Set.

How to customise the button toolbar  for iOS App for mobile website

4. Rename the new image by single clicking on its name. Also drag and drop icons of same size as done in step 2.

How to customise the button toolbar  for iOS App for mobile website

4. With the new bar button item selected, press alt + cmd + 4 and clear out the title field. In the image field type the name of new image you just created to change the icon of new bar button item.

Posted in All Tutorials, iOS Tutorials | Tagged | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered By: wpnova.com