2.3. Tecnologías de desarrollo de aplicaciones multiplataforma
3.4.5. Inyección de dependencias y Servicios específicos de la
La inyección de dependencias es un servicio que ofrece Xamarin.Forms para poder definir comportamientos específicos en cada plataforma. El res- ponsable de encontrar la implementación adecuada para cada plataforma será el DependencyService.
Para poder hacer uso del DependencyService se debe contar con los si- guientes elementos:
• Interfaz: define la funcionalidad que pretende hacer uso del Depen-
dencyService. Debe estar presente en el código compartido.
• Implementación específica: la funcionalidad definida en la interfaz debe
3.4. XAMARIN.FORMS 51
una de las plataformas no implementara la interfaz provocaría un fallo cuando se intentase ejecutar.
• Registro: cada implementación de la interfaz debe registrarse en el De-
pendencyService para poder ser resuelta y servida en tiempo de ejecu- ción.
• Llamar a DependencyService: para poder ejecutar la funcionalidad es-
pecífica debemos solicitar al DependencyService que resuelva la inter- faz. La solicitud se realiza explícitamente con la estructura Depen- dencyService.Get<Interfaz>().método().
Figura 3.8: Inyección de dependencias
3.4.6.
Elementos UI Xamarin.Forms
En este apartado vamos a hacer un recorrido por los diferentes elementos con que cuenta Xamarin.Forms para construir interfaces.
3.4.6.1. Pages
La clase Page es un elemento visual que ocupa toda la pantalla y que tiene una única vista hija. A continuación veremos los diferentes tipos de clases Page y sus funcionalidades.
52 CAPÍTULO 3. XAMARIN
Figura 3.9: Tipos de Page
TemplatedPage es una clase Page que muestra el contenido a pantalla
completa. Es la base de la clase ContentPage.
Figura 3.10: Visualización TemplatedPage
ContentPage es una clase que hereda de TemplatedPage. Muestra una
sola vista, normalmente un contenedor como un layout o un ScrollView.
3.4. XAMARIN.FORMS 53
MasterDetailPage es una clase Page con dos paneles. El primero ma-
neja la información a alto nivel (por ejemplo una lista) y el segundo panel muestra la información en detalle. Para que muestre la barra de navegación es necesario encapsularla en una NavigationPage.
Figura 3.12: Visualización MasterDetailPage
NavigationPage es una clase Page capaz de manejar la navegación a
través de la pila de Pages, encapsulándolas como su contenido y mostrando el estado en su propia barra de navegación.
Figura 3.13: Visualización NavigationPage
TabbedPage es una clase que hereda de MultiPage. Esta clase permite
navegar mediante pestañas por sus hijos, los cuales también son clases Page .
54 CAPÍTULO 3. XAMARIN
Figura 3.14: Visualización TabbedPage
CarouselPage es una clase que hereda de MultiPage. Permite navegar
por sus hijos mediante gestos. Las Page hijas se desplazan horizontalmente, creando un efecto carrusel.
Figura 3.15: Visualización CarouselPage
3.4.6.2. Layouts
Los layouts son vistas contenedoras, que pueden contener layouts o vistas, permitiendo decidir la posición y tamaño de las vistas contenidas. A conti- nuación se ofrece una descripción de los mismos y ejemplos XAML para los más complejos.
3.4. XAMARIN.FORMS 55
Figura 3.16: Tipos de Layout
TemplatedView es un layout que muestra el contenido con un Control
Template, el cual reemplazará los estilos existentes previamente. Es la clase padre de ContentView.
ContentPresenter es un administrador de layouts para Templated-
Views. Hereda directamente de la clase Layout. Se usa conjuntamente con ControlTemplate para decidir donde se muestran los contenidos.
ContentView es un layout que hereda de TemplatedView y muestra un
único contenido. No es de gran utilidad por si mismo, pero es un buen punto de partida para crear layouts personalizados.
ScrollViewes un layout cuya principal capacidad es desplazarse horizon-
tal o verticalmente tanto como sea necesario para mostrar todo el contenido que encapsula.
<ContentPage.Content>
<ScrollView></ScrollView> </ContentPage.Content>
56 CAPÍTULO 3. XAMARIN
Frame es un layout que hereda de ContentView. Contiene un único hijo
y provee de diferentes posibilidades de enmarcado.
</ContentPage.Content>
<Frame OutlineColor="Black"> <Label Text="Xamarin" /> </Frame>
</ContentPage.Content>
Fragmento de Código 3.9: Ejemplo de Frame XAML
AbsoluteLayoutes un layout que permite posicionar a sus hijos de for-
ma absoluta. Se puede realizar mediante coordinadas proporcionales, coordi- nadas de la pantalla del dispositivo o una combinación de ambas.
<ContentPage.Content> <AbsoluteLayout>
<BoxView BackgroundColor="Red"
AbsoluteLayout.LayoutBounds="20, 100, 40, 30"></BoxView>
<Label Text="Xamarin" AbsoluteLayout.LayoutBounds="200, 200, Autosize, Autosize"></Label>
</AbsoluteLayout> </ContentPage.Content>
Fragmento de Código 3.10: Ejemplo de AbsoluteLayout XAML
Grid es un layout que permite organizar las vistas hijas en columnas y
3.4. XAMARIN.FORMS 57
<ContentPage.Content>
<Grid Padding="5" HeightRequest="50" VerticalOptions="Start"> <Grid.RowDefinitions>
<RowDefinition Height="Auto"> </RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"> </ColumnDefinition> <ColumnDefinition Width="*"> </ColumnDefinition> </Grid.ColumnDefinitions> <Grid.Children>
<Image Source="xamarin.png" Grid.Column="0"> </Image>
<Label Text="Xamarin" Grid.Column="1"> </Label>
</Grid.Children> </Grid>
</ContentPage.Content>
Fragmento de Código 3.11: Ejemplo de Grid XAML
StackLayout es un layout que apila las vistas de forma horizontal o
vertical. No es necesario indicar la posición de las vistas hijas, lo calculará StackLayout, por lo que cualquier indicación de posición será sobrescrita.
<ContentPage.Content>
<StackLayout Orientation="Vertical"> <Label Text="Left"></Label> <Label Text="Center"></Label> <Label Text="Right"></Label> </StackLayout>
</ContentPage.Content>
Fragmento de Código 3.12: Ejemplo de StackLayout XAML
RelativeLayout es un layout que permite posicionar y dar tamaño a
sus vistas hijas en relación a otros componentes. Por ejemplo, posicionar el borde superior de una vista a la misma altura que el borde superior del RelativeLayout o que la anchura de la vista sea la mitad de la anchura del RelativeLayout.
58 CAPÍTULO 3. XAMARIN
<ContentPage.Content> <RelativeLayout>
<BoxView
RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Property=Height, Constant=100}" /> </RelativeLayout>
</ContentPage.Content>
Fragmento de Código 3.13: Ejemplo de RelativeLayout XAML
3.4.6.3. Views
En Xamarin cualquier objeto visible se llama vista. Todos estos elementos tienen en común que heredan de la clase View. A continuación se presentan las vistas más comunes en ambos sistemas.
• ActivityIndicator: control visual para indicar que existe actividad,
que algo esta en progreso.
Figura 3.17: Visualización ActivityIndicator
<ActivityIndicator Color="Red" IsRunning="true" />
Fragmento de Código 3.14: Ejemplo de ActivityIndicator
3.4. XAMARIN.FORMS 59
<BoxView Color="Red" />
Fragmento de Código 3.15: Ejemplo de BoxView
• Button: una vista botón que reacciona ante los eventos táctiles.
Figura 3.18: Visualización Button
<Button Text="Click me!"/>
Fragmento de Código 3.16: Ejemplo de Button
• DatePicker: una vista que permite seleccionar fechas.
60 CAPÍTULO 3. XAMARIN
<DatePicker VerticalOptions="CenterAndExpand" Date="{x:Static sys:DateTime.Now}">
<DatePicker.Format>yyyy-MM-dd</DatePicker.Format> <DatePicker.MinimumDate>
<sys:DateTime x:FactoryMethod="Parse"> <x:Arguments>
<x:String>Jan 1 2000</x:String> </x:Arguments>
</sys:DateTime>
</DatePicker.MinimumDate> <DatePicker.MaximumDate>
<sys:DateTime x:FactoryMethod="Parse"> <x:Arguments>
<x:String>Dec 31 2050</x:String> </x:Arguments>
</sys:DateTime>
</DatePicker.MaximumDate> </DatePicker>
Fragmento de Código 3.17: Ejemplo de DatePicker
• Entry: vista de entrada de texto de una única línea.
Figura 3.20: Visualización Entry
<Entry Text="I am an Entry" />
Fragmento de Código 3.18: Ejemplo de Entry
• Editor:vista de entrada de texto con capacidad multilinea.
<Editor Text="I am an Editor" />
Fragmento de Código 3.19: Ejemplo de Editor
3.4. XAMARIN.FORMS 61
<Image Source="xamarin.jpg" />
Fragmento de Código 3.20: Ejemplo de Image
• Label: vista que muestra texto no editable.
<Label FontSize = "20" Text="Hello world!" />
Fragmento de Código 3.21: Ejemplo de Label
• ListView: vista que hereda de ItemView. Muestra una colección en
formato lista vertical.
Figura 3.21: Visualización ListView
<ListView>
<ListView.ItemTemplate> <DataTemplate>
<TextCell Text="Hello world!"/> </DataTemplate>
</ListView.ItemTemplate> </ListView>
62 CAPÍTULO 3. XAMARIN
• Picker:vista que permite la selección de un elemento de una lista.
<Picker>
<Items>
<x:String>"A"</x:String> <x:String>"B"</x:String> </Items>
</Picker>
Fragmento de Código 3.23: Ejemplo de Picker
• ProgressBar:vista que permite saber el progreso de una tarea.
Figura 3.22: Visualización ProgressBar
<ProgressBar Progress="0.5"/>
Fragmento de Código 3.24: Ejemplo de ProgressBar
• SearchBar: vista que permite realizar búsquedas textuales.
Figura 3.23: Visualización SearchBar
<SearchBar Placeholder="Search" SearchCommand="{Binding SearchCommand}">
Fragmento de Código 3.25: Ejemplo de SearchBar
• Slider:vista que permite al usuario introducir un valor lineal.
3.4. XAMARIN.FORMS 63
<Slider ValueChanged="OnSliderValueChanged" />
Fragmento de Código 3.26: Ejemplo de Slider
• Stepper: vista que permite al usuario introducir un valor discreto,
dentro de un rango.
Figura 3.25: Visualización Stepper
<Stepper ValueChanged="OnStepperValueChanged"/>
Fragmento de Código 3.27: Ejemplo de Stepper
• Switch: una vista que permite conmutar entre dos estados o valores.
Figura 3.26: Visualización Switch
<Switch IsToggled="True"/>
Fragmento de Código 3.28: Ejemplo de Switch
64 CAPÍTULO 3. XAMARIN
Figura 3.27: Visualización TableView
<TableView>
<TableRoot>
<TableSection Title="Example">
<TextCell Text="Hello world!"/> </TableSection>
</TableRoot> </TableView>
Fragmento de Código 3.29: Ejemplo de TableView
• TimePicker:una vista que permite seleccionar una hora.
<TimePicker Time="{x:Static sys:DateTime.Now}"/>
Fragmento de Código 3.30: Ejemplo de TimePicker
• WebView:una vista que presenta contenido HTML.
<WebView WidthRequest="1000" HeightRequest="1000" />
3.4. XAMARIN.FORMS 65
3.4.6.4. Cells
Una celda es un elemento especializado que hereda de Element. No es una vista, sino que describe como crear una vista y sus vistas hijas. Todos los elementos que veremos a continuación heredan de la clase Cell y se usan principalmente en ListViews y TableViews.
• EntryCell: es una celda que contiene un etiqueta y una caja para
introducir texto.
<EntryCell Label="{Binding comment}" Text="{Binding name}" />
Fragmento de Código 3.32: Ejemplo de EntryCell
Figura 3.28: Visualización EntryCell
• SwitchCell: es una celda que contiene un etiqueta y una conmutador.
<SwitchCell Text="{Binding name}" On="{Binding isOn}" />
Fragmento de Código 3.33: Ejemplo de SwitchCell
Figura 3.29: Visualización SwitchCell
• TextCell: es una celda con dos textos. Típicamente como titulo y
descripción.
<TextCell Text="Xamarin" Detail="Cross Platform Apps"/>
66 CAPÍTULO 3. XAMARIN
Figura 3.30: Visualización TextCell
• ImageCell:es una celda que hereda de TextCell. Además de los textos,
incluye una imagen.
<ImageCell Text="Xamarin" Detail="Cross Platform Apps" ImageSource="xamarin.jpg"/>
Fragmento de Código 3.35: Ejemplo de ImageCell
Capítulo 4
Lecciones propuestas Xamarin
Este capítulo esta compuesto de una serie de prácticas incrementales para la iniciación al desarrollo en la plataforma Xamarin.