Introducción al desarrollo de apps móviles con Xamarin (Android & iOS)

www.sgcampus.com.mx @sgcampus
www.sgcampus.com.mx
@sgcampus
Alder Lopez
Xamarin: Una introducción al desarrollo de
aplicaciones móviles para Android & iOS

Xamarin: Objetivo
Consideraciones:
•  Es deseable tener conocimientos .NET, C#.
•  Para desarrollar para iOS se requiere Mac como
estación para desarrollo o como servidor de
compilación con Xcode.
•  Debe ser miembro del Apple Developer Program.
Objetivo General:
Al finalizar será capaz de desarrollar una aplicación
móvil para Android & iOS utilizando .NET.

Xamarin: Herramientas
Ambiente de desarrollo:
Tenemos dos opciones para instalar el ambiente de
desarrollo, el primero es descargar el instalador de
X a m a r i n d e s d e l a p a g i n a
https://www.xamarin.com/; la segunda es
descargar Visual Studio Community 2015 (apartir
de que Micrsoft compro Xamarin en Marzo 2016).
En el caso de Mac la opción que tenemos es
instalar Xamarin Studio.

Xamarin:Herramientas
Ambiente de desarrollo:
Al realizar la instalación, el mismo instalador nos
ayudará instalar Xcode, simuladores de iOS,
Android Studio, emuladores para Android.
Emuladores Android destacados:
Xamarin Android Player
https://www.xamarin.com/android-player
Genymotion
https://www.genymotion.com/

Xamarin: Introducción
Xamarin es un cross-platform para el desarrollo de
aplicaciones móviles. Xamarin permite una
abstracción de objetos de tal forma que
desarrollamos un core el cual tendrá todo lo común
a los proyectos de la diferentes plataformas
(Android, iOS, Windows Phone).

Xamarin: Arqutectura

Xamarin: Estructura del proyecto

Xamarin: Referencias

Xamarin: Xamarin.Forms
Xamarin.Forms es un framework que permite a los
desarrolladores crear interfaces de usuario
rápidamente. Proporciona su propia abstracción
para la interfaz de usuario que se representa
utilizando controles nativos en iOS, Android,
Windows o Windows Phone. Esto significa que las
aplicaciones pueden compartir una gran parte de
su código de interfaz de usuario y todavía
conservar el aspecto nativo de la plataforma de
destino.

Xamarin: Xamarin.Forms-
Páginas

Xamarin: Xamarin.Forms -
Layout

Xamarin: StackLayout
Al desarrollar con Xamarin.Forms, nuestra UI es
compartida por las plataformas especificadas en
nuestra solución de VS / XS.
La primera es que cualquier desarrollador que
tenga conocimientos en WPF le será muy familiar
desarrollar XAML, adicionalmente se parece en
algunos aspectos cuando estamos desarrollando
los Layout de Android.

Xamarin: Código XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://
schemas.microsoft.com/winfx/2006/xaml"
x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample1" Padding="20">
<StackLayout Spacing="10">
<Label Text="Stop" BackgroundColor="Red" Font="20" />
<Label Text="Slow down" BackgroundColor="Yellow" Font="20" />
<Label Text="Go" BackgroundColor="Green" Font="20" />
</StackLayout>
</ContentPage>

Xamarin: Código C#
public class StackLayoutExample : ContentPage
{
public StackLayoutExample()
{
Padding = new Thickness(20);
var red = new Label
{
Text = "Stop", BackgroundColor = Color.Red, FontSize = 20
};
var yellow = new Label
{
Text = "Slow down", BackgroundColor = Color.Yellow, FontSize = 20
};
var green = new Label
{
Text = "Go", BackgroundColor = Color.Green, FontSize = 20
};
Content = new StackLayout
{
Spacing = 10,
Children = { red, yellow, green }
};
}
}

Xamarin: Navegación
Navegación:
Para navegar entre pantallas se utiliza
await Navigation.PushAsync(new CustomPage());
Para cerrar la pantalla se utiliza
await Navigation.PopAsync();

Xamarin: DependencyService
Xamarin.Forms permite a los desarrolladores definir
el comportamiento en los proyectos específicos de
la plataforma.

Xamarin: DependencyService

Se requiere declarar una interfaz, la cual definirá la forma de
interactuar con la funcionalidad específica de la plataforma.
Interfaz
public interface ITextToSpeech {
void Speak ( string text ); //note that interface members are public by default
}
Implementación
namespace TextToSpeech.WinPhone
{
public class TextToSpeechImplementation : ITextToSpeech
{
public TextToSpeechImplementation() {}
public async void Speak(string text)
{
SpeechSynthesizer synth = new SpeechSynthesizer();
await synth.SpeakTextAsync(text);
}
}
}

Registro
using TextToSpeech.WinPhone;
[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechImplementation))]
namespace TextToSpeech.WinPhone {
Uso en Xamarin
public MainPage ()
{
var speak = new Button {
Text = "Hello, Forms !",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
speak.Clicked += (sender, e) => {
DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");
};
Content = speak;
}

Xamarin.Forms Multiscreen
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:Phoneword;assembly=Phoneword"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Phoneword.CallHistoryPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="20, 40, 20, 20"
Android="20, 20, 20, 20"
WinPhone="20, 20, 20, 20" />
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
Spacing="15">
<ListView ItemsSource="{x:Static local:App.PhoneNumbers}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Dudas
¿Dudas?
Alder López
Chief software development / Research and development / NET Architect & Xamarin
https://mx.linkedin.com/in/alder1sismty
@devnet2
http://sg.com.mx/revista/47/desarrollo-apps-cross-platform-xamarinforms#.V0UPIGZEy8p

Anexo
Ligas de interés:
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
https://developer.xamarin.com/guides/cross-platform/getting_started/requirements/
https://developer.xamarin.com/guides/cross-platform/getting_started/license/
https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/
https://developer.xamarin.com/guides/xamarin-forms/dependency-service/device-orientation/
MvvmCross - https://github.com/slodge/MvvmCross/
Vernacular (for localization) - https://github.com/rdio/vernacular/
MonoGame (for XNA games) - http://monogame.codeplex.com/
NGraphics - NGraphics and its precursor https://github.com/praeclarum/CrossGraphics

Introducción al desarrollo de apps móviles con Xamarin (Android & iOS)

Más contenido relacionado

La actualidad más candente (20)

Destacado (7)

Similar a Introducción al desarrollo de apps móviles con Xamarin (Android & iOS) (20)

Más de Software Guru (20)

Último (9)

Introducción al desarrollo de apps móviles con Xamarin (Android & iOS)