Android utilise ViewPager+Implémentation de l'effet de pagination dans la barre de navigation de la page d'accueil avec GridView

Récemment, j'ai essayé d'utiliser ViewPager+GridView est mis en œuvre, semble tout à fait normal, sans perte de temps, voici le code détaillé :

Voici l'effet visuel

D'abord analysons la pensée

1D'abord, comment est le布局：l'ensemble est un ViewPager qui ajoute un GridView en tant que Vue à l'adapter du ViewPager, en bas il y a des points

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#CDCDCD" >
  <RelativeLayout>
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#fff" >
    <android.support.v4.view.ViewPager
      android:id="@"+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
    <LinearLayout
      android:id="@"+id/points"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="10dp"
      android:gravity="center"
      android:orientation="horizontal" />
  </RelativeLayout>
</RelativeLayout>

2.Le fichier de mise en page de l'item ViewPager suivant est GridView (si le niveau supérieur est RelativeLayout ou layout linéaire, etc., une exception de conversion peut survenir)

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android
  android:id="@"+id/gridView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:numColumns="4">
</GridView>

3C'est l'écriture de l'adaptateur GridView, principalement要注意数量 si au total all=10données, au plus par page all=8Si le premier page est le nombre de all=8deuxième2all-max

package com.item.jiejie.adapter;
import java.util.List;
import com.item.jiejie.ProdctBean;
import com.item.jiejie.R;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
/**
 * Adaptateur de chargement de données pour GridView
 * @author Administrator
 *
 */
