DEV Community: Nguyen Truong Ky

How to organize the project folders and files?

Nguyen Truong Ky — Sat, 02 May 2020 00:54:34 +0000

Project structure (folder structure) is a very basic thing and usually ignored, especially junior developers.

Good structure can help you increase your efficiency.

What are the most common ways to oganize the project structure?

There is not correct answer here, depend on developers.

I. Structure

Today, I will show you 2 common ways to arrange files in project which can help you access to files easier.

1. Group files by features

Any projects have at least 2 features. Large projects have many features. This way has 2 advantages:

You can access to other related files in the same folder. Press Ctrl + 5 to quick access files in the same folder.

You can copy folders to new projects and reuse it easily. This is the reason I love this way.

Where should I put the models, which are used in many features?

Common folder is an option.
But I usually put it in the most related folder. For example: Product model is in folder Products, User model is in folder Membership or Login.

2. Group files by type

You can make many folders of same purpose files like, Models, Controllers, Views
You have right folders for right types, don't have to confuse where to put files.
This way is very easy for newcomers (junior developers), they can easily find the files they want.

I don't use this way so I don't know more benefits of it. Anyone who is using it, please share me in comments.

II. Naming

Naming is very important. Descriptive names help you easy to find and understand the mission of files.
Some things you should know in naming.

1. Class name is file name

RegisterController should be written in RegisterController.swift. You don't have to remember 2 names, just one for Register feature. Keep your mind free to remember other things.

2. Feature name is folder name and prefix of file names

This is for group by features way. Register feature should have structure like below.

The folder name can be Register or RegisterController, no problem. You can understand its functionality at first glance, right.

If you're using group by types way, you can name your files with prefix is feature name as above example. Benefits are below.

Conclusion

Hope these tips can help you increase your coding performance. Please share me how you organize your project structure. I am sure your ways are awesome ways.

Introduce a very cool tool: https://github.com/venmo/synx. You should try it.

Starting Auto Layout Programmatically

Nguyen Truong Ky — Thu, 30 Apr 2020 18:39:07 +0000

I published a post to compare Auto Layout Programmatically and Storyboard. This subject has no correct answer at all. It depends on you and your experience.

I wasn't able to live without Storyboard until I found the pain in Storyboard. Today I tell you how I started using Auto Layout Programmatically (ALP) and how I use it in my company projects everyday.

How I started

I followed some cources from Let's Build That App and learned how to use ALP by default code from Apple. Really good source to start ALP.

Today, I demonstrate how to use ALP with 3 different ways. I implement this screen by 3 ways and you can pick the best one for you.

Let's do it.

Define controls

Define and format background image view, some buttons. These controls are same for all ways in this post. We just focus on how to setup Auto Layout by code.

let imgView = UIImageView(image: UIImage(named: "air_balloon"))
imgView.translatesAutoresizingMaskIntoConstraints = false
imgView.contentMode = .scaleAspectFill

let termLabel = UILabel()
termLabel.translatesAutoresizingMaskIntoConstraints = false
termLabel.textAlignment = .center
termLabel.numberOfLines = 0
termLabel.text = "By signing up, you agree to our Terms & Privacy Policy"
termLabel.textColor = .white

let fbLoginButton = UIButton()
fbLoginButton.translatesAutoresizingMaskIntoConstraints = false
fbLoginButton.setTitle("Login with Facebook", for: .normal)
fbLoginButton.setTitleColor(.white, for: .normal)
fbLoginButton.backgroundColor = UIColor(red: 123/255, green: 107/255, blue: 173/255, alpha: 1)

let registerEmailButton = UIButton()
registerEmailButton.translatesAutoresizingMaskIntoConstraints = false
registerEmailButton.setTitle("Sign up with email", for: .normal)
registerEmailButton.setTitleColor(.white, for: .normal)
registerEmailButton.backgroundColor = UIColor(red: 163/255, green: 128/255, blue: 190/255, alpha: 1)

let loginButton = UIButton()
loginButton.translatesAutoresizingMaskIntoConstraints = false
loginButton.setTitle("I already have an account", for: .normal)
loginButton.setTitleColor(.white, for: .normal)
loginButton.backgroundColor = UIColor(red: 171/255, green: 163/255, blue: 177/255, alpha: 1)

Default way

Default syntax from Apple. Quite standard and important. You have to understand these syntax completely. Never depend 100% on any libraries.

view.addSubview(imgView)
imgView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
imgView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
imgView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
imgView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true


view.addSubview(termLabel)
termLabel.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 16).isActive = true
termLabel.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -16).isActive = true


view.addSubview(fbLoginButton)
fbLoginButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
fbLoginButton.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
fbLoginButton.heightAnchor.constraint(equalToConstant: 64).isActive = true


view.addSubview(registerEmailButton)
registerEmailButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
registerEmailButton.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
registerEmailButton.heightAnchor.constraint(equalToConstant: 64).isActive = true


view.addSubview(loginButton)
loginButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
loginButton.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
loginButton.heightAnchor.constraint(equalToConstant: 48).isActive = true
loginButton.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

registerEmailButton.bottomAnchor.constraint(equalTo: loginButton.topAnchor).isActive = true
fbLoginButton.bottomAnchor.constraint(equalTo: registerEmailButton.topAnchor).isActive = true
termLabel.bottomAnchor.constraint(equalTo: fbLoginButton.topAnchor, constant: -16).isActive = true

Pros

Default ways, not depends on any libraries
You remember the syntax. ### Cons
Boring: Type or copy/paste same things many times.
Many lines of code. ### Notes
You can add functions to shorten your code. I leave it for you.
Important: You have to understand how default syntax work before moving to any libraries

Better way: Snapkit

Snapkit is very popular and has 14,245 stars on Github. You can try some alternative libs

view.addSubview(imgView)
imgView.snp.makeConstraints({ (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.top.equalToSuperview()
    make.bottom.equalToSuperview()
})


view.addSubview(termLabel)
termLabel.snp.makeConstraints { (make) in
    make.left.equalToSuperview().offset(16)
    make.right.equalToSuperview().offset(-16)
}


view.addSubview(fbLoginButton)
fbLoginButton.snp.makeConstraints { (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.height.equalTo(64)
}


view.addSubview(registerEmailButton)
registerEmailButton.snp.makeConstraints { (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.height.equalTo(64)
}


view.addSubview(loginButton)
loginButton.snp.makeConstraints { (make) in
    make.left.equalToSuperview()
    make.right.equalToSuperview()
    make.bottom.equalToSuperview()
    make.height.equalTo(32)
}

registerEmailButton.snp.makeConstraints { (make) in
    make.bottom.equalTo(loginButton.snp.top)
}

fbLoginButton.snp.makeConstraints { (make) in
    make.bottom.equalTo(registerEmailButton.snp.top)
}

termLabel.snp.makeConstraints { (make) in
    make.bottom.equalTo(fbLoginButton.snp.top).inset(-16)
}

Pros

Quite better, shorter syntax
Easier to read

Cons

Have a middle man snp. Not cool with me
Have a closure to setup layout
Single constraints are not in good syntax.

My way: KNConstraint

Honestly, I was affected by Robert-Hein Hooijmans to write this extension. Love how he write his lib, TinyConstraint.

I do something different in my extension, and shorten the syntax.

view.addSubviews(views: imgView, termLabel, fbLoginButton, registerEmailButton, loginButton)
imgView.fill(toView: view)

termLabel.horizontal(toView: view, space: 16)
termLabel.verticalSpacingDown(toView: fbLoginButton, space: -16)

fbLoginButton.horizontal(toView: view)
fbLoginButton.height(64)
fbLoginButton.verticalSpacingDown(toView: registerEmailButton)

registerEmailButton.horizontal(toView: view)
registerEmailButton.height(64)
registerEmailButton.verticalSpacingDown(toView: loginButton)

loginButton.horizontal(toView: view)
loginButton.bottom(toView: view)
loginButton.height(32)

Pros

Very short syntax
Easy to read, like a short paragraph.

Cons

Some new term like horizontal, vertical, verticalSpacing, verticalSpacingDown

Conclusion

I show you 3 different ways to setup Auto Layout by code. There are pros and cons in every way.
Select a good way for you to start Auto Layout Programmatically.
You can download the demo at my Github.

Enjoy coding

Auto Layout with Storyboard and Programmatically

Nguyen Truong Ky — Wed, 29 Apr 2020 23:00:24 +0000

I started iOS development as a .NET developer. My first impression, Storyboard is really really interesting. 80% UI of my apps is built in Storyboard. I can’t imagine how I can develop iOS without Storyboard.

There are many discussions about Auto Layout with Storyboard or Programmatically is better. But no one wins. Everyone has own reason and belief.

This post is my personal opinion. It’s written by a developer can’t live without Storyboard, and now he abandons it.

3 reasons why he changed to Auto Layout by programmatically.

Why do I abandon Storyboard?

1. Too many steps to changes

I designed a very good UI, and connected outlet, started logic coding, finished that feature. One day, I had to refactor code and found some improvement. Some UILabel had gestures, should be changed to UIButton. No problem, made changes. What did I do?

Found the UILabel need change
Delete one by one.
Add new UIButton
Connect new outlets
Setup Auto Layout constraints. (This is most painful step, dozens of constraints need setup)
Find and change other things in code

And when I changed to Auto Layout programmatically:

Found the UILabel need change
Change UILabel to UIButton
Find and change other things in code

Easier a lot, right? Especially, no change in setting up constraints.

2. Open Storyboard is a pain in the ass

My first project had a huge Storyboard, all-in-one. More than 30 Controllers were in 1 Storyboard file. It’s a nightmare. Few times I got conflicts with other members' commits. Fix conflicts in XML is another nightmare.

Thanks God, some experienced developers tell about split it up. A Storyboard should contain 3 to 5 Controllers, not more. It should be splitted up as features, for instance, Membership Storyboard contains Landing, Register, Login Controllers, or Password Controller contains ForgotPassword, Confirmation, NewPassword Controllers. It’s a big improvement and save a lot of iOS developer’s lives.

It’s better but not the best choice. Conflicts usually occur with Storyboard, and can’t avoid. Besides that, constraints list is a mess, really mess and easy to make you mad.

You can debate about select a control, and select the constraint you want instead of find in the list. Believe me, many times you can’t do that, and you soon get mad with it.

3. Dynamically customize control with Auto Layout programmatically

What would you do with this control in Storyboard? You can make a custom view with 1 UILabel for title, 1 UITextField for text input, and 1 UIView for underline, 1 UIButton for right button.

How to use it? Drag a UIView to Storyboard, choose subclass. Remember, it’s a UIView. You have to access to the view instance, textField and change the properties.

But with Auto Layout programmatically, it’s a UITextField. You can change textColor, font, backgroundColor easily. Again, It’s a UITextField.

You can see how I implement this custom UITextField at knGistTextField

Reasons prevent you from using Auto Layout programmatically

Too many code in a file

Yes, I have to admit that. There are 600 - 700 lines of code in my file. But it’s easy to solve this problem with Extension. Why don’t we define and setup constraints in a file, (LoginControllerUI.swift, for instance), and move all handler, logic into new file, LoginControllerHandler.swift.

Write the same codes many times

Define a UIButton with Auto Layout programmatically

 let button: UIButton = {
    let title = "Sample"
    let image = "Sample"
    let color = UIColor.black

    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle(title, for: .normal)
    button.setTitleColor(color, for: .normal)
    button.setImage(UIImage(named: image), for: .normal)
    return button
}()

Every time I need a UIButton, do I have to find and copy this code? No, code snippet can help you.

Find out how it helps here. I define above button with knButton key in my XCode. It’s easier that find and drag a UIButton and then format it in Storyboard, right?

Better way

You create a static funciton and use it with ease.

static func makeButton(title: String? = nil,
                       titleColor: UIColor = .black,
                       font: UIFont? = nil,
                       background: UIColor = .clear,
                       cornerRadius: CGFloat = 0,
                       borderWidth: CGFloat = 0,
                       borderColor: UIColor = .clear) -> UIButton {
    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle(title, for: .normal)
    button.setTitleColor(titleColor, for: .normal)
    button.titleLabel?.font = font
    button.setCorner(radius: cornerRadius)
    button.setBorder(borderWidth, color: borderColor)
    return button
}

Code is too long and unreadable

// (1)
let underline = UIView()
underline.backgroundColor = UIColor.lightGray
underline.translatesAutoresizingMaskIntoConstraints = false
addSubview(underline)

// (2)
underline.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8).isActive = true
underline.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
underline.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
underline.heightAnchor.constraint(equalToConstant: 1).isActive = true

(1)

Same to all controls in Auto Layout programmatically, you have to keep this format for all controls. You can make it better with code below

extension UIView {
    func addToView(view: UIView) {
        translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(self)
    }
}

(1) can be changed to

let underline = UIView() 
underline.addToView(view)

(2)

They’re default code from Apple, why don’t we make it more readable and beautiful?

underline.bottom(toView: view, space: -8)
underline.horizontal(toView: view)
underline.height(1)

Is it beautiful enough? It comes from my own Auto Layout library. You can find it at knConstraints

How to start with Auto Layout programmatically?

If you wan to try a life without Storyboard, why don’t you try these following instructions?

Setup your own code snippets
Try my Auto Layout library knConstraints
Develop some simple custom views, with Auto Layout programmatically.

How can I help?

Please feel free to touch to me by leaving comments or schedule a session with me.

Enjoy coding

Tips to boost your iOS work

Nguyen Truong Ky — Tue, 28 Apr 2020 21:19:34 +0000

Some tips below help me work faster and more efficiently. Let's check it out.

1. Don't depend on server API.

APIs are immensely important and we can't do anything without APIs. So can we watch Youtube or Facebook while backend teams are burying their noses in code?
You will get a red alert from your manager soon.
Or APIs are slow and hard for us to test while developing it. What should we do?

Don't depend on server API. Just depend on the schemas.

Ask backend for API schemas, which they send to us when we call. Save it into a json file.
Use tip #2 or #3 to create your data model.
Setup your code as you're calling API. I usually seperate API calls to workers. You can do your way.

class GetUserDetailWorker {
// (1)
    func run(completion: @escaping(User?, Error?) -> Void) {
        Alamofire.request() {
            handleResponse(response: AnyObject, completion: completion)
        }
    }

// (2)
    private func handleResponse(response: AnyObject?, completion: @escaping(User?, Error?) -> Void) {
        // parse json to your data model
        // check logic
        // ...
        // call completion
    }
}

(1): Your controllers don't know what is inside the GetUserDetailWorker. They respond to success or failure from the worker. So, you are free to fake any data here and see how your controllers respond to.

(2): This is where you parse raw json to your data model, handle the logic and response.

Now do a trick.

Add function after your handleResponse function.

func loadLocally(completion: @escaping(User?, Error?) -> Void) {
    if let filepath = Bundle.main.path(forResource: "User", ofType: "json") {
        do {
            let contents = try String(contentsOfFile: filepath)
            let data = contents.data(using: .utf8)!
            if let json = try JSONSerialization.jsonObject(with: data, options : .allowFragments) as AnyObject? {
                handleResponse(response: json, completion: completion)
                } else {
                    print("bad json")
                }
        } catch {
            completion(nil, error)
        }
    }
}

Add this at the begining of run function.

loadLocally(completion: completion)
return

We load the user.json and send it to controllers. It's on your computer, we can change any data as we want. When APIs are ready, just remove these 2 lines and work like a charm.

Some advantages

Fast. You call it from your computer, no delay or depend on internet.
Convenient. You can change any data you want, good cases, bad cases and change your UI approriately.
Independent. You don't depend on server progress anymore.

2. Create init function

When you define struct, Swift can give you an init function, you don't have to write it yourself. But if you use class, no free init. What if you have a long class and long init, like below.

class User {
    var id: String
    var tasks: [String]
    var email: String?
    var membershipExpirationDate: Date?
    var startDate: Date?
    var cancelAtPeriodEnd: Bool?
    var balance: Int
    let phoneNumber: String?
    let currency: String
    init(id: String, tasks: [String], email: String?, membershipExpirationDate: Date?, startDate: Date?, cancelAtPeriodEnd: Bool?, balance: Int, phoneNumber: String?, currency: String) {
        self.id = id
        self.tasks = tasks
        self.email = email
        self.membershipExpirationDate = membershipExpirationDate
        self.startDate = startDate
        self.cancelAtPeriodEnd = cancelAtPeriodEnd
        self.balance = balance
        self.phoneNumber = phoneNumber
        self.currency = currency
    }
}

Do you want to type it yourself? Try this way.

Notes

Press option and drag to select multiline.
Delete unused words.
Copy properties' name.
Press esc to quit multi cursors.

3. Parse JSON result

I am not a fan of Codable. It's really useful in simple responses, but complicated ones, no thanks. And it's hard to debug also.

Most of work, I parse JSON manually, don't use SwiftyJSON or similar ones. One time, I joined a team with complicated responses. Example is below.

{
  "Id": "b206bb24-03ab-4a25-a9c4-b26e2fd2e9f8",
  "Name": "Hexagon 21",
  "ScreenName": null,
  "Picture": "https://scontent.xx.fbcdn.net/v/t1.0-9/20245457_303012200102286_1324449236613079430_n.jpg?_nc_cat=104&_nc_oc=AQmRtf3n0fmK36Z8Vnzz5QFECni4m52YHbm0GbzdSEI6slVpgf59oGBHZCeOBv3yzGc&_nc_ht=scontent.xx&oh=24ebc12ea4244757e584f7f438e06e44&oe=5E613D7C",
  "ExternalId": "575475522634796",
  "FacebookUserId": null,
  "Account": null,
  "Type": 1,
  "Subtype": "FacebookGroup",
  "IsDefault": false,
  "Credential": null,
  "AssociatedSource": null,
  "PublishMessageProfiles": null,
  "ProfileSubscribeNotifications": null,
  "Selected": false,
  "HasAppInstalled": null,
  "IsWebHookSubscribed": false,
  "IsTwitterWebHookSubscribed": null
}

Now, making a class from these is a boring work.

Use this: https://app.quicktype.io/.
Explore options on the right pane to see it changes. And here the result:

class User {
    var id: String?
    var name: String?
    var screenName: NSNull?
    var picture: String?
    var externalID: String?
    var facebookUserID: NSNull?
    var account: NSNull?
    var type: Int?
    var subtype: String?
    var isDefault: Bool?
    var credential: NSNull?
    var associatedSource: NSNull?
    var publishMessageProfiles: NSNull?
    var profileSubscribeNotifications: NSNull?
    var selected: Bool?
    var hasAppInstalled: NSNull?
    var isWebHookSubscribed: Bool?
    var isTwitterWebHookSubscribed: NSNull?

    init(id: String?, name: String?, screenName: NSNull?, picture: String?, externalID: String?, facebookUserID: NSNull?, account: NSNull?, type: Int?, subtype: String?, isDefault: Bool?, credential: NSNull?, associatedSource: NSNull?, publishMessageProfiles: NSNull?, profileSubscribeNotifications: NSNull?, selected: Bool?, hasAppInstalled: NSNull?, isWebHookSubscribed: Bool?, isTwitterWebHookSubscribed: NSNull?) {
        self.id = id
        self.name = name
        self.screenName = screenName
        self.picture = picture
        self.externalID = externalID
        self.facebookUserID = facebookUserID
        self.account = account
        self.type = type
        self.subtype = subtype
        self.isDefault = isDefault
        self.credential = credential
        self.associatedSource = associatedSource
        self.publishMessageProfiles = publishMessageProfiles
        self.profileSubscribeNotifications = profileSubscribeNotifications
        self.selected = selected
        self.hasAppInstalled = hasAppInstalled
        self.isWebHookSubscribed = isWebHookSubscribed
        self.isTwitterWebHookSubscribed = isTwitterWebHookSubscribed
    }
}

Pretty cool, right?

Conclusion

Some tips from my experience. Hope them help you work faster and more interesting your work.

Enjoy coding

iOS developer starts learning Android development

Nguyen Truong Ky — Tue, 28 Apr 2020 21:17:07 +0000

iOS development choice

I started iOS development 7 years ago when I was a .NET developer. That's a hard time for me. I had to choose learn Objective-C or Swift. At that time, Swift was too young and super easy to start. But the company project was written in Objective-C. Finally, I picked Swift learn deeply and abandon Objective-C.

I tried a lot of books, just few chapters in every book and easily found they make no sense and not really good for a fresher. I watched hundreds of videos on YouTube, and some are good, others are not.

Finally, I found a really good book from Ray Wenderlich.

I tried this book and learnt very fast. 2 weeks later, I started working on another company project, which was written in Swift.

I always suggest this to any mentees want to learn iOS. It helps them to build their fundamental knowledge.

2 years later, I figured out Lets build that app from Brian Voong. This brought my iOS development to a higher level. From that day, I've abandoned Storyboard and keep working with auto layout programmatically.

I've worked and learned 10-14 hours a day with few tips here. It makes me grow faster and stronger.

And now, here I am. I'm here to help you learn iOS and develop your career.

Android development choice

Today, I have the same problem, with Java and Kotlin. No doubt, select Kotlin as the first option.

I started learning Android 2 weeks ago, and lost in definitions, concepts, syntax. I tried book from Ray Wenderlich, some tutorials, anything I found and thought it's good, I tried. But not better. Ray's books are good but this time, doesn't work for me.

Finally, I found a course from Brian Voong. It's really awesome. And I am still learning in this list, Episode 9, at this time.

How to learn new language/technologies

Below are some notes I apply when I learn new thing, some are from my failures. They're used in my learning history and bring good result. Let's check it they work for you.

Ask: I didn't ask so I had to try anything I found. Many suggestions on Google, but not all of them are good for you. Ray's books are good for others but not good for me. So, ask your friends, your mentors, they can give you good answers.
Ask strangers: Sometimes, strangers have same backgrounds, levels with you can give you exactly suggestions. Just ask. Developers are open to share, not all, but most.
Try: don't trust anyone. Ask them to get suggestions, but you have to try yourself. Learn few chapters, try for 2 or 3 days and evaluate yourself. You find the best one for you.
Note what you learn. Anything is new for you, add to your notes. You forget it tomorrow, next week, next month. Just note, it helps you and other developers like you in future. I have a note about my first Android project here.
Create your workspace. Create a codebase project, where you can put any new code snippets you did. Try to make it separately. Next project, you don't want to write that code again, copy it from your workspace.
Never stop learning: I've worked 10-14 hours a day, and done a lot of projects to improve my code, practiced hundreds of samples, follow thousands of tutorials. If you need any subjects/projects to practice in your development, don't hesitate to text me.

Conclusion

Learning new things is never easy, but really fun. Never stop learning, never stop code. When you stop, you're dying.

Enjoy coding.

Make the Most of Your 24 Hours

Nguyen Truong Ky — Mon, 27 Apr 2020 22:20:33 +0000

I started iOS as a 2-year-experience .NET developer. The salary range for a junior iOS dev is a little bit lower than the amount for a 2-year-experience develop get. I wanted to make myself stronger, earn more experience. I had a misconception of working and learning. I thought, freelance projects will help me strengthen my knowledge and experience. So I tried to get as more as possible freelance projects. And my nightmare started from here.

I had no time to spend with my family, no time to work on personal improvement, no time to go out with friends, no time at all. All of my time was used up on my freelance work from coding new features, fixing bugs and much more. I was killing myself working odd hours and missing out on quality time with my family and friends.

I made a mess, uncountable technical debts, bugs, with the project. I was angry with everyone and myself. And the company project was affected. I brought more bugs there, dozens of stupid bugs, critical bugs.

Finally, after lots of stress situations, I found a way to get myself out of these nightmares.

Why necessary for you?

You’re developer, and you understand clearly about the pressure in development. I’m sure you want to get some freelance projects to earn more money. So, you should try my solution to manage your time effectively.

You’re developer, and you have to work OT. Too many tasks you have and you have no enough time for work. No time for family, no time for your life, no time at all. My solution can help you get out of your situation.

Solution

This solution is about how to change the way I work, how to manage time effectively. It’s absolutely right for me, and helps me out of the shit situations, boost my career, make my life better. Is it good to try yourself?

This solution has 2 parts:

Life skills: something you can change in your life, how you work, how you enjoy your life…
Tech skills: 3 tips for iOS developers to work faster, better, and save time.

Life Skills - Switch Up Working Hours

You have to spend at least 8 hours a day for working at your office. The manager says, “We have no time, we have to work OT”. Yes, it’s a extremely bad solution. Your brain, your body is drained. And now, you force it work more hard. Do you really think you can work effectively after 8 hours working? No, you don’t. You know, your colleagues know, but the manager doesn’t know.

It’s too hard to decline working OT, but you should do. You have to do unless you make more bugs and everything is worse.

One time, I had to work until 8.30 pm, without dinner, just some instance noodle. Went home, went to bed and 11.30pm, got a call.

“What the hell are you doing? Something is wrong with the promotion”.

OK, turned my Macbook on and worked like a dead guy.

Many times like that, and the project had shit quality. I can’t believe I can do that, but I did, no choice.

What is the better solution?

The firs thing in my solution, is to switch up working hours. I decline all OT and try to work better, work more in my ideal time to finish more tasks or fix more bugs.

The ideal time for working, for me, is 2am after 3 to 4 hours of sleeping, maybe different from you. This time is ideal because everything is quiet and there are absolutely no distractions. No phone calls, no email, no one bothers you. For me, this is the best time to get my creative juices flowing.

It’s exactly same to freelance projects. You can achieve better results than work after office time.

It’s hard to start at all, but try it yourself and experience amazing results.

Life Skills - Keep Up Health

Most importantly, a healthy body is the key to reach success. I have to work 8 hours everyday in an office and an additional 4-6 hours on freelance projects. If you do the math, my body has to work 1.5 times more than usual. Crazy, right? For most people, their body and mind will become exhausted very quickly with a schedule like this. In order for me to prevent myself from becoming ill, I make a conscious effort to include additional nutrition in my meals with more fruits, protein, etc.

In additional to a healthy diet, it’s important to stay active.I try to incorporate a little bit of exercise into my daily activities. For example, I use the stairs instead of the elevator, I try to walk faster, clean the floor manually, and more. Now, I know these types of activities won’t help me become an athlete, but every little bit helps to keep my health up.

You can make more evil bugs when you’re not healthy. And you waste double time to fix what you did when you’re not healthy. So, keep up your health and make good things for your code.

Life Skills - Change Your Mindset

Freelance projects are very good for expanding your experience. You have many projects to fill into your CV. You can earn more money. It’s great. But they’re not good to your knowledge. Freelance projects are useful when you have strong experience and want to strengthen them. But it’s a bad choice for learning because of pressure.

When you’re in a freelance projects, you have many pressure about time limit, money, client attitude… And you just want to make it done, not want to understand how it work and how to make it better. It’s harmful for you. You think you have experience with it, CoreData for instance, and you apply for new projects with CoreData require. You run into a big bugs and take lots of time to understand to fix that.

Side projects are better choice. You can research new technologies, try new hot things in new iOS, SiriKit, HealthKit for instance. Don’t forget to publish some side projects. They can help you to show off for your clients or your interviewer.

You also practice or strengthen your weakness in iOS with side projects. With these projects, you learn a lot and be confident to apply new projects.

Don’t think about money first, think about yourself, Make yourself better and money comes.

Tech skills - Code Snippets

Code Snippets is your template codes. You don’t want to type all the code or copy it from somewhere. Just type some first characters and select it from suggestion list. For instance, I usually type “button”, and XCode will give me this:

Easy, right? You don’t want to type boring code anymore.

Don’t forget use <# and #> with the placeholder text in the middle. Go ahead, type that into Xcode, and watch as the text between the octothorp tags magically transforms right in front of your eyes.

You can try my snippets at by copy and paste to ~/Library/Developer/Xcode/UserData/CodeSnippets/

Small things but very useful.

Tech skills - Knowledge base

It works like an external library, nearly same to Pods but in free way.

Situation like this. You finished a cool animation in company project. It’s really cool and you want to use it in your current freelance project. You copy this code to the freelance project, change something and let it work like a charm. But, you find something can be better in this code. You make changes, and want this change be applied in the company project. You copy this code again. Imagine you have more 2 projects, use this animation. It’s a nightmare.

Knowledge base is good choice for you. Create your own knowledge base in Github, clone to your projects. Add new features, change some if needed. Push to Github and pull it from other projects. All your projects can get the latest update easily. Cool, right?

Tech skills - Auto Layout programmatically

This is a popular war for many iOS developers. Storyboard fans think this is stupid thing. Programmatically guys fight for their belief.

This is opinion from a developer can’t live without Storyboard, and now he abandons it. It’s me :)

Auto Layout programmatically saves your time and your life.

How can it help to save time?

My situation is a good example. I designed a very good UI, and connected outlet, started logic coding, finished that feature. One day, I had to refactor code and found some improvement. Some UILabel had gestures, should be changed to UIButton. No problem, made changes. What did I do?

Find the UILabel need change
Delete one by one.
Add new UIButton
Connect new outlets
Setup Auto Layout constraints. (This is most painful step, dozens of constraints need setup)
Find and change many things in code

And when I changed to Auto Layout programmatically:

Find the UILabel need change
Change UILabel to UIButton
Find and change many things in code

Easier a lot, right? Especially, no change in setting up constraints.

Another advantage is to customize controls with Auto Layout programmatically. You can make any custom controls with programmatically, but you can’t do that with Storyboard.

If you use Storyboard (I mean Xib file), you can make a view, and copy 2 files, NewTextField.xib and NewTextField.swiftto your knowledge base. And you want to change it name to MyAwesomeTextField, you have to change 4 times, the 2 files’ name, class’ name, and the subclass’ name in xib. Never happen in Programmatically.

Some libraries you can try

And my favorite library is knConstraints, a project learned style from TinyConstraints, developed with a new syntax and more advantages.

Conclusion

This solution saves much time for me. I hope it can help you. Save time, work better and enjoy your life.

Hyperlink Label

Nguyen Truong Ky — Mon, 27 Apr 2020 22:17:03 +0000

Clickable Label is very popular in iOS, especially in Login, Register screen. You can easily see some text like this:

By register, I agree to Terms of Service and Private Policy

This is how I make this label.

Define your texts

Make sure the text you need to make clickable is exacly same to the full text.

let termText = "By register, I agree to ... Terms of Service and Private Policy"
let term = "Terms of Service"
let policy = "Private Policy"

Format the Label

let termLabel = UILabel()
let formattedText = String.format(strings: [term, policy],
                                    boldFont: UIFont.boldSystemFont(ofSize: 15),
                                    boldColor: UIColor.blue,
                                    inString: termText,
                                    font: UIFont.systemFont(ofSize: 15),
                                    color: UIColor.black)
termLabel.attributedText = formattedText
termLabel.numberOfLines = 0
let tap = UITapGestureRecognizer(target: self, action: #selector(handleTermTapped))
termLabel.addGestureRecognizer(tap)
termLabel.isUserInteractionEnabled = true
termLabel.textAlignment = .center

String.format is an extension from my code collection. This is the full function.

extension String {
    static func format(strings: [String],
                    boldFont: UIFont = UIFont.boldSystemFont(ofSize: 14),
                    boldColor: UIColor = UIColor.blue,
                    inString string: String,
                    font: UIFont = UIFont.systemFont(ofSize: 14),
                    color: UIColor = UIColor.black) -> NSAttributedString {
        let attributedString =
            NSMutableAttributedString(string: string,
                                    attributes: [
                                        NSAttributedStringKey.font: font,
                                        NSAttributedStringKey.foregroundColor: color])
        let boldFontAttribute = [NSAttributedStringKey.font: boldFont, NSAttributedStringKey.foregroundColor: boldColor]
        for bold in strings {
            attributedString.addAttributes(boldFontAttribute, range: (string as NSString).range(of: bold))
        }
        return attributedString
    }
}

Handle Label Tap Gesture

I get the tap location in the Label and check if this location belongs to term or policy text range.

@objc func handleTermTapped(gesture: UITapGestureRecognizer) {
    let termString = termText as NSString
    let termRange = termString.range(of: term)
    let policyRange = termString.range(of: policy)

    let tapLocation = gesture.location(in: termLabel)
    let index = termLabel.indexOfAttributedTextCharacterAtPoint(point: tapLocation)

    if checkRange(termRange, contain: index) == true {
        handleViewTermOfUse()
        return
    }

    if checkRange(policyRange, contain: index) {
        handleViewPrivacy()
        return
    }
}

Supported code

Check if a range contain an index

func checkRange(_ range: NSRange, contain index: Int) -> Bool {
    return index > range.location && index < range.location + range.length
}

Get index from a point in UILabel

extension UILabel {
    func indexOfAttributedTextCharacterAtPoint(point: CGPoint) -> Int {
        assert(self.attributedText != nil, "This method is developed for attributed string")
        let textStorage = NSTextStorage(attributedString: self.attributedText!)
        let layoutManager = NSLayoutManager()
        textStorage.addLayoutManager(layoutManager)
        let textContainer = NSTextContainer(size: self.frame.size)
        textContainer.lineFragmentPadding = 0
        textContainer.maximumNumberOfLines = self.numberOfLines
        textContainer.lineBreakMode = self.lineBreakMode
        layoutManager.addTextContainer(textContainer)

        let index = layoutManager.characterIndex(for: point, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
        return index
    }
}

Demo

And result is:

You can download the source code here

Conclusion

You can make a custom UILabel to be easier to reuse. I leave that for you. If you have any issues with this, let me know.

Enjoy coding.

Customize your UITabBarController

Nguyen Truong Ky — Sat, 25 Apr 2020 17:40:36 +0000

From 2017, design trending has changed to tab bar, instead of slide menu. UITabBarController has become one of the most popular controller. It’s very simple to use. But sometime, it’s too simple to customize and make attractive. Designers are artists, and they usually want tab bar like this

or like this

I had to implement a tab bar like above in 2015. My implementation at that time was bad. I used a UIViewController as a main controller, and added a custom view like a tab bar. And everytime a tab selected, embed the other UIViewController into the main controller. That’s not good option.

Today I make a UITabBarController with a custom view like a tab bar. With this solution, we can use the max strength of UITabBarController with the same behavior and code. Much easier and better than my implementation before. Hope anyone can easily customize to their design if they want after this note.

knTabBarItem

First thing need to be customized is the UITabBarItem. UITabBarItem is not flexible enough to be customized to anything I want. I need to use UIButton.

class knTabBarItem: UIButton {
    // (1)
    var itemHeight: CGFloat = 0
    // (2)
    var lock = false
    // (3)
    var color: UIColor = UIColor.lightGray {
        didSet {
            guard lock == false else { return }
            iconImageView.change(color: color)
            textLabel.textColor = color
        }}

    // (4)
    private let iconImageView = knUIMaker.makeImageView(contentMode: .scaleAspectFit)
    private let textLabel = knUIMaker.makeLabel(font: UIFont.systemFont(ofSize: 11),
                                        color: .black, alignment: .center)

    convenience init(icon: UIImage, title: String,
                    font: UIFont = UIFont.systemFont(ofSize: 11)) {
        self.init()
        translatesAutoresizingMaskIntoConstraints = false
        iconImageView.image = icon
        textLabel.text = title
        textLabel.font = UIFont(name: font.fontName, size: 11)
        setupView()
    }

    // (5)
    private func setupView() {
        addSubviews(views: iconImageView, textLabel)
        iconImageView.top(toView: self, space: 4)
        iconImageView.centerX(toView: self)
        iconImageView.square()

        let iconBottomConstant: CGFloat = textLabel.text == "" ? -2 : -20
        iconImageView.bottom(toView: self, space: iconBottomConstant)

        textLabel.bottom(toView: self, space: -2)
        textLabel.centerX(toView: self)
    }
}

(1) (2) (3)

Some tab items can be bigger than others. I can easily set the height for them to make difference with others.
Some tab items are very unacceptional with different color and don’t change color when selected.

(4)

knUIMaker is my collection to make controls. Just easier to make UIButton, UIImageView, UILabel by code.

(5)

addSubviews, top, centerX, bottom are from my knConstraints to make auto layout. I’m a fan of auto layout programmatically, so make controls and set layouts by code is what to do hundreds times everyday.

knTabBar

Next thing I have to focus on is UITabBar.

class knTabBar: UITabBar {
    // (1)
    var kn_items = [knTabBarItem]()
    convenience init(items: [knTabBarItem]) {
        self.init()
        kn_items = items
        translatesAutoresizingMaskIntoConstraints = false
        setupView()
    }

    override var tintColor: UIColor! {
        didSet {
            for item in kn_items {
                item.color = tintColor
            }}}

    func setupView() {
        backgroundColor = .white
        if kn_items.count == 0 { return }

        // (2)
        let line = knUIMaker.makeLine(color: .gray, height: 0.5)
        addSubviews(views: line)
        line.horizontal(toView: self)
        line.top(toView: self)

        // (3)
        var horizontalConstraints = "H:|"
        let itemWidth: CGFloat = screenWidth / CGFloat(kn_items.count)
        for i in 0 ..< kn_items.count {
            let item = kn_items[i]
            addSubviews(views: item)
            if item.itemHeight == 0 {
                item.vertical(toView: self)
            }
            else {
                item.bottom(toView: self)
                item.height(item.itemHeight)
            }
            item.width(itemWidth)
            horizontalConstraints += String(format: "[v%d]", i)
            if item.lock == false {
                item.color = tintColor
            }
        }

        horizontalConstraints += "|"
        addConstraints(withFormat: horizontalConstraints, arrayOf: kn_items)
    }
}

(1)

I can’t override items in UITabBar, so I name it a little bit similar to easier to remember

(2)

Add a line to separate the tab bar to the controller. Some designs need indicator at the selected item, I will add indicator here.

(3)

Flexible to add items by programmatically. Thanks Apple for Auto Layout Programmatically.

knTabController

The easiest thing is here. Just inherit from UITabBarController, add some code, and it works.

class knTabController: UITabBarController {
    var kn_tabBar: knTabBar!
    var selectedColor = UIColor.darkGray
    var normalColor = UIColor.lightGray {
        didSet {
            kn_tabBar.tintColor = normalColor
        }}

    private var kn_tabBarHeight: CGFloat = 49
    override func viewDidLoad() {
        super.viewDidLoad()
        tabBar.isHidden = true
        setupView()
    }

    func setupView() {}

    private func setTabBar(items: [knTabBarItem], height: CGFloat = 49) {
        guard items.count > 0 else { return }

        kn_tabBar = knTabBar(items: items)
        guard let bar = kn_tabBar else { return }
        kn_tabBar.tintColor = normalColor
        bar.kn_items.first?.color = selectedColor

        view.addSubviews(views: bar)
        bar.horizontal(toView: view)
        bar.bottom(toView: view)
        kn_tabBarHeight = height
        bar.height(kn_tabBarHeight)
        for i in 0 ..< items.count {
            items[i].tag = i
            items[i].addTarget(self, action: #selector(switchTab))
        }
    }

    @objc func switchTab(button: UIButton) {
        selectedIndex = button.tag
    }
}

That’s ready for new tab bar. Just use it in a controller.

How to use?

Inherit class knTabController to your controller.
Override setupView method.

class DoctorController: knTabController {
    override func setupView() {
        let home = knTabBarItem(icon: #imageLiteral(resourceName: "home"), title: "Home")
        let appointment = knTabBarItem(icon: #imageLiteral(resourceName: "appointment"), title: "Appointment")
        let add = knTabBarItem(icon: #imageLiteral(resourceName: "add"), title: "")
        add.lock = true
        add.itemHeight = 66
        let doctors = knTabBarItem(icon: #imageLiteral(resourceName: "doctors"), title: "Doctors")
        let porfolio = knTabBarItem(icon: #imageLiteral(resourceName: "user"), title: "Porfolio")

        let red = UIViewController()
        red.view.backgroundColor = .red
        let green = UIViewController()
        green.view.backgroundColor = .green
        let blue = UIViewController()
        blue.view.backgroundColor = .white
        let yellow = UIViewController()
        yellow.view.backgroundColor = .yellow
        let gray = UIViewController()
        gray.view.backgroundColor = .gray

        setTabBar(items: [home, appointment, add, doctors, porfolio])
        viewControllers = [red, green, blue, yellow, gray]
        normalColor = .red
    }
}

Run and see. The main button (Hexagon Add) is locked, don’t change the color when selected.

It’s much better if we have animation.

Add animation

In knTabController, change method switchTab content to

let newIndex = button.tag
changeTab(from: selectedIndex, to: newIndex)

Add method changeTab

 private func changeTab(from fromIndex: Int, to toIndex: Int) {
    kn_tabBar.kn_items[fromIndex].color = normalColor
    kn_tabBar.kn_items[toIndex].color = selectedColor
    animateSliding(from: fromIndex, to: toIndex)
}

And result:

Conclusion

Hope this can help anyone want to customize a tab bar can do it effortless. Code is here.

I will add some more animations and some properties to make it more convenience in very near future. Suggestions and feedbacks are welcome.

Notes

I am a fan of Auto Layout Programmatically, so usually use my library, knConstraints for setting constraints. knConstraints is a very simple way to setup Auto Layout with very easy to read syntax. You can try it yourself here.

UI Implementation - Confirmation popup

Nguyen Truong Ky — Sat, 25 Apr 2020 11:39:22 +0000

In previous post, I shared you how to show an animated popup, and explained how to customize your popup. In this post, I share how I use the popup in my projects with confirmation and information alert.
An information popup is used to alert user about some important information, like this

A confirmation alert is very useful to warn user about next action, for instance, confirm to remove a photo, confirm a withdrawal request… In this post, I will extend the knPopup to knConfirmation to display a confirmation popup.

The idea is same to the previous post, you can customize any UI you want in setupView.

Define new controls

class knConfirmation: knPopup {
    private let iconImgView = UIMaker.makeImageView()
    let titleLabel = UIMaker.makeLabel(font: UIFont.boldSystemFont(ofSize: 18),
                                    color: UIColor.darkGray, numberOfLines: 2,
                                    alignment: .center)
    let contentLabel = UIMaker.makeLabel(font: UIFont.systemFont(ofSize: 15),
                                    color: UIColor.lightGray, numberOfLines: 0,
                                    alignment: .center)
    private let stack = UIMaker.makeStackView()
    private let cancelButton = UIMaker.makeButton(titleColor: .darkGray,
                                        font: UIFont.systemFont(ofSize: 15),
                                        cornerRadius: 27,
                                        borderWidth: 1,
                                        borderColor: .darkGray)
    private let buttonStack = UIMaker.makeStackView(axis: .horizontal, distributon: UIStackView.Distribution.fill, alignment: UIStackView.Alignment.fill, space: 16)

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
}

A confirmation popup needs:

1 icon (optional)
2 labels: title (optional), content
2 buttons: 1 for accept action, 1 for reject action (optional). We have okButton in knPopup, just need one more for reject action
2 stack views: 1 to contain 2 buttons, 1 to contain all controls

Layout the view

We will setup auto layout for all controls by code in setupView function

override func setupView() {
    // (1)
    buttonStack.addViews(cancelButton, okButton)
    cancelButton.size(toView: okButton)
    okButton.vertical(toView: buttonStack)
    cancelButton.centerY(toView: okButton)

    // (2)
    let spaceView = UIMaker.makeView()
    spaceView.height(12)

    stack.addViews(iconImgView, titleLabel, contentLabel, spaceView, buttonStack)
    iconImgView.square(edge: 56)
    iconImgView.centerX(toView: stack)
    titleLabel.horizontal(toView: stack, space: 16)
    contentLabel.horizontal(toView: stack, space: 16)
    buttonStack.horizontal(toView: stack, space: 16)

    // (3)
    container.addSubview(stack)
    stack.fill(toView: container, space: UIEdgeInsets(top: 16, bottom: 16))

    okButton.addTarget(self, action: #selector(didSelectOK), for: .touchUpInside)
    cancelButton.addTarget(self, action: #selector(dismiss), for: .touchUpInside)
}

(1)

buttonStack is a UIStackView, so we can’t addSubviews as usual, but have to addArrangedSubview. I extend to new function addViews to shorten the name. :)
buttonStack contains the button, so when you don’t need cancel button, you can remove it from buttonStack, and okButton automatically fill the superView. That’s why I choose UIStackView for this UI.

(2)

In stackView, you can’t change specific space between 2 views, so I did this trick. Insert a space view with a height I want.

(3)

We need to add stack to container. The container is setup to animate when appear/disappear. So we don’t need to care about animation anymore.

Dynamically display what you want

Some popups, you need to show an icon to make it be colorful. Others don’t need title and cancel button. We will dynamically init what we want.

init(icon: UIImage? = nil, title: String? = nil, content: String, okTitle: String? = nil, cancelTitle: String? = nil) {
    super.init(frame: .zero)
    set(icon: icon, title: title, content: content, okTitle: okTitle, cancelTitle: cancelTitle)
}

private func set(icon: UIImage? = nil, title: String? = nil, content: String, okTitle: String? = nil, cancelTitle: String? = nil) {
    if icon == nil {
        iconImgView.removeFromSuperview()
    } else {
        iconImgView.image = icon
    }

    if title == nil {
        titleLabel.removeFromSuperview()
    } else {
        titleLabel.text = title
    }

    contentLabel.text = content
    if okTitle != nil {
        okButton.setTitle(okTitle, for: .normal)
    }

    if cancelTitle == nil {
        cancelButton.removeFromSuperview()
    } else {
        cancelButton.setTitle(cancelTitle, for: .normal)
    }
}

Just pass nil or remove that param from the init function. What param is nil, the related control will be removed from UI.

Run the app

Live sample

Conclusion

Hope this popup can help you save your time and efforts to display a popup. Customize what you want and share it to me via this repository.

UI Implementation - Popup

Nguyen Truong Ky — Fri, 24 Apr 2020 17:52:17 +0000

Popup is not the best choice to notify users. It takes the users’ attention, and need action to remove popup. Sometimes, popup is a good selection. It displays on the same view, not change eyesight.

Today, I will implement a popup, inspired by the design of Joseph Liu. Change something to make it simpler.

This is how it looks after coding.

Prepare project

Create new Single View App project
Add new file ReferralPopup.swift

Define components

class ReferralPopup: knView {
    let blackView: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        return button
    }()
    let container: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .white
        v.createRoundCorner(7)
        return v
    }()
    let okButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        let color = UIColor.color(r: 241, g: 66, b: 70)
        button.backgroundColor = color
        button.setTitle("COPY & CONTINUE", for: .normal)
        button.backgroundColor = UIColor.color(r: 71, g: 204, b: 54)
        button.height(54)
        button.createRoundCorner(27)
        return button
    }()
}

blackView is the transparent background cover the whole screen. We will dismiss the popup when it clicked. You can use UIView and add UIGestureRecognizer also.
container is the white background container. It’s the main view for popup.

Layout the container

The most important part is how to layout the container

override func setupView() {
    let color = UIColor.color(r: 241, g: 66, b: 70)

    let instruction = "GET YOUR FREE $10 CREDITS"
    let label = UIMaker.makeLabel(text: instruction,
                                  font: UIFont.boldSystemFont(ofSize: 15),
                                  color: .white,
                                  alignment: .center)

    let circle = UIMaker.makeView(background: color)
    let logo = UIMaker.makeImageView(image: UIImage(named: "swift"), contentMode: .scaleAspectFit)
    logo.backgroundColor = .white

    let codeTitle = UIMaker.makeLabel(text: "REFERRAL CODE",
                                      font: UIFont.boldSystemFont(ofSize: 12),
                                      color: UIColor.color(r: 155, g: 165, b: 172),
                                      alignment: .center)
    let codeLabel = UIMaker.makeLabel(text: "KYNGUYEN",
                                      font: UIFont.boldSystemFont(ofSize: 40),
                                      color: UIColor.color(r: 242, g: 64, b: 65),
                                      alignment: .center)


    container.addSubviews(views: circle, label, okButton, logo, codeTitle, codeLabel)

    // (1)
    label.top(toView: container, space: 24)
    label.horizontal(toView: container, space: 24)

    // (2)
    let edge: CGFloat = UIScreen.main.bounds.width * 2
    circle.square(edge: edge)
    circle.createRoundCorner(edge / 2)
    circle.centerX(toView: container)
    circle.bottom(toAnchor: logo.centerYAnchor)

    // (3)
    let logoEdge: CGFloat = 66
    logo.square(edge: logoEdge)
    logo.centerX(toView: circle)
    logo.verticalSpacing(toView: label, space: 40)
    logo.createRoundCorner(logoEdge / 2)
    logo.createBorder(1, color: color)

    // (4)
    codeTitle.centerX(toView: container)
    codeTitle.verticalSpacing(toView: logo, space: 24)

    // (5)
    codeLabel.centerX(toView: container)
    codeLabel.verticalSpacing(toView: codeTitle, space: 8)

    // (6)
    okButton.verticalSpacing(toView: codeLabel, space: 24)
    okButton.bottom(toView: container, space: -24)
    okButton.horizontal(toView: container, space: 36)
    okButton.createRoundCorner(28)

    okButton.addTarget(self, action: #selector(dismiss), for: .touchUpInside)
    blackView.addTarget(self, action: #selector(dismiss), for: .touchUpInside)
}

The sketch is like this

(1)

label is the instruction label, created by my helper UIMaker. It is sticked to the container's topAnchor with 24px spacing. It should be sticked to left and right, and textAlignment is center to prevent long text can break the UI.

Notes

top: layout the view1's topAnchor to the view2's topAnchor.
horizontal: layout the view1's leftAnchor to view2's leftAnchor and view1's rightAnchor to view2's rightAnchor.

(2)

circle is the top curve. You can use an image instead. The circle has width and height equal to UIScreen.main.bounds.width * 2. It is bigger than the view so we can put its lower edge overlay on the container.
Layout circle horizonal center to the view, so the circle looks balance. You can try align to left or right to see differences.
The circle’s bottom edge will align to the logo center. A little bit difficult to understand. The logo is sticked to the top, and circle is sticked to the logo. I set the circle sticked to the container’s top, but the view can’t auto layout. This way, container can easy auto layout, we don’t need to care the container’s height.

Notes

square(value: CGFloat): set the view's width equals to view's height and equal to value
centerX: stick view1's centerXAnchor to view2's centerXAnchor
bottom: layout view1's bottomAnchor to view2's bottomAnchor.

(3)

logo has verticalSpacing to label and has 40px spacing. It means the logo’s top and the label’s bottom has 40px spacing.

Notes

verticalSpacing: layout view1's topAnchor to view2's bottomAnchor

(4), (5)

Same to codeTitle and codeLabel, verticalSpacing will make a space between them.

(6)

okButton has verticalSpacing and bottom. So keep in mind, the view can automatically calculate the height of the view.

Display Popup

The popup is ready to display. Let’s display it.

func show(in view: UIView) {
    addSubviews(views: blackView, container)
    blackView.fill(toView: self)
    container.centerY(toView: self)
    container.horizontal(toView: self, space: 24)

    blackView.alpha = 0
    UIView.animate(withDuration: 0.1, animations:
        { [weak self] in self?.blackView.alpha = 1 })
    container.zoomIn(true)

    view.addSubviews(views: self)
    fill(toView: view)
}

We will display the popup inside the controller’s view. Rememeber 3 views: blackView, container, self. We will add blackView and container to self. And we add self to containerView.
view.zoomIn(true) will show the popup with a slight zoom animation.

Dismiss popup

Quite hard here for dismiss animation. The popup zooms in a little bit and zooms out to disappear.

@objc func dismiss() {
    let initialValue: CGFloat = 1
    let middleValue: CGFloat = 1.025
    let endValue: CGFloat = 0.001
    func fadeOutContainer() {
        UIView.animate(withDuration: 0.2, animations:
            { [weak self] in self?.container.alpha = 0 })
    }
    func zoomInContainer() {
        UIView.animate(withDuration: 0.05,
                       animations: { [weak self] in self?.container.scale(value: middleValue) })
    }
    func zoomOutContainer() {
        UIView.animate(withDuration: 0.3, delay: 0.05, options: .curveEaseIn,
                       animations:
            { [weak self] in
                self?.container.scale(value: endValue)
                self?.blackView.alpha = 0
            }, completion: { [weak self] _ in self?.removeFromSuperview() })
    }

    container.transform = container.transform.scaledBy(x: initialValue , y: initialValue)
    fadeOutContainer()
    zoomInContainer()
    zoomOutContainer()
}

Time to run

Add a button to ViewController and show the popup in the button event

@objc func showReferralPopup() {
    ReferralPopup().show(in: view)
}

Do it better

You can add new class Popup and move components, full show function, full dismiss function and empty setupView to Popup.
The ReferralPopup is inherited from Popup. You can add new popup easily just set inherit from Popup and layout your new view in its setupView.
Full code can pull from my Github