Swift Autolayout Visual Format Language Part3

//
//  LanguageController.swift
//  Backend
//
//  Created by AhmadNaser on 10/30/19.
//

import Foundation
import UIKit
import FSPagerView
import Alamofire
import SwiftyJSON
import SwiftyUserDefaults
class LanguageController: UIViewController {
    
    var backgroundimageView: UIImageView = {
         var image : UIImage = UIImage(named:"icEnter")!
        let iv = UIImageView(image: image)
        iv.contentMode = .scaleAspectFill
        iv.layer.masksToBounds = true
        iv.translatesAutoresizingMaskIntoConstraints = false
        
        return iv
    }()
    
    var imageLogo: UIImageView = {
         var image : UIImage = UIImage(named:"512")!
        let iv = UIImageView(image: image)
        iv.contentMode = .scaleAspectFit
        iv.layer.masksToBounds = false
        iv.translatesAutoresizingMaskIntoConstraints = false
        
        return iv
    }()
    

    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        view.addSubview(backgroundimageView)
        
  
        let View2 = UIView()
             View2.backgroundColor = UIColor.red
             view.addSubview(View2)
             
             view.addConstraintsWithFormat("H:|[v0]|", views: View2)
             view.addConstraintsWithFormat("V:[v0(45)]", views: View2)
             
             let View3 = UIView()
                    View3.backgroundColor = UIColor.green
                    view.addSubview(View3)
             
                    view.addConstraintsWithFormat("H:|[v0]|", views: View3)
                    view.addConstraintsWithFormat("V:[v0]-10-[v1(50)]", views: View2,View3)
        
        
           let View4 = UIView()
               View4.backgroundColor = UIColor.orange
               view.addSubview(View4)
        
               view.addConstraintsWithFormat("H:|[v0]|", views: View4)
               view.addConstraintsWithFormat("V:[v0]-20-[v1(100)]", views: View3,View4)
               imageLogo.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
               View4.addSubview(imageLogo)
        imageLogo.translatesAutoresizingMaskIntoConstraints = false
        imageLogo.centerXAnchor.constraint(equalTo: View4.centerXAnchor).isActive = true
        imageLogo.centerYAnchor.constraint(equalTo: View4.centerYAnchor).isActive = true
        imageLogo.heightAnchor.constraint(equalTo: View4.heightAnchor).isActive = true
        
           let View5c = UIView()
        View5c.backgroundColor = UIColor.nocolor
               view.addSubview(View5c)
        View5c.translatesAutoresizingMaskIntoConstraints = false
               view.addConstraintsWithFormat("H:|[v0]|", views: View5c)
               view.addConstraintsWithFormat("V:[v0]-20-[v1(50)]", views: View4,View5c)
        
        
           let View5 = UIView()
               View5.backgroundColor = UIColor.red
               View5.translatesAutoresizingMaskIntoConstraints = false
               View5c.addSubview(View5)
        
               View5c.addConstraintsWithFormat("H:|[v0]|", views: View5)
               View5c.addConstraintsWithFormat("V:|[v0]|", views: View5)
        

