Utilisation simple de ViewPager

Introduction à cette section :

Ce que cette section apporte est un contrôle d'interface utilisateur introduit après Android 3.0 - ViewPager (outil de commutation coulissante de vue), ce qui est vraiment inattendu Comment appeler ce contrôle ? Sa fonction générale : Le changement de vue peut être effectué par glissement gestuel. Il est généralement utilisé pour les applications. Page de démarrage ou carrousel d'images, car il a été introduit après la version 3.0. Si vous souhaitez l'utiliser dans une version inférieure, vous devez introduire la v4. Package de compatibilité ~, nous pouvons également voir que ViewPager se trouve dans le répertoire : android.support.v4.view.ViewPager ~ Apprenons l'utilisation de base de ce contrôle ~ Document officiel de l'API : ViewPager

1. Brève introduction de ViewPager

ViewPager est un simple composant de changement de page, nous pouvons y accéder. Remplissez-le avec plusieurs vues, puis nous pouvons partir Faites glisser votre doigt vers la droite pour changer de vue. Nous pouvons définir la méthode PageTransformer() pour notre ViewPager. Définissez l'effet d'animation lors du changement. Bien sûr, nous n'avons pas encore appris l'animation, nous définissons donc l'animation pour ViewPager. Passons au chapitre suivant, Dessin et Animation ! Comme ListView et GridView que nous avons appris plus tôt, nous avons également besoin d'un adaptateur (Adaptateur) lie notre View et ViewPager, et ViewPager a un adaptateur spécifique - PagerAdapter ! De plus, Google recommande officiellement d'utiliser Fragment pour remplir ViewPager, donc Il est plus pratique de générer chaque Page et de gérer le cycle de vie de chaque Page ! Nous disposons de deux Fragments Adaptateurs dédiés : FragmentPageAdapter et FragmentStatePagerAdapter Analysons brièvement les différences entre ces deux adaptateurs :
FragmentPageAdapter : et comme PagerAdapter, il ne mettra en cache que le fragment actuel, celui de gauche et celui de droite. Un, c'est-à-dire qu'un total de 3 fragments seront mis en cache. S'il y a quatre pages 1, 2, 3 et 4 :
est sur la page 1 : caches 1, 2
est sur la page 2 : caches 1. , 2, 3
À la page 3 : détruire la page 1, le cache 2, 3, 4
À la page 4 : détruire la page 2, le cache 3, 4
Pour plus de pages, et ainsi de suite~

FragmentStatePagerAdapter : Lorsque Fragment n'est pas utile à l'utilisateur Une fois vu, le Fragment entier sera détruit. Seul l’état du Fragment sera sauvegardé ! Lorsque la page doit être réaffichée, une nouvelle page sera générée !
Pour résumer, FragmentPageAdapter convient aux occasions avec moins de pages fixes tandis que FragmentStatePagerAdapter convient aux occasions avec moins de pages fixes ; Pour les situations où il y a beaucoup de pages ou où le contenu de la page est très complexe (cela prend beaucoup de mémoire) !

2. Utilisation de PagerAdapter

Présentons d'abord le PagerAdapter le plus courant Si vous souhaitez utiliser ce PagerAdapter, vous devez réécrire les quatre méthodes suivantes. : Bien sûr, ce n'est qu'une suggestion officielle. En fait, il suffit de réécrire getCount() et isViewFromObject()~
.
getCount() : Obtenez le nombre de vues qu'il y a dans le viewpager
destroyItem() : Supprimez une page à une position donnée. Il est de la responsabilité de l'adaptateur de supprimer cette vue du conteneur. Cela permet de garantir que la vue peut être supprimée au retour de finishUpdate(viewGroup).
Les deux autres méthodes impliquent une clé :
instantiateItem() : ①Ajoutez la vue à la position donnée au ViewGroup (conteneur), créez-la et affichez-la ②Renvoyer un objet (clé) représentant la page nouvellement ajoutée. Habituellement, il suffit de renvoyer directement la vue elle-même. Bien sûr, vous pouvez également. Personnalisez votre propre clé, mais la clé doit avoir une correspondance individuelle avec chaque vue
isViewFromObject() : Déterminer si la clé renvoyée par la fonction instantiateItem(ViewGroup, int) est la même qu'une page vue représentent la même vue (c'est-à-dire s'ils correspondent et si ceux qui correspondent représentent la même vue), nous écrivons généralement directement return view == object !

Exemple d'utilisation 1 : L'utilisation la plus simple

Exécution de rendus :

Partie clé du code :

D'accord, le code est très simple à écrire : le premier est la disposition de chaque vue, en triple, et les deux autres vues sont C'est pareil：

view_one.xml：

<?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background =" ../style/images/android-tutorial-viewpager.html"
android:gravity="center"
android:orientation="vertical">

<TextView
android :layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Première page"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>

然后编写一个自定义个的PagerAdapter：

MyPagerAdapter.java：

classe publique MyPagerAdapter étend PagerAdapter {
    privé ArrayList<View> ; viewLists;

    public MyPagerAdapter() {
    }

    public MyPagerAdapter(ArrayList<View> viewLists) {
        super();
        this.viewLists = view Listes ;
    }

    @Override
    public int getCount() {
        return viewLists.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewLists. get(position));
        return viewLists.get(position);
    }

    @Override
    public void destroyItem (ViewGroup conteneur, int position, Object object) {
        conteneur .removeView(viewLists.get(position));
    }
}

接着到Activity了，和以前学的ListView非常类似：

OneActivity.java：

classe publique OneActivity étend AppCompatActivity{

    privé ViewPager vpager_one;
    privé ArrayList<View> aList;
    private MyPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
        vpager_one = (ViewPager) findViewById(R.id.vpager_one);

        aList = new ArrayList<View>();
        LayoutInflater li = getLayoutInflater(); 🎜>        aList.add( li.inflate(R.layout.view_one,null,false));
        aList.add(li.inflate(R.layout.view_two,null,false));
        aList.add(li.inflate( R.layout.view_trois,null,false));
        mAdapter = new MyPagerAdapter(aList);
        vpager_one.setAdapter(mAdapter);
    }
}

D'accord, le code clé est la partie ci-dessus, il est très facile à comprendre~

Exemple d'utilisation 2 : Barre de titre - PagerTitleStrip et PagerTabStrip

est de suivez le glissement ViewPager Quant aux titres coulissants, ces deux-là sont officiellement fournis, l'un est du texte ordinaire, L'un est souligné et le texte peut être cliqué pour changer de page. Écrivons un exemple simple ~

Exécution du rendu :

Implémentation du code clé :

La différence entre les deux ici est simplement que la mise en page est différente, tout le reste est identique :

PagerTitleStrip Le disposition de l'activité où se trouve : activity_two.xml :

而PagerTabStrip所在的布局：

activity_two.xml：

Les deux suivants sont identiques. Écrivons d’abord un PagerAdapter personnalisé, à l’exception de celui précédemment réécrit. En plus des quatre méthodes, nous devons réécrire une autre méthode : getPageTitle(), qui définit le titre~ Le code est le suivant :

MyPagerAdapter2.java：

/**
* Créé par Jay le 2015/10/8 0008.
*/
public class MyPagerAdapter2 extends PagerAdapter {
private ArrayList<View> viewLists;
private ArrayList<String> titleLists;

public MyPagerAdapter2() {}
public MyPagerAdapter2(ArrayList<View> viewLists,ArrayList<String> titleLists)
{
this.viewLists = viewLists;
this.titleLists = titleLists;
}

@Override
public int getCount() {
return viewLists(). ;
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public Object instantiateItem(ViewGroup containers, int position) {
containers.addView(viewLists.get(position));
return viewLists.get(position);
}

@Override
public void destroyItem (conteneur ViewGroup, position int, objet Object) {
containers.removeView(viewLists.get(position));
}

@Override
public CharSequence getPageTitle (int position ) {
return titleLists.get(position);
}
}

最后是Activity部分，两个都是一样的：

TwoActivity.java：

/**
* Créé par Jay le 2015/10/8 0008.
*/
public class TwoActivity étend AppCompatActivity {

    private ViewPager vpager_two;
    private ArrayList<View> aList;
    private ArrayList<String> sList;
    private MyPagerAdapter2 mAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
        vpager_two = (ViewPager) findViewById(R.id.vpager_two);
        aList = new ArrayList<View>();
        LayoutInflater li = getLayoutInflater();
        aList.add(li.inflate (R.layout.view_one,null,false));
        aList.add(li.inflate(R.layout.view_two,null,false));
        aList.add(li.inflate(R.layout .view_trois, null, false));
        sList = new ArrayList<String>();
        sList.add("橘黄");
        sList.add("淡黄");
sList.add("浅棕");
        mAdapter = new MyPagerAdapter2(aList,sList);
        vpager_two.setAdapter(mAdapter);
    }
}

D'accord, c'est très simple. Si vous avez des questions, téléchargez simplement la démo et vous comprendrez~

Exemple d'utilisation 3 : ViewPager implémente l'effet de TabHost :

Bien sûr, l'exemple 2 n'est souvent qu'une bonne idée mais pas utile. Dans le développement réel, nous devrons peut-être personnaliser cette barre de titre nous-mêmes. Écrivons maintenant un exemple simple pour obtenir l'effet de TabHost si vous ne savez pas ce qu'est TabHost. Si c'est le cas, veuillez consulter les rendus !

Rendements d'opérations :

Implémenter l'analyse logique :

Allons expliquez la logique pour obtenir l'effet ci-dessus, puis collez le code :

Il y a d'abord la mise en page : un LinearLayout en haut, enveloppé dans trois TextViews, avec l'attribut de poids défini sur 1, puis ce qui suit Pour un ImageView d'un curseur, nous définissons la largeur sur match_parent ; le bas est notre ViewPager, qui peut Il y a deux propriétés que vous ne connaissez pas. L'une est : flipInterval : ceci spécifie l'intervalle de temps entre les animations de vue !
Et persistentDrawingCache : définit la stratégie de cache de dessin du contrôle. Il y a quatre valeurs facultatives :
aucun : ne sauvegarde pas le cache de dessin en mémoire ;
animation : Enregistrer uniquement le cache de dessins d'animation ;
défilement : Enregistrer uniquement le cache de dessins d'effet de défilement
tous : tous les caches de dessins doivent être enregistrés en mémoire
peuvent être utilisés ; en même temps 2, animation|défilement comme ça~

Code de mise en page : activity_four.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    outils:context =".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:background="../style/images /android-tutorial-viewpager.html">

        <TextView
           android:id="@+id/tv_one"
            android:layout_width="fill_parent"
             android :layout_height ="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="橘黄"
            android:textColor="#000000 " />

        <TextView
            android:id="@+id/tv_two"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0 "
            android:gravity="center"
            android:text="淡黄"
            android:textColor="#000000" />

        <TextView
            androïde : id="@+id/tv_trois"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="浅棕"
            android:textColor="#000000" />
    </LinearLayout>

    <ImageView
        android:id="@+id/img_cursor"
        android : layout_width= "fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@mipmap/line" />

    <android.support .v4.view.ViewPager
        android:id="@+id/vpager_four"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center" <

Vient ensuite notre activité, réfléchissons-y :
Étape 1 : Nous devons mettre notre bloc mobile en premier Si le texte est centré sous le texte, alors le décalage doit être calculé ici : Obtenez d'abord la largeur de l'image pw, puis la largeur de l'écran sw La méthode de calcul est très simple :
offset (offset) = ((sw / 3)-pw) / 2 //Écran. width/3 -La largeur de l'image, puis divisez-la par 2, à droite ou à gauche !
Ensuite, nous appelons setImageMatrix pour définir la position actuelle du curseur :
En même temps, nous basculons également entre une page et deux pages et calculons la distance de déplacement du curseur :
un = décalage * 2 + pw;
deux = un * 2;
Étape 2 : Lorsque nous faisons glisser la page, notre curseur doit se déplacer, nous devons ajouter un Événement OnPageChangeListener, nous devons porter un jugement sur la page après le glissement et enregistrer la page avant le glissement. Quelle page, j'ai fait un dessin ci-dessous, c'est peut-être plus facile à comprendre !

PS : Cela fait trop longtemps que je n'ai pas écrit. L'écriture est moche, j'aimerais pouvoir la voir clairement, haha~.

Eh bien, si vous n'arrivez toujours pas à le comprendre, vous pouvez simplement le dessiner vous-même. Voici le code :

FourActvitiy.java<. 🎜> :

/**
* Créé par Jay le 2015/10/8 0008.
*/
classe publique FourActivity étend AppCompatActivity implémente View.OnClickListener,
ViewPager.OnPageChangeListener {

private ViewPager vpager_four;
private ImageView img_cursor ;
private TextView tv_one;
private TextView tv_two;
private TextView tv_two;

private ArrayList<View>
private int offset = 0 // Décalage de l'image de la barre mobile;
private int currIndex = 0; //Le numéro de la page actuelle
private int bmpWidth; // La longueur de l'image de la barre mobile
private int one = 0; // La distance de glissement de la barre mobile d'une page
private int two = 0; //La distance parcourue par le curseur entre deux pages

@Override
public void onCreate(Bundle savingInstanceState) {
super.onCreate(savedInstanceState) ;
setContentView(R.layout.activity_four);
initViews();
}

private void initViews() {
vpager_four = (ViewPager) findViewById(R .id.v pager_four );
tv_one = (TextView) findViewById(R.id.tv_one);
tv_two = (TextView) findViewById(R.id.tv_two);
tv_trois = (TextView) findViewById (R.id. tv_trois);
img_cursor = (ImageView) findViewById(R.id.img_cursor);

//Paramètres associés à l'animation soulignée :
bmpWidth = BitmapFactory.decodeResource(getResources ( ), R.mipmap .line).getWidth(); // Récupère la largeur de l'image
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels; //Obtenir la largeur de résolution
offset = (screenW / 3 - bmpWidth) / 2;// Calculer le décalage
Matrix Matrix = new Matrix();
Matrix.postTranslate(offset, 0);
img_cursor.setImageMatrix(matrix) ;/ /Définir la position initiale de l'animation
                                                                                                                                                                                                                                                           //Distance de déplacement 🎜> Deux = un * 2;//Déplacer le décalage des deux pages, par exemple, 1 passe directement à 3

listViews = new ArrayList<View>();
LayoutInflater mInflater = getLayoutInflater();
listViews.add(mInflater.inflate(R.layout.view_one, null, false));
listViews.add( mInflater.inflate(R.layout.view_two, null, false));
listViews.add(mInflater.inflate(R.layout.view_two, null, false));
vpager_four.setAdapter(new MyPagerAdapter(listViews ));
vpager_four.setCurrentItem(0); 🎜> tv_trois.setOnClickListener(this);

vpager_four.addOnPageChangeListener(this);
}

@Override
public void onClick(View v) {
switch (v. getId()) {
case R.id.tv_one :
vpager_four.setCurrentItem(0);
break;
case R .id .tv_two :
                vpager_four.setCurrentItem(1);
                break;
            case R.id.tv_two :
                vpager_four.setCurrentItem(2);
                 pause ;
        }
    }

    @Override
    public void onPageSelected(int index) {
        Animation animation = null;
        switch (index) {
            case 0:
                 si (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
                } else if (currIndex == 2) {
                    animation = new TranslateAnimation(two, 0, 0, 0);
                }
                pause ;
            cas 1 :
                if (currIndex == 0) {
                     animation = new TranslateAnimation(offset, one, 0, 0);
                } else if (currIndex == 2) {
                    animation = new TranslateAnimation(two, one, 0, 0);
                }
                break ;
cas 2 :
if (currIndex == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
else if (curr Index == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
jpg la fin de l'animation Position
animation.setDuration(300); //Définir le temps d'animation sur 300 millisecondes
img_cursor.startAnimation(animation);//Démarrer l'animation
}

@Override
public void onPageScrollStateChanged(int i) {

}

@Override
public void onPageScrolled(int i, float v, int i1) {

}
}

Eh bien, vous n'êtes peut-être pas familier avec l'animation, ce n'est pas grave, nous vous guiderons à travers le prochain chapitre ~

3. exemple

Eh bien, lorsque nous avons expliqué Fragment plus tôt, nous avons expliqué un exemple d'utilisation : Introduction de base au didacticiel Android - 5.2.4 Exemple de fragment - Barre de navigation inférieure + diapositive ViewPager pour changer de page. entrez dans les détails ici. Si vous êtes intéressé, cliquez simplement sur le lien pour y jeter un œil ~

4. Téléchargement d'un exemple de code

ViewPagerDemo.zip

<. 🎜>

Résumé de cette section :

Concernant ViewPager, en raison de contraintes de place, certains endroits ne sont pas mentionnés. Pour d'autres, vous devez consulter la documentation vous-même~

. De plus, comme mentionné ci-dessus, nous aborderons ci-dessous l’animation de ViewPager. Un chapitre à expliquer ! D'accord, c'est tout~

Eh bien, avant la fête nationale, j'avais dit que je terminerais toute la série pendant les vacances de la fête nationale, mais au final je n'ai pas écrit un seul chapitre, je suis vraiment désolé. ... Parce que la fille vient jouer, alors, tu sais~
, je vais accélérer la progression~ et m'efforcer d'avancer le plus vite possible !

← Menu

Utilisation simple de DrawerLayout (menu coulissant latéral officiel) →