[Android][Xamarin] Tutorial-Reihe

Android Development mit C# Xamarin

Dieser Part des Tutorials ist sehr leicht. Du musst nur Visual Studio mit den .NET-Desktopentwicklung und Mobile-Entwicklung mit .NET (Xamarin) installieren

Download Visual Studio Communiy: [Only registered and activated users can see links. Click Here To Register...]
Setup ausf�hren und Visual Studio Installer wird installiert
Installer startet automatisch. Jetzt Haken bei .NET-Desktopentwicklung und Mobile-Entwicklung mit .NET setzen

[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Als letztes unten rechts auf Installieren dr�cken
Fertig

[Only registered and activated users can see links. Click Here To Register...]

Demo Video

GitHub
[Only registered and activated users can see links. Click Here To Register...]

Schritt 1: Projekt erstellen

Zu Beginn �ffnen wir Visual Studio und erstellen ein neues Projekt. Als Projekt w�hlen wir
Visual C# => Android => Android-App (Xamarin)
[Only registered and activated users can see links. Click Here To Register...]

Anschlie�end w�hlen wir im Fenster danach Registerkarten-App aus
[Only registered and activated users can see links. Click Here To Register...]

Kurze Erkl�rung:

Spoiler

Unser erstelltes Projekt sollte nun folgende Hierarchie haben
[Only registered and activated users can see links. Click Here To Register...]

Die interessantesten Datein und Ordner zum Anfang sind f�r uns:

\MainActivity.cs
Diese Datei enth�hlt die Logik f�r unsere MainActivity, sozusagen unser Start Fenster
\Resources\layout
Dieser Ordner enth�hlt unsere erstellten Layouts die wir anzeigen k�nnen. Zu sehen ist auch die Datei activity_main.axml die unser grafisches Layout f�r MainActivity.cs in XML Form beinhaltet.
\Resources\menu\navigation.xml
Da wir uns f�r eine Registerkarten-App entschieden haben, wird in unserer App eine untere Navigationsleiste angezeigt. In dieser Datei k�nnen wir die angezeigten Men� Items in XML Form definieren
\Resources\values\strings.xml
Hier k�nnen wir Strings, also Texte, definieren, die wir sp�ter im Code und im XML wie Variablen abrufen k�nnen.

Schritt 2: Navigationsleiste anpassen

In diesem Schritt passen wir unsere Men� Items an. �ffnet Resources\menu\navigation.xml und �ndert den Code wie folgt ab.

Code:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/navigation_home"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="@string/title_home" />

  <item
    android:id="@+id/navigation_settings"
    android:icon="@drawable/ic_dashboard_black_24dp"
    android:title="@string/title_settings" />

</menu>

Jetzt haben wir zwei Men� Items erstellt mit folgenden Attributen:

android:id
Gibt die ID an. Mit dieser k�nnen wir sp�ter im Code auf unser Layout Objekt zugreifen / z.B. FindViewByID(Resource.Id.textView1)
android:icon
verweist auf eine Bilddatei im drawable Ordner (Resource.Id.textView1)
android:title
Hier kann man den Text festlegen. In diesem Fall verweisen wir auf einen festgelegten String in der Resource\values\strings.xml Datei

Danach m�ssen wir die Resource\values\strings.xml Datei bearbeiten damit sie wie folgt aussieht:

Code:

<resources>
  <string name="app_name">FirstApp</string>
  <string name="title_home">�bersicht</string>
  <string name="title_settings">Einstellungen</string>
</resources>

Schritt 3: Fragmente (Seiten) erstellen

Als n�chstes erstellen wir uns Fragmente die unsere Seiten, zwischen denen wir navigieren k�nnen, festlegen. Dazu erstellen wir 2 Android-Layout Dateien im Resource\layout Ordner

fragment_home.axml
fragment_settings.axml

[Only registered and activated users can see links. Click Here To Register...]

Beide Layouts beinhalten nur einen Button. Die Datei sieht wie folgt aus:

fragment_home.axml

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:padding="20dp"
	android:gravity="center">
	<Button
		android:text="�bersicht"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:minWidth="25px"
		android:minHeight="25px"
		android:id="@+id/buttonHome" />

</LinearLayout>

fragment_settings.axml

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
	android:padding="20dp"
	android:gravity="center">
	<Button
		android:text="Einstellungen"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:minWidth="25px"
		android:minHeight="25px"
		android:id="@+id/buttonSettings" />

</LinearLayout>

Wir haben jetzt 2 Layouts designt die jeweils einen Button enthalten. Die Buttons haben wir buttonSettings und buttonHome genannt. Nun erstellen wir unsere Code Datein f�r die Fragmente. Dazu erstellen wir direkt in userem Projekt 2 Fragmente:

FragmentHome.cs
FragmentSettings.cs

[Only registered and activated users can see links. Click Here To Register...]

Den Code der Dateien �ndern wir wie folgt ab:

FragmentHome.cs

Code:

using Android.OS;
using Android.Views;

namespace FirstApp
{
    public class FragmentHome : Android.Support.V4.App.Fragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            // Use this to return your custom view for this Fragment
            // Diese Zeile wei�t dem Fragment unser erstelltes Layout zu
            // Resource.Layout.fragment_home
            return inflater.Inflate(Resource.Layout.fragment_home, container, false);   
        }
    }
}