           let lblEnglish:UILabel = {
               
            let lb = UILabel(frame: CGRect(x: 0, y: 10, width:View5.frame.width / 2, height: View5.frame.height))
               lb.translatesAutoresizingMaskIntoConstraints = false
               lb.text = "English"
               lb.font = lb.font.withSize(16)
               lb.numberOfLines = 1
               lb.textAlignment = .center
               lb.backgroundColor =  UIColor(red: 121/255, green: 76/255, blue: 219/255,alpha: 255/255)
               lb.textColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 255/255)
            lb.shadowColor = UIColor.black
            lb.shadowOffset = CGSize(width: 1, height: 1)
               return lb
           }()
        
           let lblArabic:UILabel = {
               
               let lb = UILabel(frame: CGRect(x: 0, y: 10, width:View5.frame.width / 2, height: View5.frame.height))
               lb.translatesAutoresizingMaskIntoConstraints = false
               lb.text = "عربي"
               lb.font = lb.font.withSize(16)
               lb.numberOfLines = 1
               lb.textAlignment = .center
               lb.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 255/255)
               lb.textColor = UIColor(red: 121/255, green: 76/255, blue: 219/255,alpha: 255/255)
                lb.shadowColor = UIColor.black
                lb.shadowOffset = CGSize(width: 1, height: 1)
               return lb
           }()
        
        View5.addSubview(lblEnglish)
            View5.addSubview(lblArabic)
        View5.addConstraintsWithFormat("H:|[v0][v1]|", views: lblEnglish,lblArabic)
      //   View5.addConstraintsWithFormat("H:|[v0]|", views: SubscribersLabel2)
        View5.addConstraintsWithFormat("V:|[v0][v1]|", views: lblEnglish,lblArabic)
       // View5.addConstraintsWithFormat("V:|[v0]|", views: SubscribersLabel2)
        
        
        
        
        
                View5.addConstraint(NSLayoutConstraint(item: lblEnglish, attribute: .width, relatedBy: .equal, toItem: View5, attribute: .width, multiplier: 0.5, constant: 0))
                        View5.addConstraint(NSLayoutConstraint(item: lblArabic, attribute: .width, relatedBy: .equal, toItem: View5, attribute: .width, multiplier: 0.5, constant: 0))
        View5.addConstraint(NSLayoutConstraint(item: lblEnglish, attribute: .height, relatedBy: .equal, toItem: View5, attribute: .height, multiplier: 1, constant: 0))
                View5.addConstraint(NSLayoutConstraint(item: lblArabic, attribute: .height, relatedBy: .equal, toItem: View5, attribute: .height, multiplier: 1, constant: 0))
        

                    //position child in parent 1
                view.addConstraint(NSLayoutConstraint(item: View5, attribute: .centerX, relatedBy: .equal, toItem: View5c, attribute: .centerX, multiplier: 1, constant: 0))
                        view.addConstraint(NSLayoutConstraint(item: View5, attribute: .centerY, relatedBy: .equal, toItem: View5c, attribute: .centerY, multiplier: 1, constant: 0))
                //resize it 2
        view.addConstraint(NSLayoutConstraint(item: View5, attribute: .width, relatedBy: .equal, toItem: View5c, attribute: .width, multiplier: 0.8, constant: 1))

          let constraintLeadingx = View5.centerXAnchor.constraint(equalTo: View5c.centerXAnchor, constant: 0.0)
          //constraintLeadingx.priority = UILayoutPriority(rawValue: 750.0)
          constraintLeadingx.isActive = true
          let constraintTrailingy = View5.centerYAnchor.constraint(equalTo: View5c.centerYAnchor, constant: 0.0)
         // constraintTrailingy.priority = UILayoutPriority(rawValue: 750.0)
          constraintTrailingy.isActive = true
          View5c.addConstraint(constraintLeadingx)
         View5c.addConstraint(constraintTrailingy)
        
        View5.centerXAnchor.constraint(equalTo: View5c.centerXAnchor).isActive = true
        View5.centerYAnchor.constraint(equalTo: View5c.centerYAnchor).isActive = true
        View5.heightAnchor.constraint(equalTo: View5c.heightAnchor).isActive = true
        
        
           View5.layer.borderWidth = 1
           View5.layer.cornerRadius = 10
           View5.layer.borderColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 255/255).cgColor
           View5.clipsToBounds = true
        
        
    


 
      //  View5.addConstraint(NSLayoutConstraint(item: SubscribersLabel2, attribute: .height, relatedBy: .equal, toItem: View5, attribute: .height, multiplier: 0.8, constant: 0))
}
    

}

extension UIView {
    func addConstraintsWithFormat(_ format: String, views: UIView...) {
        var viewsDictionary = [String: UIView]()
        for (index, view) in views.enumerated() {
            let key = "v\(index)"
            view.translatesAutoresizingMaskIntoConstraints = false
            viewsDictionary[key] = view
        }
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: viewsDictionary))
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

// LanguageController.swift

// Backend

// Created by AhmadNaser on 10/30/19.

import Foundation

import UIKit

import FSPagerView

import Alamofire

import SwiftyJSON

import SwiftyUserDefaults

