加载中...

2.5.2 GridView(网格视图)的基本使用

本节引言：

本节给大家介绍的是第二个Adapter类的控件——GridView(网格视图)，见名知义，ListView是列表， GridView就是显示网格！他和ListView一样是AbsListView的子类！很多东西和ListView都是相通的， 本节我们就来学习他的基本用法~

1.相关属性：

下面是GridView中的一些属性：

  • android:columnWidth：设置列的宽度
  • android:gravity：组件对其方式
  • android:horizontalSpacing：水平方向每个单元格的间距
  • android:verticalSpacing：垂直方向每个单元格的间距
  • android:numColumns：设置列数
  • android:stretchMode：设置拉伸模式，可选值如下： none：不拉伸；spacingWidth：拉伸元素间的间隔空隙 columnWidth：仅仅拉伸表格元素自身 spacingWidthUniform：既拉元素间距又拉伸他们之间的间隔空袭

2.使用示例：

下面通过一个简单的例子来熟悉这个控件的使用： (这里用的Adapter我们直接用之2.5.0中教大家写的可复用的BaseAdapter~)

实现的效果图：

代码实现：

首先是GridView 的 Item的布局：item_grid_icon.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:padding="5dp">
  6.  
  7.     <ImageView
  8.         android:id="@+id/img_icon"
  9.         android:layout_width="64dp"
  10.         android:layout_height="64dp"
  11.         android:layout_centerInParent="true"
  12.         android:src="@mipmap/iv_icon_1" />
  13.  
  14.     <TextView
  15.         android:id="@+id/txt_icon"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content"
  18.         android:layout_below="@id/img_icon"
  19.         android:layout_centerHorizontal="true"
  20.         android:layout_marginTop="30dp"
  21.         android:text="呵呵"
  22.         android:textSize="18sp" />
  23.         
  24. </RelativeLayout>

接着我们写个entity实体类：Icon.java：

  1. /**
  2.  * Created by Jay on 2015/9/24 0024.
  3.  */
  4. public class Icon {
  5.     private int iId;
  6.     private String iName;
  7.  
  8.     public Icon() {
  9.     }
  10.  
  11.     public Icon(int iId, String iName) {
  12.         this.iId = iId;
  13.         this.iName = iName;
  14.     }
  15.  
  16.     public int getiId() {
  17.         return iId;
  18.     }
  19.  
  20.     public String getiName() {
  21.         return iName;
  22.     }
  23.  
  24.     public void setiId(int iId) {
  25.         this.iId = iId;
  26.     }
  27.  
  28.     public void setiName(String iName) {
  29.         this.iName = iName;
  30.     }
  31. }

最后是MainActivity的布局以及Java代码

activity_main.xml：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:padding="5dp"
  6.     tools:context=".MainActivity">
  7.     
  8.     <!--numColumns设置每行显示多少个-->
  9.     <GridView
  10.         android:id="@+id/grid_photo"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent"
  13.         android:numColumns="3" />
  14.  
  15. </RelativeLayout>

MainActivity.java：

  1. public class MainActivity extends AppCompatActivity {
  2.  
  3.     private Context mContext;
  4.     private GridView grid_photo;
  5.     private BaseAdapter mAdapter = null;
  6.     private ArrayList<Icon> mData = null;
  7.  
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         mContext = MainActivity.this;
  13.         grid_photo = (GridView) findViewById(R.id.grid_photo);
  14.  
  15.         mData = new ArrayList<Icon>();
  16.         mData.add(new Icon(R.mipmap.iv_icon_1, "图标1"));
  17.         mData.add(new Icon(R.mipmap.iv_icon_2, "图标2"));
  18.         mData.add(new Icon(R.mipmap.iv_icon_3, "图标3"));
  19.         mData.add(new Icon(R.mipmap.iv_icon_4, "图标4"));
  20.         mData.add(new Icon(R.mipmap.iv_icon_5, "图标5"));
  21.         mData.add(new Icon(R.mipmap.iv_icon_6, "图标6"));
  22.         mData.add(new Icon(R.mipmap.iv_icon_7, "图标7"));
  23.  
  24.         mAdapter = new MyAdapter<Icon>(mData, R.layout.item_grid_icon) {
  25.             @Override
  26.             public void bindView(ViewHolder holder, Icon obj) {
  27.                 holder.setImageResource(R.id.img_icon, obj.getiId());
  28.                 holder.setText(R.id.txt_icon, obj.getiName());
  29.             }
  30.         };
  31.  
  32.         grid_photo.setAdapter(mAdapter);
  33.  
  34.         grid_photo.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  35.             @Override
  36.             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  37.                 Toast.makeText(mContext, "你点击了~" + position + "~项", Toast.LENGTH_SHORT).show();
  38.             }
  39.         });
  40.  
  41.     }
  42.  
  43. }

嗯，代码非常简单~

3.示例代码下载：

本节小结：

本节给大家介绍了第二个需要使用Adapter的UI控件——网格视图GridView，用法很简单~ 大家可以根据自己的需求进行扩展，比如用GridView显示手机相册~嗯，就说这么多， 谢谢~

下载地址

立即下载
还没有评论.