Material floating action button should invisible when user scroll down and visible when scrolls up

Question

I have material Floating action button (FAB) at right bottom of screen. Also, I have CollectionView inside View. I want below actions to be done.

When user scrolls down - FAB should invisible.
When user scrolls up - FAB should visible.

I've searched everywhere in google.None of questions satisfied my requirements.

Sahil Manchanda · Accepted Answer · 2019-06-27T09:58:34.330

2

don't forget to set collectionView.delegate = self.

extension ViewController: UIScrollViewDelegate{
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == collectoinView{
            button.isHidden = scrollView.contentOffset.y > 50
        }
    }
}

50 is the position of Y from which the button will hide. You can adjust to any number according to your requirement.

Another Way of doing that

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let targetPoint = targetContentOffset as? CGPoint
    let currentPoint = scrollView.contentOffset

    if (targetPoint?.y ?? 0.0) > currentPoint.y {
        print("up")

    } else {
        print("down")
     }
}

with the second approach, there is no need to provide static value. the second approach has been converted to Swift from objective-c Answer

edited Jun 27 '19 at 09:58

answered Jun 27 '19 at 09:31

Sahil Manchanda

8,768
4
35
76

@Eswar glad it helped. don't forget to upvote and accept the answer. thanks – Sahil Manchanda Jun 27 '19 at 09:39
button hiding is working perfect. but - button becomes visible only when first cell displayed. I want it to be displayed if user scrolls up regardless of cell count. – Eswar Jun 27 '19 at 09:45
You can change the value *50* according to your requirement – Sahil Manchanda Jun 27 '19 at 09:47
I don't want to give any static value. I just need to know whether user has scrolled up or down. if UP - button should visible, if DOWN - button should hide. How can i achieve this? – Eswar Jun 27 '19 at 09:53
@Eswar another way added. – Sahil Manchanda Jun 27 '19 at 09:58
"**Cast from 'UnsafeMutablePointer' to unrelated type 'CGPoint' always fails**" - This is the **WARNING** by Xcode at the line "**let targetPoint = targetContentOffset as? CGPoint**" – Eswar Jun 27 '19 at 10:03
No - Second way is not working as expected. Though it reached last cell, button is still visible. When i touch and drag the view - then the button is hiding. – Eswar Jun 27 '19 at 10:12
I copied and basically translated(the second way) to swift. I'll look into it and get back to you – Sahil Manchanda Jun 27 '19 at 10:14
Sure. Will wait for that. Meantime - i will try to achieve desired result with first approach. – Eswar Jun 27 '19 at 10:15
Can we take help of UISwipeGestureRecognizer with first approach to meet the requirement? – Eswar Jun 27 '19 at 11:48

score 0 · Answer 2 · edited Jun 27 '19 at 09:34

0

You can use scrollViewDidScroll for this.

     func scrollViewDidScroll(scrollView: UIScrollView!) {
    if (self.lastContentOffset > scrollView.contentOffset.y) {
        // show your button
    }
    else if (self.lastContentOffset < scrollView.contentOffset.y) { 
       // hide your button
    }

    // update the new position acquired
    self.lastContentOffset = scrollView.contentOffset.y
}

edited Jun 27 '19 at 09:34

Vinodh

5,207
4
35
67

answered Jun 27 '19 at 09:30

Deepseey

1
1

1

When i tried your code - This error is raised "**Value of type 'ViewController' has no member 'lastContentOffset'**". – Eswar Jun 27 '19 at 09:40
oh sorry. i forgot to add this. lastContentOffset is a simple CGFloat variable. You should add it somewhere in your code. (like this var lastContentOffset : CGFloat = 0) – Deepseey Jun 27 '19 at 09:46

score 0 · Answer 3 · answered Mar 13 '20 at 11:29

0

https://i.stack.imgur.com/OQGGO.png

Call the Method ---> func scrollViewWillEndDragging
Call the method for the Animation --> func setView

answered Mar 13 '20 at 11:29

Khushtar parvez

25
5

please write your code here in question instead of uploading pic so that other people can copy paste and test your code and then it's easy to evaluate – Mahesh Dangar Mar 13 '20 at 12:52
Yeah Next time I will Paste Code Sorry for now – Khushtar parvez Mar 13 '20 at 14:26

score 0 · Answer 4 · answered Jul 22 '20 at 15:40

here is the above code.

 func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
     moveDownButton.isHidden = false
    
    if targetContentOffset.pointee.y < scrollView.contentOffset.y {
        //Going up
        setView(view: self.moveDownButton, hidden: false)
    } else {
        //Going Down
        setView(view: self.moveDownButton, hidden: true)
    }
}

func setView(view: UIView, hidden: Bool) {
    view.isHidden = hidden
}

Material floating action button should invisible when user scroll down and visible when scrolls up

4 Answers4

Linked