IOS Implementing Timeline List effects

Before I saw the Order Details page of our group was very special, we decided to imitate this effect.

Actually is the simple TableView skill, below we will step by step realizes it.

Draw a bubble.

First, draw the bubbles in the Sketch.

Very simple, a rounded rectangle + a triangle, and then the Union operation, the hook side, done!

Then export the picture file and add it to Xcode.

Design Tableviewcell Prototypes

Subclass a new UITableViewCell + Xib, simply drag and drop several controls.

My two lines here are useless autolayout, too small, come back directly with the code layout on the line.

Drag lines with several Outlet, then set the bubble background:

In fact, the background of the bubble I made two versions, one is unchecked, the other is the selected state, the background color is different, so I am in the sethighlighted (: _,: _) This function is set, the other is to keep the default.

Then in the Viewcontroller to do some random data, first look at the effect.

Haha, it's already embryonic. But there's a little bit of a problem:

• The bottom line is broken, and the color is wrong.

• The top line will also be broken when you pull down.

  So let's fix these problems.

Perfecting the detail effect

My idea here is to add two more view in Viewcontroller and listen for TableView scrolling, then dynamically adjust the position of two view.

First, declare two new View:

Then fix the color of the line:

I am in TableView (Tableview:uitableview, Willdisplaycell Cell:uitableviewcell, Forrowatindexpath Indexpath:nsindexpath) Gets the color of the line in the cell so that we can change the color in the cell at any time, and this will automatically change, instead of hardcode.

Then it is difficult to adjust the position of the line, we need to get the position of the line in the Cell, so that its x-coordinate and width consistent, y-coordinate and height dynamic adjustment.

The x-coordinate and the width are resolved first:

Or in the Willdisplay method, we use the Convertpoint method for the coordinate system transformation, that is, the coordinates of the line in the Cell map to the coordinates it should be in the Superview.

Then resolve the y-coordinate and the height:

Because we want to adjust dynamically, we listen to the scrolling events and calculate the coordinates in them. For the derivation of this formula, you can look at the derivation of the formulas in the drop-down refresh, which are consistent.

Here we have basically finished this effect, see how it is:

Small reminders

Do not add your own Subview in Uitableviewcontroller, because its View property is TableView, if you add Subview, they will scroll together, although WWDC also introduced how to deal with, but after all, too much trouble, So I recommend that you directly use Uiviewcontroller + TableView to deal with this kind of more complex effect.

IOS Implementing Timeline List effects