MVVMCross mit Xamarin Native

Bei Xamarin Native Entwicklung, ist es am Anfang ein grosser Herausforderung, ein guten Struktur zu haben und dabei so viel Code wie möglich zu teilen.
Ich kenne die Xamarin Programmierung immer besser, aber bei diesem Punkt habe ich immer noch ein bisschen mühe. Deshalb, habe ich mich für diesen Blog MVVMCross angeschaut, mit MVVMCross kann man das MVVM Pattern für Xamarin Native Projekten anwenden.

In diesem Blog Post werde ich die Motivation hinter MVVMCross erklären und das Grundprinzip zeigen, ein Tutorial mit Code Snippets findet man aber hier nicht.
Ich werde auch auf Xamarin Android fokussieren und weder iOS noch Windows Phone in diesem Blog abdecken.
Ich habe mich für MVVMCross entschieden, das Prinzip ist aber bei andere Technologien wie zum beispiel MVVMLight das gleiche.

Inhalt

  • Was ist MVVM
  • Projektstruktur mit MVVMCross
  • Navigation in MVVMCross
  • Bindings in MVVMCross

Was ist MVVM

MVVM ist ein Entwurfsmuster, ähnlich zu MVC und MVP.
MVVM wurde ursprünglich für WPF(Windows Presentation Foundation) entwickelt, wird aber heute unter anderem auch bei UWP und eben Xamarin Entwicklung verwendet.

MVVM steht für Model – View – ViewModel, für die meisten sind Model und View schon längst bekannte Begriffe, aber was ist das ViewModel?
ViewModel ist genau das was es heisst, es ist das Model für einen bestimmten View. Wichtig ist hier das ein ViewModel nur zu ein View gehört (Es gibt aber wie immer Ausnahmen).
Eine der grössten Vorteile vom MVVM ist die Möglichkeit Daten im ViewModel zu View-Elemente zu binden.

Ich habe schon zwei Blog Posts zum Thema geschrieben, diese findest du unter folgende Links:

Projektstruktur mit MVVMCross

Mit MVVMCross speichern wir unsere ViewModels im PCL und teilen es übere alle Plattforme.

Blog MVVM Shared Code
MVVMCross

Das heisst im Native Teil, haben wir nur noch den View selber und die Events die auf Native ebene laufen.

Im Shared Teil haben wir unsere Services, unsere REST Calls, ViewModels, Models und Strings.

Wie funktioniert MVVM Cross?

MVVM Cross bietet dir ganz viele Features an:

  • ViewModel zu View Bindings
  • ViewModel zu ViewModel Navigation (ermöglicht dir, die Navigation nur einmal im Shared Code zu schreiben, statt ein Mal pro Plattform)
  •  Dependency und Property Injection
  • Ein Plugin Framework, welcher das Einbinden von Location Extensions sehr einfacht macht

Schauen wir doch das wichtigste von diesen Features an.

ViewModel zu View Bindings

Als erstes muss man ein Klass im Shared Code erstellen, welcher vom MvxViewModel erbt.
Jetzt muss unser Activity im Android Code vom MvxActivity<ContactViewModel> erben. Somit weiss erstens der SharedCode, welcher View er wann anzeigen muss (ViewModel zu ViewModel Navigation) und zweitens weiss der Activity, welcher ViewModel er zum View binden muss.
Danach muss man eben den ViewModel Benachrichtigen, zu welchem View er gehört, so dass die Bindings im XML funktionieren werden.
Das KeyWord ist hier “BindingInflate”.

SubscribeToViewModel

Jetzt können wir in unserem XML Sachen definieren wie:

  • local:MvxBind=”” zu unserem Property oder Command im ViewModel
  • Converter=”” zu unserem Konverter (für zum Beispiel Datum)
  • FallbackValue=”” zu ein standard Value (zum Beispiel N/A)
  • Mode=”” zu unserem Bindingstyp (MvvmCross unterstützt TwoWay bindings)

Ich hatte immer ein bisschen Respekt vom MVVM Pattern in Xamarin Native, aber ich freue mich jetzt es mehr und mehr kennen zulernen und werde sicher ein weiteren Blog mit ein Tutorial oder ähnliches im Zukunft schreiben.

 

Advertisements

Erste Erfahrungen mit Xamarin UI Tests – Android Quick Start

Ich habe der Xamarin UI Tests – Android Quick Start durchgeführt und in diesem Blog schreibe ich über meine Erfahrung vom Nichtswisser zum ersten Erfolgreichen Test.

Wie bin ich auf Xamarin UI Tests gekommen?

Ich habe in ein Projekt die Aufgabe bekommen, die Möglichkeiten im Raum UI Tests für unsere Xamarin Applikationen anzuschauen. Ich habe mich natürlich direkt auf Xamarin Test Clouds Webseite gestürzt.
Habe aber schnell gemerkt, dass ich diese Option für die Zukunft auf die Seite legen muss, da wir momentan kein kostenpflichtiges Abonnent abschliessen möchten.

UI Tests ohne Xamarin Test Cloud möglich?

Ich habe dann weiter geschaut, wie wir die Xamarin UI Tests ohne der Cloud Funktion benutzten konnten und habe ziemlich schnell gemerkt, dass es eigentlich ganz einfach funktioniert und man genau so gut auf ein Physisches Gerät oder ein Emulator laufen kann.

Hat jemand ein Test Recorder erwähnt?

Als ich irgendwann von ein Test Recorder gehört habe, begann ich mit viel Neugier nach diesem magischen Tool zu suchen. Ich fand ihn auch ziemlich schnell, wurde aber genau so schnell wieder enttäuscht, der Xamarin Test Recorder funktioniert momentan (22.09.2017) ausschliesslich mit Visual Studio Enterprise und ich habe nur Professional auf meinem Rechner.
Ich habe auch im nachhinein von einer Mitarbeiter mitbekommen, dass er nicht so gute Erfahrungen mit dem Recorder gemacht hat und hat mich geraten, bis weiteres die Tests von Hand zu schreiben.

Also gut, ich weiss was ich machen will, wo fange ich an?

Als erstes habe ich die Grundlagen in der Xamarin Dokumentation ein bisschen besser kennengelernt. Hier fand ich wichtige Informationen, wie Requirements und bekam ein erster Einblick in der Syntax vom UI.Tests API.

Link: Xamarin UI Tests – Introduction

Also los, kommen wir endlich zum Visual Studio

In der Xamarin UI Tests Dokumentation haben sie Tutorials für Android sowie iOS. Ich habe mich entschieden mit Android anzufangen.
Wichtig ist hier, dass man vor dem Anfangen alle Requirements gut durchliest und die benötigte Software installiert.

Link: Xamarin UI Tests – Quick Starts – Überblick und Requirements

So schnell wir den Requirements installiert haben, können wir mit dem Tutorial anfangen.

Ich habe für den Tutorial folgender Setup benutzt:

  • Visual Studio: Visual Studio 2017 15.3
  • Test Gerät: Physisches Gerät – Samsung S7 (Android 7.0)
  • Test Runner: JetBrains ReSharper Ultimate 2017.2
  • OS: Windows 10

Link: Xamarin UI Tests – Android Quick Start

Schwierigkeiten beim “Creating the First Test”:

Leider, wie es so gewöhnlich ist, konnte ich den Tutorial nicht ganz 1 zu 1 nachmachen, da ich an ein paar Schwierigkeiten gestossen bin.

No Tests found

NoTestsFound

Im Tutorial steht, dass man die Tests durch “Test -> Run -> All Tests” laufen sollte.
Wenn ich das gemacht habe, konnte Visual Studio jedoch keine Tests finden.
Ich vermute, dass es funktionieren würde, wenn ich den NUnit Test Adapter for NUnit 2 statt ReSharper als Test Runner benutzt hätte.

Wenn du aber auch den ReSharper benutzt, starte den Tests statt wie im Tutorial, durch “ReSharper -> Unit Tests -> Run Unit Tests” oder durch “Rechtsklick -> Run Unit Tests”.

Android SDK not Found

SdkNotFound

Dieser Fehler war recht einfach zu lösen, da der Stacktrace mir genau gesagt hat, was gefehlt hat. Nämlich die Environment Variable “ANDROID_HOME”.
Ich habe die Android SDK in der Tools -> Options -> Xamarin -> Android Settings schon verlinkt, jedoch benutzt der “Resharper Test Runner” nicht dieser Einstellung, stattdessen geht er diesen Pfad in den Environment Variablen holen.

Hier ein Link, falls du nicht weisst, wo man eine Environment Variable hinzufügt:
SuperUser.com – Antwort auf “How do I set Environment Variables in Windows 10”

ApkFile or InstalledApp has not been configured

ApkFileNotConfigured

Diesen Fehler war ein bisschen schwieriger zu beheben, aber zum Glück fand ich eine Lösung auf Xamarin Forums von Xamarin Team Mitglied TomOpgenorth.
Bei der Frage geht es eigentlich um Native Android Apps und nicht Xamarin.Android Apps, aber die Lösung ist genau die Selbe wie bei Xamarin.Android.

Link: How to run Xamarin UI Tests on Android Native

TomOpgenorthAnswer.png

Wenn wir den Code nur ein bisschen nach unsere Solution anpassen, funktioniert der Code und wir können den REPL anzeigen lassen.

pathToApkWithChanges

ReplWorking

Allgemeiner Eindruck

Xamarin UI Tests sehen ganz schon cool aus und ich werde mich genauer mit diesen Tema auseinandersetzten.
Ich bin sehr gespannt was für Möglichkeiten es gibt mit sowie ohne Xamarin Test Cloud und was für Einflüsse es auf Test-Aufwände und Qualität haben kann.

Login in Xamarin.Android

In diesem Blogg werden wir SharedPreferences für Xamarin.Android anschauen, um ein einfaches Login zu programmieren.

Inhalt:

  • Was ist SharedPreferences
  • SharedPreferences füllen
  • SharedPreferences abfragen
  • Splash Activity hinzufügen

Was ist SharedPreferences

Um es einfach und ungenau zu halten, ist SharedPreferences Session für Android Applikationen.
Es ist eine ganz einfache Key-Value Speicher, der man von überall im App zugreifen kann. Diese Key-Value Wert bleiben auch gespeichert nach dem man den App schliesst, das verhindert, dass den Benutzer jedes Mal sich neu einloggen muss.

SharedPreferences füllen

Um die SharedPreferences abzuspeichern, brauchen wir zwei Member Variable:

  • ISharedPreferences
  • ISharedPreferencesEditor

Nach der “base.OnCreate(bundle);” Aufruf, können wir die Member Variablen wie folgendes mit eine Instance speichern:

_sharedPreferences = ApplicationContext.GetSharedPreferences("UserInfo", FileCreationMode.Private);
_spEdit = _sharedPreferences.Edit();

Jetzt können wir ganz einfach mit der “PutString” Methode der Benutzerdaten speichern:

_spEdit.PutString("Username", Username.Text.Trim());
_spEdit.PutString("Password", Password.Text.Trim());
_spEdit.Apply();

Wichtig ist hier der “.Apply();” Methode nicht zu vergessen!

SharedPreferences abfragen

Um herauszufinden, ob der Benutzer sich schon Mal eingeloggt hat, müssen wir die SharedPreferences abfragen und schauen, ob sie eine gültige Login beinhalten.

Die Abfrage ist sehr einfach und ähnlich zum Füllen.

string userName = _sharedPreferences.GetString(“Username”, String.Empty);
string password = _sharedPreferences.GetString(“Password”, String.Empty);

if (userName == String.Empty || password == String.Empty)
{
// Get user by username from DB
User userFromUsername = GetUserFromUsername(userName);
if(userFromUsername == null) return;
if(userFromUsername.Password == password)
{
Console.WriteLine("User logged in");
}
else
{
Console.WriteLine("User not logged in");
}

Splash Activity hinzufügen

Die nächste Frage ist jetzt nur, wenn sollen wir die Kontrolle machen?

Am besten macht man dies in einen Splash Activity, der Splash Activity ist der Screen mit dem Logo, der beim Starten vom App angezeigt wird, während der App sich im Hintergrund am vorbereiten ist.
Der Grund dafür ist, dass wir dann von diesem Screen aus, entscheiden können, ob wir den “Homescreen” oder der “Loginscreen” als nächstes anzeigen möchten.

Als erstes müssen wir das Bild, welcher wir als Hintergrund benutzten möchten, zu unserem Resources->drawable Ordner hinzufügen.
Danach müssen wir im Resources->values->styles.xml ein neues Theme erstellen:

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>

Jetzt müssen wir wieder zurück zum Resources->drawable Ordner gehen um der “background_splash.xml” view zu erstellen, der unser vorher hinzugefügtem Bild als Hintergrund hat.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorWhite"/>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo_splash"/>
</item>
</layer-list>

Jetzt müssen wir nur noch das neu erstellte Theme, unser SplashActivity zuweisen.
(Das kommt unterhalb von Namespace und oberhalb vom Klassen Deklaration, in unserem Fall vor: “public class SplashActivity : Activity”.

[activity (label = "SplashActivity", theme = "@style/SplashTheme", MainLauncher = true) ]

Jetzt können wir unsere Konsolen Ausgaben mit Intents austauschen:

Intent intent = new Intent(this, typeof(LoginActivity));
this.StartActivity(intent);

und

Intent intent = new Intent(this, typeof(LoggedinActivity));
this.StartActivity(intent);

Kontrolliere, dass keine weitere Activities als “MainLauncher” definiert sind und dass es keine Einträge im AndroidManifest gibt, welche eine andere Activity als MainLauncher setzt.

Xamarin Forms Tutorial – Einstieg zu Dependency Services mit eine eigene Picture Picker

Xamarin Forms Tutorial – Einstieg zu Dependency Services mit eine eigene Picture Picker

In Xamarin Forms gibt es etwas was “Dependency Services” heisst. Mit Dependency Services hat man die Möglichkeit OS spezifische Funktionen von der geteilter Code aufzurufen. In Diesem Blog Post werde ich Tutorial über wie man ein Picture Picker mit Dependency Services programmieren kann. Ich benutzte für diesen Tutorial UWP und Android.

Für diejenige, welche noch nichts von Dependecy Services gehört hat, empfehle ich die “Introduction to DependecyService” von Xamarin selber vor meinem Blog Post zu lesen.

Ich habe alles in diesem Blog Post von Xamarins eigene Tutorial gelernt -> https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/dependency-service/photo-picker/

Inhalt

  • Dependency Services, kurz erklärt
  • Button und View erstellen
  • Interface definieren
  • Interface in UWP und Android implementieren
  • Click Event erstellen

Dependency Services, kurz erklärt

Wie schon erwähnt, benutzt man Dependency Services, wenn man auf ein Native API zugreifen muss, die durch die Xamarin Forms API noch nicht vorhanden ist.

Bei Dependency Services, definiert man im geteiltem Code ein Interface, die dann, im jedem OS Teil implementiert werden muss.
Danach kann man im geteiltem Code mit “DependencyService.Get<{InterfaceName}>().{MethodenName()};” die OS spezifische Methoden generisch aufrufen.

overview_diagram
Dependency Services Grafik, von developer.xamarin.com

Button und View erstellen

Ich habe ein Xamarin Projekt aufgesetzt (“Blank App” -> “Xamarin Forms” -> “Portable Class Library (PCL)”) mit einem einfachen ContentPage als View.

KookyFrameCreator Layout
View

Ich habe dazu ein Detail View erstellt, welcher ein Button als “Image Picker” hat.

KookyFrameCreator Detail
Detail View mit Button

Interface definieren

Als erstes müssen wir unseres Interface definieren.
Das Interface wird im geteilter Code definiert, ist aber ein ganz normales Interface.

In unserem Fall:

1:  namespace MyFirstFormsApp.DependencyServices  
2:  {  
3:    public interface IPicturePicker  
4:    {  
5:      Task<Stream> GetImageStreamAsync();  
6:    }  
7:  }  
8:    

Interface in UWP und Android implementieren

Jetzt müssen wir das Interface mit den OS spezifischen Code in unsere zwei unterstützte Plattformen implementieren, dass machen wir natürlich in den Plattform spezifischen Code.

Android

1:  [assembly: Dependency(typeof(PicturePickerImplementation))]  
2:    
3:  namespace MyFirstFormsApp.Droid.DependencyServices  
4:  {  
5:    public class PicturePickerImplementation : IPicturePicker  
6:    {  
7:      public Task GetImageStreamAsync()  
8:      {  
9:        // Define the Intent for getting images  
10:        Intent intent = new Intent();  
11:        intent.SetType("image/*");  
12:        intent.SetAction(Intent.ActionGetContent);  
13:    
14:        // Get the MainActivity instance  
15:        MainActivity activity = Forms.Context as MainActivity;  
16:    
17:        // Start the picture-picker activity (resumes in MainActivity.cs)  
18:        activity.StartActivityForResult(  
19:          Intent.CreateChooser(intent, "Select Picture"),  
20:          MainActivity.PickImageId);  
21:    
22:        // Save the TaskCompletionSource object as a MainActivity property  
23:        activity.PickImageTaskCompletionSource = new TaskCompletionSource();  
24:    
25:        // Return Task object  
26:        return activity.PickImageTaskCompletionSource.Task;  
27:      }  
28:    }  
29:  }  

UWP (Universal Windows)

1:  [assembly: Dependency(typeof(PicturePickerImplementation))]  
2:    
3:  namespace MyFirstFormsApp.UWP.DepedencyServices  
4:  {  
5:    public class PicturePickerImplementation : IPicturePicker  
6:    {  
7:      public async Task GetImageStreamAsync()  
8:      {  
9:        // Create and initialize the FileOpenPicker  
10:        FileOpenPicker openPicker = new FileOpenPicker  
11:        {  
12:          ViewMode = PickerViewMode.Thumbnail,  
13:          SuggestedStartLocation = PickerLocationId.PicturesLibrary,  
14:        };  
15:    
16:        openPicker.FileTypeFilter.Add(".jpg");  
17:        openPicker.FileTypeFilter.Add(".jpeg");  
18:        openPicker.FileTypeFilter.Add(".png");  
19:    
20:        // Get a file and return a Stream  
21:        StorageFile storageFile = await openPicker.PickSingleFileAsync();  
22:    
23:        if (storageFile == null)  
24:        {  
25:          return null;  
26:        }  
27:    
28:        IRandomAccessStreamWithContentType raStream = await storageFile.OpenReadAsync();  
29:        return raStream.AsStreamForRead();  
30:      }  
31:    }  
32:  }  

Wichtig ist hier, dass man die Usings nicht vergisst und dass man viel mit “Rebuild”/”Deploy” arbeitet um Syntax Fehler zu beheben.

Click Event erstellen

Als letztes müssen wir nur unseres Interface in einem Click Event aufrufen und etwas mit dem Resultat machen.

In unserem Fall werden wir den Picker aufrufen und dann das ausgewählte Bild anzeigen. Wenn der Benutzer auf das Bild klickt, kommt er wieder zurück zum Detail View.

1:  private async Task CreateEvent_Button_ImagePickerOnClicked(object sender, EventArgs e)  
2:      {  
3:        CreateEvent_Button_ImagePicker.IsEnabled = false;  
4:        Stream stream = await DependencyService.Get().GetImageStreamAsync();  
5:    
6:        if (stream != null)  
7:        {  
8:          Image image = new Image  
9:          {  
10:            Source = ImageSource.FromStream(() => stream),  
11:            BackgroundColor = Color.Gray  
12:          };  
13:    
14:          TapGestureRecognizer recognizer = new TapGestureRecognizer();  
15:          recognizer.Tapped += (sender2, args) =>  
16:          {  
17:            (this as ContentPage).Content = stack;  
18:            CreateEvent_Button_ImagePicker.IsEnabled = true;  
19:          };  
20:          image.GestureRecognizers.Add(recognizer);  
21:    
22:          (this as ContentPage).Content = image;  
23:        }  
24:        else  
25:        {  
26:          CreateEvent_Button_ImagePicker.IsEnabled = true;  
27:        }  
28:      }  

Tabbed Swipe Navigation in Xamarin Android (Native)

Tabbed Swipe Navigation in Xamarin Android (Native)

Es gibt verschiedene Navigationen in der Mobile Entwicklung, mehrere Pro Sprache/Plattform. Den heutigen Blog Post ist ein Tutorial was ein Tabbed Swipe Navigation ist und wie man sie implementiert.

Übersicht:

  • Was ist ein Tabbed Swipe Navigation
  • Was braucht ein Tabbed Swipe Navigation
  • Tutorial:
    • Projekt aufsetzten
    • Fragments
    • TabLayout
    • ViewPager
    • PageAdapter
    • Fragments
    • Profit

Was ist ein Tabbed Swipe Navigation

Der Tabbed Swipe Navigation, auch bekannt als Tabbed Swipe View, ist genau das, was es sich anhört zu sein.
Es ist eine Navigation/View, die Tabs und Swiping benutzt um zwischen verschiedene Views zu wechseln.

Tabs sind einfach Buttons die meistens ganz oben oder ganz unten im App angezeigt werden. Wenn man auf einer diesen Tabs klickt, kommt man auf der entsprechende View.

Swiping ist der Aktion wenn man mit den Finger von eine Seite zum anderen zieht. Siehe Bild Unten:

480px-gestures_flick
Swipe

Was braucht ein Tabbed Swipe Navigation

In Android braucht ein Tabbed Swipe Navigation folgendes:

Tutorial

Ich benutzte für den folgende Tutorial Visual Studio Professional 2015 für die Codierung und mein privates Mobile Phone (Samsung S7) zum Debuggen.

Projekt aufsetzen

Starte Visual Studio und erstelle ein neues Blank App (Android) Projekt.
(Unter Visual C# -> Android)

new-android-project
Projekt erstellen

Versuche jetzt als aller erstes den App ohne irgendwelcher Änderungen laufen zu lassen. Somit könnten wir uns schon jetzt mit mögliche Probleme beim Setup vom Emulator/Mobile Phone auseinandersetzten.

firststartup
App auf Samsung S7

TabLayout

Ein TabLayout ist ein Layout die man mit Tabs befüllen kann.

Als aller erstes müssen wir unsere Nuget Packages herunterladen. Wir brauchen folgende zwei Pakete:

  • Xamarin.Android.Support.V4
  • Xamarin.Android.Support.Design

Als zweites müssen wir noch ein Theme erstellen und es unsere Applikation zuweisen:
Theme in Resources -> Values -> Styles.axml:



<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<item name="windowActionBar">true
<item name="windowNoTitle">false
<item name="colorPrimary">#2B5C56
<item name="colorPrimaryDark">#000000
<item name="colorAccent">#FFEE58

 

set-application-theme
Applikations Theme setzten

Jetzt können wir mit dem Code anfangen.
Öffne das Main.axml unter Resources -> Layout -> Main.axml

Füge zum bestehende LinearLayout den folgende TabLayout:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>

Wir werden den Tabs gleich im Code hinzufügen, aber dafür brauchen wir ein ViewPager.

ViewPager

Ein ViewPager ist ein Container für ein austauschbares Fragment. Wir können also ein ViewPager zu unsere Main.axml hinzufügen und später im Code das passende Fragment darin anzeigen. Den ViewPager ist auch derjenige die der Swipe Funktion ermöglicht. Er ist schon out of the box bereit und kann eingesetzt werden.

Im Vergleich zu meine Zeichnung unten, sieht man im tatsächlichen Ansicht den ViewPager auf den Handy nicht, ich habe es nur hinzugefügt um das Vorstellungsvermögen zu helfen.

viewpagerimage
View Aufbau

View

Folgende Code kommt unterhalb der TabLayout im Main.axml.

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_margin="2dp" />

Backend

Im MainActivity.cs ist der Backend für der View.
Im Moment ist aber hier nicht viel zu finden:

mainactivityempty
Backend

 

Fügen wir folgender Code hinzu:

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);

TabLayout tabLayout = (TabLayout)FindViewById(Resource.Id.tablayout_navigation);

ViewPager viewPager = (ViewPager)FindViewById(Resource.Id.pager);
SetupviewPager(viewPager);

tabLayout.SetupWithViewPager(viewPager);
}

private void SetupviewPager(ViewPager viewPager)
{
throw new NotImplementedException();
}

Wenn wir den Code aber jetzt laufen würden wurde den Code ein Exception werfen. Wir mussen zuerst noch die Fragmente und der PageAdapter erstellen.

Fragments

Unsere Fragmente werden ganz einfach aufgebaute Fragment sein, die je ein TextFeld beinhalten.
AXML Code von den entsprechende Fragmente:

<!-- Fragment1.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center|center"
android:gravity="center"
android:text="Fragment1"
android:textSize="75sp"
android:background="#A5BFB6"/>



<!-- Fragment2.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Fragment2"
android:textSize="75sp"
android:background="#A5BFB6"/>



<!-- Fragment3.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Fragment3"
android:textSize="75sp"
android:background="#A5BFB6"/>

PageAdapter

Der PageAdapter beinhaltet die verschiedene Tab Namen und ihre zugehörige Fragment. Wichtig ist hier die Usings nicht zu vergessen.

using System.Collections.Generic;
using Android.Support.V4.App;
using Java.Lang;
using Fragment = Android.Support.V4.App.Fragment;
using FragmentManager = Android.Support.V4.App.FragmentManager;

namespace TabAndSwipe
{
class PageAdapter : FragmentPagerAdapter
{
private readonly List _fragments;
private readonly List<string> _fragmentnames;

public PageAdapter(FragmentManager fm) : base(fm)
{
_fragments = new List();
_fragmentnames = new List<string>();
}

public override int Count
{
get { return _fragments.Count; }
}
public override Fragment GetItem(int position)
{
return _fragments[position];
}

public void AddFragment(Fragment fragment, string name)
{
if (fragment == null) return;
_fragments.Add(fragment);
_fragmentnames.Add(name);
}

public override ICharSequence GetPageTitleFormatted(int position)
{
return new Java.Lang.String(_fragmentnames[position]);
}
}
}

Profit

Jetzt müssen wir noch noch die Methode SetupviewPager in der Mainactivity implementieren und dann sollte es laufen!

private void SetupviewPager(ViewPager viewPager)
{
viewPager.OffscreenPageLimit = 3;

PageAdapter adapter = new PageAdapter(SupportFragmentManager);
adapter.AddFragment(new Fragment1(), "Eins");
adapter.AddFragment(new Fragment2(), "Zwei");
adapter.AddFragment(new Fragment3(), "Drei");

viewPager.Adapter = adapter;
}
blog-title-image
Succes!

 

Einstieg in der Welt von Xamarin

Einstieg in der Welt von Xamarin

Alle reden darüber, niemand kennt es und die die es kennen, wissen nicht genau wie es funktioniert. Ich möchte in diesem Blog post als erstes mal klar machen, was Xamarin genau ist. Als zweites werde ich ein paar Tipps geben, wie man einen einfachen Einstieg in der Xamarin Entwicklung machen kann.

Was ist Xamarin?

Xamarin ist ein Entwickler Tool, welche Native App Entwicklung in C# ermöglicht. Aber vor allem ermöglicht es ein grossen Teil (bis zu 90%) des Codes über den Plattformen zu teilen. Das heisst man muss nicht drei Apps entwickeln sondern einen, und denn einfach den Plattform spezifischen ~10-30% des Codes für die weitere Plattformen.

Einige der Vorteilen von Xamarin sind:

  • Man braucht nicht ein Team pro Plattform.
  • Weniger Aufwand dank teilbaren Code.
  • Wenn man etwas ändern will, muss man hauptsächlich nur einmal ändern
  • .NET Framework verwendbar

Wenn macht es sinn Xamarin einzusetzen?

  • Management Apps
  • “Data heavy” Apps
  • Einfache UI’s
Hauptsächlich bei “Enterprise Applikationen”, wobei der Kern des Applications beim Backend liegt. Weil bei solche Applikationen kann man ein grossen Teil des Codes Teilen, was der grösste stärke vom Xamarin ist.
Image result for typical xamarin application

Bild von www.xamarin.com/forms

Wenn macht es kein sinn Xamarin einzusetzen?

  • Sehr benutzerdefinierte Apps
  • “UI heavy” Apps
  • Komplizierte UI’s mit viele Animationen

Wenn der Code welcher man teilen kann kleiner ist. Das ist bei Applikationen wo der Fokus beim Frontend liegt. Das sind zum Beispiel Apps wie Amazons Shopping-App.


Bild von https://www.loungelizard.com/5-great-examples-of-ui-heavy-mobile-app-designs/

Einstieg in der Xamarin Entwicklung

Ich wollte eigentlich eine Tutorial Blog schreiben, aber habe gemerkt das es schon mehrere gute Tutorials von Xamarin und Microsoft gibt. Also habe ich stattdessen zwei Tutorials ausgewählt die ich euch empfehlen kann.

Aber vor man mit den Tutorials anfangen kann muss man ein paar Schritte erledigen.

  • Man braucht eine IDE
  • Man braucht den benötigten SDK
  • Man braucht ein Debugging Endgerät

Meine Empfehlungen sind:

Jetzt zu den Tutorials, das erste ist ein Xamarin Native Tutorial, in diesem App lernt man nicht nur Xamarin kennen, sondern auch das Weather API “OpenWeatherMap“:

Tutorial Weather App (Native)

Das zweite Tutorial ist ein allgemeiner Tutorial zum Thema Xamarin Forms. Bei Xamarin Forms sind die UIs ebenfalls geteilt, und muss somit nur einmal gemacht werden:

Xamarin Forms Tutorial

 


Bild von: https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/