Android利用ViewFlipper实现屏幕切换动画效果

     <div id="jd-header">     <span style="font-size:18px;">1、屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。</span>    </div>    <div id="jd-header">     <span style="font-size:18px;">2、介绍ViewFilpper类</span>    </div>    <div id="jd-header">     <h1><span style="font-size:18px;">ViewFlipper</span></h1>     <div id="jd-header">      <span style="font-size:18px;">extends <a href="/misc/goto?guid=4959500731582169451">ViewAnimator</a><br /> </span>     </div>     <div id="naMessage"></div>     <div id="jd-content" class="api apilevel-1">      <table class="jd-inheritance-table ke-zeroborder">       <tbody>        <tr>         <td class="jd-inheritance-class-cell" colspan="6"><a href="/misc/goto?guid=4959500731667520814"><span style="font-size:18px;">java.lang.Object</span></a></td>        </tr>        <tr>         <td class="jd-inheritance-space"><span style="font-size:18px;">   ↳</span></td>         <td class="jd-inheritance-class-cell" colspan="5"><a href="/misc/goto?guid=4959500731741955337"><span style="font-size:18px;">android.view.View</span></a></td>        </tr>        <tr>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;">   ↳</span></td>         <td class="jd-inheritance-class-cell" colspan="4"><a href="/misc/goto?guid=4959500731822830210"><span style="font-size:18px;">android.view.ViewGroup</span></a></td>        </tr>        <tr>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;">   ↳</span></td>         <td class="jd-inheritance-class-cell" colspan="3"><a href="/misc/goto?guid=4959500731902024487"><span style="font-size:18px;">android.widget.FrameLayout</span></a></td>        </tr>        <tr>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;">   ↳</span></td>         <td class="jd-inheritance-class-cell" colspan="2"><a href="/misc/goto?guid=4959500731582169451"><span style="font-size:18px;">android.widget.ViewAnimator</span></a></td>        </tr>        <tr>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;"><br /> </span></td>         <td class="jd-inheritance-space"><span style="font-size:18px;">   ↳</span></td>         <td class="jd-inheritance-class-cell"><span style="font-size:18px;">android.widget.ViewFlipper</span></td>        </tr>       </tbody>      </table>     </div>     <div class="jd-descr">      <h2><span style="font-size:18px;">Class Overview</span></h2>      <p><span style="font-size:18px;">Simple <code><a href="/misc/goto?guid=4959500731582169451">ViewAnimator</a></code> that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.</span></p>     </div>     <span style="font-size:18px;">意思是：简单的ViewAnimator之间,两个或两个以上的view加上动画效果。只有一个小孩会显示在一个时间。如果需要,每个孩子能自动翻转之间在固定的时间间隔。<br /> </span>    </div>    <div id="jd-header">     <span style="font-size:18px;"><br /> </span>    </div>    <div id="jd-header">     <span style="font-size:18px;">该类继承了Framelayout类，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。</span>    </div>    <div id="jd-header">     <span style="font-size:18px;"><br /> </span>    </div>    <div id="jd-header">     <p><span style="font-size:18px;">该类有如下几个和动画相关的函数： </span></p>     <p><span style="font-size:18px;"> setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本，一个接受单个参数，类型为android.view.animation.Animation；一个接受两个参数，类型为Context和int，分别为Context对象和定义Animation的resourceID。  </span></p>     <p><span style="font-size:18px;"> setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。</span></p>     <p><span style="font-size:18px;">showNext： 调用该函数来显示FrameLayout里面的下一个View。 </span></p>     <p><span style="font-size:18px;">show<em>P</em>revious： 调用该函数来显示FrameLayout里面的上一个View。</span></p>     <span style="font-size:18px;">3、首选看一下定义四个动画的xml文件：</span>    </div>    <div id="jd-header">     <span style="font-size:18px;">in_leftright.xml——从左到右进入屏幕</span>    </div>    <div id="jd-header">     <pre class="brush:xml; toolbar: true; auto-links: false;"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >     <translate         android:duration="3000"         android:fromXDelta="-100%p"         android:toXDelta="0" /> </set></pre>     <br /> out_leftright.xml——从左到右出去屏幕    </div>    <div id="jd-header">     <pre class="brush:xml; toolbar: true; auto-links: false;"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >     <translate         android:duration="3000"         android:fromXDelta="0"         android:toXDelta="100%p" /> </set></pre>     <br /> in_rightleft.xml——从右到左进入屏幕    </div>    <div id="jd-header">     <pre class="brush:xml; toolbar: true; auto-links: false;"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >     <translate         android:duration="3000"         android:fromXDelta="100%p"         android:toXDelta="0" /> </set></pre>     <br /> out_rightleft.xml——从右到左出去屏幕    </div>    <div id="jd-header">     <pre class="brush:xml; toolbar: true; auto-links: false;"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >     <translate         android:duration="3000"         android:fromXDelta="100%p"         android:toXDelta="0" /> </set></pre>4、定义main.xml文件    </div>    <div id="jd-header">     <pre class="brush:xml; toolbar: true; auto-links: false;"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent" android:layout_height="fill_parent"  android:orientation="vertical">  <ViewFlipper android:id="@+id/viewFlipper"   android:layout_width="fill_parent" android:layout_height="fill_parent">   <!-- 第一个页面 -->   <LinearLayout android:layout_width="fill_parent"    android:layout_height="fill_parent" android:gravity="center">    <ImageView android:layout_width="wrap_content"     android:layout_height="wrap_content" android:src="@drawable/a1" />   </LinearLayout>   <!-- 第二个页面 -->   <LinearLayout android:layout_width="fill_parent"    android:layout_height="fill_parent" android:gravity="center">    <ImageView android:layout_width="wrap_content"     android:layout_height="wrap_content" android:src="@drawable/a2"     android:gravity="center" />   </LinearLayout>   <!-- 第三个页面 -->   <LinearLayout android:layout_width="fill_parent"    android:layout_height="fill_parent" android:gravity="center">     <ImageView android:layout_width="wrap_content"     android:layout_height="wrap_content" android:src="@drawable/a3"     android:gravity="center" />   </LinearLayout>   <!-- 第四个页面 -->   <LinearLayout android:layout_width="fill_parent"    android:layout_height="fill_parent" android:gravity="center">     <ImageView android:layout_width="wrap_content"     android:layout_height="wrap_content" android:src="@drawable/a4"     android:gravity="center" />   </LinearLayout>  </ViewFlipper> </LinearLayout></pre>     <br /> 5、java代码实现：    </div>    <div id="jd-header">     <span style="font-size:18px;"><br /> </span>     <pre class="brush:java; toolbar: true; auto-links: false;">public class SwitchTest2Activity extends Activity {   ViewFlipper viewFlipper = null;  float startX;   public void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.main);    init();  }   private void init() {   viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);  }   public boolean onTouchEvent(MotionEvent event) {   switch (event.getAction()) {   case MotionEvent.ACTION_DOWN:    startX = event.getX();    break;   case MotionEvent.ACTION_UP:     if (event.getX() > startX) { // 向右滑动     viewFlipper.setInAnimation(this, R.anim.in_leftright);     viewFlipper.setOutAnimation(this, R.anim.out_leftright);     viewFlipper.showNext();    } else if (event.getX() < startX) { // 向左滑动     viewFlipper.setInAnimation(this, R.anim.in_rightleft);     viewFlipper.setOutAnimation(this, R.anim.out_rightleft);     viewFlipper.showPrevious();    }    break;   }    return super.onTouchEvent(event);  }  }</pre>     <br /> 6、效果图：    </div>    <div id="jd-header">     <span style="font-size:18px;">在这里看不出效果图，我贴几张图片吧！！</span>    </div>    <div id="jd-header">     <span style="font-size:18px;"><img title="s1.png" border="0" alt="s1.png" src="https://simg.open-open.com/show/d7082a4f3078b7e7d59f9ffbcc118ce0.png" width="329" height="435" /> 从左向右滑<img title="s2.png" border="0" alt="s2.png" src="https://simg.open-open.com/show/d17269b1f41dc41bf5788a44f963e728.png" width="317" height="446" />滑到的结果<img title="s3.png" border="0" alt="s3.png" src="https://simg.open-open.com/show/dc2c7331b71362dab94bb63a2da3d79a.png" width="321" height="434" /><br /> <br /> </span>    </div>    <div id="jd-header"></div>