Android
ViewPager

Einführung

Bemerkungen

Grundlegende ViewPager-Verwendung mit Fragmenten

Ein ViewPager ermöglicht das ViewPager mehrerer Fragmente in einer Aktivität, die durch Umblättern nach links oder rechts navigiert werden kann. Ein ViewPager muss mit einem PagerAdapter entweder Ansichten oder Fragmente PagerAdapter .

Es gibt jedoch zwei spezifischere Implementierungen, die für den Fall der Verwendung von Fragmenten ( FragmentPagerAdapter und FragmentStatePagerAdapter am nützlichsten sind. Wenn ein Fragment zum ersten Mal instanziiert werden muss, wird getItem(position) für jede Position aufgerufen, die instantiiert werden muss. Die Methode getCount() gibt die Gesamtzahl der Seiten zurück, damit der ViewPager weiß, wie viele Fragmente angezeigt werden müssen.

Sowohl FragmentPagerAdapter als auch FragmentStatePagerAdapter bewahren einen Cache der Fragmente auf, die der ViewPager muss. Standardmäßig versucht der ViewPager , maximal 3 Fragmente zu speichern, die dem aktuell sichtbaren Fragment entsprechen, und den Fragmenten rechts und links davon. FragmentStatePagerAdapter behält auch den Status aller Ihrer Fragmente bei.

Beachten Sie, dass bei beiden Implementierungen davon ausgegangen wird, dass Ihre Fragmente ihre Positionen getItem() Wenn Sie also eine Liste der Fragmente getItem() und keine statische Anzahl davon haben, wie Sie in der getItem() -Methode sehen können, müssen Sie eine Unterklasse von PagerAdapter und überschreiben Sie mindestens die Methoden instantiateItem() , destroyItem() und getItemPosition() .

Fügen Sie einfach einen ViewPager in Ihr Layout ein, wie im grundlegenden Beispiel beschrieben :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout> 
    <android.support.v4.view.ViewPager
        android:id="@+id/vpPager"> 
    </android.support.v4.view.ViewPager>
</LinearLayout>

Definieren Sie dann den Adapter, der bestimmt, wie viele Seiten vorhanden sind und welches Fragment für jede Seite des Adapters angezeigt werden soll.

public class MyViewPagerActivity extends AppCompatActivity {
    private static final String TAG = MyViewPagerActivity.class.getName();

    private MyPagerAdapter mFragmentAdapter;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.myActivityLayout);

        //Apply the Adapter
        mFragmentAdapter = new MyPagerAdapter(getSupportFragmentManager());    
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(mFragmentAdapter);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager);
        }

        // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {
            switch(position) {
                case 0:
                    return new Fragment1();

                case 1:
                    return new Fragment2();

                case 2:
                    return new Fragment3();

                default:
                    return null;
            }
        }

        // Returns total number of pages    
        @Override
        public int getCount() {
            return 3;
        }

    }
}

compile 'com.android.support:support-v13:25.3.1'

Wenn Sie android.support.v4.app.Fragment , müssen Sie diese Abhängigkeit hinzufügen:

compile 'com.android.support:support-fragment:25.3.1'

ViewPager mit TabLayout

Ein TabLayout kann zur einfacheren Navigation verwendet werden.
Sie können die Registerkarten für jedes Fragment in Ihrem Adapter mithilfe der TabLayout.newTab() Methode TabLayout.newTab() gibt jedoch eine andere bequemere und einfachere Methode für diese Aufgabe, TabLayout.setupWithViewPager() .

Diese Methode wird durch das Erstellen und Entfernen von Registerkarten entsprechend dem Inhalt des mit Ihrem ViewPager Adapters bei jedem Aufruf ViewPager .
Außerdem wird ein Rückruf festgelegt, sodass jedes Mal, wenn der Benutzer die Seite umblättert, die entsprechende Registerkarte ausgewählt wird.

Definieren Sie einfach ein Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

</LinearLayout>

Implementieren Sie dann den FragmentPagerAdapter und wenden Sie ihn auf den ViewPager :

public class MyViewPagerActivity extends AppCompatActivity {
    private static final String TAG = MyViewPagerActivity.class.getName();

    private MyPagerAdapter mFragmentAdapter;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.myActivityLayout);

        // Get the ViewPager and apply the PagerAdapter
        mFragmentAdapter = new MyPagerAdapter(getSupportFragmentManager());    
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(mFragmentAdapter);

        // link the tabLayout and the viewpager together
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager);
        }

         // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {
            switch(position) {
                case 0:
                    return new Fragment1();

                case 1:
                    return new Fragment2();

                case 2:
                    return new Fragment3();

                default:
                    return null;
            }
        }
        
        // Will be displayed as the tab's label
        @Override
        public CharSequence getPageTitle(int position) {
            switch(position) {
                case 0:
                    return "Fragment 1 title";

                case 1:
                    return "Fragment 2 title";

                case 2:
                    return "Fragment 3 title";

                default:
                    return null;
            }
        }

        // Returns total number of pages 
        @Override
        public int getCount() {
            return 3;
        }

    }
}

