手把手带你撸一个校园APP(四):APP功能设计及主页面框架
中国加油!武汉加油!
前言
开发一个APP,首先应该明确APP想要的功能。
本项目基于Bmob进行开发,很多地方需要Bmob相关知识。大家如果没了解过的话,可先自行查看 Bmob开发文档 。
系列文章:
手把手带你撸一个校园APP(一):项目简介
手把手带你撸一个校园APP(二):应用启动和欢迎页面
手把手带你撸一个校园APP(三):用户模块(登录注册等)
功能设计
“科师有约” 校园APP 设计的定位是 “校园信息聚合平台” ,那就要最大程度上利用学校现有的线上资源,比如学校官网、线上图书馆、微信公众号、微博等信息,并且聚合到我们的APP中,方便学生用户去使用。
功能需求点整理
通用APP功能:
用户信息,检查更新,意见反馈,关于我们
校园APP功能:
身为校园APP,功能设计就应该从校园生活的方方面面去入手。那么可以总结出来功能点如下:
学习方面:课程表,掌上图书馆,校历
生活方面:失物招领,二手交易,食堂投诉,后勤保修,宿舍管理,学校建议,校园通讯录等
信息方面:学校官网,通知公告,校园新鲜事,自媒体文章等
校园文化方面:表白墙,图说校园,社团组织
有了基本的功能点,我们就可以对功能点进行下归类安放。
功能归类
功能点已经总结如上,但是各个功能的使用频次不尽相同。功能归类时,考虑如下:
- APP主要作用为信息聚合,所以应方便进行各种信息资讯的阅读。因此通知公告,校园新鲜事,自媒体文章等可归类在一起;
- 食堂投诉,后勤保修,宿舍管理,学校建议等都为学生保障自我权益使用,属于低频次需求,且都需要向学校相关组织反馈信息。可以归类为 “权益保障”;
- 课程表,掌上图书馆,校历,失物招领,二手交易等属于较高频次的需求,可以放置在首页方便使用;
- 用户信息,检查更新,意见反馈等通用APP的功能点可以放在一起。
因此,APP设计为 底部导航栏 + 页面 形式。
共分为“首页”,“新闻”,“我的”三栏。
首页:放置使用频次较高的功能点
新闻:展示新闻列表
我的:放置使用频次较低的功能点以及APP通用功能
主页面
一般来说,类似的主页面可以采用 RadioGroup + ViewPager +Fragment 来实现。然后给RadioGroup 以及 Viewpager 设置监听事件来制造关联。本项目如此实现也没有问题。
为了提升开发效率,也避免重复创建轮子。项目使用了BottomTabView,在此向作者表示感谢。文章信息如下,大家有兴趣可自行浏览:
GitHub:BottomTabView
文章:Android 快速开发(二),封装一个 BottomTabBaseActivity
作者:陈序员 https://blog.ifmvo.cn
(但是原文链接访问不了了,下面会讲解下大概的思路逻辑。想了解原理详情的话可以看别人在CSDN转载的文章) https://blog.csdn.net/dianziagen/article/details/72478927
思路逻辑
- 自定义标签控件 TabItemView,对应布局 view_tab_item.xml,用于显示标签名称以及图标,预设 “选中” 与 “未选中” 两种状态;
- 自定义底部标签栏 BottomTabView,用来存放 TabItemView,并设置监听事件动态改变其状态,暴露出绑定 Viewpager 的方法;
- 主页面布局文件(ViewPager + BottomTabView);
- Activity中 BottomTabView 关联绑定 Viewpager;
- ViewPager 绑定Fragment 列表,并设置 PageChangeListener。
整体逻辑大概如上所述,当然,自定义控件项目中已经写好,直接复制过来用就好了
使用方法
- 从项目中复制文件BottomTabView.java,view_tab_item.xml 到对应目录下
- 搭建主页面布局文件(ViewPager + BottomTabView)
<?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"><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><!-- 改为你的对应目录 --><top.vchao.hnust.view.BottomTabViewandroid:id="@+id/bottomTabView"android:layout_width="match_parent"android:layout_height="50dp"android:gravity="bottom" />
</LinearLayout>
- 初始化 Fragment列表 并与 ViewPager 绑定;
// 初始化 fragment 列表
List<Fragment> fragments = new ArrayList<>();
fragments.add(new TabHomeFragment());
fragments.add(new TabNewsFragment());
fragments.add(new TabMyFragment());adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic Fragment getItem(int position) {return fragments.get(position);}@Overridepublic int getCount() {return fragments.size();}
};viewPager.setAdapter(adapter);
- 初始化标签列表,并将 BottomTabView 与 Viewpager 关联绑定。
List<BottomTabView.TabItemView> tabItemViews = new ArrayList<>();
tabItemViews.add(new BottomTabView.TabItemView(this, "首页", R.color.colorPrimary,R.color.colorAccent, R.mipmap.main_home_nor, R.mipmap.main_home_pre));
tabItemViews.add(new BottomTabView.TabItemView(this, "新闻", R.color.colorPrimary,R.color.colorAccent, R.mipmap.main_buy_nor, R.mipmap.main_buy_pre));
tabItemViews.add(new BottomTabView.TabItemView(this, "我的", R.color.colorPrimary,R.color.colorAccent, R.mipmap.main_user_nor, R.mipmap.main_user_pre));bottomTabView.setTabItemViews(tabItemViews);
bottomTabView.setUpWithViewPager(viewPager);
至此,主页面搭建完毕。
(项目代码正在整理,估计将会在一周内放到 github 上,等源码的同学稍安勿躁哈~~)
如果本文对你有所帮助,还望可以随手赏一个点赞哈 ~ ~
手把手带你撸一个校园APP(四):APP功能设计及主页面框架相关推荐
- 手把手带你撸一个校园APP(五):新闻中心模块
这个项目是很早之前在学校做的,如今再回首.很多代码很是粗糙,逻辑也不尽完善.还望各位看官海涵. 前言 通过上一篇文章的功能设计,我们可以发现新闻通知公告等是APP的最主要功能点.主要是聚合展示学校官网 ...
- 手把手带你撸一个校园APP(六):失物招领二手交易模块
代码经过简单的整理,已经放到Github上了.https://github.com/zhengweichao/Hevttc 回首来看,代码质量一般,里面也有各种逻辑问题,还望各位看官海涵.接下来有时间 ...
- 手把手带你撸一个cli工具
你有没有遇到过在没有vue-cli.create-react-app这样子的脚手架的时候一个文件一个文件的去拷贝老项目的配置文件.最近,笔者就在为组里的框架去做一套基本的cli工具.通过这边文章,笔者 ...
- 手把手带你写一个中高级程序员必会的分布式RPC框架
一.概述 什么是RPC? 远程服务调用 官方:一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的思想 通俗一点:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调 ...
- dispatch作用 react_「React系列」手把手带你撸后台系统(Redux与路由鉴权)
[React系列]手把手带你撸后台系统(Redux与路由鉴权) 来源:https://juejin.im/post/5d9b5ddee51d45781b63b8f7 上一篇我们介绍了系统架构,这一篇将 ...
- 手把手教你撸一个Web汇率计算器
手把手教你撸一个Web汇率计算器 前言 前段时间刚接触到前端网页开发,但是对于刚入门的小白而言,像flask.Django等这类稍大型的框架确实不太适合,今天这个Dash是集众家之长于一体的轻量化We ...
- 手把手带你写一个JavaScript类型判断小工具
业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...
- 【NLP】Pyhon+讯飞开放平台:手把手带你写一个智能语音播报系统
手把手带你写一个智能语音播报系统. 微信扫码登陆讯飞开放平台:https://www.xfyun.cn/ 完成个人认证. 在控制台创建应用,注意应用名称全库查重,很容易跟别人重复. 可查看到pytho ...
- Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx丨惊群效应|error|负载均衡|Openresty丨C/C++Linux服务器开发丨中间件
Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx 视频讲解如下,点击观看: Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx丨惊群效应|error|负载均衡|O ...
- 【技术分享篇】Linux内核——手把手带你实现一个Linux内核文件系统丨Linux内核源码分析
手把手带你实现一个Linux内核文件系统 1. 内核文件系统架构分析 2. 行行珠玑,代码实现 [技术分享篇]Linux内核--手把手带你实现一个Linux内核文件系统丨Linux内核源码分析 更多L ...
最新文章
- pytorch学习笔记(十二):详解 Module 类
- listview改变选中行字体颜色
- python编码规范手册-python编码规范
- Angular2+ 结构型指令
- SVG与UML图详解
- JS难点剖析-原型原型链
- 关于集体生活和个人生活的思考
- 2019第十届蓝桥杯C/C++ A组省赛 —— 第一题:平方和
- |洛谷|DFS|P1101 单词方阵
- Oracle 数据库中对记录进行分页处理
- empty variable name
- sklearn 下的 ensemble learning
- 10个不太为人所知的,但实用的PHP函数(转)
- 37. 使用accumulate或者for_each进行区间统计
- eclipse jar打包详解
- Jfinal启动原理及源码简析
- 昨天又发火了:领导拒不给他人安排工作
- 数据库基本语句(SQL)
- js生成java uuid_javascript 生成UUID
- 央行:推动企业征信市场高质量发展