Pages

Monday, May 14, 2018

Monday fun component... ;)

Aloha,

I know it was a long time without a new blog post but I was busy with a project that took all my time. But last week I've decided to always reserve some time to focus on my favourite part...JavaFX :)
When I was playing around with my iPhone I saw that the check box in iOS still is something that I wanted to do again. This is not the first time I've created a check box (as you can see here and here) so I thought...why not... :)
For those of you that are not familiar with the latest iOS check box, here is a little screenshot from my iPhone to give you an idea...



The nice thing about that control is that you don't need an additional text as on the original JavaFX check box. So I've decided to simply create a Region based control that only contains the switch itself.
So the control is not really complicated to do and it just took me around 45 min to create it. So here is a little screen shot of my version:


I've tried to make it look like the iOS original as good as I could. It comes with only 3 properties which are:

  • checked
  • checkedColor
  • showOnOffText

Like I said nothing really special but it was fun to create it and maybe it will be useful for one or the other.
As always you can find the source code on github.

There is also a little video which shows the control in action...





UPDATE:
In the comment from Wim Deblauwe he mentioned that there is a specific press and hold behaviour in iOS for the switch. So the latest version on github also contains this behaviour.
In addition the control was renamed to IosSwitch which makes more sense. 


That's it for today...so keep coding...

3 comments:

  1. If you keep your finger pressed on the checkbox on iOS, you'll notice that it becomes a little bigger before it slides.

    ReplyDelete
    Replies
    1. You are right...I‘ll implement that as soon as I‘ll find some time. Thx for the heads up 👍🏻

      Delete
    2. The latest version on github now also contains the press and hold behavior...animation timing is not exactly the same as in iOS but I'm working on that... :)

      Delete