استخدام ViewPager + GridView لتحقيق تأثير التصفح في لوحة التوجيه الرئيسية في Android

最近我尝试使用ViewPager+GridView实现的，看起来一切正常，废话不多说，具体代码如下：

如图是效果图

　

首先分析下思路

1.首先是怎么布局：整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中，下方是圆点

<?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.接下来时作为ViewPager的item布局文件GridView，（如果最外层是RelativeLayout或线型布局等，会转换异常）

<?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. كتابة واجهة التكيف لـ GridView، يجب الانتباه إلى عدد البيانات إذا كان هناك إجمالي all=10 سطراً، وأقصى عدد max=8 سطراً في كل صفحة، فإن الصفحة الأولى ستكون عدد max=8، والصفحة الثانية ستكون 2 سطراً 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;
/**
 * واجهة تحميل البيانات لـ GridView
 * @author Administrator
 *
 */
public class MyGridViewAdpter extends BaseAdapter{
  private Context السياق;
  private List<ProdctBean> القائمة; // مصدر البيانات
  private int معامل_الصف; // مؤشر الصفحة، يشير إلى الصفحة التي يتم عرضها، تبدأ من 0
  private int حجم_القطعة; // أقصى عدد الصفحات التي يتم عرضها في كل صفحة
  public MyGridViewAdpter(السياق السياق, List<ProdctBean> القائمة,
      int معامل_الصف, int حجم_القطعة) {
    هذا.السياق = السياق;
    هذا.القائمة = القائمة;
    هذا.معامل_الصف = معامل_الصف;
    هذا.حجم_القطعة = حجم_القطعة;
  }
  /**
   * أولاً، قم بتحديد ما إذا كان حجم البيانات أكبر من حجم الصفحة lists.size() > (معامل_الصف + 1)* حجم_الصفحة
   * إذا كان هناك ما يكفي، فإن الصفحة ستعرض أقصى عدد الصفحات من قائمة lists
   * إذا لم يكن هناك ما يكفي لعرض أقصى عدد الصفحات، فإن العدد المتبقي سيتم عرضه
   */
  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    هل حجم_القائمة > (معامل_الصف + 1) * حجم_القطعة ? 
        حجم_القطعة : (حجم_القائمة - معامل_القطعة * حجم_القطعة);
  }
  @Override
  public ProdctBean getItem(int arg0) {
    // TODO Auto-generated method stub
    return lists.get(arg0 + mIndex * mPargerSize);
  }
  @Override
  public long getItemId(int arg0) {
    // TODO Auto-generated method stub
    return arg0 + mIndex * mPargerSize;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    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();
    }
    //تحديد position مرة أخرى لأننا نحصل دائمًا على المصدر البيانات، والمصدر البيانات يتم تحميله على شكل صفحات إلى Gridview لكل صفحة
    final int pos = position + mIndex * mPargerSize;//افتراض mPageSiez
    //افتراض mPagerSize=8، إذا كان النقر على الصفحة الثانية (i.e. mIndex=1) في الموضع الثاني item(position=1)، فإن موقع هذا العنصر الفعلي سيكون pos=9
    holder.tv_name.setText(lists.get(pos).getName() + "");
    holder.iv_nul.setImageResource(lists.get(pos).getUrl());
    //إضافة استماع إلى عنصر 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: الطريقة الأولى هي استخدام أحداث النقر في التكيفر (Adapter) باستخدام التخطيط، والطريقة الثانية هي باستخدام Object obj = gridView.getItemAtPosition(position);

5. البرنامج الرئيسي يضيف GridView كعرض إلى 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;
/**
 * تحقيق تصميم شريط التصفح الرئيسي لموقع Meituan مع تأثير الصفحة التالية 
 * @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 = {"اسم0","اسم1","اسم2","اسم3","اسم4","اسم5",
      "اسم6","اسم7","اسم8","اسم9","اسم10","اسم11","اسم12","اسم13",
      "اسم14","اسم15","اسم16","اسم17","اسم18","اسم19"};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    //初始化控件
    initView();
    //添加业务逻辑
    initData();
  }
  private void initView() {
    // TODO Auto-generated method stub
    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-generated method stub
    //عدد الصفحات الإجمالي يتم رفعه للأعلى
    totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
    viewPagerList = new ArrayList<View>();
    لـ(int i = 0; i < totalPage; i++) {
      //كل صفحة هي إنشاء نموذج جديد
      final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null);
      gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize));
      //إضافة استماع إلى النقر على العنصر
      gridView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1,
            int position, long arg3) {
          // TODO Auto-generated method stub
          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();
          }
        }
      });
      //كل GridView كـ View يتم إضافته إلى مجموعة ViewPager      
      viewPagerList.add(gridView);
    }
    //ضبط مزامنة ViewPager
    viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
    //إضافة نقاط صغيرة
    ivPoints = new ImageView[totalPage];
    لـ(int i = 0; i < totalPage; i++) {
      //Loop to add dot images to the group
      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]);
    }
    //Set the ViewPager sliding listener, mainly to change the background color of the dots
    viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
      @Override
      public void onPageSelected(int position) {
        // TODO Auto-generated method stub
        //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 for ViewPage adapter

package com.item.jiejie.adapter;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * Adapter for ViewPage
 * @author Administrator
 *
 */
public class MyViewPagerAdapter extends PagerAdapter{
  private List<View> viewList;//View is a kind of GridView
  public MyViewPagerAdapter(List<View> viewList) {
    this.viewList = viewList;
  }
  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return viewList!=null ? viewList.size() : 0;
  }
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {}}
    // TODO Auto-generated method stub
    return arg0 == arg1;
  }
  /**
   * يضيف الفئة الحالية إلى وحدة ViewGroup
   * هذا النهج،يعود بفئة،والفئة تعبر عن ما إذا كان PagerAdapter الموجه يختار أي فئة لوضعها في ViewPage الحالي
   */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // TODO Auto-generated method stub
    container.addView(viewList.get(position));
    return viewList.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // TODO Auto-generated method stub
     container.removeView((View) object);
  }
}

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أن تدعموا دليل النقاهة بزيادة.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع صاحب الحقوق الأصلية، ويتم إضافة المحتوى من قبل مستخدمي الإنترنت بشكل متعاون، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) للإبلاغ، وتقديم الدليل المتعلق، إذا تم التحقق من ذلك، فإن هذا الموقع سيزيل محتوى يشتبه في حقوق النسخ على الفور.