android:Fragment動畫那點事

最近很多人對Fragment的動畫很感興趣，我就做個例子給大家看看。既然要做，我就做下面幾類動畫：

彈入彈出動畫：從“上下左右”進入，從“上下左右”彈出，當然，你怎麼組合都可以。另外你也可以加一些透明度的變化，這就看你的發揮了。。。

1.先寫動畫的xml文件

做開發的都知道，在/res/anim/目錄下，新建xml的動畫文件，比如：

fragment_slide_in_from_bottom.xml

fragment_slide_in_from_left.xml

fragment_slide_in_from_right.xml

fragment_slide_in_from_top.xml

上面的是進入動畫，至於彈出動畫，只需要將from和to的值翻轉一下即可。你們都懂得，不懂得，直接去github上clone，地址在下面。

2.添加Fragment的時候，使用setCustomAnimations方法。

直接貼代碼，簡單明了。

package com.example.testfragment;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
/**
 * 
 * @author Zheng Haibo
 * @web  http://www.mobctrl.net
 *
 */
public class MainActivity extends ActionBarActivity {

	private FragmentManager fragmentManager;

	private Button northBtn;
	private Button southBtn;
	private Button eastBtn;
	private Button westBtn;
	private Button popBtn;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		fragmentManager = getSupportFragmentManager();
		initButton();
	}

	private void initButton() {
		northBtn = (Button) findViewById(R.id.btn_north);
		southBtn = (Button) findViewById(R.id.btn_south);
		eastBtn = (Button) findViewById(R.id.btn_east);
		westBtn = (Button) findViewById(R.id.btn_west);
		popBtn = (Button) findViewById(R.id.btn_pop);
		northBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addNorthFragment();
			}
		});
		southBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addSouthFragment();
			}
		});
		eastBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addEastFragment();
			}
		});
		westBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addWestFragment();
			}
		});

		popBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				fragmentManager.popBackStack();
			}
		});

	}

	private void addNorthFragment() {
		addFragment(R.anim.fragment_slide_in_from_top,
				R.anim.fragment_slide_out_to_top,
				R.anim.fragment_slide_in_from_top,
				R.anim.fragment_slide_out_to_top, 0xa0ff0000);
	}

	private void addSouthFragment() {
		addFragment(R.anim.fragment_slide_in_from_bottom,
				R.anim.fragment_slide_out_to_bottom,
				R.anim.fragment_slide_in_from_bottom,
				R.anim.fragment_slide_out_to_bottom, 0xa000ff00);
	}

	private void addEastFragment() {
		addFragment(R.anim.fragment_slide_in_from_left,
				R.anim.fragment_slide_out_to_left,
				R.anim.fragment_slide_in_from_left,
				R.anim.fragment_slide_out_to_left, 0xa00000ff);
	}

	private void addWestFragment() {
		addFragment(R.anim.fragment_slide_in_from_right,
				R.anim.fragment_slide_out_to_right,
				R.anim.fragment_slide_in_from_right,
				R.anim.fragment_slide_out_to_right, 0xa0ff00ff);
	}

	/**
	 * add the fragment
	 * 
	 * @param arg0
	 * @param arg1
	 * @param arg2
	 * @param arg3
	 * @param color
	 */
	private void addFragment(int arg0, int arg1, int arg2, int arg3, int color) {
		FragmentTransaction ft = fragmentManager.beginTransaction();
		ft.setCustomAnimations(arg0, arg1, arg2, arg3);
		MyFragment fragment = new MyFragment();
		Bundle bundle = new Bundle();
		bundle.putInt("color", color);
		fragment.setArguments(bundle);
		ft.add(R.id.rl_container, fragment);
		ft.addToBackStack(null);
		ft.commitAllowingStateLoss();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

很炫的GIF效果，我就不貼了，你下載試試就知道了。。

Github： https://github.com/nuptboyzhb/FragmentAnimationDemo

後續問題：

animation的執行是異步的。如果你想對animation的執行進行監聽，你可以重寫fragment裡面的如下方法

/**
	 * if you need add animation listener for the fragment
	 * please use this method
	 */
	@Override
	public Animation onCreateAnimation(int transit, boolean enter, int nextAnim) {
		Animation anim;
		if (enter) {
			anim = AnimationUtils.loadAnimation(getActivity(),
					android.R.anim.fade_in);
		} else {
			anim = AnimationUtils.loadAnimation(getActivity(),
					android.R.anim.fade_out);
		}

		anim.setAnimationListener(new AnimationListener() {
			public void onAnimationEnd(Animation animation) {
				
			}

			public void onAnimationRepeat(Animation animation) {
				
			}

			public void onAnimationStart(Animation animation) {
				
			}
		});

		return anim;
	}

然後在回調裡，做你想做的事

-------------------------------------------------------------------

更多交流，Android開發聯盟QQ群：272209595