0
点赞
收藏
分享

微信扫一扫

仿火车出票效果


之前我下载了​​BaseAnimation​​ 开源库(BaseAnimation是基于开源的APP,致力于收集各种动画效果) 


发现里面有个火车票的出票效果,发现可以优化下:

BaseAnimation内的仿出票效果



可是它的出的票的布局高度啥都是写死的,通过这个思路,我便想到要做个类似于数据是通过网络获取,高度不一定的listview的订单出票效果。


一.  思路:

1)叠在布局上层的是订单信息,而在下层的就是订单内菜单的详细条目,详细条目的布局是置于布局最底层,并且在订单信息相对位置下方,这里使用了FrameLayout来处 理 详细条目布局。

2)出票的详细条目列表采用了LISTVIEW,它的动画初始位置要通过计算LISTVIEW的总高度进行计算获取,之后通过TranslateAnimation 进行Animation动画。

3)采用线程来模拟网络获取延迟的效果。


二.  碰到解决的问题:

1)碰到一个问题,就是如果数据一多,超过了一屏幕,在动画过程中动画衔接效果就很差,并有可能出现断层效果。

解决:通过重写ListView, 计算高度,并且在ListView 外面嵌套了一层ScrollView,这样便可以解决这样的问题。

2) 如果在订单信息布局下方直接放置一个LISTVIEW的话,这样,动画时候,LISTVIEW就会盖在订单信息上方。

解决:LISTVIEW外层一定要嵌套一层布局,并且设定在订单信息下方,这样便不会产生上述问题。

3)由于订单底部

 ​​仿火车出票效果_动画效果​​

 

一开始就是出现的,并且在数据刷新后跟随LISTVIEW一起下滑。

解决:采用Listview的addFooterView(底部view)方法,把它添加到LISTVIEW底部,在开始添加完毕后就直接初始化让Listview.setAdapter(null);

这样便在开始底部就显示出来了。

4)如何去计算LISTVIEW的总高度

解决:本DEMO采用了2种方式,

第一种:鉴于订单中每个ITEM的布局都是固定的,于是在布局中设置ITEM的高度为固定值,之后乘以listAdapter.getCount() 加上分割线listView.getDividerHeight() 的总高度

第二种:如果每个ITEM的布局是高度是不一定的话,就会造成影响,便找了一些资料,使用了以下方法:


[java] ​​ view plain​​ ​​co



  1. /** ListView 总高度 */
  2. public static int totalHeight = 0;  
  3.   
  4. public static void
  5.     ListAdapter listAdapter = listView.getAdapter();  
  6. if (listAdapter == null) {  
  7. return;  
  8.     }  
  9. 0;  
  10. // 由于ADD了个footer,所以总量减去1
  11. "listAdapter.getCount()", ""
  12. for (int i = 0, len = listAdapter.getCount() - 1; i < len; i++) {  
  13. null, listView);  
  14. 0, 0);  
  15.         totalHeight += listItem.getMeasuredHeight();  
  16. "getMeasuredHeight", ""
  17.     }  
  18. 1));  
  19. }  



计算得到了总高度。

5)实现动画效果

解决:


[java] ​​ view plain​​ ​​cop



  1. /**
  2. * 启动打印订单动画
  3. */
  4. rivate void
  5. anim = new TranslateAnimation(0.0f, 0.0f, -totalHeight, 0);  
  6. anim.setDuration(1000);  
  7. anim.setFillAfter(true);  
  8. anim.setAnimationListener(new
  9. @Override
  10. public void
  11. // TODO Auto-generated method stub
  12.     }  
  13.   
  14. @Override
  15. public void
  16. // TODO Auto-generated method stub
  17.     }  
  18.   
  19. @Override
  20. public void
  21. // TODO Auto-generated method stub
  22.         cListview.clearAnimation();  
  23.     }  
  24. });  
  25. cListview.startAnimation(anim);  


举报

相关推荐

0 条评论