739      阿裏雲  技術社區[雲棲]

仿火車出票效果

之前我下載了BaseAnimation 開源庫（BaseAnimation是基於開源的APP,致力於收集各種動畫效果） 

BaseAnimation 轉載的鏈接：https://blog.csdn.net/vipzjyno1/article/details/20622621

發現裏麵有個火車票的出票效果，發現可以優化下：

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 plaincopy

1. /** ListView 總高度 */  
2. public static int totalHeight = 0;  
3.   
4. public static void setListViewHeightBasedOnChildren(ListView listView) {  
5.     ListAdapter listAdapter = listView.getAdapter();  
6.     if (listAdapter == null) {  
7.         return;  
8.     }  
9.     totalHeight = 0;  
10.     // 由於ADD了個footer，所以總量減去1  
11.     Log.d("listAdapter.getCount()", "" + listAdapter.getCount());  
12.     for (int i = 0, len = listAdapter.getCount() - 1; i < len; i++) {  
13.         View listItem = listAdapter.getView(i, null, listView);  
14.         listItem.measure(0, 0);  
15.         totalHeight += listItem.getMeasuredHeight();  
16.         Log.d("getMeasuredHeight", "" + listItem.getMeasuredHeight());  
17.     }  
18.     totalHeight = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));  
19. }  

5）實現動畫效果

解決：

[java] view plaincopy

1.       /** 
2. * 啟動打印訂單動畫 
3. */  
4. rivate void startAnimation() {  
5. anim = new TranslateAnimation(0.0f, 0.0f, -totalHeight, 0);  
6. anim.setDuration(1000);  
7. anim.setFillAfter(true);  
8. anim.setAnimationListener(new AnimationListener() {  
9.     @Override  
10.     public void onAnimationStart(Animation animation) {  
11.         // TODO Auto-generated method stub  
12.     }  
13.   
14.     @Override  
15.     public void onAnimationRepeat(Animation animation) {  
16.         // TODO Auto-generated method stub  
17.     }  
18.   
19.     @Override  
20.     public void onAnimationEnd(Animation animation) {  
21.         // TODO Auto-generated method stub  
22.         cListview.clearAnimation();  
23.     }  
24. });  
25. cListview.startAnimation(anim);  

最後來看看動畫效果把：

由於是第一次寫博客，有不足之處望各位大神提出意見和建議，共同進步。謝謝！

轉載請附上：https://blog.csdn.net/vipzjyno1/article/details/20623401

DEMO源碼下載鏈接：

最後更新：2017-04-03 12:56:16

  上一篇： 仿火車出票效果

  下一篇： 仿今日頭條滑動評論效果