Android 仿訂單出票效果 （附DEMO）

標籤：

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

BaseAnimation 轉載的連結：http://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 plaincopyprint?

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. }  

/** ListView 總高度 */public static int totalHeight = 0;public static void setListViewHeightBasedOnChildren(ListView listView) {ListAdapter listAdapter = listView.getAdapter();if (listAdapter == null) {return;}totalHeight = 0;// 由於ADD了個footer，所以總量減去1Log.d("listAdapter.getCount()", "" + listAdapter.getCount());for (int i = 0, len = listAdapter.getCount() - 1; i < len; i++) {View listItem = listAdapter.getView(i, null, listView);listItem.measure(0, 0);totalHeight += listItem.getMeasuredHeight();Log.d("getMeasuredHeight", "" + listItem.getMeasuredHeight());}totalHeight = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));}

計算得到了總高度。

 

 

 

 

 

 

 

 

 

5）實現動畫效果

解決：

 

[java] view plaincopyprint?

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);  

        /** * 啟動列印訂單動畫 */private void startAnimation() {anim = new TranslateAnimation(0.0f, 0.0f, -totalHeight, 0);anim.setDuration(1000);anim.setFillAfter(true);anim.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation animation) {// TODO Auto-generated method stubcListview.clearAnimation();}});cListview.startAnimation(anim);}

 

 

 

 

 

 

 

 

 

最後來看看動畫效果把：

 

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

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

DEMO源碼下載連結：

http://download.csdn.net/detail/vipzjyno1/7000355

（轉）Android 仿訂單出票效果 （附DEMO）