零、常用屬性
首先我們來看看GridView的一些常用的屬性吧
1.android:numColumns=”auto_fit” //GridView的列數(shù)設(shè)置為自動(dòng)
2.android:columnWidth=”90dp ” //每列的寬度，也就是Item的寬度
3.android:stretchMode=”columnWidth”//縮放與列寬大小同步
4.android:verticalSpacing=”10dp” //兩行之間的邊距
5.android:horizontalSpacing=”10dp” //兩列之間的邊距
6.android:cacheColorHint=”#00000000” //去除拖動(dòng)時(shí)默認(rèn)的黑色背景
7.android:listSelector=”#00000000” //去除選中時(shí)的黃色底色
8.android:scrollbars=”none” //隱藏GridView的滾動(dòng)條
9.android:fadeScrollbars=”true” //設(shè)置為true就可以實(shí)現(xiàn)滾動(dòng)條的自動(dòng)隱藏和顯示
10.android:fastScrollEnabled=”true” //GridView出現(xiàn)快速滾動(dòng)的按鈕(至少滾動(dòng)4頁才會(huì)顯示)
11.android:fadingEdge=”none” //GridView衰落(褪去)邊緣顏色為空，缺省值是vertical。(可以理解為上下邊緣的提示色)
12.android:fadingEdgeLength=”10dip” //定義的衰落(褪去)邊緣的長度
13.android:stackFromBottom=”true” //設(shè)置為true時(shí)，你做好的列表就會(huì)顯示你列表的最下面
14.android:transcriptMode=”alwaysScroll” //當(dāng)你動(dòng)態(tài)添加數(shù)據(jù)時(shí)，列表將自動(dòng)往下滾動(dòng)最新的條目可以自動(dòng)滾動(dòng)到可視范圍內(nèi)
15.android:drawSelectorOnTop=”false” //點(diǎn)擊某條記錄不放，顏色會(huì)在記錄的后面成為背景色,內(nèi)容的文字可見(缺省為false)
至于GridView的用法就不多說了，和ListView的用法一樣。下面小編給打加分享一下GridView的一些比較特殊的情況吧。
一、GridView按鈕圖片點(diǎn)擊效果
我們先來看看GridView按鈕圖片的點(diǎn)擊效果吧，不是說每一個(gè)item的點(diǎn)擊背景顏色的改變，那個(gè)很簡(jiǎn)單實(shí)現(xiàn)，自定義一個(gè)selector就可以實(shí)現(xiàn)，接下來小編要說的是每一個(gè)item上的imageview的點(diǎn)擊效果….
要想實(shí)現(xiàn)這種功能我們要設(shè)置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.然后我們?cè)谧远xadapter中定義一個(gè)改變按鈕圖片的顏色方法，通過初始化adapter的時(shí)候，將九宮格的圖片傳過來，通過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.我們還需要定義一個(gè)接口實(shí)現(xiàn)gridview的onItem點(diǎn)擊事件
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); } });大體思路和主要代碼都跟大家介紹的很詳細(xì)了，需要的小伙伴可以去下載源碼….
二、GridView九宮格分割線效果實(shí)現(xiàn)(仿支付寶)
最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)仿支付寶九宮格分割線的功能，因?yàn)轫?xiàng)目比較急在網(wǎng)上找了找，發(fā)現(xiàn)都是設(shè)置一些背景來實(shí)現(xiàn)，閑的時(shí)候想了想，可以自定義一個(gè)GridView來實(shí)現(xiàn)，下面小編來分享一下實(shí)現(xiàn)方法
設(shè)置背景來實(shí)現(xiàn)九宮格分割線效果：
定義selector背景
<?xml version="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>
給布局設(shè)置這個(gè)背景就可以了，一點(diǎn)小瑕疵就是每一行重疊的線會(huì)比不重疊的粗，不認(rèn)真看看不出來的，還可以湊合用，但是小編比較追求完美，下面看一下自定義GridView的實(shí)現(xiàn)方法吧。
三、自定義GridView實(shí)現(xiàn)：
思路：
1.通過反射獲取GridView的列數(shù)
2.獲取GridView的childview
3.根據(jù)childview的情況畫線
代碼：
@Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas) int column = 1 try { //通過反射拿到列數(shù) 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){ //頂部線，坐標(biāo)+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個(gè)單元格畫上底邊線 { canvas.drawLine(cellView.getLeft(), cellView.getBottom() + 1, cellView.getRight(), cellView.getBottom() + 1, paint) } if (childCount % column != 0 && i == childCount - 1) //如果最后一個(gè)單元格不在最右一列，單獨(dú)為它畫上右邊線 { 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里沒有設(shè)置的方法，那就直接加在item里，在通過別的方法改變item的顯示效果，從而達(dá)到設(shè)置分割線的方法~廢話不多說~下面詳細(xì)的介紹：首先是GridView的布局，android:numColumns=”3″ 每行三列
<GridView android:id="@+id/content" android:layout_width="fill_parent" android:layout_height="match_parent" android:numColumns="3" ></GridView>
接下來是item的布局
<?xml version="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>
接下來是最重要的數(shù)據(jù)顯示了，自定義一個(gè)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: //每列第一個(gè)item不包括分割線的layout右內(nèi)邊距20 layout.setPadding(0, 0, 20, 0); break; case 1: //每列第二個(gè)item不包括分割線的layout左、右內(nèi)邊距各10 layout.setPadding(10, 0, 10, 0); break; case 2: //每列第三個(gè)item不包括分割線的layout左內(nèi)邊距20；必須使三個(gè)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); } }新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
