ViewPager und ViewPagerIndicator – interaktive Views in Android

11 Mrz

Viele Android Nutzer haben ihn bereits gesehen und verwendet da er bereits in einigen Android und Google Apps vertreten ist. Die Contacts App, der Kalender und der Android Market sind nur einige davon. Durch einen „Wisch“ zur Seite lassen sich neue Informationen, mit Stil, auf dem Gerät anzeigen. Der ViewPager bietet Entwicklern die Möglichkeit Informationen zu gruppieren und getrennt darzustellen. Die Handhabung bleibt jedoch leicht und intuitiv.

Der Einbau eines ViewPagers durch das Einbinden zweier Bibliotheken und ein klein bisschen Arbeit erweist sich dabei als ganz einfach.


Dieses Beispiel erklärt wie ein ViewPager in einem Fragment eingebunden werden kann.

Als Erstes müssen folgende Bibliotheken in die App mit eingebunden werden:

  1. Android Support Package
  2. ViewPagerIndicator

Das Android Support Package beinhaltet den eigentlichen ViewPager, der innerhalb eines Fragments wie folgt eingebunden werden kann:

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

Die ViewpagerIndicator bietet verschiedene Möglichkeiten dem Nutzer zu zeigen auf welcher Seite er sich zur Zeit befindet und wie viele Seiten existieren. Er ist Open Source und muss als Projekt in Eclipse miteingebunden werden. Daraufhin muss er in der selben Activity/Fragment wie der ViewPager wie folgt deklariert werden:

<com.viewpagerindicator.TitlePageIndicator
         android:id="@+id/titles"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
           />

In meinem Beispiel wird der ViewPager innerhalb eines Fragments verwendet. Dazu muss dem Fragment folgender Code hinzugefügt werden:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_people, null);
ViewPager pager = (ViewPager) root.findViewById(R.id.pagor);
FragmentStatePagerAdapter adapter;
adapter = new PeoplePagerAdapter(getFragmentManager());
pager.setAdapter(adapter);
TitlePageIndicator titleIndicator =
        (TitlePageIndicator) root.findViewById(R.id.titles);
titleIndicator.setViewPager(pager);
return root;

Zusätzlich brauch der ViewPager einen Adapter um mit Daten gefüllt zu werden. Dieser muss die Klasse FragmentStatePagerAdapter erweitern und das Interface TitleProvider implementieren. Zusätzlich muss die Klasse folgende Methoden überschreiben bzw implementieren:

  • public Fragment getItem(int position)
  • public int getCount()
  • public String getTitle(int position)

Die getItem Methode bekommt die jeweilige Position des ViewPagers übergeben. Innerhalb der Methode muss ein Fragment erstellt werden, das schließlich auf der jeweiligen Seite angezeigt wird.

Durch die getCount Methode lässt sich die Anzahl der Seiten des ViewPagers festelgen.

Die getTitle Methode ist für den Title der jeweiligen Seite verantwortlich.

Weiterführende Links:

http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html

http://developer.android.com/sdk/compatibility-library.html

http://viewpagerindicator.com/

https://github.com/JakeWharton/Android-ViewPagerIndicator

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: