实现美团宫格导航ViewPager+GridView
2016-05-31 11:15
411 查看
本人新手,但是对安卓开发情有独钟
最近在开发一款社区的APP,之前客户有定好需求,但是不知道后面为什么又改了,其中有一个就是要做想美团一样的宫格导航,于是笔者昨晚弄出一个demo,主要用于学习。做出来效果还不错。现在来秀一秀源码。
布局文件:
activity_main.xml:
ViewPager_GridView_Adapter.java:
ViewPager_GV_ItemAdapter.java:
小弟刚开始学些博客,所以还有很多要学习的地方,刚开始只会罗列代码,所以有需要改进的地方希望大家多多提意见,小弟一定多家改正!!!
最近在开发一款社区的APP,之前客户有定好需求,但是不知道后面为什么又改了,其中有一个就是要做想美团一样的宫格导航,于是笔者昨晚弄出一个demo,主要用于学习。做出来效果还不错。现在来秀一秀源码。
布局文件:
activity_main.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <android.support.v4.view.ViewPager android:id="@+id/vPager" android:layout_width="match_parent" android:layout_height="232dp" android:background="#ff0000" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/ll_dots" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginTop="200dp" android:gravity="center" android:orientation="horizontal" > </LinearLayout> </FrameLayout>channel_gridview_item.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" > <!-- ViewPager每页GridView 的Item的布局 --> <ImageView android:id="@+id/iv_gv_item_icon" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/tv_gv_item_Name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="end"/> </LinearLayout>channel_viewpage_gridview.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" > <!-- 每个页面的GridView --> <GridView android:id="@+id/vp_gv" android:layout_width="match_parent" android:layout_height="match_parent" android:horizontalSpacing="10dp" android:verticalSpacing="10dp" android:gravity="center"> </GridView> </LinearLayout>InfoBean.java:
package com.example.grid_pager; import java.util.ArrayList; import java.util.Collections; import java.util.List; import android.graphics.drawable.Drawable; import android.view.View; /** * * @author Administrator * 这是用于显示item的bean,朋友们可以根据自己的需求修改。 * * */ public class InfoBean implements Comparable<InfoBean>{ private int id; private String name; private Drawable icon; private String iconUrl; private int iconID; private String describtion; private int type; // 排序标记 private int order; private onGridViewItemClickListener onClickListener; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Drawable getIcon() { return icon; } public void setIcon(Drawable icon) { this.icon = icon; } public String getIconUrl() { return iconUrl; } public void setIconUrl(String iconUrl) { this.iconUrl = iconUrl; } public int getIconID() { return iconID; } public void setIconID(int iconID) { this.iconID = iconID; } public String getDescribtion() { return describtion; } public void setDescribtion(String describtion) { this.describtion = describtion; } public int getType() { return type; } public void setType(int type) { this.type = type; } public int getOrder() { return order; } public void setOrder(int order) { this.order = order; } public InfoBean(String name, int iconID, int order) { super(); this.name = name; this.iconID = iconID; this.order = order; } public InfoBean() { super(); } @Override public int compareTo(InfoBean another) { if (another != null) { if (this.getOrder() > another.getOrder()) { return 1; } else { return -1; } } else { return 0; } } public onGridViewItemClickListener getOnClickListener() { return onClickListener; } public void setOnClickListener(onGridViewItemClickListener onClickListener) { this.onClickListener = onClickListener; } //得到排序的List public static ArrayList<InfoBean> getOrderList(ArrayList<InfoBean> list) { Collections.sort(list); return list; } //item点击监听接口 public interface onGridViewItemClickListener { public abstract void ongvItemClickListener(View v); } }
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">MainActivity.java:</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="java">package com.example.grid_pager; import java.util.ArrayList; import com.example.grid_pager.adapter.ViewPager_GV_ItemAdapter; import com.example.grid_pager.adapter.ViewPager_GridView_Adapter; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.util.Log; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.WindowManager; 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 *程序步骤: * 1.准备要显示的数据 * 2.加载视图 * 2.1加载下面显示页的小圆点 * 2.2显示小圆点的位置 * 3.设置ViewPager的Adapter * 4.设置每页的GridView的Adapter */ public class MainActivity extends Activity { //准备数据 ArrayList<InfoBean> list=null; InfoBean info=null; ViewPager viewPager; LinearLayout ll_dots; private ImageView[] dots; /** ViewPager页数 */ private int viewPager_size; //当前页 private int currentIndex; //gridView 页面item的数量 int pageItemCount; //页面的宽高 int width; int height; //保存每个GridView的视图 ArrayList<View> viewlist=null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WindowManager wm=(WindowManager)this.getSystemService(this.WINDOW_SERVICE); width=wm.getDefaultDisplay().getWidth(); height=wm.getDefaultDisplay().getHeight(); Log.e("width", width+""); Log.e("height", height+""); list=getData(); Log.e("size", list.size()+""); //初始化视图 initView(); } private void initView() { viewPager=(ViewPager) findViewById(R.id.vPager); ll_dots=(LinearLayout) findViewById(R.id.ll_dots); initDots(); setAdapter(); } private void setAdapter() { viewlist=new ArrayList<View>(); for(int i=0;i<viewPager_size;i++){ viewlist.add(getGridViewItem(i)); //36 } viewPager.setAdapter(new ViewPager_GridView_Adapter(viewlist)); } //每个GridView页面中的布局 private View getGridViewItem(int index) { LayoutInflater inflater=(LayoutInflater) this.getSystemService(this.LAYOUT_INFLATER_SERVICE); View layout=inflater.inflate(R.layout.channel_viewpage_gridview, null); GridView gridView=(GridView) layout.findViewById(R.id.vp_gv); int col=(width/160) >2 ?(width/160):3; Log.e("col", col+"");//3 4 gridView.setNumColumns(col); //每个页面的adapter ViewPager_GV_ItemAdapter adapter=new ViewPager_GV_ItemAdapter(this, list, index, pageItemCount); gridView.setAdapter(adapter); //设置gridView中点击Item事件 gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this, position + currentIndex * pageItemCount+"", Toast.LENGTH_SHORT).show(); if(null !=list.get(position + currentIndex * pageItemCount).getOnClickListener()){ list.get(position+currentIndex*pageItemCount).getOnClickListener().ongvItemClickListener(view); } } }); return gridView; } private void initDots() { int col = (width/160) >2 ? (width/160) :3; //3 4 int row = (height/400) >4?(height/400):2; //2 2 pageItemCount = col * row; //每一页可装item //6 //gridView 的页数 viewPager_size = list.size() / pageItemCount +1; //5 if (0 < viewPager_size) { ll_dots.removeAllViews(); if (1 == viewPager_size) { ll_dots.setVisibility(View.GONE); } else if (1 < viewPager_size) { ll_dots.setVisibility(View.VISIBLE); for (int j = 0; j < viewPager_size; j++) { ImageView image = new ImageView(this); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10); //dot的宽高 params.setMargins(3, 0, 3, 0); image.setBackgroundResource(R.drawable.dot_unselected); ll_dots.addView(image, params); } } } if (viewPager_size != 1) { dots = new ImageView[viewPager_size]; for (int i = 0; i < viewPager_size; i++) { //从布局中填充dots数组 dots[i] = (ImageView) ll_dots.getChildAt(i); //dots[i].setEnabled(true); //dots[i].setTag(i); } currentIndex = 0; //当前页 //dots[currentIndex].setEnabled(false); dots[currentIndex].setBackgroundResource(R.drawable.dot_selected); viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int arg0) { setCurDot(arg0); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } } private ArrayList<InfoBean> getData() { list=new ArrayList<InfoBean>(); for(int i=0;i<46;i++){ info=new InfoBean("苹果"+i, R.drawable.apple, i); list.add(info); } return list; } private void setCurDot(int position) { if (position < 0 || position > viewPager_size - 1 || currentIndex == position) { return; } for(int i=0;i<dots.length;i++){ dots[i].setBackgroundResource(R.drawable.dot_unselected); } //dots[positon].setEnabled(false); // dots[currentIndex].setEnabled(true); dots[position].setBackgroundResource(R.drawable.dot_selected); currentIndex = position; } }
ViewPager_GridView_Adapter.java:
package com.example.grid_pager.adapter; import java.util.ArrayList; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.ViewGroup; /** * * @author Administrator *ViewPager的adapter */ public class ViewPager_GridView_Adapter extends PagerAdapter{ ArrayList<View> viewlist; public ViewPager_GridView_Adapter(ArrayList<View> viewlist){ this.viewlist=viewlist; } @Override public int getCount() { // TODO Auto-generated method stub return viewlist.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { //return false; return arg0==(arg1); } public Object instantiateItem(View arg0, int arg1) { try { //解决View只能滑动两屏的方法 ViewGroup parent = (ViewGroup) viewlist.get(arg1).getParent(); if (parent != null) { parent.removeAllViews(); } //container.addView(v); ((ViewPager) arg0).addView(viewlist.get(arg1),0); } catch (Exception e) { e.printStackTrace(); } return viewlist.get(arg1); } @Override public void destroyItem(View arg0, int arg1, Object arg2) { try { ((ViewPager) arg0).removeView(viewlist.get(arg1)); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } } }
ViewPager_GV_ItemAdapter.java:
package com.example.grid_pager.adapter; import java.util.ArrayList; import java.util.List; import com.example.grid_pager.InfoBean; import com.example.grid_pager.R; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; /** * * @author Administrator *每页GridView的adapter */ public class ViewPager_GV_ItemAdapter extends BaseAdapter{ private ArrayList<InfoBean> infolist; private Context context; /** ViewPager页码 */ private int index; /** 根据屏幕大小计算得到的每页item个数 */ private int pageItemCount; /** 传进来的List的总长度 */ private int totalSize; public ViewPager_GV_ItemAdapter(Context context,ArrayList<InfoBean> list){ this.context=context; infolist=list; } public ViewPager_GV_ItemAdapter(Context context, List<?> list, int index, int pageItemCount) { this.context = context; this.index = index; this.pageItemCount = pageItemCount; infolist = new ArrayList<InfoBean>(); totalSize = list.size(); //36 40 // itemRealNum=list.size()-index*pageItemCount; // 当前页的item对应的实体在List<?>中的其实下标 int list_index = index * pageItemCount; for (int i = list_index; i < list.size(); i++) { infolist.add((InfoBean) list.get(i)); } } @Override public int getCount() { int size=totalSize/pageItemCount; if(index==size){ return totalSize-pageItemCount*index; }else{ return pageItemCount; } } @Override public Object getItem(int position) { // TODO Auto-generated method stub return infolist.get(position); } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHoler vh; if(convertView==null){ vh=new ViewHoler(); convertView=LayoutInflater.from(context).inflate(R.layout.channel_gridview_item, null); vh.iv_icon=(ImageView) convertView.findViewById(R.id.iv_gv_item_icon); vh.tv_mame=(TextView) convertView.findViewById(R.id.tv_gv_item_Name); convertView.setTag(vh); }else{ vh=(ViewHoler) convertView.getTag(); } vh.updateViews(position, null); return convertView; } class ViewHoler{ ImageView iv_icon; TextView tv_mame; public void updateViews(int position, Object inst ){ iv_icon.setImageResource(infolist.get(position).getIconID()); tv_mame.setText(infolist.get(position).getName()); } } }
小弟刚开始学些博客,所以还有很多要学习的地方,刚开始只会罗列代码,所以有需要改进的地方希望大家多多提意见,小弟一定多家改正!!!
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories