Getting my app to show all or none of the image in a scroll view

I currently have 10 images in a horizontal line in a separate table view that is part of a scroll view. Now, if I scroll to the right, and release, the app will stop wherever it is (sometimes when it's halfway past an image, so only half of that image is left displayed).

Ideally, what it should do is 'bounce back' when I've released my finger to show all of the image it has half of, or none of it. I guess the easiest way to do this would be to decide what to do based upon how far across it has scrolled. For e开发者_开发问答xample, if I have an image of 201dp width and I stopped scrolling when 150dp of that image was still visible, it should bounce back to show all of the image. Alternatively, if only 20dp of the image was visible, the bounce back should revert to not showing the image and reverting to another one that would be on the screen (just like the BBC app does).

One other way of explaining it is to think of a slot machine. When you spin the reels it will never stop halfway on an item, it will always stop in the correct place to show all of it. This is what I need.

Thank you in advance for anyone who can help me out with this one, I really appreciate it!

---

if(scrollX % imageWidth < imageWidth / 2){
    scrollX -= scrollX % imageWidth;
}else{
    scrollX += (scrollX % imageWidth) - imageWidth;
}

This will do the rounding, where scrollX is how far you have scrolled on the x-axis and imageWidth is the width of all your images.