Android—Gridview(网格视图)

不念不忘少年蓝@ 2022-07-14 22:26 369阅读 0赞

**GridView介绍**  
GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片，文字等内容，比如实现九宫格图，用GridView是首选，也是最简单的。主要用于设置Adapter。  
GridView常用的XML属性：

<table> 
 <thead> 
  <tr> 
   <th>属性名称</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Android:columnWidth</td> 
   <td align="center">设置列的宽度。</td> 
  </tr> 
  <tr> 
   <td>android:gravity</td> 
   <td align="center">设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“</td> 
  </tr> 
  <tr> 
   <td>android:horizontalSpacing</td> 
   <td align="center">两列之间的间距。</td> 
  </tr> 
  <tr> 
   <td>android:numColumns</td> 
   <td align="center">设置列数。</td> 
  </tr> 
  <tr> 
   <td>android:stretchMode</td> 
   <td align="center">缩放模式。</td> 
  </tr> 
  <tr> 
   <td>android:verticalSpacing</td> 
   <td align="center">两行之间的间距。</td> 
  </tr> 
 </tbody> 
</table>

下面我做一个实例利用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.turo.gardviewtest.MainActivity">
    
    
        <GridView android:id="@+id/gridView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:columnWidth="90dp" android:numColumns="3" android:paddingTop="10dp" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" />
    </LinearLayout>

Adapter适配器子项布局：

<?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">
    
        <ImageView android:id="@+id/imageView1" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    
        <TextView android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tvTitle" />
    
        <TextView android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tvDay" />
    
    </LinearLayout>

package com.turo.gardviewtest;
    
    /** * Created by YQ950209 on 2016/10/24. */
    
    public class GrilData { 
    
        public int imgId;
        public String day;
    
    }

实现代码：

package com.turo.gardviewtest;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.BaseAdapter;
    import android.widget.GridView;
    import android.widget.Toast;
    
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity { 
    
        private GridView gv;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //获得控件
            gv = (GridView) findViewById(R.id.gridView);
    
            //获得数据
            List<GrilData> list = DataCenter.GetData();
    
            //构造适配器
            BaseAdapter adapter = new MyBaseAdapter(MainActivity.this,list);
    
            //设置适配器
            gv.setAdapter(adapter);
    
            //为GridView设置监听器
            gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                    Toast.makeText(MainActivity.this, "图片"+ (i+1) + "被选中", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

适配器类

package com.turo.gardviewtest;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import java.util.List;
    
    /** * Created by YQ950209 on 2016/10/24. */
    
    public class MyBaseAdapter extends BaseAdapter { 
    
        Context context;
        List<GrilData> list;
    
        public MyBaseAdapter(Context context , List<GrilData> list) {
            this.context = context;
            this.list = list;
        }
    
        //获得一个数字，代表呈现在GridView中的数据有几份
        @Override
        public int getCount() {
            if (list == null || list.size() <= 0){
                    return 0;
            }
            return list.size();
        }
    
        @Override
        public Object getItem(int i) {
            return null;
        }
    
        @Override
        public long getItemId(int i) {
            return 0;
        }
    
        //获得一个View对象，告知GridView每一份数据是怎样的、应该怎么呈现
        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
    
            LayoutInflater inflater = LayoutInflater.from(context);
            ViewGroup viewGroup1 = (ViewGroup) inflater.inflate(R.layout.gridview,null);
    
            ImageView imageView = (ImageView) viewGroup1.findViewById(R.id.imageView1);
            imageView.setImageResource(list.get(i).imgId);
    
            TextView textView1 = (TextView) viewGroup1.findViewById(R.id.tvTitle);
            textView1.setText("宝宝");
    
            TextView textView2 = (TextView) viewGroup1.findViewById(R.id.tvDay);
            textView2.setText(list.get(i).day);
    
            return viewGroup1;
        }
    }

package com.turo.gardviewtest;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /** * Created by YQ950209 on 2016/10/24. */
    
    public class DataCenter {
    
        public static List<GrilData> GetData(){
    
            List<GrilData> list = new ArrayList<>();
    
            GrilData gd1 = new GrilData();
            gd1.imgId = R.drawable.a;
            gd1.day = "2011.01.20";
    
            GrilData gd2 = new GrilData();
            gd2.imgId = R.drawable.b;
            gd2.day = "2012.01.20";
    
            GrilData gd3 = new GrilData();
            gd3.imgId = R.drawable.c;
            gd3.day = "2013.01.20";
    
            GrilData gd4 = new GrilData();
            gd4.imgId = R.drawable.d;
            gd4.day = "2014.01.20";
    
            GrilData gd5 = new GrilData();
            gd5.imgId = R.drawable.e;
            gd5.day = "2015.01.20";
    
            GrilData gd6 = new GrilData();
            gd6.imgId = R.drawable.f;
            gd6.day = "2016.01.20";
    
            GrilData gd7 = new GrilData();
            gd7.imgId = R.drawable.g;
            gd7.day = "2017.01.20";
    
            GrilData gd8 = new GrilData();
            gd8.imgId = R.drawable.h;
            gd8.day = "2018.01.20";
    
            GrilData gd9 = new GrilData();
            gd9.imgId = R.drawable.i;
            gd9.day = "2019.01.20";
    
            list.add(gd1);
            list.add(gd2);
            list.add(gd3);
            list.add(gd4);
            list.add(gd5);
            list.add(gd6);
            list.add(gd7);
            list.add(gd8);
            list.add(gd9);
    
            return list;
        }
    }

效果图：  
![这里写图片描述][20161024235321208]

[20161024235321208]: /images/20220715/c73ce148aee4452bbe080ee4e277edab.png