I know that this may sound crazy, but yes I have a Xamarin.Android Application and I’d like to have the Xamarin.iOS counterpart.
This post won’t be about using Xamarin Forms to target both platforms because I don’t want to rewrite all my existing android layouts (.axml) to their Xaml equivalent. That would probably be at least twice the price.
Instead, I want to rewrite only the screens and don’t want to use a big storyboard to navigate between them. I’d like to stick with the way activities are created and launched in the “Android” way (ie. instantiated manually). The reason behind this decision is simple: stick with the same organisation of screens and/or custom controls so that you could work on both projects without being disturbed and naturally find core similarities between them.
The version 2 of the app will be a complete overhaul with React Native (ReactXP to be more precise).
In this series of posts, I’ll go through my initial research and findings to achieve my goal.
The User Interface
Let starts with the beginning (or the end). Learning how to match UI Widgets and the way to organise them to be displayed to the users.
Matching the layouts between the 2 platforms
Auto-Layout system ≫ RelativeLayout / ContraintLayout
UIStackView ≈ LinearLayout
UIScrollView ≈ ScrollView
UITableView ≈ ListView
UIWebView ≈ WebView
Matching UI Widgets between Android and iOS
| Android | iOS |
|---|---|
| TextView | UILabel |
| EditText | UITextField |
| Button | UIButton |
| Switch | UISwitch |
| RadioButton(s) | UIPickerView |
| Checkbox | N/A |
| ImageView | UIImageView |
| ProgressBar | UIActivityIndicatorView (indeterminate) |
| ProgressBar | UIProgressView (determinate) |
| SeekBar | UISlider |
| RecyclerView | UITableView |
Creating controls dynamically
I have several use case here:
- Existing controls in an existing layout are referenced in code to be modified.
- New controls are created in a layout.
I think I’ll just follow the docs.
CardView implementation for Xamarin.iOS
https://alexdunn.org/2018/03/29/xamarin-tip-ios-cardview/
Pull to refresh
https://medium.com/@elye.project/android-vs-ios-pull-to-refresh-f9e7f1f6fc26
Radio Button Groups
https://github.com/saturdaymp/XPlugins.iOS.BEMCheckBox
Floating Action Button
Put simply, I won’t use a floating action button on iOS.
https://ux.stackexchange.com/questions/99753/what-is-replacement-for-androids-floating-button-in-ios
Hamburger Menu
I still need a hamburger menu in my app, to access parameters and log out.
https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
ProgressDialog
I think I should use UIActivityIndicator.
ShimmerLayout
Yet to be determined.
Custom fonts
- On Android, I’m using the CalligraphyXamarin nuget which is specific to this platform. It allows to define the default font to be used in the app.
- On iOS, I would embed the fonts in the app and apply them to controls as needed. As far as I know there is no way to set an app-wide font to be used as default.
Business Logic
Now that we’ve talked about the user interface, next is the business layer.
Everything that is not directly tied to ui controls should be put in a library project and shared between the apps. We’ll also share:
The way I manage Settings
I’m already using a plugin to do that cross platform, so I’ll stick with it.
A common HttpClient
Again, I’m already using a cross platform implementation, so nothing very fancy here.
Conclusion
Thats it for now, stay tuned for my next adventures in Xamarin iOS :).
