Monotouch - Tips and Tricks (Part 3)

Increase user experience by using UI-Toasts for action-feedback, Making UIWebViews transparent, Buttons with image scaling

---

This part 3 of my monotouch tips and tricks series blog post covers the following topics:

• Increase user experience by using UI-Toasts for action-feedback
• Making UIWebViews transparent
• Buttons with image scaling

To view my previous monotouch posts follow these links:

- Monotouch - Tips and Tricks (Part 2)
- Monotouch - Tips and Tricks (Part 1)

Increase user experience by using UI-Toasts for user action-feedback

Android has this useful concept of "UI-Toasts" which is a special way to display a "non intrusive" message to the user. Those message are displayed for a short time on the screen and they disapear after a configurable time interval

The idea is to be as unobtrusive as possible, while still showing the user the information you want them to see. In our EventGuide Application we wanted to show toast feedback whenever the user stares an event. ("Event added to your schedule''").  This is how it finally looks:

How to create UI-Toasts? Luckily there is already an UI-Toast implementation for IOs, which has been translated to C#. You can download the C# version from my gist: https://gist.github.com/1106927
Just download the class and copy it into your project. The usage is very simple:

ToastView view = new ToastView("Event added to your schedule", 1000);
view.SetGravity(ToastGravity.Bottom, 0, 0);
view.Show();

How to make UI-Webviews fully transparent and display background image/color?

If you use a UIWebView in your application to display rich user generated data you can easily make it fully transparent by using the following extension method:

public static void MakeTransparent(this UIView view)
{
   view.Opaque = false;
   view.BackgroundColor = UIColor.Clear;
}

If you want a backgroundcolor behind the UIWebView just set the BackgroundColor property of the UIView which contains the UIWebView. Now the UIWebView scrolls above the static background-image on the UIView in the background:

Clickable Adwords-Buttons with image scaling

If you want to display sponsor logos in your application which the user can click I recommend to use a UIButton using UIButtonType.Custom style and to use the following method when switching between images:

private void ApplyImage(UIImage img)
{
  if(img.Size.Width > addbutton.Frame.Width || img.Size.Height > addbutton.Frame.Height)
  {
     addbutton.ImageView.ContentMode = UIViewContentMode.ScaleAspectFit;
  }
  else
  {
     addbutton.ImageView.ContentMode = UIViewContentMode.Center;
  }

  addbutton.SetImage(img, UIControlState.Normal);
}

This method automatically sets the optimal ContentMode property based on the image Width and Height so that the image gets automatically centred and scaled if necessary:

Happy monotouch programming!

David.

---