NSLayoutConstraint ile Programmatically Autolayout işlemi

Merhabalar bu yazımda İOS programlama için önemli bir konu olan AutoLayout işlemini nasıl program içinde kod ile hallederiz örneğini vereceğim.

AutoLayout işlemi nedir ? diyecek olursanız bu işlem Nesnelerin yerini boyutunu cihaza göre ve Landscape veya Portrait durumuna göre aynı göstermenizi sağlar. Uygulamalarınızı hem ipad hemde iphone serilerinde doğru ve güzel bir şekilde çalıştırmak için oldukça önemli bir konudur.

Xcode ortamında nesneleri View’lerin üzerine yerleştirip işlem yaptığınızda bulunması gereken yeri AutoLayout ayarlarını görsel olarak yapabilirsiniz. Ancak bazı durumlar vardır ki kod içinde nesneleri ekleyip, yok edebilirsiniz buna bağlı olarak eğer AutoLayout kullanmassanız yamulmalar ve görsel bozulmaları oluşacaktır.

Bunun için imdadınıza NSLayoutConstraint sınıfı yetişir. Bu sınıfı kullanarak kod içinde bu işlemi kolaylıkla halledebilirsiniz.

Aşağıdaki verdiğim kod örneğini inceleyebilirsiniz. Sınıfın nasıl kullanıldığını basitçe görmeniz açısından yazdım.

   var blueView:UIView!
   var redView:UIView!
   var greenView:UIView!

3 adet UIView nesnemiz olsun ve bizde bunları sayfaya yerleştirelim.

        blueView = UIView()
        blueView.backgroundColor = UIColor.blue
        blueView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(self.blueView)
        
        
        let constw = NSLayoutConstraint(item: self.blueView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1.0, constant: 150)
        let consth = NSLayoutConstraint(item: self.blueView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 150)
        
        let centerX = NSLayoutConstraint(item: blueView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0)
        let centerY = NSLayoutConstraint(item: blueView, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1.0, constant: 0)
        
        self.view.addConstraints([constw,consth,centerX,centerY])
        
        redView = UIView()
        redView.backgroundColor = UIColor.red
        redView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(redView)

        let redW = NSLayoutConstraint(item: redView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1.0, constant: 150)
        let redH = NSLayoutConstraint(item: redView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 100)
        let bottomA = NSLayoutConstraint(item: redView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: -15)
        let rCenterX = NSLayoutConstraint(item: redView, attribute: .centerX, relatedBy: .equal, toItem: blueView, attribute: .centerX, multiplier: 1.0, constant: 0)
        view.addConstraints([redW,redH,bottomA,rCenterX])
        
        
        greenView = UIView()
        greenView.backgroundColor = UIColor.green
        greenView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(greenView)
        
        let gW = NSLayoutConstraint(item: greenView, attribute: .width, relatedBy: .equal, toItem: view, attribute: .width, multiplier: 1.0, constant: 0)
        let gH = NSLayoutConstraint(item: greenView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 50)
        let gTop = NSLayoutConstraint(item: greenView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 5)
        
        view.addConstraints([gW,gH,gTop])

NSLayoutConstraint(item: , attribute: , relatedBy: , toItem: , attribute: , multiplier: 1.0, constant: )

 item: Eklenecek nesnemiz, attribute: konum,boyut,uzaklık vs , relatedBy: eşit mi olacak daha mı az, toItem: hangi nesne ile bağlantılı, constant: attribute’deki değer

İlerleyen yazımda bu sınıf ile ilgili ek güzel bir yardımcı,kolay sınıf yazıp Github üzerinden paylaşacağım.