FragmentSettings.cs

Code:

using Android.OS;
using Android.Views;

namespace FirstApp
{
    public class FragmentSettings : Android.Support.V4.App.Fragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            // Use this to return your custom view for this Fragment
            // Diese Zeile wei�t dem Fragment unser erstelltes Layout zu
            // Resource.Layout.fragment_settings
            return inflater.Inflate(Resource.Layout.fragment_settings, container, false);
        }
    }
}

Schritt 4: Unsere erstellten Fragmente der MainActivity zuweisen

Dies ist der letzte Schritt. Wir m�ssen unsere Fragmente jetzt der MainActivity zuweisen, sodass wir zwischen ihnen navigieren k�nnen. Au�erdem m�ssen wir unsere Resource\layout\activity_main.axml anpassen, damit sie unsere Fragmente anzeigen kann.

Wir �ffnen Resource\layout\activity_main.axml und f�gen ein FrameLayout ein. Diesem FrameLayout k�nnen wir dann unsere Fragmente zuweisen Der Code sieht wie folgt aus:

Code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
    		android:id="@+id/content_frame"
    		android:layout_width="match_parent"
    		android:layout_height="match_parent"
    		android:layout_above="@+id/navigation" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation" />

</RelativeLayout>

Unser FrameLayout haben wir content_frame genannt. In unserer \MainActivity.cs erstellen wir nun eine Liste mit unseren Fragmenten und laden diese dann in unser content_frame Der Code sieht wie folgt aus:

Code:

// Liste unserer Fragmente definieren
List<Android.Support.V4.App.Fragment> fragments;

protected override void OnCreate(Bundle savedInstanceState)
{
  base.OnCreate(savedInstanceState);

  // unser Layout \Resource\layout\activity_main.axml laden
  SetContentView(Resource.Layout.activity_main);


  fragments = new List<Android.Support.V4.App.Fragment>();  // Liste erstellen
  fragments.Add(new FragmentHome());                        // FragmentHome hinzuf�gen
  fragments.Add(new FragmentSettings());                    // FragmentSettings hinzuf�gen

  // Lade start Fragment (In unserem Fall FragmentHome)
  SupportFragmentManager.BeginTransaction()
                        .Replace(Resource.Id.content_frame, fragments[0])
                        .Commit();

  // Unter Navigationsleiste holen und Click Event Handler setzen
  // event Methode public bool OnNavigationItemSelected(IMenuItem item)
  BottomNavigationView navigation = FindViewById<BottomNavigationView>(Resource.Id.navigation);
  navigation.SetOnNavigationItemSelectedListener(this);
}

public bool OnNavigationItemSelected(IMenuItem item)
{
  switch (item.ItemId)
  {
    // Navigationsitem Home (�bersicht) wurde gedr�ckt
    case Resource.Id.navigation_home:
      // Lade �bersichtsfragment
      SupportFragmentManager.BeginTransaction()
                            .Replace(Resource.Id.content_frame, fragments[0])
                            .Commit();
      return true;

    // Navigationsitem Settings (Einstellungen) wurde gedr�ckt
    case Resource.Id.navigation_settings:
      // Lade Einstellungsfragment
      SupportFragmentManager.BeginTransaction()
                            .Replace(Resource.Id.content_frame, fragments[1])
                            .Commit();
      return true;
  }
  return false;
}

Das wars auch. Wir haben nun eine App mit 2 Seiten zwischen denen wir mittels einer BottemNavigationBar navigieren k�nnen.

Button Click EventHandler

Demo Video

GitHub
[Only registered and activated users can see links. Click Here To Register...]

