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 :).

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.