XAMARIN DEVELOPMENT – NOTES, TIPS AND INFO – PART 2

These are my notes on Xamarin Development.

Presently this post is mostly based on this Udemy Course:

https://www.udemy.com/xamarin-beginners

 

Contents

Using Lists in iOS and Android. 1

iOS Lists. 1

Using the Table View controller. 4

Android Lists. 8

Populating the view(activity). 9

Creating a custom cell with custom style and layout. 9

Creating a custom adapter. 13

Navigation between pages in iOS and Android – Part 2. 15

Navigation between pages in Android. 15

Navigation between pages in iOS. 15

Navigate to the previous view controller. 16

Retrieve Images from iOS phone. 16

Sharing Code between Android, iOS or any other platform.. 17

iOS User Interface for different iOS devices using Constraints. 19

Tips and Tricks. 21

iOS. 21

Hiding the navigation controller. 21

Changing the look of the navigation bar. 22

Xamarin.Forms. 22

Xamarin.Forms is best for. 22

Xamarin.iOS & Xamarin.Android are best for. 22

Using Lists in iOS and Android

iOS Lists

· Add a new Table View Controller to your storyboard. From Visual Studio in your toolbox:

· Next drag the app start icon and associate it to the table view controller(This step is not necessary if you do not want the table view controller to be your first view which starts when your app starts.)

· Next create a new class to the table view by pressing on the dark gray area at the bottom of the view and in the Properties window under Identity there is an attribute named Class. Type in there a new class name which will then be automatically created and will appear in your Visual Studio project.

Using the Table View controller

· Use the Reuse Identifier to minimize the impact on loaded cell, in other words the amount of resources your application will need from the device, things like memory and CPU.

· To do this give a name to the first cell in the Table View Controller in the Identifier attribute in the Properties window.

Populate the table

· You can initialize data in the constructor function which is automatically created:

partial class BooksTableViewController : UITableViewController

{

List<Book> bookList;

public BooksTableViewController(IntPtr handle) : base(handle)

{

this.bookList = new List<Book>();

this.bookList.Add(new Book() { Author = “Author 1”, Name = “Book 1”, Editor = “Editor 1”, Year = 2001 });

this.bookList.Add(new Book() { Author = “Author 1”, Name = “Book 2”, Editor = “Editor 1”, Year = 2001 });

this.bookList.Add(new Book() { Author = “Author 1”, Name = “Book 3”, Editor = “Editor 1”, Year = 2001 });

}

}

· This is just one way to do it:

1. Override the NumberOfSections() function and set how many sections you need.

a. https://developer.xamarin.com/api/member/MonoTouch.UIKit.UITableView.NumberOfSections()/

2. Override the RowsInSection() function set how many rows in the table will be, this could be the count number of a generic list.

a. https://developer.xamarin.com/api/member/MonoTouch.UIKit.UITableViewDataSource.RowsInSection/

3. Override the GetCell() function to define the cell data for each for being processed. This was defined in the RowsInSection() function. If you had three items in your data source then this function will be called three times. Using the indexPath.Row will get you the row indes which should “normally” correspond to the data source, assuming that the data source can be accessed by an index value.

a. https://developer.xamarin.com/api/member/MonoTouch.UIKit.UITableViewDataSource.GetCell/

public override nint NumberOfSections(UITableView tableView)

{

//return base.NumberOfSections(tableView);

return 1;

}

public override nint RowsInSection(UITableView tableView, nint section)

{

//return base.RowsInSection(tableView, section);

return bookList.Count;

}

// Returns a reusable cell, change it values and returns it to be added to the table view

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)

{

var cell = tableView.DequeueReusableCell(“Book”);

var dataInTheCell = this.bookList[indexPath.Row];

cell.TextLabel.Text = dataInTheCell.Name;

return cell;

//return base.GetCell(tableView, indexPath);

}

Modifying what is shown in a cell

· First create class for the table view cell. Go to your story board, in the table view controller select the cell in the upper most part, then go to the Properties window => Widget tab => Identity category and Class. In this attribute type the name of the class you want at it will be created.

· Next you modify how the cell looks or what it contains. You can simply add in new controls, give them a text that is shown by default and an identifier in the Identity category of the Properties window in the Widget tab.

· The next steps is to go to the previously defined table cell class and assign values to the controls in the table view cell. In this example there are four different labels which are set through an Book object which is passed to the table view cell.

partial class BookTableViewCell : UITableViewCell

{

private Book bookdata;

public Book BookData

{

get

{

return this.bookdata;

}

set

{

this.bookdata = value;

bookAuthorLabel.Text = bookdata.Author;

bookNameLabel.Text = this.bookdata.Name;

bookPublisherLabel.Text = this.bookdata.Editor;

bookYearLabel.Text = this.bookdata.Year.ToString();

}

}

public BookTableViewCell (IntPtr handle) : base (handle)

{

}

}

· The last step is to go into the code of the table view controller class an modify the GetCell() function code to use the custom table view cell class which you created previously. After this you can access any member function or property etc through code.

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)

{

var cell = tableView.DequeueReusableCell(“Book”) asBookTableViewCell;

var dataInTheCell = this.bookList[indexPath.Row];

cell.BookData = dataInTheCell;

return cell;

//return base.GetCell(tableView, indexPath);

}

Android Lists

· To create a list “view” simply modify a desired activity to inherit from ListActivity instead of Activity. Notice that the SetContentView() function is not called.

[Activity(Label
=
“BookStoreAndroid”,
MainLauncher =
true,
Icon =
“@drawable/icon”)]

public class MainActivity : ListActivity

{

int count = 1;

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

}

}

Populating the view(activity)

· You can populate the activity data in the OnCreate() function

public class MainActivity : ListActivity

{

List<Book> bookList;

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

// Set our view from the “main” layout resource

//SetContentView(Resource.Layout.Main);

// Get our button from the layout resource,

// and attach an event to it

this.bookList = new List<Book>();

this.bookList.Add(new Book() { Author = “Author 1”, Name = “Book 1”, Editor = “Editor 1”, Year = 2001 });

this.bookList.Add(new Book() { Author = “Author 1”, Name = “Book 2”, Editor = “Editor 1”, Year = 2001 });

this.bookList.Add(new Book() { Author = “Author 1”, Name = “Book 3”, Editor = “Editor 1”, Year = 2001 });

}

}

· Next to define the data to be used in the list and the cell type you can do the following:

var listAdapter = new ArrayAdapter(this, global::Android.Resource.Layout.SimpleListItem1, this.bookList);

· The first parameter in the code is the context where the adapter is to be associated with. The second is the type of the cell in the list and the third parameter is the actual data.

· Next assign the ListAdapter member of the ListActivity class with the newly created listAdapter object.

this.ListAdapter = listAdapter;

· Notice that this approach will use the ToString() function of the class used in the List collection. So you have to override the ToString() function.

Creating a custom cell with custom style and layout

· First create a new layout: Go to your Solution Explorer, in your project go to the layout folder and press the second mouse button, then select Add => New Item, then select Android Layout from the new window.

· Next you can add layout elements to position your content and actual content elements like text elements. You could for example add LinearLayuout (Horizontal) and into them text elements (form widgets)

· Remember to set IDs to your UI elements to be able to access them and a text if you want to

Modifying the layout of an UI element

· This can be achieved from the Properties window under the Layout category. Just change the values in that category to modify how it is laid out .

Creating a custom adapter

· Simply create a new class in your android project

· In the newly created book adapter you have to do the following things:

o Inherit the class from the Android.Widget.BaseAdapter class

§ https://developer.xamarin.com/api/type/Android.Widget.BaseAdapter/

o Override the following function:

§ GetView()

§ GetItem()

§ GetItemId()

o The most important function is the GetView(), here you will retrieve the view that is holding your UI elements so that you can access them and modify their values.

public class BooksAdapter : BaseAdapter

{

public List<Book> books;

Activity activity;

public BooksAdapter(Activity activity)

{

this.activity = activity;

}

public override int Count

{

get

{

return this.books.Count;

}

}

public override View GetView(int position, View convertView, ViewGroup parent)

{

var view = convertView ?? activity.LayoutInflater.Inflate(BookStoreAndroid.Resource.Layout.BookCell, parent, false);

var nameLabel = view.FindViewById<TextView>(BookStoreAndroid.Resource.Id.nameTextView);

var authorLabel = view.FindViewById<TextView>(BookStoreAndroid.Resource.Id.authorTextView);

var publisherLabel = view.FindViewById<TextView>(BookStoreAndroid.Resource.Id.publisherTextView);

var yearLabel = view.FindViewById<TextView>(BookStoreAndroid.Resource.Id.yearTextView);

var data = this.books[position];

nameLabel.Text = data.Name;

authorLabel.Text = data.Author;

publisherLabel.Text = data.Editor;

yearLabel.Text = data.Year.ToString();

return view;

}

public override Java.Lang.Object GetItem(int position)

{

return null;

}

public override long GetItemId(int position)

{

return this.books[position].ID;

}

}

Navigation between pages in iOS and Android – Part 2

Navigation between pages in Android

Navigation between pages in iOS

