一、实现效果

（请忽略GridView上方的banner）

在这里插入图片描述

二、实现步骤

实现GridView主要有三个步骤：

编写MyGridView继承GridView
编写GridView的item
编写适配器类

1.MyGridView类

package com.example.edm.Utils;


import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView;

/**
 * Created by KI on 2020/8/29.
 */

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);
    }
}

这一步其实可有可无，直接使用GridView也行。

2.GridView的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:gravity="center_horizontal"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="3dp">

        <ImageView
            android:id="@+id/iv_grid"
            android:layout_width="60dp"
            android:layout_height="60dp" />

        <TextView
            android:id="@+id/tv_grid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center"
            android:text="" />
    </LinearLayout>
</LinearLayout>

可以看到每一个item其实就是简单的上图片+下文字，就是这个玩意儿：
在这里插入图片描述

3.编写适配器类

实现GridView要编写适配器类GridViewAdapter继承BaseAdapter，这一步很关键：

package com.example.edm.adapter;

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 com.example.edm.R;

public class GridViewAdapter extends BaseAdapter {
    private Context context;
    String []names;
    int []images;

    public GridViewAdapter(Context context, String []names, int []images) {
        this.context = context;
        this.names = names;
        this.images = images;
    }

    @Override
    public int getCount() {
        return names.length;
    }

    @Override
    public Object getItem(int position) {
        return names[position];
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_grid, null);
        ImageView iv = view.findViewById(R.id.iv_grid);
        TextView tv = view.findViewById(R.id.tv_grid);
        iv.setImageResource(images[position]);
        tv.setText(names[position]);
        return view;
    }
}

初始化Adapter时传进了两个很重要的参数：names和images，分别表示GridView里面item的图片和文字。里面最重要的一个方法是getView，用于返回子布局的视图，方法的代码很容易理解，就不再解释了。

4.主界面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_education"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/main_color"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@android:color/transparent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <com.youth.banner.Banner
                    android:id="@+id/banner"
                    android:layout_width="match_parent"
                    android:layout_height="180dp"
                    app:indicator_height="6dp"
                    app:indicator_margin="5dp"
                    app:indicator_width="6dp">

                </com.youth.banner.Banner>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:background="#fff"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:padding="8dp"
                        android:text="教务查询"
                        android:textColor="#000000"
                        android:textSize="14sp" />
                </LinearLayout>

                <com.example.edm.Utils.MyGridView
                    android:id="@+id/gv_education"
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:layout_marginTop="3dp"
                    android:background="#fff"
                    android:gravity="center"
                    android:horizontalSpacing="2dp"
                    android:numColumns="4"
                    android:padding="3dp"
                    android:scrollbars="none"
                    android:verticalSpacing="2dp">

                </com.example.edm.Utils.MyGridView>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:background="#fff"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:padding="8dp"
                        android:text="可视化"
                        android:textColor="#000000"
                        android:textSize="14sp" />
                </LinearLayout>

                <com.example.edm.Utils.MyGridView
                    android:id="@+id/gv_vision"
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:layout_marginTop="3dp"
                    android:background="#fff"
                    android:gravity="center"
                    android:horizontalSpacing="2dp"
                    android:numColumns="4"
                    android:padding="3dp"
                    android:scrollbars="none"
                    android:verticalSpacing="2dp">

                </com.example.edm.Utils.MyGridView>


            </LinearLayout>

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
</LinearLayout>

5.主界面代码

package com.example.edm.Student;

import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.example.edm.R;
import com.example.edm.Student.TimeTable.TimeTableActivity;
import com.example.edm.ToastUtil;
import com.example.edm.Utils.GlideImageLoader;
import com.example.edm.Utils.MyGridView;
import com.example.edm.adapter.GridViewAdapter;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;

import java.util.ArrayList;

public class QueryFragment extends Fragment {

    private MyGridView eduGridView;
    private MyGridView visionGridView;
    private Banner banner;

    @Nullable
    @Override

    //类似于Activity里面的setContentView();
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_query,container,false);
        initViews(view);
        initBanner(view);
        Onclick();
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }


    public void initViews(View v) {
        eduGridView = v.findViewById(R.id.gv_education);
        String []namesEdu = {"成绩查询", "课表查询", "考试安排", "学分与绩点"};
        int []imagesEdu = {R.drawable.query_mark, R.drawable.query_timetable, R.drawable.query_exam, R.drawable.query_credit};
        GridViewAdapter gridViewAdapter1 = new GridViewAdapter(getActivity(), namesEdu, imagesEdu);
        eduGridView.setAdapter(gridViewAdapter1);
        visionGridView = v.findViewById(R.id.gv_vision);
        String []namesVis = {"成绩占比", "分数趋势"};
        int []imagesVis = {R.drawable.grade_rate, R.drawable.grade_tendency};
        GridViewAdapter gridViewAdapter2 = new GridViewAdapter(getActivity(), namesVis, imagesVis);
        visionGridView.setAdapter(gridViewAdapter2);
    }

    //初始化banner
    private void initBanner(View v) {
        ArrayList<Integer> list = new ArrayList<>();
        list.add(R.drawable.ncepu_1);
        list.add(R.drawable.ncepu_2);
        list.add(R.drawable.ncepu_3);
        list.add(R.drawable.ncepu_4);
        list.add(R.drawable.ncepu_5);
        banner = v.findViewById(R.id.banner);
        //设置banner样式
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
        //设置指示器位置（当banner模式中有指示器时）
        banner.setIndicatorGravity(BannerConfig.CENTER);
        //设置图片加载器
        banner.setImageLoader(new GlideImageLoader());
        //设置图片集合
        banner.setImages(list);
        //设置banner动画效果
        banner.setBannerAnimation(Transformer.Default);
        //设置自动轮播，默认为true
        banner.isAutoPlay(true);
        //设置轮播时间
        banner.setDelayTime(3000);
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {
                ToastUtil.showMessage(getActivity(), "该图片不包括内容！");

            }
        });
        //banner设置方法全部调用完毕时最后调用
        banner.start();
    }

    private void Onclick() {
        eduGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            Intent intent = null;
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                switch (position) {
                    case 0:
                        intent = new Intent(getActivity(), GradeActivity.class);
                        startActivity(intent);
                        break;

                    case 1:
                        intent = new Intent(getActivity(), TimeTableActivity.class);
                        startActivity(intent);
                        break;

                    case 2:
                        intent = new Intent(getActivity(), ExamActivity.class);
                        startActivity(intent);
                        break;

                    case 3:
                        break;
                }
            }
        });

        //可视化
        visionGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            Intent intent = null;
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                switch (position) {
                    case 0:
                        intent = new Intent(getActivity(), GradeRateActivity.class);
                        startActivity(intent);
                        break;
                }
            }
        });
    }

}

主界面就是简单地初始化view以及设置点击事件，在使用这个demo的时候去掉最上面的banner就行了。

Android自定义较为精美的GridView

自定义实现GridView