public class MyGridViewAdpter extends BaseAdapter{
  private Context context;
  private List<ProdctBean> lists;//Source de données
  private int mIndex; // L'indice de la page, indiquant sur quelle page, commence à 0
  private int mPargerSize;// quantité maximale affichée par page
  public MyGridViewAdpter(Context context, List<ProdctBean> lists,
      int mIndex, int mPargerSize) {
    this.context = context;
    this.lists = lists;
    this.mIndex = mIndex;
    this.mPargerSize = mPargerSize;
  }
  /**
   * Vérifiez d'abord si la taille des données est affichée complètement sur la page lists.size() > (mIndex + 1)*mPagerSize
   * Si les conditions sont remplies, ce page affiche le nombre maximum de lists
   * Si le nombre restant n'est pas suffisant pour afficher le nombre maximum de la page, affichez le nombre restant
   */
  @Override
  public int getCount() {
    // TODO Auto-bouchon de méthode généré
    return lists.size() > (mIndex + 1) * mPargerSize &63; 
        mPargerSize : (lists.size() - mIndex*mPargerSize);
  }
  @Override
  public ProdctBean getItem(int arg0) {
    // TODO Auto-bouchon de méthode généré
    return lists.get(arg0 + mIndex * mPargerSize);
  }
  @Override
  public long getItemId(int arg0) {
    // TODO Auto-bouchon de méthode généré
    return arg0 + mIndex * mPargerSize;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-bouchon de méthode généré
    ViewHolder holder = null;
    if(convertView == null){
      holder = new ViewHolder();
      convertView = View.inflate(context, R.layout.item_view, null);
      holder.tv_name = (TextView)convertView.findViewById(R.id.item_name);
      holder.iv_nul = (ImageView)convertView.findViewById(R.id.item_image);
      convertView.setTag(holder);
    }else {
      holder = (ViewHolder)convertView.getTag();
    }
    //Redéfinir position car ce que l'on obtient est toujours le jeu de données, les données sont chargées en page par page sur le GridView
    final int pos = position + mIndex * mPargerSize;//Hypothèse mPageSiez
    //Hypothèse mPagerSize=8，si vous cliquez sur la deuxième page (c'est-à-dire mIndex=1）au deuxième emplacement de l'item(position=1), alors la position réelle de cet item est pos=9
    holder.tv_name.setText(lists.get(pos).getName() + "
    holder.iv_nul.setImageResource(lists.get(pos).getUrl());
    //Ajouter l'écouteur d'événement de l'élément
//    convertView.setOnClickListener(new View.OnClickListener() {
//      
//      @Override
//      public void onClick(View arg0) {
//        // TODO Auto-bouchon de méthode généré
//        Toast.makeText(context, "Vous avez cliqué sur" + lists.get(pos).getName(), Toast.LENGTH_SHORT).show();
//      }
//    });
    return convertView;
  }
  static class ViewHolder{
    private TextView tv_name;
    private ImageView iv_nul;
  }
}

4.Voici l'événement de clic sur GridView2Cette méthode consiste à traiter l'événement de clic sur le layout dans l'adaptateur ; la deuxième méthode consiste à traiter avec Object obj = gridView.getItemAtPosition(position);.

5.Le programme principal ajoutera GridView en tant que View au ViewPager, le code est le suivant

package com.item.jiejie;
import java.util.ArrayList;
import java.util.List;
import com.item.jiejie.adapter.MyGridViewAdpter;
import com.item.jiejie.adapter.MyViewPagerAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget(AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
/**
 * réaliser l'effet de pagination du layout de navigation de la page d'accueil de Meituan 
 * @author Administrator
 *
 */
public class MyActivity extends Activity {
  private ViewPager viewPager;
  private LinearLayout group;//indicateur de point rond
  private ImageView[] ivPoints;//ensemble d'images de points petits
  private int totalPage; //total de pages
  private int mPageSize = 8; //quantité maximale affichée par page
  private List<ProdctBean> listDatas;//source de données totale
  private List<View> viewPagerList;//ajouter GridView en tant qu'objet View à la collection ViewPager
  //private int currentPage;//page actuelle
  private String[] proName = {"Nom0","Nom"1","Nom"2","Nom"3","Nom"4","Nom"5",
      "Nom"6","Nom"7","Nom"8","Nom"9","Nom"10","Nom"11","Nom"12","Nom"13",
      "Nom"14","Nom"15","Nom"16","Nom"17","Nom"18","Nom"19"};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-bouchon de méthode généré
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    //initialiser les contrôles
    initView();
    //ajouter la logique métier
    initData();
  }
  private void initView() {
    // TODO Auto-bouchon de méthode généré
    viewPager = (ViewPager)findViewById(R.id.viewpager);
    group = (LinearLayout)findViewById(R.id.points);
    listDatas = new ArrayList<ProdctBean>();
    for(int i =0 ; i < proName.length; i++){
      listDatas.add(new ProdctBean(proName[i], R.drawable.iv_driving));
    }
  }
  private void initData() {
    // TODO Auto-bouchon de méthode généré
    //Le nombre total de pages est arrondi au supérieur
    totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
    viewPagerList = new ArrayList<View>();
    for(int i = 0; i < totalPage; i++){
      //Chaque page est infaltée pour créer une nouvelle instance
      final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null);
      gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize));
      //Ajouter un écouteur d'événement de clic sur l'élément
      gridView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<63;> arg0, View arg1,
            int position, long arg3) {
          // TODO Auto-bouchon de méthode généré
          Object obj = gridView.getItemAtPosition(position);
          if(obj != null && obj instanceof ProdctBean){
            System.out.println(obj);
            Toast.makeText(MyActivity.this, ((ProdctBean)obj).getName(), Toast.LENGTH_SHORT).show();
          }
        }
      });
      //Chaque GridView est ajouté comme objet View à la collection ViewPager      
      viewPagerList.add(gridView);
    }
    //Définir l'adaptateur ViewPager
    viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
    //Ajouter les points de repère
    ivPoints = new ImageView[totalPage];
    for(int i = 0; i < totalPage; i++){
      //Ajouter les points en boucle
      ivPoints[i] = new ImageView(this);
      if(i==0){
        ivPoints[i].setImageResource(R.drawable.page_focuese);
      }else {
        ivPoints[i].setImageResource(R.drawable.page_unfocused);
      }
      ivPoints[i].setPadding(8, 8, 8, 8);
      group.addView(ivPoints[i]);
    }
    //Configurer l'écouteur de défilement du ViewPager, principalement pour changer la couleur de fond des points
    viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
      @Override
      public void onPageSelected(int position) {
        // TODO Auto-bouchon de méthode généré
        //currentPage = position;
        for(int i=0 ; i < totalPage; i++){
          if(i == position){
            ivPoints[i].setImageResource(R.drawable.page_focuese);
          }else {
            ivPoints[i].setImageResource(R.drawable.page_unfocused);
          }
        }
      }
    });
  }
}

6.Code de l'Adapter de ViewPage

package com.item.jiejie.adapter;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * Adapter de ViewPage
 * @author Administrator
 *
 */
public class MyViewPagerAdapter extends PagerAdapter{
  private List<View> viewList;//View est vingt GridView
  public MyViewPagerAdapter(List<View> viewList) {
    this.viewList = viewList;
  }
  @Override
  public int getCount() {
    // TODO Auto-bouchon de méthode généré
    return viewList!=null63; viewList.size() : 0;
  }
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-bouchon de méthode généré
    return arg0 == arg1;
  }
  /**
   * Ajoutez la Vue actuelle au conteneur ViewGroup
   * Cette méthode, return un objet, cet objet indique quel objet le PagerAdapter adaptateur sélectionne pour placer sur la VuePage actuelle
   */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // TODO Auto-bouchon de méthode généré
    container.addView(viewList.get(position));
    return viewList.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // TODO Auto-bouchon de méthode généré
     container.removeView((View) object);
  }
}

Voici la totalité du contenu de cet article, j'espère qu'il vous aidera dans vos études, et j'espère que vous soutiendrez également le tutoriel à cri

Déclaration : le contenu de cet article est tiré du réseau, propriété des auteurs respectifs, le contenu est apporté par les utilisateurs d'Internet de manière volontaire et téléchargé par eux-mêmes. Le site Web ne détient pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu présumé violer les droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, le site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.)