前一篇文章介紹如何在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。

arrow
arrow
    全站熱搜

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

    E-mail轉寄