自定义实现GridView
- 一、实现效果
- 二、实现步骤
- 1.MyGridView类
- 2.GridView的item
- 3.编写适配器类
- 4.主界面布局
- 5.主界面代码
一、实现效果
（请忽略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;
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就行了。
