Android App中的GridView网格布局使用指南

2024-03-17 07:01:04 45

零、常用属性
首先我们来看看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”，看一下布局文件：

<imageviewandroid: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事件来改变颜色值

publicView.OnTouchListeneronTouchListener=newView.OnTouchListener(){
@Override
publicbooleanonTouch(Viewview,MotionEventevent){
switch(event.getAction()){
caseMotionEvent.ACTION_UP:
changeLight((ImageView)view,0);



break;
caseMotionEvent.ACTION_DOWN:
changeLight((ImageView)view,-80);
break;
caseMotionEvent.ACTION_MOVE:

break;
caseMotionEvent.ACTION_CANCEL:
changeLight((ImageView)view,0);
break;
default:
changeLight((ImageView)view,0);
break;
}
returnfalse;
}

};

/**
*改变gridview图片的颜色值
**/
privatevoidchangeLight(ImageViewimageview,intbrightness){
ColorMatrixmatrix=newColorMatrix();
matrix.set(newfloat[]{1,0,0,0,brightness,0,1,0,0,
brightness,0,0,1,0,brightness,0,0,0,1,0});
imageview.setColorFilter(newColorMatrixColorFilter(matrix));

}

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

publicinterfaceOnCustomItemClickListener{
publicintgetPostion();
publicvoidonCustomItemClk(inti);
}
holder.itemImage.setOnTouchListener(onTouchListener);
holder.itemImage.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewview){
clickPos=i;
listener.onCustomItemClk(clickPos);
}
});

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

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

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

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

定义selector背景

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android"></selector>

<itemandroid:state_pressed="true"></item><shapeandroid:shape="rectangle"></shape>
<strokeandroid:width="1.0px"android:color="@color/line"></stroke>

<gradientandroid:angle="270.0"android:endcolor="#ffe8ecef"android:startcolor="#ffe8ecef"></gradient>

<itemandroid:state_focused="true"></item><shapeandroid:shape="rectangle"></shape>
<gradientandroid:angle="270.0"android:endcolor="#ffe8ecef"android:startcolor="#ffe8ecef"></gradient>

<strokeandroid:width="1.0px"android:color="@color/line"></stroke>

<item></item><shapeandroid:shape="rectangle"></shape>
<gradientandroid:angle="270.0"android:endcolor="@color/gray"android:startcolor="@color/gray"></gradient>

<strokeandroid:width="0.5px"android:color="@color/line"></stroke>

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

三、自定义GridView实现：

思路：

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

2.获取GridView的childview

3.根据childview的情况画线

代码：

@Override
protectedvoiddispatchDraw(Canvascanvas)
{
super.dispatchDraw(canvas)

intcolumn=1
try
{
//通过反射拿到列数
Fieldfield=GridView.class.getDeclaredField("mNumColumns")
field.setAccessible(true)
column=field.getInt(this)
}
catch(NoSuchFieldExceptione)
{
e.printStackTrace()
}
catch(IllegalAccessExceptione)
{
e.printStackTrace()
}

intchildCount=getChildCount()
Paintpaint=newPaint()
paint.setStyle(Paint.Style.STROKE)
paint.setColor(getContext().getResources().getColor(R.color.line))
for(inti=0
{
ViewcellView=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的布局

<?xmlversion="1.0"encoding="UTF-8"?>
<LinearLayoutxmlns: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继承

publicclassGridViewAdapterextendsBaseAdapter{
privateLayoutInflaterinflater;
privateContextcontext;
privateList<Map<String,Object>>list=newArrayList<Map<String,Object>>();

publicGridViewAdapter(Contextcontext,List<Map<String,Object>>list){
super();
this.context=context;
this.list=list;
inflater=LayoutInflater.from(context);
}

@Override
publicintgetCount(){
returnlist.size();
}

@Override
publicObjectgetItem(intposition){
returnlist.get(position);
}

@Override
publiclonggetItemId(intposition){
returnposition;
}

@Override
publicViewgetView(intposition,ViewconvertView,ViewGrouparg2){
Viewholderviewholder=null;
if(convertView==null){
convertView=inflater.inflate(R.layout.gridview_item,null);
viewholder=newViewholder(convertView);
convertView.setTag(viewholder);
}else{
viewholder=(Viewholder)convertView.getTag();
}
viewholder.update(list.get(position),position);
returnconvertView;
}

publicclassViewholder{
privateImageViewimageView;
privateTextViewtextView;
privateFrameLayoutlayout;
privateViewview;
publicViewholder(ViewconvertView){
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);
}

publicvoidupdate(Map<String,Object>map,intposition){
textView.setText(map.get("name").toString());
inti=0;
i=position%3;
switch(i){
case0:
//每列第一个item不包括分割线的layout右内边距20
layout.setPadding(0,0,20,0);
break;
case1:
//每列第二个item不包括分割线的layout左、右内边距各10
layout.setPadding(10,0,10,0);
break;
case2:
//每列第三个item不包括分割线的layout左内边距20；必须使三个item的宽度一致
layout.setPadding(20,0,0,0);
break;
default:
break;
}
Stringid=map.get("id").toString();
setImage(id,imageView);
setLine(position,view);
}
}

privatevoidsetImage(Stringid,ImageViewimageView){
if(id.equals("1")){
imageView.setImageResource(R.drawable.img1);
}elseif(id.equals("2")){
imageView.setImageResource(R.drawable.img2);
}elseif(id.equals("3")){
imageView.setImageResource(R.drawable.img3);
}elseif(id.equals("4")){
imageView.setImageResource(R.drawable.img4);
}elseif(id.equals("5")){
imageView.setImageResource(R.drawable.img5);
}
}

privatevoidsetLine(intposition,Viewview){
inti=0;
i=list.size()%3;
if(position+i+1>list.size()){
//最后一行分割线隐藏
view.setVisibility(View.GONE);
}
}

Android App中的GridView网格布局使用指南

热门推荐

随机推荐