Geek Answers Handbook

Creating a sequence chart in iOS?

You must create a custom control for the sequence diagram in iOS (either in Swift or Objective-C).

Found a little library for it: here is the link: https://github.com/ayudasystems/funnel

Planning to use BezierPath to implement a sequence diagram.

Please propose a data structure that should implement this control.

** Note. Find a lot of messages, but dint find the exact solution to implement the funnel diagram in ios (there are several messages, but the answers are incorrect or accepted)

+6
source share
2 answers

enter image description here

You need to use simple logic to implement the above funnel diagram.

There are 5 elements: A1, A2, A3, A4, A5 and a funnel height of 200 .

& & A1 = 30%, A2 = 25%, A3 = 20%, A4 = 15% and A5 = 10%

Now distritribute items according to height % in funnel. So A1 = 0.3*200 = 60 A2 = 0.25*200 = 50 A3 = 0.2*200 = 40 A4 = 0.15*200 = 30 A5 = 0.1*200 = 20 -------------------- Total = 200 On the basis of above calculated height:- 5 different BezierPath can be drawn . Above data can be generalised to 'n' items and 'x' Height .

Logic in Height Distribution Calculation

 class HeightDistribution { class func height(percentages: [Float] , TotalHeight:Float ) -> [Float] { var heights = [Float]() for percentage in percentages { let height = (percentage/100)*TotalHeight heights.append(height) } return heights } }

Advanced demo application. Swift3

+2
source

The "data structure" should be simple: an array of values ​​between 0.0 and 100.0, each value representing either a horizontal rectangular strip or a trapezoid for part of the funnel, with an indicator showing where it changes from rectangles to trapezoidal, plus colors for each of the segments.

Start simple, and then continue to decorate the image, with gaps between segments, shadows, etc. Having made the static version, you must go to the layers to get the animation.

0
source

More articles:


All Articles