class LanguageController: UIViewController {

var backgroundimageView: UIImageView = {

var image : UIImage = UIImage(named:"icEnter")!

let iv = UIImageView(image: image)

iv.contentMode = .scaleAspectFill

iv.layer.masksToBounds = true

iv.translatesAutoresizingMaskIntoConstraints = false

return iv

}()

var imageLogo: UIImageView = {

var image : UIImage = UIImage(named:"512")!

let iv = UIImageView(image: image)

iv.contentMode = .scaleAspectFit

iv.layer.masksToBounds = false

iv.translatesAutoresizingMaskIntoConstraints = false

return iv

}()

override func viewDidLoad() {

super.viewDidLoad()

view.addSubview(backgroundimageView)

let View2 = UIView()

View2.backgroundColor = UIColor.red

view.addSubview(View2)

view.addConstraintsWithFormat("H:|[v0]|", views: View2)

view.addConstraintsWithFormat("V:[v0(45)]", views: View2)

let View3 = UIView()

View3.backgroundColor = UIColor.green

view.addSubview(View3)

view.addConstraintsWithFormat("H:|[v0]|", views: View3)

view.addConstraintsWithFormat("V:[v0]-10-[v1(50)]", views: View2,View3)

let View4 = UIView()

View4.backgroundColor = UIColor.orange

view.addSubview(View4)

view.addConstraintsWithFormat("H:|[v0]|", views: View4)

view.addConstraintsWithFormat("V:[v0]-20-[v1(100)]", views: View3,View4)

imageLogo.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

View4.addSubview(imageLogo)

imageLogo.translatesAutoresizingMaskIntoConstraints = false

imageLogo.centerXAnchor.constraint(equalTo: View4.centerXAnchor).isActive = true

imageLogo.centerYAnchor.constraint(equalTo: View4.centerYAnchor).isActive = true

imageLogo.heightAnchor.constraint(equalTo: View4.heightAnchor).isActive = true

let View5c = UIView()

View5c.backgroundColor = UIColor.nocolor

view.addSubview(View5c)

View5c.translatesAutoresizingMaskIntoConstraints = false

view.addConstraintsWithFormat("H:|[v0]|", views: View5c)

view.addConstraintsWithFormat("V:[v0]-20-[v1(50)]", views: View4,View5c)

let View5 = UIView()

View5.backgroundColor = UIColor.red

View5.translatesAutoresizingMaskIntoConstraints = false

View5c.addSubview(View5)

View5c.addConstraintsWithFormat("H:|[v0]|", views: View5)

View5c.addConstraintsWithFormat("V:|[v0]|", views: View5)

let lblEnglish:UILabel = {

let lb = UILabel(frame: CGRect(x: 0, y: 10, width:View5.frame.width / 2, height: View5.frame.height))

lb.translatesAutoresizingMaskIntoConstraints = false

lb.text = "English"

lb.font = lb.font.withSize(16)

lb.numberOfLines = 1

lb.textAlignment = .center

lb.backgroundColor = UIColor(red: 121/255, green: 76/255, blue: 219/255,alpha: 255/255)

lb.textColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 255/255)

lb.shadowColor = UIColor.black

lb.shadowOffset = CGSize(width: 1, height: 1)

return lb

}()

let lblArabic:UILabel = {

let lb = UILabel(frame: CGRect(x: 0, y: 10, width:View5.frame.width / 2, height: View5.frame.height))

lb.translatesAutoresizingMaskIntoConstraints = false

lb.text = "عربي"

lb.font = lb.font.withSize(16)

lb.numberOfLines = 1

lb.textAlignment = .center

lb.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 255/255)

lb.textColor = UIColor(red: 121/255, green: 76/255, blue: 219/255,alpha: 255/255)

lb.shadowColor = UIColor.black

lb.shadowOffset = CGSize(width: 1, height: 1)

return lb

}()

View5.addSubview(lblEnglish)

View5.addSubview(lblArabic)

View5.addConstraintsWithFormat("H:|[v0][v1]|", views: lblEnglish,lblArabic)

// View5.addConstraintsWithFormat("H:|[v0]|", views: SubscribersLabel2)

View5.addConstraintsWithFormat("V:|[v0][v1]|", views: lblEnglish,lblArabic)

// View5.addConstraintsWithFormat("V:|[v0]|", views: SubscribersLabel2)

View5.addConstraint(NSLayoutConstraint(item: lblEnglish, attribute: .width, relatedBy: .equal, toItem: View5, attribute: .width, multiplier: 0.5, constant: 0))

View5.addConstraint(NSLayoutConstraint(item: lblArabic, attribute: .width, relatedBy: .equal, toItem: View5, attribute: .width, multiplier: 0.5, constant: 0))

View5.addConstraint(NSLayoutConstraint(item: lblEnglish, attribute: .height, relatedBy: .equal, toItem: View5, attribute: .height, multiplier: 1, constant: 0))

View5.addConstraint(NSLayoutConstraint(item: lblArabic, attribute: .height, relatedBy: .equal, toItem: View5, attribute: .height, multiplier: 1, constant: 0))

