如何在iPhone中创建自定义的时间栏？

Question

I need to create a time bar like the image attached.The blue lines are the dates indicating some actions.The big Red Arrow mark is used to slide for selecting any of the blue line. At background the bar is divided into years.The small red circles are to indicate the years.

Any idea ,how do i start?

Thanks

Answer 1

If the blue bars don't move a lot, and you don't need to resize this view very often (which is usually the case on an iPhone), then I'd recommend subclassing UIControl (or UIView) and implement it yourself.

Have an NSArray property storing NSDate objects and methods like addDate: , removeDate: , removeDateAtIndex: to change it's content from an other object (like your view controller). In these methods you add or remove the passed date and call [self setNeedsDisplay]; to redraw the lines.

You will need a few methods to calculate the position (in pixels) of a date on the slider and to calculate the date at a specific coordinate. This should be easy to to (basic linear interpolation).

And assuming that the red slider is only able to point to blue lines (but not between them) add a NSDate pointer variable to the currently selected date. In the

In the drawRect: method, you need to draw all the lines using CoreGraphics functions. Look up the documentation if you need help with this. Apple has some great sample apps too.

To show the red slider, you could either add a custom UIImageView, with a UIPanGestureRecognizer and make sure it only moves vertically in the gesture handler. Or it might be possible to add a UISlider without track images (I'm not 100% sure about that). In either case, you need to adjust the slider's position once the user let's go and make it jump to the nearest blue line.

Answer 2

A rough idea, 1. Get the length of the entire TimeBar.Let it be t. 2. Divide by x=numberofYears*365.let it be t_eachday_pos=t/x 3. get the position of each day,calculate its offset as daycount*t_eachday_pos; 4. Add your blueLine as a customButton. 5. To do some action, pass the x daynumber(eg. day 245 of year 2 etc.)

Try this, I have used the same thing in one of my app, and it is working