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

/**
 * 实现仿美团首页导航栏布局分页效果
 * @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.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, int position, Object object) {
    // TODO Auto-generated method stub
     container.removeView((View) object);
  }
}

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

(0)

相关推荐

  • Android ViewPager制作新手导航页(动态加载)

    我们来讲个老生常谈的话题,估计大家都用过的->ViewPager,用它来做新手导航页面,虽然这次也是讲这个,但是和以往的用法可能有些不同,大家都看到标题进来的,应该知道的是:动态加载指示器. 什么叫动态加载呢,是不是感觉很高大上呢,其实呢就是动态的去加载指示器的数量的,而不是在布局文件中写死.希望看了这篇文章大家对ViewPager有新的认识. 看到这个效果大家应该都很不屑吧,今天讲这个就是为了让大家有新的认识.好了,好好听,开始了. 这个动态加载就是为了动态的加载下面的灰色圆点指示器和红色圆点

  • Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    前言 在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout.TabHost+Fragment.FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐.然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多

  • ViewPager顶部导航栏联动效果(标题栏条目多)

    如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&

  • Android动态给ViewPager添加Indicator导航

    先看下效果 小圆点的形状和颜色都是可以自己定义的,看需求 首先第一步,滑2个圆点,一个是选中后的圆点,一个是未选中的圆点,看选中的圆点shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > &l

  • Android 中 TabHost与ViewPager结合实现首页导航效果

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就不过多解释了,说几点需要注意的问题 1:TabHost .TabWidget.FrameLayout一定添加id这个属性,否则会报错 android:id="@android:id/tabhost" android:id="@android:id/tabcontent"

  • Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

  • Android ViewPager导航小圆点实现无限循环效果

    之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝.头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能. 其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了.另外一点需要注

  • Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)

    ViewPagerIndicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator 自定义一个Indicator继承LinearLayout,在构造方法里面设置画笔的一些属性 public ViewPagerIndicator(Context context, AttributeSet

  • Android使用ViewPager实现导航

    首先先了解ViewPager实现的出效果是能够使视图左右滑动. ViewPager在XML文件中的声明和其他一些控件的声明有点儿不一样 而android.support.v4.view是Android界面特殊效果的第三方加载的jar包,能够向下兼容. <android.support.v4.view.ViewPager ... ... > </android.support.v4.view.ViewPager> 加载显示的页卡:需要将layout布局文件转型为View对象 (1)

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

    最近我尝试使用ViewPager+GridView实现的,看起来一切正常,废话不多说,具体代码如下: 如图是效果图 首先分析下思路 1.首先是怎么布局:整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中,下方是圆点 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • ViewPager+Fragment实现侧滑导航栏

    本文实例为大家分享了ViewPager+Fragment实现侧滑导航栏的具体代码,供大家参考,具体内容如下 本文主要整理和记录下 本来想用Gif图片,这里暂时就用图片代替下吧: Activity: package com.example.administrator.android006; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.su

  • android中Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activity_mian.xml定义布局,整个布局的外面是线性布局,上面是帧布局切换不同的Fragment,底下是RadioGroup嵌套的是RadioButton.代码如下所示: <?xml version="1.0" encoding="utf-8"?> <Li

  • Android Fragment实现顶部、底部导航栏

    前言 无论是顶部还是底部导航栏,都是大多数APP的标配,网络上的相关实现教程也非常之多.最近回忆起以前写的小项目,发现对这块内容有些遗忘,不妨就再整理一遍代码逻辑,记录下来,方便日后查阅(指复制粘贴). 实现的方式有很多,本文采用以下方式实现: 底部导航栏:Fragment + BottomNavigationView 顶部导航栏:Fragment + ViewPager2 + TabLayout 底部导航栏 <布局文件> <?xml version="1.0" en

  • Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦. ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,上面是效果图,用美女图片是我一贯的作风,呵呵  1.    首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&qu

  • Android 沉浸式状态栏与隐藏导航栏实例详解

    1 前言 一般我们在Android的APP开发中,APP的界面如下: 可以看到,有状态栏.ActionBar(ToolBar).导航栏等,一般来说,APP实现沉浸式有三种需求:沉浸式状态栏,隐藏导航栏,APP全屏 沉浸式状态栏是指状态栏与ActionBar颜色相匹配, 隐藏导航栏不用多说,就是将导航栏隐藏,去掉下面的黑条. APP全屏是指将状态栏与导航栏都隐藏,例如很多游戏界面,都是APP全屏. 所以,在做这一步时,关键要问清楚产品狗的需求,免得白费功夫. 下面,分别来介绍这三种方式的实现. 2

  • Android利用ViewPager实现用户引导界面效果的方法

    本文实例讲述了Android利用ViewPager实现用户引导界面效果.分享给大家供大家参考,具体如下: 我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍, 例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置. 今天我就来实现这么个功能 所实现的功能: 1.可以左右滑动功能图片. 2.图片的索引 看出当前图片所在的位置. 3.可循环滑动. 4.图片的索引带有动画效果. 本次学习主要是利用ViewPager实现用户引导界面 在这里,我

  • android 全屏去掉底部虚拟导航栏的方法

    如下所示: @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATIO

随机推荐