IOS Uiscrollview You may not know the artifice

IOS Uiscrollview can be said to be very powerful, skillfully use it can get some unexpected effect. This article will cite a few examples of the uncommon use of ScrollView.

Self-Bringing information application

This interface can be scrolled up or down, or left and right to pull out the sending time.

P.s. Angry baby, I made a beautiful set of GIF, but the size of the book is beyond the limit .... No words, let's have a look at the effect of the brain.

This effect looks a lot like a big ScrollView, can slide in four directions. But UITableView can only scroll up and down, hard to modify that is the big surgery, not recommended to do so. So the way I think about it is to create a ScrollView, set its contentsize to TableView Contentsize, and set its width to a larger pixel, so that the left and right direction can also slide. Then listen for ScrollView scrolling events and bind their contentoffset.y to TableView Contentoffset.y, then contentoffset.x can set the internal effect for each cell.

Let's look at the code below:

The first half is very simple, is a TableView initialization, the following is our focus, I created a uiscrollview, so that its frame and TableView consistent, Inset also need to be consistent, and then set up the agent to listen for scrolling events.

So what does the last sentence mean?

Because ScrollView will intercept the touch event of the View below, our Cell will not be selected. So we have to make ScrollView's Userinteractionenabled property false so it doesn't respond and intercept touch events, but who's going to let it slide? Fortunately, IOS opens up a uipangesturerecognizer inside it, and we can graft it to TableView so that TableView can respond to both clicks and scrolling.

Next, we need to know how big the content of TableView, this size needs to calculate, then when this size will be calculated? This is when the proxy method is invoked:

We update ScrollView's contentsize.

Then we listen for ScrollView scrolling events:

This should be very simple, respectively, the x, Y applied to the properties of the response, the y-axis to TableView, so that it can scroll up and down, the x-axis to each cell, let it do its own processing.

The final effect is as follows: (Do not move right-click new tab Open)

(embarrassed, the figure exceeds the maximum limit of 2 MB, can not be affixed, please let the brain fill it)

The implementation is almost the same as above, the beginning declaration is partially consistent, the proxy method is as follows:

In order to achieve the adsorption effect, I used the scrollviewwillenddragging (Scrollview:uiscrollview, Withvelocity Velocity:cgpoint, Targetcontentoffset:unsafemutablepointer) This method, which is to inform the agent that the user has loosened the finger, now the view will be scrolled at a speed to a target position, and the target position can be modified with pointers. So I just have to figure out where the view will scroll and if it's more than a critical value, let it roll out completely, or scroll back.

This article through the two small examples hope to play a role, in fact, many of the effects of the implementation can be involved in the use of ScrollView. Finally, it is recommended that you pay attention to WWDC, many sessions are very enlightening.

Refer to Session:

WWDC 2014–session 235:advanced scrollviews and Touch handling techniques

WWDC 2013–session 217:exploring Scroll views on IOS 7

WWDC 2012–session 223:enhancing User Experience with Scroll views

WWDC 2011–session 104:advanced ScrollView Techniques

IOS Uiscrollview You may not know the artifice