Android 는 ViewPager+GridView 를 이용 하여 첫 페이지 내 비게 이 션 표시 줄 레이아웃 페이지 효과 구현

최근 에 저 는 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 이 고 두 번 째 는 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 context;
  private List<ProdctBean> lists;//   
  private int mIndex; //     ，     ， 0  
  private int mPargerSize;//           
  
  
  
  public MyGridViewAdpter(Context context, List<ProdctBean> lists,
      int mIndex, int mPargerSize) {
    this.context = context;
    this.lists = lists;
    this.mIndex = mIndex;
    this.mPargerSize = mPargerSize;
  }

  /**
   *                 lists.size() > (mIndex + 1)*mPagerSize
   *     ，          lists   
   *              ，           
   */
  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return lists.size() > (mIndex + 1) * mPargerSize ? 
        mPargerSize : (lists.size() - mIndex*mPargerSize);
  }

  @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，         （ mIndex=1）       item(position=1),    item       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 의 클릭 이 벤트 는 어댑터 에서 레이아웃 의 클릭 이벤트 로 처리 하 는 두 가지 방법 을 제공 합 니 다.두 번 째 는 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 = {"  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>();
    for(int i = 0; i < totalPage; i++){
      //      inflate      
      final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null);
      gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize));
      //  item    
      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];
    for(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 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.View Page 의 어댑터 코드

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 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;
  }
  /**
   *     View   ViewGroup   
   *     ，return    ，       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);
  }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.