*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
最近公司做的OA项目有会议室预订功能设计图是这个样子的:
看到设计图的时候就想到了要做成左右、上下滑动的样子,因為以前朋友做过一个抢位置app也是这种效果当时感觉很炫。不过他是用的是github上的一个开源项目虽然那个效果比较好,但美中不足的是它橫向滑动的时候比较卡顿而且代码相对来说比较复杂,改造成完全适应自身项目所需要花费的时间就比较多对于赶项目的程序员来说,没什么是花费时间少且完美运行的完成任务更有吸引力了所以后面我就采用了原生布局嵌套的方式快速的实现良好效果了功能。
先不說其他的摆上最终效果图:
这里先讲解下业务逻辑,头部的横轴是时间段(0:00-23:59)纵轴是会议室,内容区域展示的是被预订的会议室上丅滑动内容区域的时候会议室列表要联合滚动,左右滑动内容区域的时候头部的时间轴也要联合滚动滚动会议室和时间轴的时候内容区域也要相应的滚动。由于预订的时间可能是 8:10-8:50或者是9:10-10:30这种的所以这个地方我们还要考虑不是零起点、跨区域等情况,而不是单纯的填充背景色
根据布局思维图可以很清晰的看到:
时间轴的外层是套了个横向的scrollview,里面是一个linearLayout布局布局xml代码代码:
纵轴会议室简单,就是一个listview
內容区域由于需要刷新所以在最外层加了个swipeRefresh,然后在内部一次加上横向的scrollview和listview布局xml代码如下:
把三个主要布局画出来后就需要在页面中設置数据了:
这里有两个listview,所以需要两个适配器而两个listview需要联动。当然两个横向的scrollview也需要联动,两个滑动***代码如下: