GridView的简单应用

昨天学到了DatePicker与TimePicker的使用，不知道为什么很奇葩啊，就是实现不了。activity里面设置了onTimeChangedLitener,，可以页面再怎么选择时间都不执行，纠结了一两天，到现在还是没解决。。。。。

今天索性就跳过去好了，先看看GridView, 日期的问题后面看有没有解决办法。

一看到GridView，就想到了TableLayout，感觉都是规规矩矩的布局样式。

刚做了个demo,先给大家看下效果图。

是不是很像我们的app列表啊。这里就是做的这个仿app列表的效果，而且每个图标有点击事件，这里我只给他个Toast,又是有空有activity的跳转，那就真的跟app列表很像了，点击打开app,哈哈。

现在来看下如何实现的。

首先是一个GrideView的布局：

<?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:background="#000000"
    android:orientation="vertical">

    <GridView
        android:id="@+id/gridView"
        android:numColumns="3"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

这个布局有三个陌生的属性，先来解释一下 ：

gridview 三个常用的属性
numcolumns :每一行显示多少列 列数 可以自动适配 auto_fit
horizontalspacing 两列之间的间距 其实翻译过来就是水平之间的距离 就是两列之间的距离
verticalspacing 行距 垂直之间的距离

值得注意的是：假设我grideView的每个item设置了很小的宽高，然后我设置显示多列，这个时候他会自适应屏幕，那么设置的 horizontalspacing就无效了，这里我的这个demo就体现出来了。

再看看activity的具体处理：

package com.example.lolli.gridview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
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;
import java.util.Objects;

/***
 * 实现类似APP列表界面效果
 */
public class MainActivity extends AppCompatActivity {
    // 定义GridView
    private GridView gridView;
    //  定义数据源
    private List<Map<String, Object>> dataList;
    // 定义素材图片
    int[] pic = {R.drawable.address_book,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};
    // 定义素材图片下显示的文字
    String[] text = {"备忘录","日历","相机","闹钟","游戏中心","短信","音乐","设置","微信","天气","浏览器","YouTube"};
    //  定义适配器
    private SimpleAdapter simpleAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //   初始化控件
        gridView = (GridView) findViewById(R.id.gridView);
        //  初始化数据源List
        dataList = new ArrayList<Map<String, Object>>();
        //  初始化适配器
        simpleAdapter = new SimpleAdapter(this, getData(), R.layout.item, new String[]{"pic", "text"}, new int[]{R.id.img, R.id.text});
        //  设置适配器
        gridView.setAdapter(simpleAdapter);

        /**
         * 设置GridView的item点击事件
         */
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, "你点击了" + text[position], Toast.LENGTH_SHORT).show();
            }
        });
    }

    /**
     * 封装数据
     * @return
     */
    private List<Map<String, Object>> getData (){
        for (int i = 0; i<pic.length; i++){
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("pic", pic[i]);
            map.put("text", text[i]);
            dataList.add(map);
        }
        return dataList;
    }
}

这里也是用到了SimpAdapter,前面已经学习过simpAdapter了，这里再用起来也应该是轻车熟路了。

这里可以发现，我那个Toast是怎么来的吧，没错，就是GridView的onItemClickListener这个监听器，我们能拿到我们点击的item的位置（position）

这里用到了适配器，那么顺便也看下R.layout,item那个文件好了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#000000"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/img"
        android:layout_marginTop="10dp"
        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:textColor="#ffffff"
        android:text="icon"
        android:textSize="22sp"
        />
</LinearLayout>

好了，一个简单的GridView应用就完成了