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!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s