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、二つ目は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 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-生成されたメソッドスタブ
    return lists.size() > (mIndex + 1) * mPargerSize &63; 
        mPargerSize : (lists.size() - mIndex*mPargerSize);
  }
  @Override
  public ProdctBean getItem(int arg0) {
    // TODO Auto-生成されたメソッドスタブ
    return lists.get(arg0 + mIndex * mPargerSize);
  }
  @Override
  public long getItemId(int arg0) {
    // TODO Auto-生成されたメソッドスタブ
    return arg0 + mIndex * mPargerSize;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-生成されたメソッドスタブ
    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();
    }
    //データソースがページごとにGridViewにロードされるため、取得するのは常にデータソースであり、positionを再確認する必要があります
    final int pos = position + mIndex * mPargerSize;//仮にmPageSiez
    //仮にmPagerSize=8、もし2ページ目（mIndex=1）の2番目の位置item(position=1それでは、このitemの実際の位置はpos=9
    holder.tv_name.setText(lists.get(pos).getName() + "",
    holder.iv_nul.setImageResource(lists.get(pos).getUrl());
    //アイテムリスナーを追加
//    convertView.setOnClickListener(new View.OnClickListener() {
//      
//      @Override
//      public void onClick(View arg0) {
//        // TODO Auto-生成されたメソッドスタブ
//        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 = {"名称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-生成されたメソッドスタブ
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    //コントロールの初期化
    initView();
    //業務ロジックを追加
    initData();
  }
  private void initView() {
    // TODO Auto-生成されたメソッドスタブ
    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-生成されたメソッドスタブ
    //総ページ数を上に丸める
    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<63;> arg0, View arg1,
            int position, long arg3) {
          // TODO Auto-生成されたメソッドスタブ
          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-生成されたメソッドスタブ
        //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 Auto-生成されたメソッドスタブ
    return viewList!=null63; viewList.size() : 0;
  }
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-生成されたメソッドスタブ
    return arg0 == arg1;
  }
  /**
   * 現在の View を ViewGroup コンテナに追加します。
   * このメソッドは、PagerAdapter アダプタが現在の ViewPage 上にどのオブジェクトを選択するかを示すオブジェクトを return します。
   */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // TODO Auto-生成されたメソッドスタブ
    container.addView(viewList.get(position));
    return viewList.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // TODO Auto-生成されたメソッドスタブ
     container.removeView((View) object);
  }
}

これで本文のすべてが終わり、皆さんの学習に役立つことを願っています。また、呐喊教程を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害が疑われる内容がある場合は、メールを送信して：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいと、本サイトは即座に侵害される内容を削除します。）