//position child in parent 1

view.addConstraint(NSLayoutConstraint(item: View5, attribute: .centerX, relatedBy: .equal, toItem: View5c, attribute: .centerX, multiplier: 1, constant: 0))

view.addConstraint(NSLayoutConstraint(item: View5, attribute: .centerY, relatedBy: .equal, toItem: View5c, attribute: .centerY, multiplier: 1, constant: 0))

//resize it 2

view.addConstraint(NSLayoutConstraint(item: View5, attribute: .width, relatedBy: .equal, toItem: View5c, attribute: .width, multiplier: 0.8, constant: 1))

let constraintLeadingx = View5.centerXAnchor.constraint(equalTo: View5c.centerXAnchor, constant: 0.0)

//constraintLeadingx.priority = UILayoutPriority(rawValue: 750.0)

constraintLeadingx.isActive = true

let constraintTrailingy = View5.centerYAnchor.constraint(equalTo: View5c.centerYAnchor, constant: 0.0)

// constraintTrailingy.priority = UILayoutPriority(rawValue: 750.0)

constraintTrailingy.isActive = true

View5c.addConstraint(constraintLeadingx)

View5c.addConstraint(constraintTrailingy)

View5.centerXAnchor.constraint(equalTo: View5c.centerXAnchor).isActive = true

View5.centerYAnchor.constraint(equalTo: View5c.centerYAnchor).isActive = true

View5.heightAnchor.constraint(equalTo: View5c.heightAnchor).isActive = true

View5.layer.borderWidth = 1

View5.layer.cornerRadius = 10

View5.layer.borderColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 255/255).cgColor

View5.clipsToBounds = true

// View5.addConstraint(NSLayoutConstraint(item: SubscribersLabel2, attribute: .height, relatedBy: .equal, toItem: View5, attribute: .height, multiplier: 0.8, constant: 0))

}

extension UIView {

func addConstraintsWithFormat(_ format: String, views: UIView...) {

var viewsDictionary = [String: UIView]()

for (index, view) in views.enumerated() {

let key = "v\(index)"

view.translatesAutoresizingMaskIntoConstraints = false

viewsDictionary[key] = view

}

addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: viewsDictionary))

}

Final Result

if you interested in adding functionality, just simply do the following

        lblArabic.isUserInteractionEnabled = true
        // 1. Single Tap or Touch
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(  self.SelectArabic))
        tapGesture.numberOfTapsRequired = 1
        lblArabic.addGestureRecognizer(tapGesture)

    @objc func SelectArabic(){
         
           print("ar SelectLanguage has been clicked")
       
       }

lblArabic.isUserInteractionEnabled = true

// 1. Single Tap or Touch

let tapGesture = UITapGestureRecognizer(target: self, action: #selector( self.SelectArabic))

tapGesture.numberOfTapsRequired = 1

lblArabic.addGestureRecognizer(tapGesture)

@objc func SelectArabic(){

print("ar SelectLanguage has been clicked")

}

About the Author

Hi! I'm Ahmad. I have a degree in Computer Science from Birzeit University and you might call me a bit of computer geek. I am the Founder of Greenbackend Turnkey Solutions a leading Cloud and Hosting Company in the Middle East, Also I am the Founder of Ahmad Naser Turnkey Solutions in Harvey, LA, USA. I'm comfortable with a large range of languages and techniques. After implementing enterprise applications using Salesforce and Siebel CRM for 3 years and with professional experience in building websites, cloud apps, iOS apps, Unity games, Android mobile apps and educational games for 8 years. I decided to share my technical knowledge with people all over the world to benefit from my experience and build their own careers specially because I am a real world example with over 20 successful apps on Google Play Store, Asset Store and Apple Store, So your success is mine and I want to help you reach your goals step by step exactly as I do. I'm passionate about teaching people about technologies, so from time to time I gave courses online and in learning centers and teach beginners and professionals on many technologies and development frameworks. One of my greatest goals in life is growing the next generation of software professionals and to keep teaching programming at every opportunity I get. I can't wait to help you experience the achievement and financial freedom that having a deep understanding of technology brings. So why not start learning to design & develop now by joining our epic Unity 3D professional 2d game development course? See you soon! Ahmad

Swift Autolayout Visual Format Language Part3

About the Author

Let’s Talk

Your Contact Info

Service Details

Thank you