1. 程式人生 > 實用技巧 >瞭解Android_09之GridView(網格檢視)

瞭解Android_09之GridView(網格檢視)

一、GridView檢視是什麼樣的一種效果?

GridView將自定義佈局樣式按照網格的方式進行顯示,例如:

GridView標籤程式碼:

<GridView
    android:id="@+id/gv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="3"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="20dp"
    android:listSelector
="@drawable/gridview_item" />

其中引入了自定的按壓樣式:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/colorRed"/>
    <item android:state_pressed="true" android:drawable
="@color/colorRed"/> <item android:state_focused="true" android:drawable="@color/colorRed"/> </selector>

二、GridView類似ListView,內部item都是由Java程式碼進行控制的:

先自定義一個item佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width
="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/iv1" android:layout_width="match_parent" android:layout_height="150dp" android:background="#FFFF00" android:scaleType="centerCrop" /> <TextView android:id="@+id/tv1" android:layout_width="match_parent" android:layout_height="40dp" android:text="標籤自帶文字" android:textSize="18sp" android:gravity="center" android:textColor="#FF0000" /> </LinearLayout>

再自定義一個介面卡(我這裡直接用內部類):

package com.example.gridviewdemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.*;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {
    GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = findViewById(R.id.gv1);
        gridView.setAdapter(new GridViewAdapter(this));
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this,"單擊了位置為:"+i,Toast.LENGTH_SHORT).show();
            }
        });
        gridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this,"你長按了"+i,Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }
    private class GridViewAdapter extends BaseAdapter {
        Context context;
        LayoutInflater layoutInflater;
        GridViewAdapter(Context context){
            this.context = context;
            this.layoutInflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return 9;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

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

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            view = layoutInflater.inflate(R.layout.gridview_item,null);
            ImageView imageView = view.findViewById(R.id.iv1);
            TextView textView = view.findViewById(R.id.tv1);
            Glide.with(this.context).load("https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1604332215&t=cb2b5ed8ce723d4117196f3ee207a001").into(imageView);
            textView.setText("設定後的文字");
            return view;
        }
    }
}

與ListView十分相像,所以不做過多的解釋了。

最後效果: