使用GridView以表格形式显示多张图片

GridView用于在界面上按行、列分布的方式来显示多个按钮。

数据源(集合)---适配器(SimpleAdapter简单适配器)---视图界面加载适配器

AndroidManifest.xml中修改

android:theme="@android:style/Theme.Black.NoTitleBar">显示为黑色背景无标题栏


android:numColumns="" 每一行显示多少列
android:horizontalSpacing="" 两行之间的间距,行间距会跟随设置
android:vertivalSpacing="" 两列之间的间距,列间距会根据列数铺满屏幕,所以可能会大于设置的值


新建GridView组件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.bcp.gridviewtest.MainActivity">

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


新建一个 item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#000">
    <!--父类属性设置为默认居中-->

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image"
        android:src="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text"
        android:textColor="#fff"
        android:text="文字"/>

</LinearLayout>

java文件

package com.bcp.gridviewtest;

import android.app.Activity;
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 Activity implements AdapterView.OnItemClickListener{
    //创建对象
    private GridView gridView;
    //数据源
    private List<Map<String,Object>> dataList;
    //将图片封装成数据源
    private int[] icon={R.drawable.android_64,R.drawable.circle_google_64,R.drawable.coffee,
            R.drawable.google_64,R.drawable.sign_left,R.drawable.sign_right};
    //将每个图标要显示的名称也封装起来
    private String[] iconName={"android","google_1","coffee","google_2","left","right"};

    //新建适配器
    private SimpleAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView= (GridView) findViewById(R.id.gridview);
        /***
         * 1、准备数据源   在drawable文件夹中方一些图片
         * 2、新建适配器SimpleAdapter
         * 3、GridView加载适配器
         * 4、GridView配置事件监听器(OnItemClickListener)
         */
        dataList=new ArrayList<Map<String,Object>>();

        adapter=new SimpleAdapter(this,getData(),R.layout.item,
                new String[]{"image","text"},new int[]{R.id.image,R.id.text});
        
        gridView.setAdapter(adapter);
        //加载点击事件
        gridView.setOnItemClickListener(this);
    }

    private List<Map<String,Object>> getData() {
        for (int i=0;i<icon.length;i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("image",icon[i]);
            map.put("text",iconName[i]);
            dataList.add(map);
        }
        return dataList;
    }

    //重写OnClick方法
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Toast.makeText(MainActivity.this, "我是"+iconName[i], Toast.LENGTH_SHORT).show();
    }
}




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值