Run your iOS App in the Playground


You may have wondered if you can run the whole app inside the playground!, say you want to experiment a little faster.
Here we will go through the steps needed to achieve that.

Add the playground

Click file ->new->Playground and create a single view playground , give it a name e.g. playground and save it somewhere, then go to the directory where you saved it and copy it to your project.

Create a Cocoa Touch Framework

We need to create a framework that can be exposed to the playground later on.
To do that select the project file and under the targets section and click on the + button then choose Cocoa touch framework and name it something like playground.

Update the target membership of the source files

For the playground framework to be useful we need to add files to it, and since we are trying to run the whole project we need to add all the project files to it , and you can do that by going to the files and bundles and from the file inspector -> target membership check the playground box.

Import the project in the playground

This is where we get to see some results finally ,

@testable import playground

@testable is needed here so that the internal methods would be accessible from the playground, otherwise you need to go to each class and mark any function, property or type as public.

Cocoa pods

If you are using cocoa pods you need to add these lines to the podfile , which will add the frameworks to the playground framework target, and remove the need to code sign it. add these lines to your pod file.

given your target name is myapp

target 'myapp' do
    use_frameworks!
    target 'playground' do
        inherit! :search_paths
    end
end 

and after that add these

post_install do |installer|
installer.pods_project.build_configurations.each do |config|
    config.build_settings.delete('CODE_SIGNING_ALLOWED')
    config.build_settings.delete('CODE_SIGNING_REQUIRED')
end

installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
        config.build_settings['CONFIGURATION_BUILD_DIR'] = '$PODS_CONFIGURATION_BUILD_DIR'
    end
end
end


Same goes for any other framework, where you need to update the target membership of it and include the playground framework target.

Separate the playground framework from production

Since you don’t want the playground framework you just created to be shipped with the app, which will add extra space to the app binaries, you can create a development target instead and un-link the playground framework from the production target.

Notes

  • Whenever you change something in your project, you need to build it first to be able to see it on the playground.
  • Playground is not that smooth most of the time, so I won’t rely on this technique for heavy testing , but it can be nice to try out part of your project logic directly.

DEMO

That should be it , you can find a working example in the demo repo, feel free to download it and try it yourself.

Xcode interface builder Tips and tricks

Xcode 8.2, Interface builder, Storyboard, Swift

Hey, I wanted to share view tips and tricks you may use if you like laying your design in interface builder.

Media Library

In the Utilities section (the one on the right), there is libraries section where there is the Object Library we use all the time, on the right of it you can see the Media library where you can find images way faster and drag-drop them into your views. Your images are not supposed to be in an Assets Catalog, but I noted 1x images are not recognized.

Localization Lock

Allows you to look some or all of a view properties. Comes in handy to avoid accidental modification e.g. on layout or strings. You can lock the whole storyboard from Edit menu -> Localization Lock or specific views from Identity Inspector under Document.

Embed In /Unembed And Arrange

You may have a couple of views you want to bundle together under a UIView/ScrollView/stackView, Instead of dragging new view and then drag them into it , you can select them and from edit->Embed in you may select one of the options UIView/ScrollView/stackView, and you can embed your scene into a UINavigationController/UITabbarController unless its a Tab Bar Controller, in case it’s a navigation controller it can be embedded into a Tab Bar Controller only . The other way you can select the containing View and choose Unembed from editor. Note that Autolayout constraints will be cleared.

Arrange (send to front,back,backward, and forward): select a view and from edit->arrange you may change its order among its siblings view (same level).

Refactor to storyboard

You may select a scene or more than one and the edit->refactor to storyboard then you will be asked to name the storyboard and you will have a new storyboard file with the selected scene(s).

First Responder

It’s a set of functions that can be applied to the first respondere.g. TextField. There are some of functions already defined such as undo,selectAll,copy,… . plus you can create your own functions. all you need is to connect UIControls actions in the storyboard as usual but now with the First Responder.

Color Palette

This is very useful feature , since you will use certain set of colors redundantly in the project, it’d be helpful to create a color palette for ease of access. You may check how from here.

Designables And Inspectable

Marking a UIView subclass as @IBDesignable will tell the interface builder to refresh the view whenever a change occurs to its attributes. Although in more complex scenes and bigger storyboards this feature could be a pain to the compiler and you may ending up turning it off 😀 .

Marking a property as Inspectable will make it shows in the Attributes Inspector and allows you to edit your custom properties from the interface builder.
Using Both features Can be great for prototyping. To avoid slowness you need to turn off “Automatically refresh views” form edit menu. plus make your storyboards smaller.

That’s it for now, will keep adding whenever I find more interesting IB stuff. Hopefully they come in handy.

Xcode : Create color Palette in Interface builder

Every project has its own set of colors, and if you use Interface builder like me, then you probably would like to create a color set for each project so you don’t get mad when you want to set a color for some text and not finding it in the “Recently used Colors” Section !.

You can simply create your own color palette in IB by clicking on the color picker -> Color palettes -> Click on the settings icon and click on new. 🙂

After that you can click on the settings icon again and rename the palette. And then you can add the colors related to the project you want.

And here you can see how it’s done in pictures . Have fun.

 

screen-shot-2016-12-15-at-10-31-49-am screen-shot-2016-12-15-at-10-32-08-am screen-shot-2016-12-15-at-10-32-15-am screen-shot-2016-12-15-at-10-32-31-am screen-shot-2016-12-15-at-10-32-42-am screen-shot-2016-12-15-at-10-33-34-am