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>

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

相关文章
|
9天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
43 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
15天前
|
监控 安全 开发者
山东布谷科技:关于直播源码|语音源码|一对一直播源码提交App Store的流程及重构经验
分享提交直播源码,一对一直播源码,语音源码到Appstore的重构经验!
|
17天前
|
NoSQL 应用服务中间件 PHP
布谷一对一直播源码服务器环境配置及app功能
一对一直播源码阿里云服务器环境配置及要求
|
16天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
13天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
504 1
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
121 1
uniapp一个人开发APP关键步骤和考虑因素
|
30天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
70 9
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
177 1

热门文章

最新文章