android:Fragment動畫那點事

標籤：android   style   blog   http   color   io   os   ar   使用   

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

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

1.先寫動畫的xml檔案

做開發的都知道，在/res/anim/目錄下，建立xml的動畫檔案，比如：

fragment_slide_in_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="800"    android:fromYDelta="100.0%p"    android:interpolator="@android:anim/decelerate_interpolator"    android:toYDelta="0.0" />

fragment_slide_in_from_left.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="800"    android:fromXDelta="-100.0%p"    android:interpolator="@android:anim/decelerate_interpolator"    android:toXDelta="0.0" />

fragment_slide_in_from_right.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="800"    android:fromXDelta="100.0%p"    android:interpolator="@android:anim/decelerate_interpolator"    android:toXDelta="0.0" />

fragment_slide_in_from_top.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="800"    android:fromYDelta="-100.0%p"    android:interpolator="@android:anim/decelerate_interpolator"    android:toYDelta="0.0" />

上面的是進入動畫，至於彈齣動畫，只需要將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;@Overrideprotected 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() {@Overridepublic void onClick(View arg0) {addNorthFragment();}});southBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {addSouthFragment();}});eastBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {addEastFragment();}});westBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {addWestFragment();}});popBtn.setOnClickListener(new OnClickListener() {@Overridepublic 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();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic 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

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

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

android:Fragment動畫那點事