如何在UITableView顶部显示UIView？

Question

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):

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

    })
}

Answer 1

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.

Answer 2

See a demo here showHide that accomplish what you want

Answer 3

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