UITextView and UIImageView in ScrollView

Question

I want to make editable-textview and imageview both scroll. (Like Vesper app!) I have to do this programmatically. I followed this post uitextview-inside-uiscrollview-with-autolayout

And I made this in code, but it doesn't scroll!

noteTextView.isScrollEnabled = false

//Adding views
view.addSubview(bScrollView)
bScrollView.addSubview(nView)
nView.addSubview(photoImageView)
nView.addSubview(noteTextView)

//The scrollview constraint
let Sleft = NSLayoutConstraint(item: bScrollView, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 0)
let Sright = NSLayoutConstraint(item: view, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: bScrollView, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 0)
let Sbottom = NSLayoutConstraint(item: bottomLayoutGuide, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: bScrollView, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
let Stop = NSLayoutConstraint(item: bScrollView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0)

//The view constraint     
let Vleft = NSLayoutConstraint(item: nView, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 0)
let Vright = NSLayoutConstraint(item: view, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: nView, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 0)
let Vbottom = NSLayoutConstraint(item: view, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: nView, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
let Vtop = NSLayoutConstraint(item: nView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0)
let Vequal = NSLayoutConstraint(item: nView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: 0)

//The textview constraint
let Nleft = NSLayoutConstraint(item: noteTextView, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: nView, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 0)
let Nright = NSLayoutConstraint(item: nView, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: noteTextView, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 0)
let Nbottom = NSLayoutConstraint(item: nView, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: noteTextView, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
let Ntop = NSLayoutConstraint(item: noteTextView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: photoImageView, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
let Nheight = NSLayoutConstraint(item: noteTextView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.greaterThanOrEqual, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 268)

//The imageview constraint    
let Pleft = NSLayoutConstraint(item: photoImageView, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: nView, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 0)
let Pright = NSLayoutConstraint(item: nView, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: photoImageView, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 0)
let Ptop = NSLayoutConstraint(item: photoImageView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: nView, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0)
let Pheight = NSLayoutConstraint(item: photoImageView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 300)


NSLayoutConstraint.activate([
    Sleft, Sright, Sbottom, Stop,
    Vleft, Vright, Vbottom, Vtop, Vequal,
    Nleft, Nright, Nbottom, Ntop, Nheight,
    Pleft, Pright, Ptop, Pheight
])

How can I make textView and imageView like Vesper app? Is there are another way?

@Mr.Bista It looks like this [link](http://a3.mzstatic.com/us/r30/Purple3/v4/75/5b/ee/755bee3b-8854-eb8c-ea17-51395c88ba00/screen696x696.jpeg) — Daniel, Dec 08 '16 at 05:08
@Daniel Why you use `NSLayoutConstraint` instead of `NSLayoutAnchor`. `NSLayoutAnchor` is more readable. — Morty Choi, Dec 08 '16 at 05:09
@Daniel https://developer.apple.com/reference/uikit/nslayoutanchor have very detail example. — Morty Choi, Dec 08 '16 at 06:30

score 1 · Accepted Answer · answered Dec 08 '16 at 07:01

You're code has some issues, try this:

class ViewController: UIViewController {

    var bScrollView:UIScrollView!
    var nView:UIView!
    var photoImageView:UIImageView!
    var noteTextView:UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        view.translatesAutoresizingMaskIntoConstraints = false

        bScrollView = UIScrollView.init(frame: CGRect.init(x: 0, y: 0, width: 50, height: 50))
        bScrollView.backgroundColor = UIColor.black

        nView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 50, height: 50))
        nView.backgroundColor = UIColor.blue

        photoImageView = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: 50, height: 50))
        photoImageView.backgroundColor = UIColor.red

        noteTextView = UITextView.init(frame: CGRect.init(x: 0, y: 0, width: 50, height: 50))
        noteTextView.backgroundColor = UIColor.yellow
        noteTextView.clipsToBounds = true

        bScrollView.translatesAutoresizingMaskIntoConstraints = false
        nView.translatesAutoresizingMaskIntoConstraints = false
        photoImageView.translatesAutoresizingMaskIntoConstraints = false
        noteTextView.translatesAutoresizingMaskIntoConstraints = false

        noteTextView.isScrollEnabled = false

        //Adding views
        view.addSubview(bScrollView)
        bScrollView.addSubview(nView)
        nView.addSubview(photoImageView)
        nView.addSubview(noteTextView)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        //The scrollview constraint
        let sLeading = NSLayoutConstraint(item: bScrollView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 0)
        let sTrailing = NSLayoutConstraint(item: bScrollView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: 0)
        let sTop = NSLayoutConstraint(item: bScrollView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 0)
        let sBottom = NSLayoutConstraint(item: bScrollView, attribute: .bottom, relatedBy: .equal, toItem: bottomLayoutGuide, attribute: .bottom , multiplier: 1, constant: 0)

        view.addConstraints([sLeading, sTrailing, sTop, sBottom])


        //The view constraint
        let vLeading = NSLayoutConstraint(item: nView, attribute: .leading, relatedBy: .equal, toItem: bScrollView, attribute: .leading, multiplier: 1, constant: 0)
        let vTrailing = NSLayoutConstraint(item: nView, attribute: .trailing, relatedBy: .equal, toItem: bScrollView, attribute: .trailing, multiplier: 1, constant: 0)
        let vTop = NSLayoutConstraint(item: nView, attribute: .top, relatedBy: .equal, toItem: bScrollView, attribute: .top, multiplier: 1, constant: 0)
        let vBottom = NSLayoutConstraint(item: nView, attribute: .bottom, relatedBy: .equal, toItem: bScrollView, attribute: .bottom, multiplier: 1, constant: 0)

        bScrollView.addConstraints([vLeading, vTrailing, vTop, vBottom])

        let hEqual = NSLayoutConstraint(item: nView, attribute: .height, relatedBy: .equal, toItem: view, attribute: .height, multiplier: 1, constant: 0)
        let wEqual = NSLayoutConstraint(item: nView, attribute: .width, relatedBy: .equal, toItem: view, attribute: .width, multiplier: 1, constant: 0)

        view.addConstraints([hEqual, wEqual])

        //The imageview constraint
        let pLeading = NSLayoutConstraint(item: photoImageView, attribute: .leading, relatedBy: .equal, toItem: nView, attribute: .leading, multiplier: 1, constant: 0)
        let pTrailing = NSLayoutConstraint(item: photoImageView, attribute: .trailing, relatedBy: .equal, toItem: nView, attribute: .trailing, multiplier: 1, constant: 0)
        let pTop = NSLayoutConstraint(item: photoImageView, attribute: .top, relatedBy: .equal, toItem: nView, attribute: .top, multiplier: 1, constant: 0)
        let pHeight = NSLayoutConstraint(item: photoImageView, attribute: .height, relatedBy: .equal, toItem: nView, attribute: .width, multiplier: 1.0, constant: 0)

        nView.addConstraints([pLeading, pTrailing, pTop, pHeight])

        //The textview constraint
        let txtLeading = NSLayoutConstraint(item: noteTextView, attribute: .leading, relatedBy: .equal, toItem: nView, attribute: .leading, multiplier: 1, constant: 0)
        let txtTrailing = NSLayoutConstraint(item: noteTextView, attribute: .trailing, relatedBy: .equal, toItem: nView, attribute: .trailing, multiplier: 1, constant: 0)
        let txtTop = NSLayoutConstraint(item: noteTextView, attribute: .top, relatedBy: .equal, toItem: photoImageView, attribute: .bottom, multiplier: 1, constant: 0)
        let txtBottom = NSLayoutConstraint(item: noteTextView, attribute: .bottom, relatedBy: .equal, toItem: nView, attribute: .bottom, multiplier: 1.0, constant: 0)

        nView.addConstraints([txtTop, txtLeading, txtTrailing, txtBottom])

        view.layoutIfNeeded()
    }
}

Thank you! It's working now. I missed `translatesAutoresizingMaskIntoConstraints = false`... — Daniel, Dec 09 '16 at 06:39
You are right, you were just missing `translatesAutoresizingMaskIntoConstraints = false`. I re-wrote whole code according to my style. ;) — Bista, Dec 09 '16 at 06:54

UITextView and UIImageView in ScrollView

1 Answers1