前一篇文章介紹如何在Activity中加入Fragment,為了盡量簡化程式專案,我們只用了一個Fragment來示範。但是其實Fragment最大的用途是可以在一個Activity中加入許多不同的操作畫面,我們把這些操作畫面放在不同的Fragment中,再把這些Fragment加到Activity介面佈局檔的容器裡頭,等到要用到的時候才讓它們顯示。我們需要用到上一篇文章介紹的FragmentManager來控制Fragment的顯示和隱藏,在改變Fragment的時候,還可以套用動畫效果。接下來就讓我們幫上一篇文章完成的程式專案,加入第二個Fragment,而且設定它出現的時候,會從螢幕右邊滑入。

 

Step 1. 依照上一篇文章介紹的方法,在App專案中新增另一個Fragment(提示:先加入一個介面佈局檔,再建立Fragment的程式檔)。

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    … >

    <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/second_fragment" />

    <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/return_to_1st_fragment" />

</LinearLayout>

 public class SecondFragment extends Fragment {
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
       Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_second, container, false);
    }
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Button btnHide2ndFragment =
                (Button) getView().findViewById(R.id.btnHide2ndFragment);
        btnHide2ndFragment.setOnClickListener(btnHide2ndFragmentOnClick);
     }

     private View.OnClickListener btnHide2ndFragmentOnClick = new View.OnClickListener() {
          public void onClick(View v) {
               ((MainActivity) getActivity()).hideSecondFragment();
          }
     };

}

 

Step 2. 修改第一個Fragment的介面佈局檔和程式檔,就是在畫面下方新增一個按鈕,並且加入相關的程式碼:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    … >
   … (原來的程式碼)
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/show_2nd_fragment" />

</LinearLayout>

 public class MainFragment extends Fragment {
    …
    private Button mBtnOK, mBtnShow2ndFragment;

        public void onActivityCreated(Bundle savedInstanceState) {
           …
            mBtnShow2ndFragment =
                    (Button) v.findViewById(R.id.btnShow2ndFragment);
            mBtnShow2ndFragment.setOnClickListener(
                               btnShow2ndFragmentOnClick);
       }
       …
        private View.OnClickListener btnShow2ndFragmentOnClick = new View.OnClickListener() {
            public void onClick(View v) {
              ((MainActivity) getActivity()).showSecondFragment();
            }
        }

}

 

Step 3. 接下來是建立動畫資源檔。在Eclipse左邊的專案檢視視窗中,用滑鼠右鍵點選程式專案的res資料夾,然後選擇New > Android XML File。

 

Step 4. 在對話盒中,將Resource Type欄位設定為Tween Animation,File欄位中輸入動畫資源檔名稱,例如fragment_in_from_right_side,然後在下方的項目清單中選擇Translate。由於會分別用到Fragment消失和出現二種動畫效果,所以我們在動畫資源檔的名稱加上in和out來區別,in表示用在影像出現時的動畫,out表示用在影像消失時的動畫。選定好動畫類型之後按下Finish按鈕。

 

Step 5. 在新建立的動畫資源檔中輸入下列的程式碼:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%"
    android:toXDelta="0"
    android:duration="400" />

 

Step 6. 依照同樣的操作方式,加入另一個動畫資源檔,並取名為fragment_out_from_right_side :
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="100%"
    android:duration="400" />

 

Step 7. 依照同樣的操作方式,再加入一個動畫資源檔,並取名為no_change。這個動畫要套用到第一個Fragment,因為我們不要它有任何改變。
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="0"
    android:duration="400" />

 

Step 8. 修改主程式檔:

public class MainActivity extends FragmentActivity {

    …(原來的程式碼)
     private SecondFragment mSecondFrag;

    @Override
     protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

        FragmentManager fragMgr = getSupportFragmentManager();
       MainFragment mainFrag = new MainFragment();
            mSecondFrag = new SecondFragment;
            fragMgr.beginTransaction()
                 .add(R.id.frameLayout, mainFrag)
                 .add(R.id.frameLayout, mSecondFrag)
                 .hide(mSecondFrag)
                 .commit();
     }

    public void showSecondFragment() {
          getSupportFragmentManager().beginTransaction()
               .setCustomAnimations(
                    R.anim.fragment_in_from_right_side, R.anim.no_change,
                    R.anim.fragment_in_from_right_side, R.anim.no_change)
               .show(mSecondFrag)
               .commit();
     }
     public void hideSecondFragment() {
          getSupportFragmentManager().beginTransaction()
               .setCustomAnimations(
                    R.anim.no_change, R.anim.fragment_out_from_right_side,
                    R.anim.no_change, R.anim.fragment_out_from_right_side)
               .hide(mSecondFrag)
               .commit();
     }

}


這個範例是使用translate型態的動畫,它可以用來做出移動的效果。除了translate之外,Android系統還提供另外三種型態的動畫,我們簡單說明如下:

1. Alpha
這種動畫效果是藉由改變影像的透明度來達成。當影像的alpha值是1時,表示影像完全不透明,此時是最清楚的狀態。當影像的alpha值由1減到0時,影像變的愈來愈透明,也就是愈來愈不清楚直到看不見(alpha值為0)。

2. Scale
這種動畫效果是藉由改變影像的大小來達成。影像的scale值也是用0~1來表示。0表示完全看不到,1表示原來影像的大小。scale值可以在x和y二個方向獨立設定。x方向是影像的寬,y方向是影像的高。

3. Translate
這個動畫效果是藉由改變影像的位置來達成。影像的位置是藉由x和y方向上的位移量來決定。

4. Rotate
藉由改變影像的旋轉角度來做出動畫效果。

這些動畫是屬於View Animation,View Animation又稱為Tween Animation。除了View Animation之外,Android系統還提供Drawable Animation和Property Animation這二種動畫技術。

另外要補充說明的是,這個範例程式是使用android-support-v4.jar程式庫提供的Fragment,這個Fragment需要配合View Animation。可是如果換成使用Android 3.0以上的系統提供的Fragment,就要使用Property Animation。

    全站熱搜

    androidstation 發表在 痞客邦 留言(1) 人氣()