Android App中的GridView网格布局使用指南
Android App中的GridView网格布局使用指南
发布时间:2016-12-28 来源:查字典编辑
摘要:零、常用属性首先我们来看看GridView的一些常用的属性吧1.android:numColumns=”auto_fit”//GridVie...

零、常用属性

首先我们来看看GridView的一些常用的属性吧

1.android:numColumns=”auto_fit” //GridView的列数设置为自动

2.android:columnWidth=”90dp ” //每列的宽度,也就是Item的宽度

3.android:stretchMode=”columnWidth”//缩放与列宽大小同步

4.android:verticalSpacing=”10dp” //两行之间的边距

5.android:horizontalSpacing=”10dp” //两列之间的边距

6.android:cacheColorHint=”#00000000” //去除拖动时默认的黑色背景

7.android:listSelector=”#00000000” //去除选中时的黄色底色

8.android:scrollbars=”none” //隐藏GridView的滚动条

9.android:fadeScrollbars=”true” //设置为true就可以实现滚动条的自动隐藏和显示

10.android:fastScrollEnabled=”true” //GridView出现快速滚动的按钮(至少滚动4页才会显示)

11.android:fadingEdge=”none” //GridView衰落(褪去)边缘颜色为空,缺省值是vertical。(可以理解为上下边缘的提示色)

12.android:fadingEdgeLength=”10dip” //定义的衰落(褪去)边缘的长度

13.android:stackFromBottom=”true” //设置为true时,你做好的列表就会显示你列表的最下面

14.android:transcriptMode=”alwaysScroll” //当你动态添加数据时,列表将自动往下滚动最新的条目可以自动滚动到可视范围内

15.android:drawSelectorOnTop=”false” //点击某条记录不放,颜色会在记录的后面成为背景色,内容的文字可见(缺省为false)

至于GridView的用法就不多说了,和ListView的用法一样。下面小编给打加分享一下GridView的一些比较特殊的情况吧。

一、GridView按钮图片点击效果

我们先来看看GridView按钮图片的点击效果吧,不是说每一个item的点击背景颜色的改变,那个很简单实现,自定义一个selector就可以实现,接下来小编要说的是每一个item上的imageview的点击效果….

要想实现这种功能我们要设置imageview的 android:clickable=”true”,看一下布局文件:

<imageview android:id="@+id/ItemImage" android:layout_height="50dp" android:layout_width="50dp" android:scaletype="fitXY" android:adjustviewbounds="true" android:clickable="true" android:layout_margintop="@dimen/smaller_space" android:layout_centerhorizontal="true"> </imageview>

2.然后我们在自定义adapter中定义一个改变按钮图片的颜色方法,通过初始化adapter的时候,将九宫格的图片传过来,通过onTouch事件来改变颜色值

public View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_UP: changeLight((ImageView) view, 0); break; case MotionEvent.ACTION_DOWN: changeLight((ImageView) view, -80); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_CANCEL: changeLight((ImageView) view, 0); break; default: changeLight((ImageView) view, 0); break; } return false; } }; /** *改变gridview图片的颜色值 **/ private void changeLight(ImageView imageview, int brightness) { ColorMatrix matrix = new ColorMatrix(); matrix.set(new float[] { 1, 0, 0, 0, brightness, 0, 1, 0, 0, brightness, 0, 0, 1, 0, brightness, 0, 0, 0, 1, 0 }); imageview.setColorFilter(new ColorMatrixColorFilter(matrix)); }

3.我们还需要定义一个接口实现gridview的onItem点击事件

public interface OnCustomItemClickListener{ public int getPostion(); public void onCustomItemClk(int i); } holder.itemImage.setOnTouchListener(onTouchListener); holder.itemImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { clickPos = i; listener.onCustomItemClk(clickPos); } });

大体思路和主要代码都跟大家介绍的很详细了,需要的小伙伴可以去下载源码….

二、GridView九宫格分割线效果实现(仿支付宝)

最近项目中要实现一个仿支付宝九宫格分割线的功能,因为项目比较急在网上找了找,发现都是设置一些背景来实现,闲的时候想了想,可以自定义一个GridView来实现,下面小编来分享一下实现方法

设置背景来实现九宫格分割线效果:

定义selector背景

<"1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"></selector> <item android:state_pressed="true"></item><shape android:shape="rectangle"></shape> <stroke android:width="1.0px" android:color="@color/line"></stroke> <gradient android:angle="270.0" android:endcolor="#ffe8ecef" android:startcolor="#ffe8ecef"></gradient> <item android:state_focused="true"></item><shape android:shape="rectangle"></shape> <gradient android:angle="270.0" android:endcolor="#ffe8ecef" android:startcolor="#ffe8ecef"></gradient> <stroke android:width="1.0px" android:color="@color/line"></stroke> <item></item><shape android:shape="rectangle"></shape> <gradient android:angle="270.0" android:endcolor="@color/gray" android:startcolor="@color/gray"></gradient> <stroke android:width="0.5px" android:color="@color/line"></stroke>

给布局设置这个背景就可以了,一点小瑕疵就是每一行重叠的线会比不重叠的粗,不认真看看不出来的,还可以凑合用,但是小编比较追求完美,下面看一下自定义GridView的实现方法吧。

三、自定义GridView实现:

思路:

1.通过反射获取GridView的列数

2.获取GridView的childview

3.根据childview的情况画线

代码:

@Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas) int column = 1 try { //通过反射拿到列数 Field field = GridView.class.getDeclaredField("mNumColumns") field.setAccessible(true) column = field.getInt(this) } catch (NoSuchFieldException e) { e.printStackTrace() } catch (IllegalAccessException e) { e.printStackTrace() } int childCount = getChildCount() Paint paint = new Paint() paint.setStyle(Paint.Style.STROKE) paint.setColor(getContext().getResources().getColor(R.color.line)) for (int i = 0 { View cellView = getChildAt(i) Log.e(">>>>>>>>>>>>>>>","i="+i+"||||||||||"+"top"+cellView.getTop()+"bottom"+cellView.getBottom()+"left"+cellView.getLeft()+"right"+cellView.getRight()) if (cellView.getTop()!=0){ //顶部线,坐标+1是为了画在cellView上 canvas.drawLine(cellView.getLeft(), cellView.getTop() + 1, cellView.getRight(), cellView.getTop() + 1, paint) } //左边线 canvas.drawLine(cellView.getLeft() + 1, cellView.getTop(), cellView.getLeft() + 1, cellView.getBottom(), paint) if ((i + 1) % column == 0) //最右边一列单元格画上右边线 { canvas.drawLine(cellView.getRight(), cellView.getTop() + 1, cellView.getRight(), cellView.getBottom() + 1, paint) } if ((i + column) >= childCount) //最后column个单元格画上底边线 { canvas.drawLine(cellView.getLeft(), cellView.getBottom() + 1, cellView.getRight(), cellView.getBottom() + 1, paint) } if (childCount % column != 0 && i == childCount - 1) //如果最后一个单元格不在最右一列,单独为它画上右边线 { canvas.drawLine(cellView.getRight() + 1, cellView.getTop() + 1, cellView.getRight() + 1, cellView.getBottom() + 1, paint) canvas.drawLine(cellView.getRight()+1, cellView.getBottom() + 1, cellView.getLeft(), cellView.getBottom() + 1, paint) } } }

四、给每行添加上分割线

大概思想就是:既然在GridView里没有设置的方法,那就直接加在item里,在通过别的方法改变item的显示效果,从而达到设置分割线的方法~废话不多说~下面详细的介绍:首先是GridView的布局,android:numColumns=”3″ 每行三列

<GridView android:id="@+id/content" android:layout_width="fill_parent" android:layout_height="match_parent" android:numColumns="3" > </GridView>

接下来是item的布局

<"1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/layout" android:layout_width="fill_parent" android:layout_height="105dp" android:layout_marginBottom="13dp" android:layout_marginTop="13dp" android:orientation="vertical" > <ImageView android:id="@+id/imageView" android:layout_width="fill_parent" android:layout_height="105dp" android:scaleType="centerCrop" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="40dp" android:layout_gravity="bottom" android:background="#50000000" > <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:maxLines="2" android:paddingLeft="10dp" android:paddingRight="10dp" android:textColor="@color/text_color" android:textSize="16sp" /> </RelativeLayout> </FrameLayout> <View android:id="@+id/line" android:layout_width="fill_parent" android:layout_height="1px" android:background="@color/line_color" /> </LinearLayout>

接下来是最重要的数据显示了,自定义一个GridViewAdapter继承

public class GridViewAdapter extends BaseAdapter { private LayoutInflater inflater; private Context context; private List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); public GridViewAdapter(Context context, List<Map<String, Object>> list) { super(); this.context = context; this.list = list; inflater = LayoutInflater.from(context); } @Override public int getCount() { return list.size(); } @Override public Object getItem(int position) { return list.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup arg2) { Viewholder viewholder = null; if (convertView == null) { convertView = inflater.inflate(R.layout.gridview_item, null); viewholder = new Viewholder(convertView); convertView.setTag(viewholder); } else { viewholder = (Viewholder) convertView.getTag(); } viewholder.update(list.get(position),position); return convertView; } public class Viewholder { private ImageView imageView; private TextView textView; private FrameLayout layout; private View view; public Viewholder(View convertView) { imageView=(ImageView) convertView.findViewById(R.id.imageView); textView=(TextView) convertView.findViewById(R.id.textView); layout=(FrameLayout) convertView.findViewById(R.id.layout); view=convertView.findViewById(R.id.line); } public void update(Map<String, Object> map,int position) { textView.setText(map.get("name").toString()); int i=0; i=position%3; switch (i) { case 0: //每列第一个item不包括分割线的layout右内边距20 layout.setPadding(0, 0, 20, 0); break; case 1: //每列第二个item不包括分割线的layout左、右内边距各10 layout.setPadding(10, 0, 10, 0); break; case 2: //每列第三个item不包括分割线的layout左内边距20;必须使三个item的宽度一致 layout.setPadding(20, 0, 0, 0); break; default: break; } String id=map.get("id").toString(); setImage(id, imageView); setLine(position, view); } } private void setImage(String id,ImageView imageView){ if(id.equals("1")){ imageView.setImageResource(R.drawable.img1); }else if(id.equals("2")){ imageView.setImageResource(R.drawable.img2); }else if(id.equals("3")){ imageView.setImageResource(R.drawable.img3); }else if(id.equals("4")){ imageView.setImageResource(R.drawable.img4); }else if(id.equals("5")){ imageView.setImageResource(R.drawable.img5); } } private void setLine(int position,View view){ int i=0; i=list.size()%3; if(position+i+1>list.size()){ //最后一行分割线隐藏 view.setVisibility(View.GONE); } }

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新安卓软件开发学习
热门安卓软件开发学习
编程开发子分类