大家都知道,在android开发中ListView是一种十分常用的组件,但是当需要将一个个的item进行行列排列时,则需要用GridView,这两者的使用方式非常相似,大概可以分为以下四步:1.布局;2.准备数据源;3.新建适配器;4.加载适配器。下面进行详细介绍。
一,布局。
1,主布局。<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="30dp" tools:context="com.example.eyevision.mytest2.GridVeiw.MyGridViewActivity"> <GridView android:id="@+id/mGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:columnWidth="90dp" android:numColumns="3" android:stretchMode="columnWidth" android:verticalSpacing="2.0px"android:horizontalSpacing="2.0px ></GridView></RelativeLayout>
GirdView的一些属性:
android:numColumns="3" --------列数设置为3列
android:columnWidth="90dp",----------每列的宽度,也就是Item的宽度
android:stretchMode="columnWidth"------缩放与列宽大小同步
android:verticalSpacing="2.0px"----------垂直边距
android:horizontalSpacing="2.0px"-------水平边距
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center" android:padding="10dp" > <ImageView android:src="@drawable/ic_launcher" android:id="@+id/image" android:layout_width="60dp" android:layout_height="60dp" /> <TextView android:id="@+id/text" android:layout_marginTop="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/black" android:text="文字" /> </LinearLayout>
二,准备数据源。
private int[] icon = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher, R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher, R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher}; private String[] iconName = {"1", "2", "3", "4", "5","6","7","8","9"}; private List<Map<String, Object>> data_list;
三,新建适配器。
simpleAdapter = new SimpleAdapter(this, data_list, R.layout.item_gridview, new String[]{"ItemImage", "ItemText"}, new int[]{R.id.image, R.id.text});
四,加载适配器。
mGridView.setAdapter(simpleAdapter);
以上就是GridView的简单使用。
对于item的点击事件,也非常简单,只需
mGridView.setOnItemClickListener(this);然后实现onItemClick方法即可。
另外,进一步探索,当使用比较复杂的情况下,比如点击item后改变item的内容,这时可以通过重写adapter来实现。下面用一个例子来演示,效果为当点击item时,所在item的图片用其他图片更换,文字用其他文字更换。新建一个mGridViewAdapter,继承自BaseAdapter,并实现几个必要的方法。其中getView方法是我们重写的重点。
@Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(context).inflate(R.layout.item_gridview, null); } ImageView imageView = (ImageView) convertView.findViewById(R.id.image); TextView textView = (TextView) convertView.findViewById(R.id.text); Map<String, Object> map = listItem.get(position); imageView.setImageResource((Integer) map.get("ItemImage")); textView.setText(map.get("ItemText") + ""); if (clickItem == position) { imageView.setImageResource(icon[position]);//将图片更换textView.setText(iconName[position]);//将文字更换} return convertView;}
MainActivity.java
package com.example.eyevision.mytest2.GridVeiw; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.AdapterView; import android.widget.GridView; import android.widget.SimpleAdapter; import android.widget.Toast; import com.example.eyevision.mytest2.R; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class MyGridViewActivity extends AppCompatActivity implements AdapterView.OnItemClickListener { private mGridViewAdapter adapter; private SimpleAdapter simpleAdapter; private GridView mGridView; private int[] icon = {R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg, R.drawable.imgbg,}; private String[] iconName = {"1", "2", "3", "4", "5", "6", "7", "8", "9"}; private List<Map<String, Object>> data_list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_grid_view); init(); } private void init() { mGridView = (GridView) findViewById(R.id.mGridView); data_list = initList(); // simpleAdapter = new SimpleAdapter(this, // data_list, // R.layout.item_gridview, // new String[]{"ItemImage", "ItemText"}, // new int[]{R.id.image, R.id.text}); adapter = new mGridViewAdapter(this, data_list); adapter.setSelection(0); mGridView.setAdapter(adapter); mGridView.setOnItemClickListener(this); } public List<Map<String, Object>> initList() { List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); for (int i = 0; i < icon.length; i++) { Map<String, Object> map = new HashMap<String, Object>(); map.put("ItemImage", icon[i]); map.put("ItemText", iconName[i]); list.add(map); } return list; } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { adapter.setSelection(position); adapter.notifyDataSetChanged(); Toast.makeText(this, position + "", Toast.LENGTH_LONG).show(); } }
adapter
package com.example.eyevision.mytest2.GridVeiw; 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; import com.example.eyevision.mytest2.R; import java.util.List; import java.util.Map; /** * Created by eyevision on 2016/2/16. */ public class mGridViewAdapter extends BaseAdapter { private Context context; private List<Map<String, Object>> listItem; private int clickItem = -1; private int[] icon = {R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher}; private String[] iconName = {"a", "b", "c", "d", "e", "f", "g", "h", "i"}; public mGridViewAdapter(Context context, List<Map<String, Object>> listItem) { this.context = context; this.listItem = listItem; } public void setSelection(int position) { this.clickItem = position; } @Override public int getCount() { return listItem.size(); } @Override public Object getItem(int position) { return listItem.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(context).inflate(R.layout.item_gridview, null); } ImageView imageView = (ImageView) convertView.findViewById(R.id.image); TextView textView = (TextView) convertView.findViewById(R.id.text); Map<String, Object> map = listItem.get(position); imageView.setImageResource((Integer) map.get("ItemImage")); textView.setText(map.get("ItemText") + ""); if (clickItem == position) { imageView.setImageResource(icon[position]); textView.setText(iconName[position]); } return convertView; } }