GridView(網格視圖)的使用

一、GridView概述

GridView是一個以表格形式顯示多張圖片等組件。它是按照行列的方式來顯示內容的，比如實現九宮格圖，用GridView是首選。

二、GridView常用屬性

屬性名稱	描述
android:columnWidth	設置列的寬度。
android:gravity	設置此組件中的內容在組件中的位置。可選的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多選，用“|”分開。
android:horizontalSpacing	兩列之間的間距。
android:numColumns	設置列數。
android:stretchMode	縮放模式。
android:verticalSpacing	兩行之間的間距。

三、GridView的使用

1.准備數據源（圖片和文字）

2.新建適配器（設置自定義的單元格布局和數據源）

3.GridView加載適配器

4.GridView配置事件監聽

Activity代碼

public class GridActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid);
        GridView gridView = (GridView) findViewById(R.id.app_gv);
        //加載適配器
        gridView.setAdapter(new GridAdapter(GridActivity.this,initData()));
    }
    //數據源准備
    private List<AppInfo> initData(){
        List<AppInfo> appList = new ArrayList<>();
        appList.add(new AppInfo(R.drawable.wx_01,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_02,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_03,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_04,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_05,"wx01"));
        return appList;
    }
}

 

GridView布局代碼

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/app_gv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:gravity="center"
    />

 

 

適配器代碼

public class GridAdapter extends BaseAdapter {

    private Context context;
    private List<AppInfo> appList;
    private ImageView imageView;
    private TextView textView;

    public GridAdapter(Context context,List<AppInfo> appList){
        this.context = context;
        this.appList = appList;
    }
    @Override
    public int getCount() {
        return appList.size();
    }

    @Override
    public Object getItem(int position) {
        return appList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        AppInfo app = appList.get(position);
        convertView = View.inflate(context, R.layout.item_grid,null);
        imageView = (ImageView) convertView.findViewById(R.id.appImg);
        textView = (TextView) convertView.findViewById(R.id.appName);
        imageView.setImageResource(app.getAppImg());
        textView.setText(app.getAppName());
        return convertView;
    }
}

單元格布局代碼

<?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/appImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/appName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="ItemName"/>

</LinearLayout>