Native Multi-platform game: UI Screens (9 of …)
As I built a few more game screens, I got confident that I could convert all our games to Kotlin-Native, thus building for both iOS and Android. I still had UI screens to build. These are screens that show list of lessons, or the report card, assignments etc. At the beginning, my plan was to write them separately in iOS in swift. These screens use UI widgets such as scrolling lists that are implemented using RecyclerView in Android. But, once I got comfortable building the games, and realized that our UI screens also look a bit game-like to keep with the theme, I wondered if I could write some of them in Kotlin-Native, thus writing them once, and reusing the code in iOS and Android.
I decided to give myself a week to experiment with writing one of our UI screens, which shows a list of lessons that the kids press to play. This is how the screen currently looks in the infinut Math Kindergarten app:
Each lesson button has an image, a number, some text. The list of lessons scrolls. When the lesson button is clicked that lesson plays.
It was surprisingly easy to replace the lesson buttons with custom ones drawn using our Game SDK instead of overriding the ImageButton class on Android. The scrolling was the difficult part. I tracked the scroll amount from touch motion, and used a transformation matrix to change the position of where the button was drawn on screen. Then, replicated the flinging motion to scroll by capturing the fling velocity using GestureDetector on Android and a UIPanGestureRecognizer on iOS. The velocity was used to determine the amount of scrolling. Here is what the screen looked like on Android and iOS with shared code:
I still have to complete parts of the screen, but, as proof of concept, it works! It will be worth changing some of the other screens such as reporting, dashboard, assignments to common code using our cross-platform Game SDK instead of using platform specific UI widgets.
