Xamarin is a development platform that goes beyond making cross-platform applications for iOS and Android.
In this tutorial we will see how to create an application for WatchOS in Xamarin.
Requirements
- Visual Studio for Mac
- Xcode 10
- Mac OS Mojave
- iPhone Simulator
- Apple Watch Simulator
Creation of the solution
In this tutorial, you will create a small game for the Apple Watch based on the game of rock, paper and scissors and show a little of the great possibilities that Xamarin provides when creating a solution.
To start, we created a new solution in Visual Studio for Mac.
Once the solution is created we will add the WatchOS project.
We select Watchkit application.
Uncheck the Include Notification option.
Design
The graphical interface should be as follows:
The construction of the interface is the same as in iOS dragging controls and should be as follows:
- Label to see who chose the watch (rock, paper or scissors)
- Label to see the result (win, lose, draw)
- White thin line separator
- GroupView with three buttons
- GroupView with a label on the left and a timer on the right
The Label to see the result must have a height proportional to the size of the clock, to assign these values in the Size section.
- Width, is assigned Relative to Container with a value of 1, which will take 100% of the width.
- Height, Relative to Container is assigned with a value of 0.4, which will take 40% of the clock's height.
A GroupView is a view that accommodates each control side by side horizontally.
To align a control within a GroupView to the right in the toolbox within the Aligment section with right value.
The timer is a control that shows a type of clock in the form of Label.
Code
Declares an arrangement with the 3 options and a counter to bring the number of games won.
When initializing we place the images to the buttons and the timer starts to show the elapsed time.
A function is created with the logic of how to determine the winner.
The complete code of the controller is as follows.
using System;
using WatchKit;
using UIKit;
using Foundation;
namespace RockPaperScissorsXamarin.RockPaperScissorsWatchExtension
{
public partial class InterfaceController : WKInterfaceController
{
private int Counter = 0;
private enum Results { TIE, WIN, LOSE };
private enum Moves { Rock, Paper, Scissors }
private Moves[] Options = { Moves.Rock, Moves.Paper, Moves.Scissors };
protected InterfaceController(IntPtr handle) : base(handle)
{
}
public override void Awake(NSObject context)
{
base.Awake(context);
RockButton.SetBackgroundImage(new UIImage("rock"));
PaperButton.SetBackgroundImage(new UIImage("paper"));
ScissorsButton.SetBackgroundImage(new UIImage("scissors"));
Timer.Start();
}
public override void WillActivate()
{
Console.WriteLine("{0} will activate", this);
}
public override void DidDeactivate()
{
Console.WriteLine("{0} did deactivate", this);
}
partial void RockButton_Activated()
{
Check(Moves.Rock);
}
partial void PaperButton_Activated()
{
Check(Moves.Paper);
}
partial void ScissorsButton_Activated()
{
Check(Moves.Scissors);
}
private void Check(Moves selection)
{
var random = new Random();
var position = random.Next(0, Options.Length);
var machineChoose = Options[position];
if (selection == machineChoose)
{
ResultLabel.SetText(Results.TIE.ToString());
}
else if (selection == Moves.Rock && machineChoose == Moves.Scissors)
{
ResultLabel.SetText(Results.WIN.ToString());
Counter += 1;
}
else if (selection == Moves.Rock && machineChoose == Moves.Paper)
{
ResultLabel.SetText(Results.LOSE.ToString());
}
else if (selection == Moves.Paper && machineChoose == Moves.Rock)
{
ResultLabel.SetText(Results.WIN.ToString());
Counter += 1;
}
else if (selection == Moves.Paper && machineChoose == Moves.Scissors)
{
ResultLabel.SetText(Results.LOSE.ToString());
}
else if (selection == Moves.Scissors && machineChoose == Moves.Paper)
{
ResultLabel.SetText(Results.WIN.ToString());
Counter += 1;
}
else if (selection == Moves.Scissors && machineChoose == Moves.Rock)
{
ResultLabel.SetText(Results.LOSE.ToString());
}
WinnerLabel.SetText($"Wins: {Counter}");
OponentLabel.SetText($"Oponent: { machineChoose }");
}
}
}
The project is executed and the application is executed as follows:
Conclusion
In this example we saw the wide possibilities offered by Xamarin when creating applications, adding support for WatchOS, TVOS, Android Wear and even Android TV applications. 😄
You can check the application code on Github
Top comments (0)