Schritt 1: Projekt �ffnen

Als erstes �ffnen wir unser erstelltes Projekt aus den letzten Tutorial Video. Du kannst es auch hier im Ordner FirstApp finden [Only registered and activated users can see links. Click Here To Register...] Unser Projekt besteht zurzeit aus einer Activity die zwischen 2 Fragmenten navigiert. Beide Fragmente besitzen jeweils einen Button. Einmal Resource.Id.buttonHome und Resource.Id.buttonSettings.

Schritt 2: Dem Button Click EventHandler eine Methode zuweisen

Wir �ffnen unsere Dateien.

FragmentHome.cs
FragmentSettings.cs

Wenn wir jetzt dem Button Click EventHandler eine Methode zuweisen m�chten, m�ssen wir das jeweilige Button Control erstmal finden. Das machen wir mittels

Code:

view.FindViewById<Button>(Resource.Id.buttonHome)

f�r diesen Aufruf ben�tigen wir aber erstmal das View Objekt welches wir in der public override View OnCreateView() erstellen.

Code:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    // Hier erstelllen wir unser View Objekt
    View view = inflater.Inflate(Resource.Layout.fragment_home, container, false);

    return view;    
}

So nun k�nnen wir unser Button Control holen und den EventHandler eine Methode zuweisen.

Code:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    // Hier erstelllen wir unser View Objekt
    View view = inflater.Inflate(Resource.Layout.fragment_home, container, false);

    // Hole Button Control
    Button btnHome = view.FindViewById<Button>(Resource.Id.buttonHome);
    // Weise dem Click EventHandler die Methode OnClickButton(sender, e) zu
    btnHome.Click += OnClickButton;

    return view;  
}

Wird der Button jetzt gedr�ckt wird die Methode OnClickButton(sender, e) aufgerufen. Diese existiert allerdings noch nicht deswegen erstellen wir sie jetzt

Code:

void OnClickButton(object sender, EventArgs e)
{
    // Einfachen Toast erstellen
    // Toast.MakeText ben�tigt den Context einer Activity. Da wir uns aber in einer Fragment Datei befinden geben wir Activity als parameter an.
    Toast.MakeText(Activity, "�bersicht", ToastLength.Long).Show();
}

Unsere Dateien sehen nun so aus:

FragmentHome.cs

Code:

using System;
using Android.OS;
using Android.Views;
using Android.Widget;

namespace FirstApp
{
    public class FragmentHome : Android.Support.V4.App.Fragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            // Hier erstelllen wir unser View Objekt
            View view = inflater.Inflate(Resource.Layout.fragment_home, container, false);

            // Hole Button Control
            Button btnHome = view.FindViewById<Button>(Resource.Id.buttonHome);
            // Weise dem Click EventHandler die Methode OnClickButton(sender, e) zu
            btnHome.Click += OnClickButton;

            return view;

        }

        void OnClickButton(object sender, EventArgs e)
        {
          // Einfachen Toast erstellen
          // Toast.MakeText ben�tigt den Context einer Activity. Da wir uns aber in einer Fragment Datei befinden geben wir Activity als parameter an.
            Toast.MakeText(Activity, "�bersicht", ToastLength.Long).Show();
        }
    }
}

FragmentHome.cs

Code:

using System;
using Android.OS;
using Android.Views;
using Android.Widget;

namespace FirstApp
{
    public class FragmentSettings : Android.Support.V4.App.Fragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            // Hier erstelllen wir unser View Objekt
            View view = inflater.Inflate(Resource.Layout.fragment_settings, container, false);

            // Hole Button Control
            Button btnSettings = view.FindViewById<Button>(Resource.Id.buttonSettings);
            // Weise dem Click EventHandler die Methode OnClickButton(sender, e) zu
            btnSettings.Click += OnClickButton;

            return view;

        }

        void OnClickButton(object sender, EventArgs e)
        {
          // Einfachen Toast erstellen
          // Toast.MakeText ben�tigt den Context einer Activity. Da wir uns aber in einer Fragment Datei befinden geben wir Activity als parameter an.
            Toast.MakeText(Activity, "Einstellungen", ToastLength.Long).Show();
        }
    }
}

Wir sind fertig und k�nnen jetzt unser Projekt starten. Klicken wir jetzt auf einen der Buttons sollte unsere Methode ausgef�hrt werden und es sollte unten am Bildschirm ein Meldetext erscheinen.

Weitere Tutorials zu dieser Reihe sind in Arbeit :)