GridView-网格布局案例

最新推荐文章于 2022-05-21 16:08:37 发布

EasonVincent

最新推荐文章于 2022-05-21 16:08:37 发布

阅读量433

点赞数 1

本文链接：https://blog.csdn.net/EasonVincent/article/details/51388957

版权

(1)图片1效果

(2)随机点击图片出现

(3)随机点击图片出现

页面布局content_main.xml用GridView显示

<? 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 :layout_gravity= "center_horizontal"
    >
    <GridView
        android :id= "@+id/gridView01"
        android :layout_width= "match_parent"
        android :layout_height= "wrap_content"
        android :horizontalSpacing= "1pt"
        android :verticalSpacing= "1pt"
        android :numColumns= "4"
        android :gravity= "center" />
        <ImageView
            android :id= "@+id/imageView"
            android :layout_width= "100dp"
            android :layout_height= "100dp"
            android :layout_gravity= "center_horizontal" />
</LinearLayout>

在GridViewTest里用SimpleAdapter将图片显示在content_main.xml页面上

package com.eson.gridview ;

import android.os.Bundle ;
import android.support.v7.app.AppCompatActivity ;
import android.view.View ;
import android.widget.AdapterView ;
import android.widget.GridView ;
import android.widget.ImageView ;
import android.widget.SimpleAdapter ;

import java.util.ArrayList ;
import java.util.HashMap ;
import java.util.List ;
import java.util.Map ;

public class GridViewTest extends AppCompatActivity {
    private ImageView imageView;
    private GridView grid ;
    int[] imageIds =new int []{
            R.drawable. bomb1, R.drawable. bomb2, R.drawable. bomb3,
            R.drawable. bomb4 , R.drawable. bomb5 , R.drawable. bomb6 ,
            R.drawable. bomb7 , R.drawable. bomb8 , R.drawable. bomb9 ,
            R.drawable. bomb10 , R.drawable. bomb11 , R.drawable. bomb12
    } ;

    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super .onCreate(savedInstanceState) ;
        setContentView(R.layout. content_main );
        //创建一个List对象，List对象的元素是Map
        List<Map<String , Object>> listItems= new ArrayList<>() ;
        for ( int i = 0 ; i < imageIds . length; i++) {
            Map<String ,Object> map= new HashMap<>();
           map.put( "image" ,imageIds [i]) ;
            listItems.add(map) ;
        }
        //获取显示图片的ImageView
        imageView = (ImageView) findViewById(R.id. imageView );
        //创建一个SimpleAdapter
        SimpleAdapter simpleAdapter= new SimpleAdapter(this, listItems ,R.layout. content_main ,new String[]{ "image"} ,new int []{R.id. imageView}) ;
        grid = (GridView) findViewById(R.id. gridView01 );
        //为GridView设置Adapter
        grid .setAdapter(simpleAdapter) ;
        //添加列表项被选中的监听器
        grid .setOnItemSelectedListener( new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected (AdapterView<?> parent , View view , int position, long id) {
                imageView.setImageResource( imageIds [position]);
            }

            @Override
            public void onNothingSelected (AdapterView<?> parent) {

            }
        });
        //添加列表项被单击的监听器
        grid .setOnItemClickListener( new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick (AdapterView<?> parent , View view , int position, long id) {
               //显示被单击的图片
                imageView.setImageResource( imageIds [position]);
            }
        });
    }
}