Realizzazione del layout di navigazione della pagina iniziale con ViewPager+GridView in Android

Recentemente ho provato a implementare usando ViewPager + GridView, sembra tutto normale, senza dilungarmi, ecco il codice dettagliato:

Come illustrato nell'immagine è l'effetto visivo

　

Prima di tutto analizziamo il ragionamento

1. Prima di tutto come è il layout: l'intero layout è un ViewPager che aggiunge un GridView come View all'adapter del ViewPager, sotto ci sono i punti

<?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. Subito dopo viene utilizzato come layout dell'item del ViewPager del GridView (se il livello più esterno è un RelativeLayout o un layout lineare, ecc., può verificarsi un'eccezione di conversione)

<?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>

3. La scrittura dell'adattatore per GridView, è necessario prestare attenzione al numero di dati, se ci sono in totale all=10 dati, e ogni pagina può avere un massimo di max=8 dati, la prima pagina sarà max=8, la seconda pagina sarà all-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;
/**
 * Adattatore per il caricamento dei dati di GridView
 * @author Administrator
 *
 */
public class MyGridViewAdpter extends BaseAdapter{
  private Context context;
  private List<ProdctBean> lists;// Sorgente dei dati
  private int mIndex; // Indice della pagina, indica la pagina corrente, inizia da 0
  private int mPargerSize;// Il numero massimo di elementi visualizzati per pagina
  public MyGridViewAdpter(Context context, List<ProdctBean> lists,
      int mIndex, int mPargerSize) {
    this.context = context;
    this.lists = lists;
    this.mIndex = mIndex;
    this.mPargerSize = mPargerSize;
  }
  /**
   * Prima di determinare se i dati riempiono completamente la pagina, lista.size() > (mIndex + 1)*mPagerSize
   * Se soddisfa, questa pagina visualizzerà il numero massimo di elementi della lista lists
   * Se non è sufficiente per visualizzare il numero massimo di pagine, visualizza quante ne mancano
   */
  @Override
  public int getCount() {
    // TODO metodo stub generato automaticamente
    return lists.size() > (mIndex + 1) * mPargerSize ? 
        mPargerSize : (lists.size() - mIndex*mPargerSize);
  }
  @Override
  public ProdctBean getItem(int arg0) {
    // TODO metodo stub generato automaticamente
    return lists.get(arg0 + mIndex * mPargerSize);
  }
  @Override
  public long getItemId(int arg0) {
    // TODO metodo stub generato automaticamente
    return arg0 + mIndex * mPargerSize;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO metodo stub generato automaticamente
    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();
    }
    //ridetermina position perché si riceve sempre il sorgente dati, il sorgente dati è caricato in pagine al GridView di ogni pagina
    final int pos = position + mIndex * mPargerSize;//supponiamo che mPageSiez
    //supponiamo che mPagerSize=8, se si clicca sul secondo pagina (cioè mIndex=1) sul secondo posizione item(position=1), allora la posizione effettiva di questo item è pos=9
    holder.tv_name.setText(lists.get(pos).getName() + "");
    holder.iv_nul.setImageResource(lists.get(pos).getUrl());
    //aggiungi ascoltatore item
//    convertView.setOnClickListener(new View.OnClickListener() {
//}}      
//      @Override
//      public void onClick(View arg0) {
//        // TODO Auto-generated method stub
//        Toast.makeText(context, "您点击了" + lists.get(pos).getName(), Toast.LENGTH_SHORT).show();
//      }
//    });
    return convertView;
  }
  static class ViewHolder{
    private TextView tv_name;
    private ImageView iv_nul;
  }
}

4. GridView的点击事件这里提供2种方法一种是在适配器用布局的点击事件来处理；第二种是Object obj = gridView.getItemAtPosition(position);来处理。

5. 主程序将GridView作为View添加到ViewPager中 代码如下

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;
/**
 * 实现仿美团首页导航栏布局分页效果 
 * @author Administrator
 *
 */
public class MyActivity extends Activity {
  private ViewPager viewPager;
  private LinearLayout group;//圆点指示器
  private ImageView[] ivPoints;//小圆点图片的集合
  private int totalPage; //总的页数
  private int mPageSize = 8; //每页显示的最大的数量
  private List<ProdctBean> listDatas;//总的数据源
  private List<View> viewPagerList;//GridView作为一个View对象添加到ViewPager集合中
  //private int currentPage;//当前页
  private String[] proName = {"Nome0","Nome1","Nome2","Nome3","Nome4","Nome5",
      "Nome6","Nome7","Nome8","Nome9","Nome10","Nome11","Nome12","Nome13",
      "Nome14","Nome15","Nome16","Nome17","Nome18","Nome19"};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO metodo stub generato automaticamente
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    //初始化控件
    initView();
    //添加业务逻辑
    initData();
  }
  private void initView() {
    // TODO metodo stub generato automaticamente
    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 metodo stub generato automaticamente
    //il numero totale di pagine viene arrotondato per eccesso
    totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
    viewPagerList = new ArrayList<View>();
    per(int i = 0; i < totalPage; i++){
      //ogni pagina è una nuova istanza generata da inflate
      final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null);
      gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize));
      //aggiungi l'ascoltatore di click degli elementi
      gridView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1,
            int position, long arg3) {
          // TODO metodo stub generato automaticamente
          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();
          }
        }
      });
      //ogni GridView viene aggiunto come oggetto View alla raccolta ViewPager      
      viewPagerList.add(gridView);
    }
    //imposta l'adattatore ViewPager
    viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
    //aggiungi i punti circolari
    ivPoints = new ImageView[totalPage];
    per(int i = 0; i < totalPage; i++){
      //循环加入点点图片组
      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]);
    }
    //设置ViewPager的滑动监听，主要是设置点点的背景颜色的改变
    viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
      @Override
      public void onPageSelected(int position) {
        // TODO metodo stub generato automaticamente
        //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.ViewPage的适配器代码

package com.item.jiejie.adapter;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * ViewPage的适配器
 * @author Administrator
 *
 */
public class MyViewPagerAdapter extends PagerAdapter{
  private List<View> viewList;//View就是二十GridView
  public MyViewPagerAdapter(List<View> viewList) {
    this.viewList = viewList;
  }
  @Override
  public int getCount() {
    // TODO metodo stub generato automaticamente
    return viewList != null ? viewList.size() : 0;
  }
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {}}
    // TODO metodo stub generato automaticamente
    return arg0 == arg1;
  }
  /**
   * Aggiunge la View corrente al container ViewGroup
   * Questo metodo, return un oggetto, questo oggetto indica quale oggetto ilPagerAdapter adaptere seleziona per essere messo sul ViewPage corrente
   */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // TODO metodo stub generato automaticamente
    container.addView(viewList.get(position));
    return viewList.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // TODO metodo stub generato automaticamente
     container.removeView((View) object);
  }
}

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente la guida urla.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.