Xcode 8 Glitchy tab bar view controller. (Master-Detail)

Question

I'm new here and also to coding. I started my project with the Master-Detail template, and currently have the sign-in/login screens complete. However, when trying to add a Tab Bar Controller it looks a bit buggy.

I've tested the views in the simulator and it looks just fine, but on the storyboard the "item 1" and "item 2" view controllers are half filled with blue and the tab bar view has a blue rectangle on the side.

I initially wanted to create sign/login screens and complete the remainder of the app in a tab based format, is there any way to fix or sort of work around the problem at hand?

Storyboard Screenshot

Answer 1

With the Xcode 8 update, default tab bar items have been automatically set to "Custom"; if you hadn't previously customized your tab bar item, they're expecting you to utilize the new storyboard options to do so. To do this, click on the tab bar item in your navigator and, under the "Attributes" section of the Utilities panel, click on the "System Item" dropdown box. From here, changing it to anything other than "Custom" will shrink the Tab Bar Item back to it's original size.

Answer 2

Open the File Inspector and change the Global Tint color in the Interface builder on your storyboard

Maybe Apple will do something with this Issue.

Answer 3

I ran into the same problem - my tab bar view controllers turned blue in the storyboard editor.

If you want to use a pre-defined tab bar item, choose something other than 'custom' per Alex Schmidt's answer.

If you want to use a custom image/title for your tab bar item, just select an image for 'Tab Bar Item - Selected Image' or 'Bar Item - Image' in the attributes inspector. The blue will disappear.