使用 RecyclerView 做点餐列表联动页面

使用 RecyclerView 做点餐列表联动页面

• 版权声明：本文为博主原创文章，未经博主允许不得转载。

最近刚换了工作，来到一家做了11年餐饮软件管理的公司，开发平板端点餐安卓端原生app。因为之前一直没做过类似的软件，对于我来说是一个全新的开始，所以打算写博客记录下来我从头开发的整个过程。

平板设置横屏属性就可以横屏在平板上显示，不用担心切换横竖屏会导致activity的生命周期改变。代码如下：

android:launchMode="singleTask" android:screenOrientation="landscape"

之后就开始做点餐界面，因为主界面就是专门用来点餐的，所以直接开始做点餐界面。产品经理说整个app是不需要联网就可以进行的，所有的资料是从后台下载下来之后存储下来，然后再取出来。之前一直没涉及到数据库的知识，所以这也是我学习的重点。

最先开始呢就是先做二级列表菜单页面，我用的是 RecyclerView ，很多知识可以从鸿洋的博客学习，我做的这个很大程度上也是从上面学习的
http://blog.csdn.net/lmj623565791/article/details/45059587
还有一部分是从
http://blog.csdn.net/w804518214/article/details/51570975
上面学习的，不过很大程度上改进了，根据我的需求在他的基础上做了很多改变。

效果图来看不复杂内容并没多少，值得介绍一下的知识点也就下面几个吧

• 左右列表滑动时联动
• 添加商品时的抛物线动画
• 底部弹出购物车清单
• 数据的同步

左右列表联动

联动主要有两个效果
- 左侧列表点击选择分类，右侧列表滑动到对应分类
- 右侧列表滑动过程中左侧列表高亮的分类跟随变化

第一个效果简单，左侧列表item添加点击事件，事件中调用右侧列表的setSelection(int positon) 方法。

第二个效果要给右侧列表添加ScrollListener，根据列表中显示的第一条数据设置左侧选中的分类

listView.setOnScrollListener(new RecyclerView.OnScrollListener(){

            public void onScrollStateChanged(RecyclerView view, int scrollState) {

            }

            public void onScrolled(RecyclerView view, int firstVisibleItem, int visibleItemCount) {
                //根据firstVisibleItem获取分类ID，根据分类id获取左侧要选中的位置
                GoodsItem item = dataList.get(firstVisibleItem);
                if(typeAdapter.selectTypeId != item.typeId) {
                    typeAdapter.selectTypeId = item.typeId;
                    typeAdapter.notifyDataSetChanged();
                    //左侧列表是个RecyclerView 所以使用smoothScrollToPosition(int position) 使当对应position的item可以滚动显示出来
                    rvType.smoothScrollToPosition(getSelectedGroupPosition(item.typeId));
                }
            }
        });

添加商品的动画

添加商品一共有三个动画
- 当商品从0到1 旋转左移显示出减号按钮
- 当商品从1到0 减号按钮旋转右移消失
- 添加商品时抛物线动画添加到购物车图标

前两个动画很简单可以分解成三个补间动画 旋转、平移、透明度。

/**
         * 点击加号显示减号的动画
         * @return
         */
        private Animation getShowAnimation(){
            AnimationSet set = new AnimationSet(true);
            RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
            set.addAnimation(rotate);
            TranslateAnimation translate =