Ahmad Naser Turnkey Ecosystem Ahmad Naser
October 30, 2019

Swift Autolayout Visual Format Language Part3

Published in the Ahmad Naser ecosystem. Estimated reading time: 4 minutes.

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

Leave a Reply

Your email address will not be published. Required fields are marked *