Android   发布时间:2022-04-28  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Android 利用ViewPager+GridView实现首页导航栏布局分页效果大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

如图是效果

 

Android 利用ViewPager+GridView实现首页导航栏布局分页效果

首先分析下思路

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

@H_607_20@ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://scheR_371_11845@as.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或线型布局等,会转换异常)

@H_607_20@ <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://scheR_371_11845@as.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-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的点击事件这里提供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;

/**
 * 实现仿@L_489_22@@L_944_23@导航栏布局分页效果 
 * @author Administrator
 *
 */
public class MyActivity extends Activity {
  private ViewPager viewPager;
  private LinearLayout group;//圆点指示器
  private ImageView[] ivPoints;//小圆点图片的集合
  privatE int @R_137_10586@lPage; //总的页数
  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
    //总的页数向上取整
    @R_137_10586@lPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSizE);
    viewPagerList = new ArrayList<View>();
    for(int i = 0; i < @R_137_10586@lPage; 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[@R_137_10586@lPage];
    for(int i = 0; i < @R_137_10586@lPage; 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);
      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 < @R_137_10586@lPage; 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-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,Object object) {
    // TODO Auto-generated method stub
     container.removeView((View) object);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

大佬总结

以上是大佬教程为你收集整理的Android 利用ViewPager+GridView实现首页导航栏布局分页效果全部内容,希望文章能够帮你解决Android 利用ViewPager+GridView实现首页导航栏布局分页效果所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:导航栏