ViewPager mit PreferenceFragment

Bis vor kurzem verhinderte die Verwendung von android.support.v4.app.FragmentPagerAdapter die Verwendung eines PreferenceFragment als eines der im FragmentPagerAdapter verwendeten Fragmente.

Die neuesten Versionen der Support-v7-Bibliothek enthalten jetzt die PreferenceFragmentCompat Klasse, die mit einem ViewPager und der v4-Version von FragmentPagerAdapter funktioniert.

Beispielfragment, das PreferenceFragmentCompat :

import android.os.Bundle; 
import android.support.v7.preference.PreferenceFragmentCompat; 
import android.view.View; 
 
public class MySettingsPrefFragment extends PreferenceFragmentCompat { 
  
    public MySettingsPrefFragment() { 
        // Required empty public constructor 
    } 
 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        addPreferencesFromResource(R.xml.fragment_settings_pref); 
    } 
 
    @Override 
    public void onCreatePreferences(Bundle bundle, String s) { 
 
    } 
}

Sie können dieses Fragment jetzt in einer Unterklasse android.support.v4.app.FragmentPagerAdapter :

private class PagerAdapterWithSettings extends FragmentPagerAdapter {

    public PagerAdapterWithSettings(FragmentManager supportFragmentManager) {
        super(supportFragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        switch(position) {
            case 0:
                return new FragmentOne();

            case 1:
                return new FragmentTwo();

            case 2:
                return new MySettingsPrefFragment();

            default:
                return null;
        }
    }
    
    // .......

}

ViewPager hinzufügen

build.gradle Sie sicher, dass die folgende Abhängigkeit zur build.gradle Datei Ihrer App unter Abhängigkeiten hinzugefügt wird:

compile 'com.android.support:support-core-ui:25.3.0'

ViewPager Sie dann den ViewPager zu Ihrem Aktivitätslayout hinzu:

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

Dann definieren Sie Ihren PagerAdapter :

public class MyPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
 
        // Create the page for the given position. For example:
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.xxxx, collection, false);
        collection.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        // Remove a page for the given position. For example:
        collection.removeView((View) view);
    }

    @Override
    public int getCount() {
        //Return the number of views available.
        return numberOfPages;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        // Determines whether a page View is associated with a specific key object
        // as returned by instantiateItem(ViewGroup, int). For example:
        return view == object;
    }    
}

ViewPager Sie schließlich den ViewPager in Ihrer Aktivität ein:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyPagerAdapter(this));
    }
}

ViewPager mit Punktanzeige

Alles was wir brauchen sind: ViewPager , TabLayout und 2 Drawables für ausgewählte und Standardpunkte.

Zuerst müssen wir TabLayout zu unserem Bildschirmlayout hinzufügen und es mit ViewPager . Wir können dies auf zwei Arten tun:

Verschachteltes TabLayout in ViewPager

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

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.v4.view.ViewPager>

In diesem Fall wird TabLayout automatisch mit ViewPager , aber TabLayout befindet sich neben ViewPager und nicht über ihm.

Separates TabLayout

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

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

In diesem Fall können wir setzen TabLayout überall, aber wir haben eine Verbindung TabLayout mit ViewPager programmatisch

ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
pager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);

Nachdem wir unser Layout erstellt haben, müssen wir unsere Punkte vorbereiten. Wir erstellen also drei Dateien: selected_dot.xml , default_dot.xml und tab_selector.xml .

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>    
    </item>
</layer-list>

default_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>    
    </item>
</layer-list>

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
          android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

Jetzt müssen wir nur noch 3 Zeilen Code zu TabLayout in unserem XML-Layout hinzufügen und fertig.

app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"

Richten Sie OnPageChangeListener ein

Wenn Sie Änderungen an der ausgewählten Seite ViewPager.OnPageChangeListener möchten, können Sie den ViewPager.OnPageChangeListener Listener im ViewPager implementieren:

viewPager.addOnPageChangeListener(new OnPageChangeListener() {
    
    // This method will be invoked when a new page becomes selected. Animation is not necessarily complete.
    @Override
    public void onPageSelected(int position) {
         // Your code
    }
    
    // This method will be invoked when the current page is scrolled, either as part of 
    // a programmatically initiated smooth scroll or a user initiated touch scroll.
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
         // Your code
    }
    
    // Called when the scroll state changes. Useful for discovering when the user begins
    // dragging, when the pager is automatically settling to the current page, 
    // or when it is fully stopped/idle.
    @Override
    public void onPageScrollStateChanged(int state) {
         // Your code
    }
});