Writing iOS apps with Xamarin and Visual Studio

If you develop an IOS app, you'll immediately think of Apple's development language Objective C/swift and Xcode. However, this is not the only option, and we can use other languages and frameworks entirely.

One of the main alternatives is Xamarin, a cross-platform framework that allows you to develop IOS, Android and OSX, Windows apps, which use C # and Visual Studio. The biggest benefit is that Xamarin allows you to share code between IOS and Android apps.

Xamarin has one of the biggest benefits compared to other cross-platform frameworks: Using Xamarin, your project compiles native code and uses local APIs. That said, apps written with Xamarin are no different than those made with Xcode. For more details, please read this article Xamarin vs. Native App development.

But Xamarin has a big drawback, that is, its price. The $1000/year price per platform may be enough to give you the ability to quit the latte or buccino you drink every day ... It is dangerous for programmers not to drink coffee. Because of the high price, Xamarin has so far only been used in a budget-rich corporate project.

But that has changed since Microsoft acquired Xamarin, and Microsoft has integrated it into the new version of Visual Studio, even the free community edition. The Community edition is free for individual developers and small teams.

Free? That's very kind of you!

In addition to the price (or regardless of price), Xamarin has other benefits, including allowing programmers to:

Write mobile apps using legacy C # libraries and tools.
Share code between apps on different platforms.
Share code between the ASP. NET background and front-end apps.
Xamarin also allows you to change the tools according to your needs. If you want to maximize cross-platform sharing of code, use Xamarin Forms, which is ideal for apps that are not specific to a particular platform or that require a separate UI customization.

If your app needs to invoke a particular platform-specific feature or interface, use the Xamarin.ios, xamarin.android, or other platform's modules so you can invoke the local API and framework directly. These modules are able to create highly customized UIS while supporting cross-platform on common code.

In this tutorial, you'll use Xamarin.ios to create an IPhone app that lists the user's photo gallery.

This tutorial does not require any IOS or Xamarin development experience, but it is best to have a C # foundation.

Begin

To develop an IOS app with Xamarin and Visual Studio, ideally you need two computers:

A Windows computer that runs Visual Studio and writes code.
A MAC computer with Xcode to act as a buid host. It is not specifically used for compiling, but is used during development and debugging to accept network requests from Windows computers.
The closer the physical distance between the two computers, the better, because when you compile and run on a Windows PC, the IOS emulator runs on your MAC computer.

You might ask, "What if I don't have two computers?" ”

For users who only use the Mac platform, Xamarin also provides the IDE under OSX, but the main purpose of this tutorial is to demonstrate the new Visual Studio. If you don't like this, you can run a Windows virtual machine on your Mac. VMWare fushion or free open source VirtualBox are available.

If you use a Windows virtual machine, you need to ensure that Windows can access your MAC over the network. In other words, you need to Ping the IP address of your Mac under Windows.

For pure Windows users, buy a Mac now and then. I'll be right here waiting for you! If not, use a cloud service like Macincloud or Macminicolo.

This tutorial assumes that you have a separate Mac and Windows PC, and of course, this tutorial is also useful for people who use Windows hosts under their Mac.

Installing Xcode and Xamarin

Download and install Xcode on your Mac computer if you haven't done so yet. This is no different from installing other apps from the App Store, but it's a few grams large and takes a little longer.

After you have installed Xcode, download Xamarin Studio to your Mac computer. Do not fill in the email address, download is free of charge. Do you think it's cool--it doesn't have to cost you any kind of coffee!

After the download is complete, open the installation package and double-click Install Xamarin.app. To receive the terms of the agreement, click Continue.

The installer will automatically find the installed tools and check the current operating system version. It will display a list of development environments. Tick the Xamarin.ios and click Continue.

You will then see a confirmation list that lists what will be installed. Click Continue. You will then see an overview, as well as an option to start Xamarin Studio. Direct point Quit to complete the installation.

Install Visual Studio and Xamarin

In this tutorial, you can use any version of Visual Studio, even the free community edition. The Community edition is not completely functional, but it does not affect your ability to develop complex apps at all.

Your Windows when you have to meet the minimum system requirements of Visual Studio. For a smoother development experience, you need at least 3 GB of memory.

If you have not installed Visual Studio, you can download the community version of the installer by tapping the Green Community Edition 2015 button from the Community page.

Run the installer, start the installation, and select the Custom installation option. In the list of features, expand cross-platform phone development, and then choose C#/.net (Xamarin v4.0.3) (the version that is written at this tutorial is likely to be different).

Click Next and wait for the installation to complete. Time is a bit long, you can stand up and walk and digest the biscuits you ate when installing Xcode:]

If you have already installed Visual Studio but do not have Xamarin tools, go to Windows Programs and Features, locate Visual Studio 2015, select it, click Change, and then select Modify 。

Under cross Platform Mobile development Find Xamarin, C#/.net (Xamarin v4.0.3), tick it and click Upate to install.

It's a lot of stuff, but it's finally done!

Write Apps

Open Visual Studio and select File\new\project. Under Visual C #, expand IOS and select the single View App template for IPhone. This template creates a App,view controller with only one view controller that is the class for managing views in the IOS app.

Enter imagelocation, either name or solution name. Select the project save path, then click OK, and the new project will be created.

Visual Studio will prompt you to specify a MAC computer as the BUiD host for Xamarin:

On your MAC computer, open System Preferences and select Share.
Open Telnet.
Change allow access to only these users, and then add the users that will be used to access Xamarin and Xcode on your Mac.

Close the window and return to the Windows computer.

Go back to Visual Studio, select your Mac computer when you are asked to designate a Mac as the build host, and then click Connect. Enter your username and password and click Login.

You can check the toolbar to see if the connection is successful.

Select IPhone Simulator from the Solution Platform drop-down box, which will automatically select a simulator for the build host. If you want to change to another emulator, you can click the small arrow to the right of the current emulator.

Press the green Debug arrow or the F5 shortcut key to compile and run the program.

Once the compilation is complete, you can't see any effect on Windows. Because it runs on your MAC (build host). That's why it's best to put two machines as close as possible!

At the Evolve conference a few days ago, Xamarin announced that it would launch IOS Simulator Remoting, which would allow you to interact with apps running on the Apple IOS emulator, just like running an emulator on a Windows PC. But at the moment, you still need to deal with the simulator running on your MAC.

On the emulator, you will see a splash screen flash and then display an empty window. Congratulations to you! Your Xamarin will work properly.

To stop the app, you can click the Red stop button www.zhengly.cn (shift+f5 shortcut key).

Create Collection View

This app will show the user a Collection view to show the thumbnail images in the user's album. Collection View is an IOS control that displays multiple entries in a grid format.

To edit scenes in the app storyboard, open Main.storyboard from Solution Manager.

In the Search bar in the toolbox, enter the collection typeface to filter. Drag the Collection view below the Data view to the center of the empty view.

Select Collection View and you'll see some small, hollow circles around it. If you see a T-word instead of a small circle, click it again to switch to the small circle.

Click and drag each small circle until you see the Blue Line and release the mouse button, and the edge of the control is automatically aligned to the place where the line is located.

Then set the automatic layout constraint for Collection view, which is used to tell the app how the view should resize when the device spins the screen. In the toolbar on the top of the storyboard, click the Green Plus button to the right of the CONSTRAINTS typeface. This will automatically create a constraint for www.lxinyul.cc Collection View.

The automatically created constraints are mostly correct, but some of them need to be adjusted. In the Properties window, switch to the Layout tab and pull to the Constraints column.

The two constraints in the margin are correct, but the width-height constraints are incorrect. Remove the Width and Height constraints (click the X button to their right).

Notice that the Collection View turns orange at this point. This indicates that the constraint is incorrect.

Click Collection view to select it. If you see the same circle as before, click it once to switch to the green T-word icon. Click and drag the T-word at the Top of the Collection View until the green name is the outer border of the upper Layout Guide. Release the left mouse button, which creates a constraint relative to the top of the view.

Then, click and drag the T-word to the left of Collection View until you see a blue dashed line. Release the left mouse button, which creates a constraint relative to the left edge of the view.

At this point, your constraint should be this:

Configure Collection View Cell

Do you see the small squares in Collection View? There is a red exclamation mark in this block. This is a Collection view cell, which represents a cell in the Collection view.

To configure the size of this cell, you need to do so in Collection View. With Collection View selected, pull up to the top of the Layout tab. In the Cell Size section, set its Width and www.yxin7.com Height to 100.

Then, click the red exclamation point in the Collection View Cell, which pops up a prompt window that says you haven't assigned a reuse identifier to the cell. So, select the cell, open the Widget tab, drop down to the Collection reusable View section, and set the Identifier to Imagecellidentifier. This will make the error disappear.

Writing iOS apps with Xamarin and Visual Studio