Android开发 GridView详解

2022-02-25 09:52:27

前言

xml样板

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:horizontalSpacing="1dp"
        android:numColumns="3"
        android:verticalSpacing="1dp">
    </GridView>

常用的属性

android:numColumns="auto_fit" ，GridView的列数设置为自动

android:columnWidth="90dp"，每列的宽度，也就是Item的宽度

android:stretchMode="columnWidth"，缩放与列宽大小同步

NO_STRETCH	0	扩展无效
STRETCH_COLUMN_WIDTH	2	扩展列
STRETCH_SPACING	1	扩展列间的空间
STRETCH_SPACING_UNIFORM	3	均匀地扩展列间的空间

android:verticalSpacing="10dp"，两行之间的边距

android:horizontalSpacing="10dp"，两列之间的边距

例子1 使用ArrayAdapter

在Activity里

List<String> stringList = new ArrayList<>();
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this,R.layout.text_parent_select_item,stringList);
gridView.setAdapter(arrayAdapter);

text_parent_select_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/name"
    android:layout_width="75dp"
    android:layout_height="37dp"
    android:textSize="@dimen/font_size_16"
    android:textColor="@color/fontBlack1"
    android:gravity="center"
    android:maxLines="1"
    android:background="@drawable/bg_orange_edge_rectangle">

</TextView>

例子2 使用SimpleAdapter

Activity类

public class MainActivity extends Activity {
    private GridView gridView;
    private List<Map<String, Object>> dataList;
    private SimpleAdapter adapter;
    //如果只有TextView 可以考虑使用ArrayAdapter 适配器，当然你也可以自定义适配器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = (GridView) findViewById(R.id.gridview);
        //初始化数据
        initData();

        String[] from={"img","text"};

        int[] to={R.id.img,R.id.text};

        adapter=new SimpleAdapter(this, dataList, R.layout.gridview_item, from, to);

        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
            AlertDialog.Builder builder= new AlertDialog.Builder(MainActivity.this);
            builder.setTitle("提示").setMessage(dataList.get(arg2).get("text").toString()).create().show();
            }
        });
    }

    void initData() {
        //图标
        int icno[] = { R.drawable.i1, R.drawable.i2, R.drawable.i3,
                R.drawable.i4, R.drawable.i5, R.drawable.i6, R.drawable.i7,
                R.drawable.i8, R.drawable.i9, R.drawable.i10, R.drawable.i11, R.drawable.i12 };
        //图标下的文字
        String name[]={"时钟","信号","宝箱","秒钟","大象","FF","记事本","书签","印象","商店","主题","迅雷"};
        dataList = new ArrayList<Map<String, Object>>();
        for (int i = 0; i <icno.length; i++) {
            Map<String, Object> map=new HashMap<String, Object>();
            map.put("img", icno[i]);
            map.put("text",name[i]);
            dataList.add(map);
        }
    }

}

GridView主布局文件activity_main.xml

<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:background="#000"
    tools:context="com.example.l7.MainActivity" >
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="80dp"
        android:stretchMode="spacingWidthUniform"
        android:numColumns="3"
         />
</LinearLayout>

列表项布局gridview_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_launcher" />
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:layout_gravity="center"
        android:textColor="#FFF"
        android:text="文字"
        />

</LinearLayout>

只显示一行的问题

格外注意！如果你是滚动布局（ListView、ScrollView等等）包裹GridView，就出现不会自动换行的问题。这个时候需要你如下自定义view。

    package com.weijie.app_user.activity.order;  
      
    import android.content.Context;  
    import android.util.AttributeSet;  
    import android.widget.GridView;  
      
    public class MyGridView extends GridView {  
      
         public MyGridView(Context context, AttributeSet attrs) {   
                super(context, attrs);   
            }   
      
            public MyGridView(Context context) {   
                super(context);   
            }   
      
            public MyGridView(Context context, AttributeSet attrs, int defStyle) {   
                super(context, attrs, defStyle);   
            }   
      
            @Override   
            public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {   
      
                int expandSpec = MeasureSpec.makeMeasureSpec(   
                        Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);   
                super.onMeasure(widthMeasureSpec, expandSpec);   
            }   
    }