最近我尝试使用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);
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍Android 中 TabHost与ViewPager结合实现首页导航效果,包括了Android 中 TabHost与ViewPager结合实现首页导航效果的使用技巧和注意事项,需要的朋友参考一下 今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性; 先上效果图,如下: 代码里
本文向大家介绍javascript实现导航栏分页效果,包括了javascript实现导航栏分页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现导航栏分页效果的具体代码,供大家参考,具体内容如下 1、结构搭建HTML代码 2、页面修饰的css样式代码 3、js代码 4、效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍Android分页中显示出下面翻页的导航栏的布局实例代码,包括了Android分页中显示出下面翻页的导航栏的布局实例代码的使用技巧和注意事项,需要的朋友参考一下 当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml 逻辑文件,实现分页显示,页面的跳转,页数的显示,数据的删除
本文向大家介绍Android利用GridView实现单选效果,包括了Android利用GridView实现单选效果的使用技巧和注意事项,需要的朋友参考一下 1.实现如图所示的单选效果 由于Android提供的单选按钮radiobutton只能单行或单列显示,且样式并不美观,故可用GridView进行改造,实现单选效果,而要实现这样的效果重点就在GridView的适配器这块了。 首先是GridVie
本文向大家介绍使用Fragment+ViewPager实现底部导航栏,包括了使用Fragment+ViewPager实现底部导航栏的使用技巧和注意事项,需要的朋友参考一下 前几天准备写一个小程序,一直认为fragment实现底部导航栏,是很容易的事情,可是却遇到了前所未有的问题,先给大家贴出来我出错的界面布局代码: 这个布局实现的效果如下: 只看效果,大家觉得挺好的,但是重要的问题来了。 下面的r
本文向大家介绍js实现淘宝首页的banner栏效果,包括了js实现淘宝首页的banner栏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js淘宝首页banner栏展示的具体代码,供大家参考,具体内容如下 CSS: js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。