Currently I am working on a project which got all the task done in a singe viewController. As there are so many elements on the viewController I choose to do the UI with coding, like this:
let myButton: UIButton = {
let button = UIButton(type: .system)
button.addTarget(self, action: #selector(openFunction), for: .touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
As there are so many button, view, texifield, label etc along with all their constraints written with code, my viewController class getting bigger and bigger. How can I keep all the UI code in separate file and integrate in on my viewController ? I don't know there might be really easy way to do that but I am actually struggling. Any suggestion would be really helpful.
Welcome to the world of design patterns and code architecture. They are various ways to accomplish what you are after. It's a good sign you are able to identify this problem early.
You can start looks at MVVM, VIPER, ReSwift among others. Research which fits your the requirements of your app.
Suggestions for Reducing UI Code in view controller:
In terms of reducing just the UI Code growing in the view controller, I suggest start creating subclasses of common elements and keey your code DRY. For instance, if a UIButton with same fonts and borders etc are being created many times then look at creating a subclass for it and move the configurations inside this subclass.
You can also create subview of logical elements on the screen, example you have a header with buttons and labels then move it into a subclass and start using this subclass from here on. This should improve your code readability and reuse.
You can also reduce a lot of the autlayout code by create extensions of commons layouts like pinning to all corners etc this way the repetition of boilerplate auto layout code is much less.
An alternative to what carbonr has proposed is to leverage Interface Builder. With Interface Builder, you can create one or more StoryBoards and separate UI elements and constraints from the controller that contains your code. Obviously, if you are unfamiliar with Interface Builder there would be a learning curve.
A specific answer to your specific code would be to create a convenience initializer in an extension to UIButton.
extension UIButton {
convenience init(_ target:Any, _ action:Selector) {
self.init(CGRect.zero)
self.addTarget(target, action:action)
self.translatesAutoresizingMaskIntoConstraints = false
}
}
Right there you are probably cutting back on things in your VC.
Next, consider moving this - and all - UI code out of your VC file and into other files. I typically move my extensions/subclasses into as many files as needed. (The build may take longer but the final binary should be the same size.) For large projects, this helps make things manageable.
At the same time consider making an extension to your VC specifically for auto layout (which I see you are using because you are setting your UIButton auto resizing mask). As long as you are declaring your objects in the main subclassed VC, this removes the "verbose" nature of auto layout into it's own file.
For multi-developer projects and/or true "reusable" code, a final thing you can do is move code into a Framework target.
Related
Say I have an app that has a fixed layout: one button and a few labels. It makes sense not to use multiple view controllers throughout the app since I have the same button and labels. I don't want to copy and paste them because their look and style will never change. If I decide to change their look later on, I would have to go through every single view controller and this is a bad practice (as it is with copying and pasting code).
Though, I want to be able to let the user go back and forward "layouts" the app, but this code doesn't let me do that:
class MyViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
enterFirstLayout()
}
func enterFirstLayout() {
// do things such as change labels' text property
exitFirstLayout()
}
func exitFirstLayout() {
// do things
enterSecondLayout()
}
func enterSecondLayout() {
// ...
}
}
What can I do to avoid creating multiple view controllers and giving the user the possibility to skip and go back to a specific layout of the app?
I'm assuming that you are trying to achieve something like wizard that you can go back and foreword thru screens.
In this case I would use a UICollectionView with UICollectionViewFlowLayout. Build one custom cell that represents your single 'screen' layout than build a simple datasource as an array of custom objects. Datasource should contains for example all label's content as a String variables.
Nice and elegant code.
You get scrolling animation and swipe gesture detection for free. If you like you can add your custom fancy animation.
This is my solution. Going back to your question, if you want to do this your way, you can for example use subclassing. Build your base view controller class with all layout configured and labels exposed as public, read-only variables, then inherit from this class. Please keep in mind that subclassing is tightest possible coupling.
Other option is to build this view controller once and reuse with different dataset.
So decision is your. I would go in 1, 3, 2 order :)
Layout for Apple Watch is based on placing objects to storyboard. Every new object is placed just under the previous one etc. There is also possible to use groups and align objects same way horizontally. (see details here) I would appreciate to have the same functionality on iOS - to place UIViews this way and define them same attributes like alignment, width relative to container etc. just like in WatchKit.
It is also similar with LinearLayout on Android. I found CSLinearLayoutView on github, but its very old and it doesn't use autolayout.
Does any good library for this purpose exist?
If not.. It looks very easy to implement this by myself, do you see any key problems or limitations which would make it impossible?
I don't think there is or will be any addon for the Interface Builder itself, so you could use the same (ugly watchkit) constraints for iOS apps. AutoLayout for iOS is way better and more flexible to use than that WatchKit mess inside IB (Interface Builder of Xcode).
I do prefer to do most of the design work in my code so I don't have to worry if the IB will create some unnecessary stuff for me. If you want some drag and drop, you should use use IB and learn how to use AutoLayout.
The interesting part:
If you want to create your design in code and want some library which is easy to use, you can try on of these: Masonry (Obj-C) or SnapKit (Same Lib but in Swift). Both libs are very strong and up to date. I don't know if the dev implemented a custom alignment to center a subview in its superview. You should check that by yourself. :) If you like the VFL (Visual Format Language), like I do. You should search for a similar Lib or wait until I'm done with my project some day. :D I was inspired by SnapKits shiny syntax and started creating my own framework for VFL constraints. I also implemented the possibility to center my subview in its superview.
let spacer1 = View(name: "spacer1")
let spacer2 = View(name: "spacer2")
let view1 = AutoLayoutView(name: "view1")
view1.backgroundColor = UIColor.whiteColor()
view1.layer.cornerRadius = 50
let view2 = AutoLayoutView(name: "view2")
view2.backgroundColor = UIColor.redColor()
view2.layer.cornerRadius = 10
self.rootView.addSubview(spacer1)
self.rootView.addSubview(spacer2)
self.rootView.addSubview(view1)
self.rootView.addSubview(view2)
self.rootView.addConstraints { (add) -> Void in
add.group({ (add) -> Void in
add.normal.vertical.format("[view1(100)]").alignCenterHorizontaly
add.normal.vertical.format("[view2(30)]")
add.normal.horizontal.format("[view1(100)][spacer1]").alignCenterVerticaly
add.normal.horizontal.format("[spacer1][view2(40)]").alignCenterY
add.normal.horizontal.format("[view2][spacer2(==spacer1)]|")
}, identifier: "GroupName")
}
And with this we we get something like that:
There is still a lot work to do, so I can't public unfinished work yet.
I hope I could help you a little. :)
Introduced in iOS 9 as UIStackView - https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/
Custom UIStackView implementation for iOS 7+
https://github.com/oarrabi/OAStackView
I want to design and generate view elements in code, without using storyboard. But I haven't figure out a simple way to locate where should I put my view elements by describing its CGRect. For example, I can drag a button direct into the storyboard and put it where i want, however, in code, I have to write something like
[button setFrame:CGRectMake(24.0f, 113.0f, 271.0f, 140.0f)];
Is there any way or any software can help me?
Your question is a bit broad. You can create your view in code by including in your subclass of UIViewController properties for each subview (control) element and then make all the initialisation in designated initialiser and setting frames and other customisation in viewDidLoad method most likely. But for details where to what set you should go to references for UIViewController lifecycle as it may depend on what you want to achieve. in some cases setting frames in viewDidLoad will be fine whereas sometimes you will need to make some changes in viewDidLayoutSubviews for example.
I'm learning iOS development stuff and what I have found in tutorials and books is that controller layer usually has access to the View's controls directly (textfields, labels etc.). Let's consider such an example:
Assume, that View has a label called lblResult and a textfield called txtDataToAnalyze. Than in controler interface we've got something like this:
#property (nonatomic, retain) IBOutlet UILabel* lblResult;
#property (nonatomic, retain) IBOutlet UITextField* txtDataToAnalyze;
and some #synthesize statements in the implementation file.
I have some experience with JavaSwing development, where most of thinks I'm writing manually without any GUI Builders, and what I usually do in MVC is to access the View's controls via getters/setter. For example: void setResult(String resString); or String getDataToAnalyze();. In that way, controller knows only what pieces of information are displayed in the view, and not how are they displayed. I think it is more flexible (it is easier to change the view layer later).
I know that iOS has some specific rules, has introduced XIB/NIB files etc so maybe my doubts are completely useless in case of iPhone/iPad development. But I am going to write some more serious application for iOS (actually "rewrite" it from Java Swing) and that's why I would like to ask you:
Do you think, I should change the way I am thinking and get accustomed to that new (for me) approach (xib files, creating GUI using drag&drop and providing controler with information about how data should be displayed in view) ?? Did you have similar doubts when starting with iOS?
Short answer:
Yes, I think you should definitely spend a little time getting accustomed to working with Interface Builder (IB) to make NIBs and storyboards and let IB create the IBOutlet and IBAction references for you for those controls with which you need to interact. Once you're proficient at it, you'll be impressed by your productivity in generating easily maintained code. Don't dismiss IB too quickly.
In terms of letting the controller interact directly with the IBOutlet and IBAction references, this is common practice for simple user interfaces. If you have some real world examples, post a new question with a screen snapshot and we can offer more practical guidance.
Long answer:
Part of your question seems to be driven by the apprehension in seeing view controllers that are doing detailed interaction with a view's controls. The thing is, if you want to isolate your controller from some of the implementation details of the view, then go ahead and subclass the view and put the view specific stuff in there. IB can interface with both view controller subclasses as well as view subclasses. So you can happily use IB and still isolate your view controller from some of these implementation details.
Personally, I only do this subclassing of UIView when the view hits some subjective complexity threshold (e.g. for me, that threshold is when I find myself doing some complicated animation, such as using CADisplayLink; complicated gesture recognizers, etc.). I also subclass those subviews that are logical entities of their own (e.g. UITableViewCell or UICollectionViewCell). But for simple views where I'm interacting with my model to setting a control's properties, interacting with text fields, etc., I think putting that in the view controller is fine. Having said that, if I have a lot of view-specific code in my controller which has nothing to do with the integration of my model with my view, then start subclassing the UIView and shifting the view-only code into that.
Implicit in your question is the notion of programmatically building view rather than using NIBs/storyboards. In my opinion, using Interface Builder (IB) to build your UI is much easier to develop and maintain. There might be some pedagogical value to doing a test project where you build your views programmatically, so you really understand what's going on, but after that, I think you'll find yourself quickly gravitating to storyboards. And you'll get plenty of chances to write your own non-IB code when you start doing things beyond the capabilities of the standard IB controls (e.g. complicated custom container views, etc.). There are definitely those who prefer to develop views programmatically, but I don't think you can beat the development speed and ease of maintenance of IB generated UIs.
I general, the controller does not know about the view, but the view knows about the controller.
The gang of four book says:
"MVC also lets you change the way a view responds to user input without changing its visual presentation. You might want to change the way it responds to the keyboard, for example, or have it use a pop-up menu instead of command keys. MVC encapsulates the response mechanism in a Controller object. There is a class hierarchy of controllers, making it easy to create a new controller as a variation on an existing one.
A view uses an instance of a Controller subclass to implement a particular response strategy; to implement a different strategy, simply replace the instance with a different kind of controller. It's even possible to change a view's controller at run-time to let the view change the way it responds to user input. For example, a view can be disabled so that it doesn't accept input simply by giving it a controller that ignores input events.
The View-Controller relationship is an example of the Strategy (315) design pattern. A Strategy is an object that represents an algorithm. It's useful when you want to replace the algorithm either statically or dynamically, when you have a lot of variants of the algorithm, or when the algorithm has complex data structures that you want to encapsulate."
I am just starting out with iOS app development and it's been a great experience so far. Apple documentation is great, but there are some questions I have that are not as technical and only someone with experience might be able to answer.
I have a bunch of UIViewController which handle the "dynamic skinning" of the custom UIViews that they control. This leads to a controller with big chunks of code which seems a bit unpractical to me.
So the question is: Following the MVC pattern, should I give the responsibility of setting a UIFont, UIColor, etc to the view itself? Or should I create "micro" controllers that handle this task using some kind of input?
Thanks for the response.
Creating UIView subclasses that handle the layout works. Override layoutSubviews in the UIView subclass to do the positioning layout (setting frames etc). I find the init method to be a good place to set fonts, colors etc.
Now the UIViewController has relatively little code related to the custom UIView. The viewController just needs to position an instance of the custom UIView and perhaps set a few properties (like a textLabel's text).