· Generally, to navigate between pages you add new view controller in your storyboard and drag and drop from a UI Element to the desired view control to create a segue.

· After this you select the newly created segue and give it an identifier. You do this by selecting the desired segue and in the Properties window under the Widget tab in the Segue category type in the Identifier attribute

· To transition from using the right segue in the code you can do the following:

o https://developer.xamarin.com/api/property/MonoTouch.UIKit.UIStoryboardSegue.DestinationViewController/

o

public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)

{

if (segue.Identifier == “MySegue”)

{

var navigationController = segue.DestinationViewController as MyViewController;

if (navigationController != null)

{

var rowPath = TableView.IndexPathForSelectedRow;

// Do something with the controller

}

}

}

Navigate to the previous view controller

· Use this simple code

NavigationController.PopViewController (true);

Retrieve Images from iOS phone

· Lets say that you have a button that you want to attach the TouchUpInside event. When this happens you want to allow the user to select an image from the phone.

void ImageButton_TouchUpInside(object sender, EventArgs e)

{

// Create a new image picker controller

imagePickerController = new UIImagePickerController();

imagePickerController.SourceType = UIImagePickerControllerSourceType.PhotoLibrary;

imagePickerController.MediaTypes = UIImagePickerController.AvailableMediaTypes(UIImagePickerControllerSourceType.PhotoLibrary);

// Attach yourself to the events which are needed

imagePickerController.Canceled += ImagePickerController_Canceled;

imagePickerController.FinishedPickingMedia += ImagePickerController_FinishedPickingMedia;

// Display the image picker as a modal view

NavigationController.PresentModalViewController(imagePickerController, true);

}

void ImagePickerController_FinishedPickingMedia(object sender, UIImagePickerMediaPickedEventArgs e)

{

photoImageView.Image = e.Info[UIImagePickerController.OriginalImage] as UIImage;

// This returns the user to the previous view controller

imagePickerController.DismissModalViewController(true);

}

void ImagePickerController_Canceled(object sender, EventArgs e)

{

// This returns the user to the previous view controller

imagePickerController.DismissModalViewController(true);

}

Sharing Code between Android, iOS or any other platform

· This is rather simple, “normal” C# and Visual Studio stuff. the simplest approach is to create a class library, then create code in it which you want to use in your destination project. Once you are done with your shared class library simply Reference it in Visual Studio and make sure that you are using the right namespaces to access the classes or other code functionality defined in the shared projects.

· Notice: It has to be a portable class library. Otherwise you will not be able to use 3rd party libraries with your application.

· Next you choose your target platform which you want to use with your shared code.

· You could also use some predefined Xamarin project templates with this if you want.

iOS User Interface for different iOS devices using Constraints

· Scaling your application UI to work on different resolutions on different iOS devices

· A quick way to add constraints is to add it from the main.storyboard upper right corner after you have selected an UI control/element

· To specify manually constraints click once then another time on a UI element so that it looks something like this. Pay attention to the new options to specify constraints for the UI element, these are the T shaped icons near the edges of the element.

· To add a new constraint drag a T shaped icon to another element or the edge of the screen telling how the element should behave, how much space for example to leave between this element and another or the screen edge.

Tips and Tricks

iOS

Hiding the navigation controller

· In your view controller in the ViewDidAppear or ViewWillDisappear function call the SetNavigationBarHidden()

o Please notice the parameters to the function

public override void ViewDidAppear(bool animated)

{

base.ViewDidAppear(animated);

this.NavigationController.SetNavigationBarHidden(true, false);

}

Changing the look of the navigation bar

· You can do this in the AppDelegace.cs file/class, in the overridden function FinnishedLaunching

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)

{

// Override point for customization after application launch.

// If not required for your application you can safely delete this method

var navigateionVarAppearance = UINavigationBar.Appearance;

navigateionVarAppearance.TintColor = new UIColor(255.0f, 255.0f, 255.0f, 1.0f);

navigateionVarAppearance.BarTintColor = new UIColor(255.0f, 255.0f, 255.0f, 1.0f);

navigateionVarAppearance.SetTitleTextAttributes(new UITextAttributes()

{

TextColor = new UIColor(255.0f, 255.0f, 255.0f, 1.0f),

TextShadowColor = UIColor.Clear

});

return true;

}

Xamarin.Forms

https://www.xamarin.com/forms

From the website:

Xamarin.Forms is best for

· Apps that require little platform-specific functionality

· Apps where code sharing is more important than custom UI

· Developers comfortable with XAML

Xamarin.iOS & Xamarin.Android are best for

· Apps with interactions that require native behavior

· Apps that use many platform-specific APIs

· Apps where custom UI is more important than code sharing

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s