johngraham262 / jwgcirclecounter

A handy timer that counts down in a circular view.

JWGCircleCounter

This control is a simple view that counts down a specified amount and alerts you on completion. You can see this live in Teleportante.

Demo

This example uses Cocoapods, please install before running.

Navigate to DemoApp and run pod install in your terminal. Open DemoApp.xcworkspace and run the application.

Installation

Easiest installation is through Cocoapods. Add the following line to your Podfile:

pod `JWGCircleCounter`

and run pod install in your terminal.

Alternatively, you can manually add the files in the JWGCircleCounter directory to your project.

Usage

Start by creating a JWGCircleCounter of your own and add it to your view:

JWGCircleCounter *circleCounter = [[JWGCircleCounter alloc] initWithFrame:CGRectMake(0,0,40,40)];
...
[your_view addSubview:circleCounter];

After initialization, start the counter by:

[circleCounter startWithSeconds:5];

Once it's been started, the counter can be managed with:

[circleCounter stop];
[circleCounter resume];

Customization & counter state

When the frame is set, the circle counter will expand to fit the bounds.

The following properties can be set:

@property (nonatomic, strong) UIColor *circleColor;
@property (nonatomic, strong) UIColor *circleBackgroundColor;
@property (nonatomic, assign) CGFloat circleTimerWidth;

You can inspect the state of a counter through a few readonly properties:

@property (nonatomic, assign, readonly) BOOL didStart;
@property (nonatomic, assign, readonly) BOOL isRunning;
@property (nonatomic, assign, readonly) BOOL didFinish;

Contributing

Please write tests and ensure that existing tests pass too. Open a pull request when you're ready.

Roadmap

1. Move didStart, isRunning, and didFinish properties to an enum.
2. Create a single "smart" method that can do start/pause/restart.

Shoutout

This was inspired by pppoe's Circle-Counter-Down. Thank you!

jwgcirclecounter's Issues

Reset does not work

@johngraham262

When my app goes to the background i do circleCounter.reset() which stop's the counter however when the app returns to the foreground, the elapsed time is still animated. I expect the behaviour where the circleCounter goes back to 0. How can I fix that?

time inside the circle

can you please add time inside the circle

Reset?

Hi John, very nice work with the circle counter. I'm trying to implement it in an app now. I haven't been able to figure out how to do a 'reset'.

Also, another minor issue I noticed is that the animation isn't as smooth on longer timeframes. It looks great for ~10 secs.

Tim

Set start Time with a DatePicker?

Hi,

is it possible that i can set the "startWithSeconds" with the value of a UIDatePicker in CountDownTimerMode?

Now i can change a uilabel with the datepicker and start a countdown. How is it possible that the circle has the same time that i picked from the datepicker?

Thank you,

blackyE1

Allow time format in Minutes

@johngraham262

Ive been having trouble with this since i dont know objective c.
Can you enable time label to show minutes instead of seconds. it appears the counter.timeLabel.text is a get only property so I can't set my own time format.

Also on that note, i played around with your code and I could get it to show minutes by dividing by 60 (_totalTime - _elapsedTime)/60 however when the countdown happens, it starts from 9.... and goes to 0. Which means numbers 9,8,7,6,5,4,3,2,1,0 appear for 1 minute each and number 10 appears only for a split second. I'd rather 10....1.

Thanks