CODEWITHSUNDEEP
iosswiftuitableview
Adrian
Adrian

Reputation: 20068

How to show an UIView on top of an UITableView?

I have an UIViewController which contains a table view and a simple view. Both of them are at the same level.

At startup my view starts hidden at the bottom and when I press a button I want my view to slide up. When I do this only 1/4 of the view is shown and not the complete view.

This worked okay before adding the table view, but now I don't understand why it doesn't fully show.

Here is the code to show and hide my view:

func showPicker(date: Date?) {
    UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseOut], animations: {
        self.timePickerView.transform = CGAffineTransform(translationX: 0, y: 0)
    }, completion: { _ in

    })
}

func hidePicker() {
    UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseOut], animations: {
        self.timePickerView.transform = CGAffineTransform(translationX: 0, y: self.timePickerView.frame.size.height)
    }, completion: { _ in

    })
}

And here is a screenshot with the view (below the buttons there should be an UIDatePicker which is not shown):

enter image description here

Someone know what the issue is ? I am trying to do this from the storyboards.

edit:

This is what I have right now, but it still doesn't work. It doesn't animate and it also shows just a part of the view. Apparently if I increase the height the view is shown even more, so somehow it says that the shown part is exactly 220 height, which is strange :/

func hidePicker() {
   self.pickerBottomConstraint.constant = -220
    UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseOut], animations: {
        self.timePickerView.layoutIfNeeded()
    }, completion: { _ in

    })
}

func showPicker(date: Date?) {
    self.pickerBottomConstraint.constant = 0
    UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseOut], animations: {
        self.timePickerView.layoutIfNeeded()
    }, completion: { _ in

    })
}

Upvotes: 0

Views: 674

Answers (3)

Kazi Abdullah Al Mamun
Kazi Abdullah Al Mamun

Reputation: 1481

Rather then transform, change your views center y position.
ex: 

@IBOutlet weak var viewToAnimateOutlet: UIView!
@IBAction func showViewButtonAction(_ sender: Any) {
    UIView.animate(withDuration: 1.5) {
        self.viewToAnimateOutlet.center.y -= self.viewToAnimateOutlet.frame.height
    }
        }
@IBAction func hideViewButtonAction(_ sender: Any) {
    UIView.animate(withDuration: 1.5) {
        self.viewToAnimateOutlet.center.y += self.viewToAnimateOutlet.frame.height
    }
}

What i did:
I used autolayout and provided constraint for ViewToAnimate View is

ViewToAnimates.leading = safeArea.leading "constant = 8"

ViewToAnimates.trailing = safeArea.trailing "constant = 8"

This constraint will place ViewToAnimate view outside of the main views bottom. so view will not visible until showViewButtonAction method called.

ViewToAnimates.top = safeArea.bottom "constant = 0"

ViewToAnimates.height = 130

View is now out of screen

View is now visible

Upvotes: 1

Shehata Gamal
Shehata Gamal

Reputation: 100523

See a demo here showHide that accomplish what you want

enter image description here

Upvotes: 2

Glenn Posadas
Glenn Posadas

Reputation: 13291

If you're using autolayout, I bet you do and you should, then the easiest way to do what you wanna do is to toggle the constraint of your view, see the gif I added below.

First is to have a reference to your either top or bottom constraint of your view you wanna show and hide. Then modify the constant of the constraint to adjust its position, in that way, you get the illusion that the view is hidden and shown. The demo below uses tableView too.

Hope this helps.

enter image description here

Upvotes: 2

Related Questions