前一篇文章介紹如何在Activity中加入Fragment，為了盡量簡化程式專案，我們只用了一個Fragment來示範。但是其實Fragment最大的用途是可以在一個Activity中加入許多不同的操作畫面，我們把這些操作畫面放在不同的Fragment中，再把這些Fragment加到Activity介面佈局檔的容器裡頭，等到要用到的時候才讓它們顯示。我們需要用到上一篇文章介紹的FragmentManager來控制Fragment的顯示和隱藏，在改變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" />
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();
}
};
<?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" />
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();
}
}
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="100%"
android:toXDelta="0"
android:duration="400" />
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100%"
android:duration="400" />
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="0"
android:duration="400" />
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系統還提供另外三種型態的動畫，我們簡單說明如下：
這種動畫效果是藉由改變影像的透明度來達成。當影像的alpha值是1時，表示影像完全不透明，此時是最清楚的狀態。當影像的alpha值由1減到0時，影像變的愈來愈透明，也就是愈來愈不清楚直到看不見（alpha值為0）。
這種動畫效果是藉由改變影像的大小來達成。影像的scale值也是用0~1來表示。0表示完全看不到，1表示原來影像的大小。scale值可以在x和y二個方向獨立設定。x方向是影像的寬，y方向是影像的高。
這個動畫效果是藉由改變影像的位置來達成。影像的位置是藉由x和y方向上的位移量來決定。
藉由改變影像的旋轉角度來做出動畫效果。
這些動畫是屬於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。
留言列表
