swift - Function or class to add subview to Stack view to set background color


Keywords:swift 


Question: 

I'm creating an input form which is each input row (label and text field) is arranged by the use of stack view. Im trying to add a white background colour to specific stack views. I'm achieved it, but struggling to create this as a function or class to be more easily control which stack views to get a background.

Any tips on converting this to a function or class that I can use across the project? (Note: current solution, only adds background colour to the last of the stack views and not all.. haven't fixed that yet..)

 import UIKit
 import Firebase

class createActivityVC: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    // runs the functions to add backgrounds to the stackviews

    pinBackground(backgroundView, to: nameStackView)
    pinBackground(backgroundView, to: typeStackView)
    pinBackground(backgroundView, to: weaponStackView)
    pinBackground(backgroundView, to: killStackView)
    pinBackground(backgroundView, to: sightingsStackView)
    pinBackground(backgroundView, to: noteStackView)

    // Do any additional setup after loading the view.
}

// Outlets used to set bacground color
@IBOutlet weak var nameStackView: UIStackView!
@IBOutlet weak var typeStackView: UIStackView!
@IBOutlet weak var weaponStackView: UIStackView!
@IBOutlet weak var killStackView: UIStackView!
@IBOutlet weak var sightingsStackView: UIStackView!
@IBOutlet weak var noteStackView: UIStackView!

// Normal outlets
@IBOutlet weak var name: UITextField! // required
@IBOutlet weak var type: UITextField! // required - type of hunt
@IBOutlet weak var weapon: UITextField! // required - weapon name
@IBOutlet weak var kills: UITextField! // optional (eg. 1)
@IBOutlet weak var sightings: UITextField! // optional (eg. 2)
@IBOutlet weak var note: UITextField! // optional short description of the hunt

@IBOutlet weak var saveBtn: UIButton!
@IBOutlet weak var cancelBtn: UIButton!



@IBAction func saveBtnWasPressed(_ sender: Any) {
    if name.text != nil && type.text != nil && weapon.text != nil {
        saveBtn.isEnabled = false // disabled the btn while uploading data - this ensure that user can't send the form twice

        DataService.instance.uploadPost(uid: (Auth.auth().currentUser?.uid)!, name: name.text!, type: type.text!, weapon: weapon.text!, kills: kills.text!, sightings: sightings.text!, note: note.text!,  withGroupKey: nil, sendComplete: {
            (isComplete) in
        if isComplete {
            self.saveBtn.isEnabled = true
            self.dismiss(animated: true, completion: nil)

        } else {
            self.saveBtn.isEnabled = true
            print("There was an error with uploading the activity")
        }

        })


    }

}
@IBAction func cancelBtnWasPressed(_ sender: Any) {
    self.dismiss(animated: true, completion: nil)
}


private lazy var backgroundView: UIView = {
    let view = UIView()
    view.backgroundColor = .white
    return view
}()

private func pinBackground(_ view: UIView, to stackView: UIStackView) {
    view.translatesAutoresizingMaskIntoConstraints = false
    stackView.insertSubview(view, at: 0)
    view.pin(to: stackView)
}

}

public extension UIView {
public func pin(to view: UIView) {
    NSLayoutConstraint.activate([
        leadingAnchor.constraint(equalTo: view.leadingAnchor),
        trailingAnchor.constraint(equalTo: view.trailingAnchor),
        topAnchor.constraint(equalTo: view.topAnchor),
        bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
}
}

This is how it looks now.. screenshot


1 Answer: 

Here is the code. You can add background color to any stackview. You can add colors to stackview like as

typeStackView.addBackground(color:.white)



extension UIStackView {

func addBackground(color: UIColor) {
    let subView = UIView(frame: bounds)
    subView.backgroundColor = color
    subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    insertSubview(subView, at: 0)
}

}