Anrodi Studio App开发入门之网格视图GridView的使用及实战(附源码 超详细必看)

简介: Anrodi Studio App开发入门之网格视图GridView的使用及实战(附源码 超详细必看)

需要图片集或全部源码请点赞关注收藏后评论区留言~~~

网格视图GridView

除了列表视图,网格视图GridView也是常见的列表类视图,它用于分行分列显示表格信息,比列表视图更适合展示物品清单,除了沿用列表视图的三个方法,网格视图还新增了部分属性与方法如下

horizontalSpacing  指定网格项在水平方向的间距

verticalSpacing  指定网格在垂直方向的间距

numColumns  指定列的数目

stretchMode  指定剩余空间的拉伸模式

columnWidth  指定每列的宽度

拉伸模式取值如下

none  不拉伸

columnWidth  若有剩余空间 则拉伸列宽挤掉空隙

spacingWidth  若有剩余空间 则列宽不变 把空间分配到列间的空隙

spacingWidthUniform 若有剩余空间 则列宽不变 把空间分配到每列左右的间隙

网格视图的按压背景与焦点抢占问题类似于列表视图,此外还需要注意网格项的拉伸模式,因为同一行的网格项可能站不满空间,多出来的空间就由拉伸模式决定怎么分配。效果如下

变换了多种拉伸效果

Java类代码

package com.example.chapter08;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Spinner;
import androidx.appcompat.app.AppCompatActivity;
import com.example.chapter08.adapter.PlanetGridAdapter;
import com.example.chapter08.bean.Planet;
import com.example.chapter08.util.Utils;
import java.util.List;
public class GridViewActivity extends AppCompatActivity {
    private final static String TAG = "GridViewActivity";
    private GridView gv_planet; // 声明一个网格视图对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view);
        List<Planet> planetList = Planet.getDefaultList();
        // 构建一个行星列表的网格适配器
        PlanetGridAdapter adapter = new PlanetGridAdapter(this, planetList);
        // 从布局视图中获取名叫gv_planet的网格视图
        gv_planet = findViewById(R.id.gv_planet);
        gv_planet.setAdapter(adapter); // 设置网格视图的适配器
        gv_planet.setOnItemClickListener(adapter); // 设置网格视图的点击监听器
        gv_planet.setOnItemLongClickListener(adapter); // 设置网格视图的长按监听器
        initDividerSpinner(); // 初始化拉伸模式的下拉框
    }
    // 初始化拉伸模式的下拉框
    private void initDividerSpinner() {
        ArrayAdapter<String> dividerAdapter = new ArrayAdapter<String>(this,
                R.layout.item_select, dividerArray);
        Spinner sp_stretch = findViewById(R.id.sp_stretch);
        sp_stretch.setPrompt("请选择拉伸模式"); // 设置下拉框的标题
        sp_stretch.setAdapter(dividerAdapter); // 设置下拉框的数组适配器
        sp_stretch.setSelection(0); // 设置下拉框默认显示第一项
        // 给下拉框设置选择监听器,一旦用户选中某一项,就触发监听器的onItemSelected方法
        sp_stretch.setOnItemSelectedListener(new DividerSelectedListener());
    }
    private String[] dividerArray = {
            "不显示分隔线",
            "不拉伸(NO_STRETCH)",
            "拉伸列宽(COLUMN_WIDTH)",
            "列间空隙(STRETCH_SPACING)",
            "左右空隙(SPACING_UNIFORM)",
            "使用padding显示全部分隔线"
    };
    class DividerSelectedListener implements OnItemSelectedListener {
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            int dividerPad = Utils.dip2px(GridViewActivity.this, 2); // 定义间隔宽度为2dp
            gv_planet.setBackgroundColor(Color.CYAN);  // 设置背景颜色
            gv_planet.setHorizontalSpacing(dividerPad);  // 设置列表项在水平方向的间距
            gv_planet.setVerticalSpacing(dividerPad);  // 设置列表项在垂直方向的间距
            gv_planet.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);  // 设置拉伸模式
            gv_planet.setColumnWidth(Utils.dip2px(GridViewActivity.this, 120));  // 设置每列宽度为120dp
            gv_planet.setPadding(0, 0, 0, 0);  // 设置网格视图的四周间距
            if (arg2 == 0) {  // 不显示分隔线
                gv_planet.setBackgroundColor(Color.WHITE);
                gv_planet.setHorizontalSpacing(0);
                gv_planet.setVerticalSpacing(0);
            } else if (arg2 == 1) {  // 不拉伸(NO_STRETCH)
                gv_planet.setStretchMode(GridView.NO_STRETCH);
            } else if (arg2 == 2) {  // 拉伸列宽(COLUMN_WIDTH)
                gv_planet.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
            } else if (arg2 == 3) {  // 列间空隙(STRETCH_SPACING)
                gv_planet.setStretchMode(GridView.STRETCH_SPACING);
            } else if (arg2 == 4) {  // 左右空隙(SPACING_UNIFORM)
                gv_planet.setStretchMode(GridView.STRETCH_SPACING_UNIFORM);
            } else if (arg2 == 5) {  // 使用padding显示全部分隔线
                gv_planet.setPadding(dividerPad, dividerPad, dividerPad, dividerPad);
            }
        }
        public void onNothingSelected(AdapterView<?> arg0) {}
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="拉伸模式:"
            android:textColor="@color/black"
            android:textSize="17sp" />
        <Spinner
            android:id="@+id/sp_stretch"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="left|center"
            android:spinnerMode="dialog" />
    </LinearLayout>
    <GridView
        android:id="@+id/gv_planet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00ffff"
        android:horizontalSpacing="3dp"
        android:verticalSpacing="3dp"
        android:numColumns="2"
        android:stretchMode="columnWidth" />
</LinearLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

相关文章
|
3天前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
33 20
|
1天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
35 11
|
21小时前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
26 3
|
21小时前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
699 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
752 1
|
5天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
31 6
|
6天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
30 3
|
12天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
48 8
|
8天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。

热门文章

最新文章