GridView用于在界面上按行、列分布的方式来显示多个组件。
GridView的使用步骤为:
GridView的关键属性
android:horizontalSpacing="10dp" 两列之间的间距
android:numColumns="auto_fit" 每行显示多少列
android:verticalSpacing="10dp" 两行之间的距离
看一个实例:
1.首先在activity_main.xml中创建GridView
<!--activity_main.xml-->
<?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:id="@+id/activity_main"
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="@dimen/activity_vertical_margin"
tools:context="com.example.demo7.MainActivity">
<!--
android:horizontalSpacing="10dp" 两列之间的间距
android:numColumns="auto_fit" 每行显示多少列
android:verticalSpacing="10dp" 两行之间的距离
-->
<GridView
android:id="@+id/view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="10dp"
android:numColumns="4"
android:verticalSpacing="10dp">
</GridView>
</RelativeLayout>
2.新建item布局
<!--item.xml-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text=""/>
</LinearLayout>
3.添加相关代码
//MainActivity.java
package com.example.demo7;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
private GridView gridView;
private List<Map<String, Object>>dataList;
private int[] icon = {R.drawable.book,R.drawable.map,R.drawable.message,
R.drawable.qq, R.drawable.baidu, R.drawable.tieba};
private String[] iconName = {"阅读", "地图", "信息", "QQ", "百度", "贴吧"};
private SimpleAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**
* 1.准备数据源
* 2.新建适配器(SimpleAdapter)
* 3.GridView加载适配器
* 4.GridView配置事件适配器(OnItemClickListener)
*/
gridView = (GridView) findViewById(R.id.view);
dataList = new ArrayList<Map<String, Object>>();
adapter = new SimpleAdapter(MainActivity.this,getData(), R.layout.item,
new String[]{"image", "name"},
new int[]{R.id.image, R.id.name});
gridView.setAdapter(adapter);
//点击事件
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, iconName[i], Toast.LENGTH_SHORT).show();
}
});
}
private List<Map<String, Object>> getData() {
for (int i=0; i < icon.length; ++i) {
Map<String, Object>map = new HashMap<String, Object>();
map.put("image", icon[i]);
map.put("name", iconName[i]);
dataList.add(map);
}
return dataList;
}
}
运行效果如下:
点击一个图标,就会显示所对应的文字: