Xcode 6.1: Try this method and see if it works for you with Interface Builder

Hi everyone,
I just wanted to share a method I’ve found for using Interface Builder that has worked really well for me as I’ve started learning how to use Xcode.

Some notes first:
- I’m using Yosemite with Xcode 6.1
- I’ve done my testing with a basic Cocoa Application (Mac OS X) When I created my project I made sure to select the checkbox saying to use a storyboard for my project. This is also similar to what is used when you make an iPhone app so I thought I’d test with this.
- I’ve only been using VoiceOver on the Mac for less than a year so be gentle. :)

The first step in your Xcode project is to interact with the Navigator group and then the Project Navigator Outline Table. Next, select the Main Storyboard in the table. you may have to move down a few rows to find it.

Next, stop interacting with the Project Navigator Outline table and the navigator group. Find the Source Code group and interact with it. under the Editor menu, make sure there is a menu item called “Hide Document Outline”. This means that the Document Outline table is shown.

Interact with the Main storyboard group and find the Table item and interact with it. (this Table is the Document Outline table but it is only called Table by VoiceOver.)

The first item here you need to find is the “View Controller Scene”. Go to this and press VO+\ to expand it’s disclosure triangle and show it sub items.

Next find the “View Controller” item and press VO+\ again to expose it’s items.

Now you will find the “View” item. It is important to note that all the rows in the Document Outline table have two columns. The first one describes the item such as the View Controller Scene, View Controller and View. The second column is unfortunately
just labeled “Button” but it is important. For example when you are at the “View” item, you can find this by pressing VO+right arrow.

Next, we will add some buttons, labels and other UI components to this view item.

Stop interacting with the Document outline table, main storyboard group and source code group.

Go to the Library group and interact with it.

Find the Library Group scroll area. This item has all the User Interface items you will want. I tried just using the arrow keys here but you need to use Vo+up or down arrow to hear what the items are. In the Library group there is also a search edit box that is very useful for finding UI components by name if you want to narrow down your search. Hit VO+down arrow until you find the component that you want to add.

Once you find the component you’re looking for press VO+Command+Shift+Spacebar to select the item to drag it. This will perform a mouse click that is held down until you release it.

Stop interacting with the Library group scroll area and the library group. You will hear swishing noise to tell you that the mouse is being held down. You may also hear VoiceOver saying that Xcode has a new window but you can ignore this.

Go to the source code group and find and interact with the Document Outline table again. This is all still down with the mouse down and dragging the component.

Make sure you’re on the View item in the Document Outline table and go to the column labeled with the word button. (This item will probably still be selected from when we were in the source code group earlier.)

Now, press VO+Command+Shift+Spacebar to release the mouse button. Your User interface item will be added to the view.

Repeat going to the Library group and dragging components to the View item until you’re done.

When items are added to the view item. They will be at level 4 in the table. The view is at level number three so you will know that your User interface items will be in the view.

You can now choose your items in the Document Outline table and set their properties in the Inspector group. The Attributes and identity inspector have elements where you can name your User Interface items. There is especially a lot of accessibility related labeling under the Identity inspector.

You can press Command+R to run your new application and verify that your controls are actually in the Window that is shown. They may not be in the right order. I’ve found that the position of the item is important for VoiceOver deciding which user interface item is read in what order. I’m even newer with laying out items in a window using auto layout and constraints so I won’t go into this here right now.

I’ve found this method works very well for me in Xcode 6.1 and it is very consistent compared to the copy/paste methods I’ve tried before. So far, user interface items are always placed where I want them to go.

I just wanted to outline my method here so others who have a bit more experience with VoiceOver and Xcode can try them out. I’d be happy to put a little podcast together if that would help people understand what I’ve written here better.

Thanks,
John