Bottom elements in UIScrollView dont show/scroll when using autolayout-CodePudding

I can not get all the content to show inside my scrollview using autolayout via snapkit library. Tried with different constrants but my buttons on bottom are never shown in full and nothing can be scrolled. My code:

private func setupViews() {

    let window = UIApplication.shared.windows[0]
    let safeFrame = window.safeAreaLayoutGuide.layoutFrame
    let bottomSafeOffset = window.frame.maxY - safeFrame.maxY

    title = NSLocalizedString("bank_connection_disconnect_title", comment: "")

    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
        make.leading.trailing.equalTo(0)
        make.bottom.equalTo(self.view.bottom)
    }

    let contentView = UIView(frame: CGRect.zero)
    scrollView.addSubview(contentView)
    contentView.snp.makeConstraints { (make) in
        make.width.height.top.bottom.equalTo(scrollView)
    }

    //first container
    let accountsView = UIView(frame: CGRect.zero)
    accountsView.backgroundColor = .white
    contentView.addSubview(accountsView)
    accountsView.snp.makeConstraints { (make) in
        make.leading.trailing.equalTo(0)
        make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
    }

    let topDelimiter = UIView(frame: CGRect.zero)
    topDelimiter.backgroundColor = .delimiterColor
    accountsView.addSubview(topDelimiter)
    topDelimiter.snp.makeConstraints { (make) in
        make.top.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    let bottomDelimiter = UIView(frame: CGRect.zero)
    bottomDelimiter.backgroundColor = .delimiterColor
    accountsView.addSubview(bottomDelimiter)
    bottomDelimiter.snp.makeConstraints { (make) in
        make.bottom.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    if let conn = viewModel.connection {
        let disconnectTitleLabel = UILabel(frame: CGRect.zero)
        disconnectTitleLabel.font = ToshlFont.regularFont(ofSize: 14)
        disconnectTitleLabel.textColor = .textColor1
        disconnectTitleLabel.numberOfLines = 0
        disconnectTitleLabel.attributedText = String(format: NSLocalizedString("bank_connection_disconnect_subtitle", comment: ""), conn.name).htmlAttributedString()
        accountsView.addSubview(disconnectTitleLabel)
        disconnectTitleLabel.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            make.height.equalTo(44)
            make.top.equalTo(20)
        }

        let accountsTitleLabel = UILabel(frame: CGRect.zero)
        accountsTitleLabel.font = ToshlFont.regularFont(ofSize: 14)
        accountsTitleLabel.textColor = .textColor1
        accountsTitleLabel.numberOfLines = 0
        accountsTitleLabel.text = NSLocalizedString("bank_connection_imported", comment: "")
        accountsView.addSubview(accountsTitleLabel)
        accountsTitleLabel.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            make.top.equalTo(disconnectTitleLabel.snp.bottom).offset(25)
        }

        let accountsLabel = UILabel(frame: CGRect.zero)
        accountsLabel.font = ToshlFont.regularFont(ofSize: 14)
        accountsLabel.textColor = .textColor1
        accountsLabel.numberOfLines = 0
        accountsLabel.text = viewModel.accountNamesSeparated()
        accountsView.addSubview(accountsLabel)
        accountsLabel.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            make.top.equalTo(accountsTitleLabel.snp.bottom).offset(25)
            make.bottom.equalTo(accountsView.bottom).offset(-20)
        }
    }

    //second container
    let dataOptionsView = UIView(frame: CGRect.zero)
    dataOptionsView.backgroundColor = .white
    contentView.addSubview(dataOptionsView)
    dataOptionsView.snp.makeConstraints { (make) in
        make.leading.trailing.equalTo(0)
        make.top.equalTo(accountsView.snp.bottom).offset(25)
    }

    let topDelimiter2 = UIView(frame: CGRect.zero)
    topDelimiter2.backgroundColor = .delimiterColor
    dataOptionsView.addSubview(topDelimiter2)
    topDelimiter2.snp.makeConstraints { (make) in
        make.top.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    let bottomDelimiter2 = UIView(frame: CGRect.zero)
    bottomDelimiter2.backgroundColor = .delimiterColor
    dataOptionsView.addSubview(bottomDelimiter2)
    bottomDelimiter2.snp.makeConstraints { (make) in
        make.bottom.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    let dataOptionTitleLabel = UILabel(frame: CGRect.zero)
    dataOptionTitleLabel.font = ToshlFont.regularFont(ofSize: 14)
    dataOptionTitleLabel.textColor = .textColor1
    dataOptionTitleLabel.numberOfLines = 0
    dataOptionTitleLabel.text = NSLocalizedString("bank_connection_disconnect_action", comment: "")
    dataOptionsView.addSubview(dataOptionTitleLabel)
    dataOptionTitleLabel.snp.makeConstraints { (make) in
        make.leading.equalTo(20)
        make.trailing.equalTo(-20)
        make.top.equalTo(25)
    }

    checkImageView = UIImageView(image: checkImage)

    if let checkImageView = checkImageView {
        checkImageView.tintColor = .lightBurgundy
        dataOptionsView.addSubview(checkImageView)
        checkImageView.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.width.equalTo(20)
            make.height.equalTo(20)
            make.top.equalTo(dataOptionTitleLabel.snp.bottom).offset(16)
        }
    }


    let keepDataLabel = UILabel(frame: CGRect.zero)
    keepDataLabel.font = ToshlFont.regularFont(ofSize: 14)
    keepDataLabel.textColor = .textColor1
    keepDataLabel.numberOfLines = 0
    keepDataLabel.text = NSLocalizedString("bank_connection_disconnect_keep_data", comment: "")
    dataOptionsView.addSubview(keepDataLabel)
    keepDataLabel.snp.makeConstraints { (make) in
        make.left.equalTo(checkImageView!.snp.right).offset(12)
        make.trailing.equalTo(-20)
        make.centerY.equalTo(checkImageView!)

    }

    let keepDataDescLabel = UILabel(frame: CGRect.zero)
    keepDataDescLabel.font = ToshlFont.regularFont(ofSize: 14)
    keepDataDescLabel.textColor = .textColor1
    keepDataDescLabel.numberOfLines = 0
    keepDataDescLabel.text = NSLocalizedString("bank_connection_disconnect_keep_data_desc", comment: "")
    dataOptionsView.addSubview(keepDataDescLabel)
    keepDataDescLabel.snp.makeConstraints { (make) in
        make.left.equalTo(keepDataLabel.snp.left)
        make.trailing.equalTo(-20)
        make.top.equalTo(keepDataLabel.snp.bottom).offset(8)
    }


    //second option
    checkImageView2 = UIImageView(image: nil)
    if let checkImageView2 = checkImageView2 {
        checkImageView2.tintColor = .lightBurgundy
        dataOptionsView.addSubview(checkImageView2)
        checkImageView2.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.width.equalTo(20)
            make.height.equalTo(20)
            make.top.equalTo(keepDataDescLabel.snp.bottom).offset(24)
        }
    }

    let deleteDataLabel = UILabel(frame: CGRect.zero)
    deleteDataLabel.font = ToshlFont.regularFont(ofSize: 14)
    deleteDataLabel.textColor = .textColor1
    deleteDataLabel.numberOfLines = 0
    deleteDataLabel.text = NSLocalizedString("bank_connection_disconnect_delete_data", comment: "")
    dataOptionsView.addSubview(deleteDataLabel)
    deleteDataLabel.snp.makeConstraints { (make) in
        make.left.equalTo(checkImageView2!.snp.right).offset(12)
        make.trailing.equalTo(-20)
        make.centerY.equalTo(checkImageView2!)

    }

    let deleteDataDescLabel = UILabel(frame: CGRect.zero)
    deleteDataDescLabel.font = ToshlFont.regularFont(ofSize: 14)
    deleteDataDescLabel.textColor = .textColor1
    deleteDataDescLabel.numberOfLines = 0
    deleteDataDescLabel.text = NSLocalizedString("bank_connection_disconnect_delete_data_desc", comment: "")
    dataOptionsView.addSubview(deleteDataDescLabel)
    deleteDataDescLabel.snp.makeConstraints { (make) in
        make.left.equalTo(deleteDataLabel.snp.left)
        make.trailing.equalTo(-20)
        make.top.equalTo(deleteDataLabel.snp.bottom).offset(8)
        make.bottom.equalTo(dataOptionsView.bottom).offset(-20)
    }


    let firstOptionOverlayView = UIView(frame: CGRect.zero)
    firstOptionOverlayView.backgroundColor = .clear
    dataOptionsView.addSubview(firstOptionOverlayView)
    firstOptionOverlayView.snp.makeConstraints { (make) in
        make.left.right.equalTo(0)
        make.top.equalTo(checkImageView!.snp.top)
        make.bottom.equalTo(keepDataDescLabel.snp.bottom)
    }

    let secondOptionOverlayView = UIView(frame: CGRect.zero)
    secondOptionOverlayView.backgroundColor = .clear
    dataOptionsView.addSubview(secondOptionOverlayView)
    secondOptionOverlayView.snp.makeConstraints { (make) in
        make.left.right.equalTo(0)
        make.top.equalTo(checkImageView2!.snp.top)
        make.bottom.equalTo(deleteDataDescLabel.bottom)
    }

    let disconnectButton = UIButton(type: .custom)
    CustomViews.roundedButton(disconnectButton, for: .toshlStyleRed)
    disconnectButton.setTitle(NSLocalizedString("bank_connection_disconnect_title", comment: ""), for: .normal)
    disconnectButton.addTarget(self, action: #selector(disconnectButtonTapped), for: .touchUpInside)
    contentView.addSubview(disconnectButton)

    disconnectButton.snp.makeConstraints { (make) in
        make.leading.equalTo(20)
        make.trailing.equalTo(-20)
        make.height.equalTo(44)
        make.top.equalTo(dataOptionsView.snp.bottom).offset(16)
    }

    let cancelButton = UIButton()
    cancelButton.addTarget(self, action: #selector(cancelButtonTapped), for: .touchUpInside)
    cancelButton.setTitle(NSLocalizedString("cancel", comment: ""), for: .normal)
    CustomViews.roundedButton(cancelButton, with: UIColor.grayButtonColor, fillBackgroundOnHighlight: true)
    contentView.addSubview(cancelButton)
    cancelButton.snp.makeConstraints { (make) in
        make.leading.equalTo(20)
        make.trailing.equalTo(-20)
        make.height.equalTo(44)
        make.top.equalTo(disconnectButton.snp.bottom).offset(16)
        //make.bottom.equalTo(contentView.snp.bottom).offset(-16) //ALSO THIS DOES NOT WORK

    }
}

Do you see any obvious problems with my constraints?

CodePudding user response：

Tough to tell exactly, because you have a LOT of things there that we can't easily replicate (CustomViews.roundedButton func, custom colors, fonts, etc).

So, I'd suggest starting a little simpler to make sure you understand what the constraints are doing.

First, this:

let window = UIApplication.shared.windows[0]
let safeFrame = window.safeAreaLayoutGuide.layoutFrame
let bottomSafeOffset = window.frame.maxY - safeFrame.maxY

seems very odd. You should be using the view's safe area. For example:

    let safeFrame = view.safeAreaLayoutGuide
    
    let scrollView = UIScrollView()
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.top.leading.trailing.bottom.equalTo(safeFrame)
    }

Next, you should be constraining your "content view" to the scroll view's .contentLayoutGuide -- which defines the "scrollable" area, and constrain its Width to the scroll view's .frameLayoutGuide.

Then, make sure you have a clear "chain" of vertical constraints between your views, including a bottom constraint on the last view to control the content view's height.

Give this a look. I've included plenty of comments so you should be able to see the differences from your code:

class SampleViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupViews()
    }

    
    private func setupViews() {
        
        let safeFrame = view.safeAreaLayoutGuide
        
        let scrollView = UIScrollView()
        view.addSubview(scrollView)
        scrollView.snp.makeConstraints { (make) in
            make.top.leading.trailing.bottom.equalTo(safeFrame)
        }
        
        let contentView = UIView(frame: CGRect.zero)
        scrollView.addSubview(contentView)
        contentView.snp.makeConstraints { (make) in
            // constrain contentView to scrollView's Content Layout Guide
            make.top.leading.trailing.bottom.equalTo(scrollView.contentLayoutGuide)
            // we want vertical scrolling only, so
            //  constrain contentView Width to scrollView's Frame Layout Guide
            make.width.equalTo(scrollView.frameLayoutGuide)
        }
        
        //first container
        //  let's make it 240-pts tall
        let accountsView = UIView(frame: CGRect.zero)
        accountsView.backgroundColor = .white
        contentView.addSubview(accountsView)
        accountsView.snp.makeConstraints { (make) in
            // constrain top / leading / trailing to contenView
            make.top.leading.trailing.equalTo(0)
            // constrain height to 240
            make.height.equalTo(240.0)
        }
        
        let topDelimiter = UIView(frame: CGRect.zero)
        topDelimiter.backgroundColor = .red // .delimiterColor
        accountsView.addSubview(topDelimiter)
        topDelimiter.snp.makeConstraints { (make) in
            make.top.equalTo(0)
            make.left.right.equalTo(0)
            make.height.equalTo(3.5)
        }
        
        let bottomDelimiter = UIView(frame: CGRect.zero)
        bottomDelimiter.backgroundColor = .red // .delimiterColor
        accountsView.addSubview(bottomDelimiter)
        bottomDelimiter.snp.makeConstraints { (make) in
            make.bottom.equalTo(0)
            make.left.right.equalTo(0)
            make.height.equalTo(3.5)
        }
        
        // let's add a vertical stack view with a few multi-line labels
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.spacing = 20

        contentView.addSubview(stackView)
        
        stackView.snp.makeConstraints { (make) in
            // constrain leading / trailing at 20-pts
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            // constrain top to accountsView bottom
            make.top.equalTo(accountsView.snp.bottom).offset(16)
        }

        let bkgColors: [UIColor] = [
            .systemRed, .systemGreen, .systemBlue,
            .blue, .brown, .magenta,
        ]
        bkgColors.forEach { c in

            let aLabel = UILabel()
            aLabel.numberOfLines = 0
            aLabel.textAlignment = .center
            aLabel.textColor = .white
            aLabel.backgroundColor = c
            aLabel.text = "One\nTwo\nThree\nFour\nFive\nSix\nSeven"
            
            stackView.addArrangedSubview(aLabel)
            
        }
        
        let disconnectButton = UIButton(type: .custom)
        disconnectButton.setTitle(NSLocalizedString("bank_connection_disconnect_title", comment: ""), for: .normal)
        contentView.addSubview(disconnectButton)
        
        disconnectButton.snp.makeConstraints { (make) in
            // constrain leading / trailing at 20-pts
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            // constrain height to 44
            make.height.equalTo(44)
            // constrain top to stackView bottom
            make.top.equalTo(stackView.snp.bottom).offset(16)
        }
        
        let cancelButton = UIButton()
        cancelButton.setTitle(NSLocalizedString("cancel", comment: ""), for: .normal)
        contentView.addSubview(cancelButton)

        cancelButton.snp.makeConstraints { (make) in
            // constrain leading / trailing at 20-pts
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            // constrain height to 44
            make.height.equalTo(44)
            // constrain top to disconnectButton bottom
            make.top.equalTo(disconnectButton.snp.bottom).offset(16)
            
            // constrain bottom to contentView bottom
            make.bottom.equalTo(contentView.snp.bottom).offset(-16)
        }

        // use some background colors so we can
        //  easily see view frames
        view.backgroundColor = .systemYellow
        scrollView.backgroundColor = .green
        contentView.backgroundColor = .yellow
        accountsView.backgroundColor = .cyan
        disconnectButton.backgroundColor = .systemBlue
        cancelButton.backgroundColor = .systemTeal
    }

}

CodePudding user response：

What worked for me is this:

private func setupViews() {

    title = NSLocalizedString("bank_connection_disconnect_title", comment: "")

    let scrollView = UIScrollView(frame: CGRect.zero)
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints { (make) in
        make.top.leading.trailing.bottom.equalTo(view.safeAreaLayoutGuide)
    }

    let contentView = UIView(frame: CGRect.zero)
    scrollView.addSubview(contentView)
    contentView.snp.makeConstraints { (make) in
        // constrain contentView to scrollView's Content Layout Guide
        make.top.leading.trailing.bottom.equalTo(scrollView.contentLayoutGuide)
        // we want vertical scrolling only, so constrain contentView Width to scrollView's Frame Layout Guide
        make.width.equalTo(scrollView.frameLayoutGuide)
    }

    //first container
    let accountsView = UIView(frame: CGRect.zero)
    accountsView.backgroundColor = .white
    contentView.addSubview(accountsView)
    accountsView.snp.makeConstraints { (make) in
        make.top.leading.trailing.equalTo(0)
    }

    let topDelimiter = UIView(frame: CGRect.zero)
    topDelimiter.backgroundColor = .delimiterColor
    accountsView.addSubview(topDelimiter)
    topDelimiter.snp.makeConstraints { (make) in
        make.top.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    let bottomDelimiter = UIView(frame: CGRect.zero)
    bottomDelimiter.backgroundColor = .delimiterColor
    accountsView.addSubview(bottomDelimiter)
    bottomDelimiter.snp.makeConstraints { (make) in
        make.bottom.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    if let conn = viewModel.connection {
        let disconnectTitleLabel = UILabel(frame: CGRect.zero)
        disconnectTitleLabel.font = ToshlFont.regularFont(ofSize: 14)
        disconnectTitleLabel.textColor = .textColor1
        disconnectTitleLabel.numberOfLines = 0
        disconnectTitleLabel.attributedText = String(format: NSLocalizedString("bank_connection_disconnect_subtitle", comment: ""), conn.name).htmlAttributedString()
        accountsView.addSubview(disconnectTitleLabel)
        disconnectTitleLabel.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            make.height.equalTo(44)
            make.top.equalTo(20)
        }

        let accountsTitleLabel = UILabel(frame: CGRect.zero)
        accountsTitleLabel.font = ToshlFont.regularFont(ofSize: 14)
        accountsTitleLabel.textColor = .textColor1
        accountsTitleLabel.numberOfLines = 0
        accountsTitleLabel.text = NSLocalizedString("bank_connection_imported", comment: "")
        accountsView.addSubview(accountsTitleLabel)
        accountsTitleLabel.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            make.top.equalTo(disconnectTitleLabel.snp.bottom).offset(25)
        }

        let accountsLabel = UILabel(frame: CGRect.zero)
        accountsLabel.font = ToshlFont.regularFont(ofSize: 14)
        accountsLabel.textColor = .textColor1
        accountsLabel.numberOfLines = 0
        accountsLabel.text = viewModel.accountNamesSeparated()
        accountsView.addSubview(accountsLabel)
        accountsLabel.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.trailing.equalTo(-20)
            make.top.equalTo(accountsTitleLabel.snp.bottom).offset(25)
            make.bottom.equalTo(accountsView.bottom).offset(-20)
        }
    }

    //second container
    let dataOptionsView = UIView(frame: CGRect.zero)
    dataOptionsView.backgroundColor = .white
    contentView.addSubview(dataOptionsView)
    dataOptionsView.snp.makeConstraints { (make) in
        make.leading.trailing.equalTo(0)
        make.top.equalTo(accountsView.snp.bottom).offset(25)
    }

    let topDelimiter2 = UIView(frame: CGRect.zero)
    topDelimiter2.backgroundColor = .delimiterColor
    dataOptionsView.addSubview(topDelimiter2)
    topDelimiter2.snp.makeConstraints { (make) in
        make.top.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    let bottomDelimiter2 = UIView(frame: CGRect.zero)
    bottomDelimiter2.backgroundColor = .delimiterColor
    dataOptionsView.addSubview(bottomDelimiter2)
    bottomDelimiter2.snp.makeConstraints { (make) in
        make.bottom.equalTo(0)
        make.left.right.equalTo(0)
        make.height.equalTo(0.5)
    }

    let dataOptionTitleLabel = UILabel(frame: CGRect.zero)
    dataOptionTitleLabel.font = ToshlFont.regularFont(ofSize: 14)
    dataOptionTitleLabel.textColor = .textColor1
    dataOptionTitleLabel.numberOfLines = 0
    dataOptionTitleLabel.text = NSLocalizedString("bank_connection_disconnect_action", comment: "")
    dataOptionsView.addSubview(dataOptionTitleLabel)
    dataOptionTitleLabel.snp.makeConstraints { (make) in
        make.leading.equalTo(20)
        make.trailing.equalTo(-20)
        make.top.equalTo(25)
    }

    checkImageView = UIImageView(image: checkImage)

    if let checkImageView = checkImageView {
        checkImageView.tintColor = .lightBurgundy
        dataOptionsView.addSubview(checkImageView)
        checkImageView.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.width.equalTo(20)
            make.height.equalTo(20)
            make.top.equalTo(dataOptionTitleLabel.snp.bottom).offset(16)
        }
    }

    let keepDataLabel = UILabel(frame: CGRect.zero)
    keepDataLabel.font = ToshlFont.regularFont(ofSize: 14)
    keepDataLabel.textColor = .textColor1
    keepDataLabel.numberOfLines = 0
    keepDataLabel.text = NSLocalizedString("bank_connection_disconnect_keep_data", comment: "")
    dataOptionsView.addSubview(keepDataLabel)
    keepDataLabel.snp.makeConstraints { (make) in
        make.left.equalTo(checkImageView!.snp.right).offset(12)
        make.trailing.equalTo(-20)
        make.centerY.equalTo(checkImageView!)
    }

    let keepDataDescLabel = UILabel(frame: CGRect.zero)
    keepDataDescLabel.font = ToshlFont.regularFont(ofSize: 14)
    keepDataDescLabel.textColor = .textColor1
    keepDataDescLabel.numberOfLines = 0
    keepDataDescLabel.text = NSLocalizedString("bank_connection_disconnect_keep_data_desc", comment: "")
    dataOptionsView.addSubview(keepDataDescLabel)
    keepDataDescLabel.snp.makeConstraints { (make) in
        make.left.equalTo(keepDataLabel.snp.left)
        make.trailing.equalTo(-20)
        make.top.equalTo(keepDataLabel.snp.bottom).offset(8)
    }
    //second option
    checkImageView2 = UIImageView(image: nil)
    if let checkImageView2 = checkImageView2 {
        checkImageView2.tintColor = .lightBurgundy
        dataOptionsView.addSubview(checkImageView2)
        checkImageView2.snp.makeConstraints { (make) in
            make.leading.equalTo(20)
            make.width.equalTo(20)
            make.height.equalTo(20)
            make.top.equalTo(keepDataDescLabel.snp.bottom).offset(24)
        }
    }

    let deleteDataLabel = UILabel(frame: CGRect.zero)
    deleteDataLabel.font = ToshlFont.regularFont(ofSize: 14)
    deleteDataLabel.textColor = .textColor1
    deleteDataLabel.numberOfLines = 0
    deleteDataLabel.text = NSLocalizedString("bank_connection_disconnect_delete_data", comment: "")
    dataOptionsView.addSubview(deleteDataLabel)
    deleteDataLabel.snp.makeConstraints { (make) in
        make.left.equalTo(checkImageView2!.snp.right).offset(12)
        make.trailing.equalTo(-20)
        make.centerY.equalTo(checkImageView2!)
    }

    let deleteDataDescLabel = UILabel(frame: CGRect.zero)
    deleteDataDescLabel.font = ToshlFont.regularFont(ofSize: 14)
    deleteDataDescLabel.textColor = .textColor1
    deleteDataDescLabel.numberOfLines = 0
    deleteDataDescLabel.text = NSLocalizedString("bank_connection_disconnect_delete_data_desc", comment: "")
    dataOptionsView.addSubview(deleteDataDescLabel)
    deleteDataDescLabel.snp.makeConstraints { (make) in
        make.left.equalTo(deleteDataLabel.snp.left)
        make.trailing.equalTo(-20)
        make.top.equalTo(deleteDataLabel.snp.bottom).offset(8)
        make.bottom.equalTo(dataOptionsView.bottom).offset(-20)
    }

    let firstOptionOverlayView = UIView(frame: CGRect.zero)
    firstOptionOverlayView.backgroundColor = .clear
    dataOptionsView.addSubview(firstOptionOverlayView)
    firstOptionOverlayView.snp.makeConstraints { (make) in
        make.left.right.equalTo(0)
        make.top.equalTo(checkImageView!.snp.top)
        make.bottom.equalTo(keepDataDescLabel.snp.bottom)
    }

    let secondOptionOverlayView = UIView(frame: CGRect.zero)
    secondOptionOverlayView.backgroundColor = .clear
    dataOptionsView.addSubview(secondOptionOverlayView)
    secondOptionOverlayView.snp.makeConstraints { (make) in
        make.left.right.equalTo(0)
        make.top.equalTo(checkImageView2!.snp.top)
        make.bottom.equalTo(deleteDataDescLabel.bottom)
    }

    let disconnectButton = UIButton(type: .custom)
    CustomViews.roundedButton(disconnectButton, for: .toshlStyleRed)
    disconnectButton.setTitle(NSLocalizedString("bank_connection_disconnect_title", comment: ""), for: .normal)
    disconnectButton.addTarget(self, action: #selector(disconnectButtonTapped), for: .touchUpInside)
    contentView.addSubview(disconnectButton)

    disconnectButton.snp.makeConstraints { (make) in
        make.leading.equalTo(20)
        make.trailing.equalTo(-20)
        make.height.equalTo(44)
        make.top.greaterThanOrEqualTo(dataOptionsView.snp.bottom).offset(16)
    }

    let cancelButton = UIButton()
    cancelButton.addTarget(self, action: #selector(cancelButtonTapped), for: .touchUpInside)
    cancelButton.setTitle(NSLocalizedString("cancel", comment: ""), for: .normal)
    CustomViews.roundedButton(cancelButton, with: UIColor.grayButtonColor, fillBackgroundOnHighlight: true)
    contentView.addSubview(cancelButton)
    cancelButton.snp.makeConstraints { (make) in
        make.leading.equalTo(20)
        make.trailing.equalTo(-20)
        make.height.equalTo(44)
        make.top.greaterThanOrEqualTo(disconnectButton.snp.bottom).offset(16)
        make.bottom.equalTo(contentView.snp.bottom).offset(-16)
    }

    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(keepDataButtonTapped))
    firstOptionOverlayView.isUserInteractionEnabled = true
    firstOptionOverlayView.addGestureRecognizer(tapGestureRecognizer)

    let tapGestureRecognizer2 = UITapGestureRecognizer(target: self, action: #selector(deleteDataButtonTapped))
    secondOptionOverlayView.isUserInteractionEnabled = true
    secondOptionOverlayView.addGestureRecognizer(tapGestureRecognizer2)
}