兩個View切換中，如何產生平滑效果

因為目前在開發的程式中，有許多視窗，而使用者需要在這些視窗中切換，為了讓程式跑的順一點，並沒有create很多的activity，而是透過且切換View來達成。 但是在View切換過程，如果是使用動畫來表現的話，應該是比較好看的，所以趁這個機會研究一下Android的動畫，這邊要講的是如何在不同View之間，產生平滑移動的小效果。 首先，我們先建立幾個動畫XML檔（請放在/layout目錄下） left_in.xml

<?xml version="1.0" encoding="utf-8"?>   
<set 
        xmlns:android="http://schemas.android.com/apk/res/android">   
    <translate 
            android:fromXDelta="-100%p" 
            android:toXDelta="0"  
        android:duration="500" />   
  
</set>

left_out.xml

<?xml version="1.0" encoding="utf-8"?>   
<set 
    xmlns:android="http://schemas.android.com/apk/res/android">   
    <translate 
            android:fromXDelta="0" 
            android:toXDelta="-100%p"  
        android:duration="500" />
</set>

right_in.xml

<?xml version="1.0" encoding="utf-8"?>   
<set 
        xmlns:android="http://schemas.android.com/apk/res/android">   
    <translate 
            android:fromXDelta="100%p" 
            android:toXDelta="0"  
        android:duration="500" />   
  
</set>

right_out.xml

<?xml version="1.0" encoding="utf-8"?>   
<set 
    xmlns:android="http://schemas.android.com/apk/res/android">   
    <translate 
            android:fromXDelta="0" 
            android:toXDelta="100%p"  
        android:duration="500" />
</set>

在main.xml我們定義了兩個Views，一個一開始是顯示的，另一個是隱藏起來的，另外定義了兩個按鈕來做視窗的切換。

.....
     <LinearLayout
      android:id="@+id/map_view"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
   android:layout_marginTop="0dip"
   android:layout_marginBottom="0dip"
   android:layout_marginLeft="3dip"
   android:layout_marginRight="3dip"
   android:layout_weight="1"
   android:visibility="gone"
      >
     </LinearLayout>
     <ListView android:id="@+id/oxcache_list"
   android:persistentDrawingCache="animation|scrolling"
   android:cacheColorHint="#00000000"
   android:divider="@color/gray_light"
   android:dividerHeight="1dip"
   android:orientation="vertical"
   android:layout_weight="1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">
  </ListView>
.....
     <Button   
         android:id="@+id/list_btn"     
         android:layout_width="wrap_content"    
         android:layout_height="wrap_content"    
         android:layout_marginRight="0dip"
         android:text="@string/list"
         android:textColor="@color/header_text"
         android:background="@drawable/btn_left_unpress"
         style="@style/List"
     />   
     <Button   
         android:id="@+id/map_btn"     
         android:layout_width="wrap_content"    
         android:layout_height="wrap_content"
         android:layout_marginLeft="-8dip"
         android:text="@string/map"
         android:textColor="@color/header_text"
         android:background="@drawable/btn_right_unpress"
         style="@style/List"
     />

在程式中，透過監聽兩個按鈕的click event來切換不同的視窗，重點是什麼情況是右進左出，左進右出了。

listBtn.setOnClickListener(new Button.OnClickListener() {
   @Override
   public void onClick(View v) {
           mOxcacheList.setVisibility(View.VISIBLE);
           mOxcacheList.setClickable(true);
           mOxcacheList.setAnimation(AnimationUtils.loadAnimation(CacheMe.this, R.layout.push_left_in));
           mMapLinear.setVisibility(View.GONE);
           mMapLinear.setAnimation(AnimationUtils.loadAnimation(CacheMe.this, R.layout.push_right_out));
    }
   }
        });
  mapBtn.setOnClickListener(new Button.OnClickListener() {
   @Override
   public void onClick(View v) {
           mMapLinear.setVisibility(View.VISIBLE);
           mMapLinear.setClickable(true);
           mMapLinear.setAnimation(AnimationUtils.loadAnimation(CacheMe.this, R.layout.push_right_in));
           mOxcacheList.setVisibility(View.GONE);
           mOxcacheList.setAnimation(AnimationUtils.loadAnimation(CacheMe.this, R.layout.push_left_out));
    }
   }
        });