使用GridView实现仿桌面图标的设计

来源：互联网发布：jbf_11sf编程编辑：程序博客网时间：2024/06/06 12:32

GridView 是网格视图，我们可以用它来实现一个类似于桌面图标的布局。和ListView 的使用方法非常相似，GridView 的使用方法包括：新建布局，为布局新建适配器，设置监听事件。

1. 首先，新建GridView ：

activity_main.xml

<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="@dimen/activity_vertical_margin"    tools:context="com.example.gridviewdemo.MainActivity" >    <GridView        android:id="@+id/grid_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:numColumns="3"        android:horizontalSpacing="10dp"        android:verticalSpacing="10dp" /></RelativeLayout>

GridView 用到以下几个重要的属性：

numColumns：设置网格视图的列的数目
horizontalSpacing：设置水平间距
verticalSpacing：设置垂直间距

注意，当你设置了GridView 的列的时候，水平方向自动均匀分布了，所以上面设置horizontalSpacing 并没有实际的效果。

2. 在代码中获取GridView 实例并且建立适配器

public class MainActivity extends Activity implements OnItemClickListener {private GridView gridView;private SimpleAdapter adapter;private List<Map<String, Object>> dataList;private int[] icon = {R.drawable.calendar, R.drawable.camera, R.drawable.clock, R.drawable.games_control, R.drawable.messenger, R.drawable.ringtone, R.drawable.settings, R.drawable.speech_balloon, R.drawable.weather, R.drawable.world, R.drawable.youtube};private String[] name = {"calendar", "camera", "clock", "game", "message", "music", "settings","speech", "weather", "Internet", "youtube"};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);gridView = (GridView)findViewById(R.id.grid_view);dataList = new ArrayList<Map<String, Object>>();getData();adapter = new SimpleAdapter(this, dataList, R.layout.item, new String[]{"image", "text"}, new int[]{R.id.image, R.id.text});gridView.setAdapter(adapter);}private void getData(){for(int i = 0; i < icon.length; i++){Map<String, Object> map = new HashMap<String, Object>();map.put("image", icon[i]);map.put("text", name[i]);dataList.add(map);}} }

这里适配器使用SimpleAdapter。SimpleAdapter 的使用在这篇文章中已有介绍，这里不再详述。注意新建适配器之前要准备数据源和目标布局文件。这里将数据源都保存在数组中，然后用getData() 方法获得。目标布局文件R.layout.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="60dp"        android:layout_height="60dp"        android:src="@drawable/ic_launcher" />"        <TextView        android:id="@+id/text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:text="Text" />"</LinearLayout>

布局文件由ImageView 和TextView 组成，并将它们居中显示。

3. 设置监听事件

这里使用的监听事件是OnItemClickListener，并在监测到监听事件以后利用Toast显示一条提示

public class MainActivity extends Activity implements OnItemClickListener {...@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);...gridView.setOnItemClickListener(this);}...@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position,long id) {Toast.makeText(MainActivity.this, "I'm " + name[position], Toast.LENGTH_SHORT).show();}}

运行效果如下：

0 0