Swift Autolayout Visual Format Language Part3

back to snippest | Comment | Share

//
//  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")

}