手势滑动控制组建显示的FrameLayout

因为项目需要，自定义了一个通过手势滑动控制组件显示的FrameLayout布局。主要功能就是将各个组件放入此FrameLayout中，上层组件会覆盖下层组件，向左滑动上层组件，则该组件会启动一个translateAnimation动画从左边移出屏幕，同时被覆盖的下层组件会启动一个AlphaAnimation动画显示出来。再向右滑动，下层组建会隐藏，之前的上层组件会从左向右移入屏幕。

例如在该FrameLayout内放入一个textView显示文字和一个ImageView显示图片，向左滑动图片，则该imageView会从左边移出屏幕，同时被ImageView覆盖的textView会慢慢浮现出来，再向右滑动该textView，则textView会逐渐隐藏，而之前移出屏幕的ImageView会从左向右移动回原来的位置

先看效果图：

最开始的时候，imageView覆盖textView：

向左滑动图片，imageView开始向左平移，同时textView开始显现：

动画结束后，imageView移出了屏幕，textView显示：

示例代码如下：

首先是自定义FrameLayout类：

package com.example.myframelayout;import android.content.Context;import android.content.Intent;import android.util.AttributeSet;import android.view.GestureDetector.OnGestureListener;import android.view.animation.AlphaAnimation;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.TranslateAnimation;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;import android.view.WindowManager;import android.widget.FrameLayout;import android.widget.Toast;//需要先点击才能滑动public class MyFrameLayout extends FrameLayout implements  OnGestureListener{ private Context mContext;private int mCurrentView;private int ANIM_DURATION=3000;    private View mChild, mHistoryView;    private View children[];    private int mWidth;    private int mPreviousMove;    private GestureDetector mGestureDetector;    private TranslateAnimation inLeft;private TranslateAnimation outLeft;    private TranslateAnimation inRight;private TranslateAnimation outRight;private AlphaAnimation alpha1;private AlphaAnimation alpha2;    private static final int NONE  = 1;    private static final int LEFT  = 2;    private static final int RIGHT = 3;public MyFrameLayout(Context context){super(context);mContext = context;init();}    public MyFrameLayout(Context context,AttributeSet attrs){    super(context, attrs);mContext = context;init();            }public MyFrameLayout(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);mContext = context;init();}public void init(){mCurrentView=0;mGestureDetector=new GestureDetector(mContext, this);WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);int window_width = wm.getDefaultDisplay().getWidth();    mWidth = wm.getDefaultDisplay().getWidth();         inLeft   = new TranslateAnimation(-mWidth,0,0,0);        outLeft  = new TranslateAnimation(0,-mWidth,0,0);         alpha1=new AlphaAnimation(1,0);        alpha2=new AlphaAnimation(0,1);        inLeft.setDuration(ANIM_DURATION);        outLeft.setDuration(ANIM_DURATION);        alpha1.setDuration(3000);        alpha2.setDuration(5000);}@Overridepublic boolean onDown(MotionEvent e) {// TODO Auto-generated method stubreturn false;}@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {// TODO Auto-generated method stubint verticalMinDistance =0;  int minVelocity= 0; if (e1.getX() - e2.getX() > verticalMinDistance && Math.abs(velocityX) > minVelocity) {          // 切换Activity           //Intent intent = new Intent(MainActivity.this, CardListActivity.class);           //startActivity(intent);           //overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);        //Toast.makeText(this, "向左手势", Toast.LENGTH_SHORT).show();         moveLeft();         return true;    } else if (e2.getX() - e1.getX() > verticalMinDistance && Math.abs(velocityX) > minVelocity) {            // 切换Activity          //Intent intent = new Intent(MainActivity.this, CreateActivity.class);          //startActivity(intent);         // mContext.overridePendingTransition(R.anim.in_from_left, R.anim.out_to_right);        //Toast.makeText(mContext, "向右手势", Toast.LENGTH_SHORT).show();    moveRight();        return true;    }else{        }return false;}  protected void onFinishInflate() {        int count = getChildCount();        children = new View[count];        for (int i = 0; i < count; ++i) {            children[i] = getChildAt(i);            if (i != mCurrentView) {                children[i].setVisibility(View.GONE);            }        }    }  public void moveLeft() {   if(mCurrentView==0){   children[mCurrentView].startAnimation(outLeft);   children[mCurrentView+1].setVisibility(View.VISIBLE);   children[mCurrentView+1].startAnimation(alpha2);   children[mCurrentView].setVisibility(View.GONE);   mCurrentView=1;   }       /* if (mCurrentView < children.length - 1 && mPreviousMove != LEFT) {            children[mCurrentView+1].setVisibility(View.VISIBLE);            children[mCurrentView+1].startAnimation(inLeft);            children[mCurrentView].startAnimation(outLeft);            children[mCurrentView].setVisibility(View.GONE);            mCurrentView++;            mPreviousMove = LEFT;        }**/    }    public void moveRight() {     System.out.println("向右滑动");    if(mCurrentView==1){    //children[mCurrentView-1].setVisibility(View.VISIBLE);    children[mCurrentView-1].startAnimation(inLeft);    children[mCurrentView].setVisibility(View.GONE);    children[mCurrentView].startAnimation(alpha1);    children[mCurrentView-1].setVisibility(View.VISIBLE);    mCurrentView=0;    }       /* if (mCurrentView > 0 && mPreviousMove != RIGHT) {            children[mCurrentView-1].setVisibility(View.VISIBLE);            children[mCurrentView-1].startAnimation(inRight);            children[mCurrentView].startAnimation(outRight);            children[mCurrentView].setVisibility(View.GONE);            mCurrentView--;            mPreviousMove = RIGHT;        }**/    }@Overridepublic void onLongPress(MotionEvent e) {// TODO Auto-generated method stub}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {// TODO Auto-generated method stubreturn false;}@Overridepublic void onShowPress(MotionEvent e) {// TODO Auto-generated method stub}@Overridepublic boolean onSingleTapUp(MotionEvent e) {// TODO Auto-generated method stubreturn false;}@Overridepublic boolean onTouchEvent(MotionEvent event) {mGestureDetector.onTouchEvent(event);return true;}@Override    public boolean onInterceptTouchEvent(MotionEvent event) {        return mGestureDetector.onTouchEvent(event);    }}

在Activity中使用，先看布局文件，很简单，就是把该FrameLayout在activity的布局文件中定义，然后把需要的组件定义在FrameLayout内即可

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" ><com.example.myframelayout.MyFrameLayout             android:id="@+id/frame"            android:layout_width="match_parent"            android:layout_height="180dp">     <ImageView android:id="@+id/image"            android:layout_height="wrap_content"            android:layout_width="match_parent"            android:src="@drawable/image"            android:scaleType="fitCenter"/>"     <TextView android:id="@+id/text"               android:layout_width="match_parent"               android:layout_height="wrap_content"               android:gravity="center"               android:text="哈哈哈哈，哈哈哈，哈哈哈哈，哈哈哈，哈哈哈！"               android:textSize="20sp"/>   </com.example.myframelayout.MyFrameLayout></RelativeLayout>

最后是Activity的代码，即显示该组件：

package com.example.myframelayout;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.widget.ImageView;public class MainActivity extends Activity {    private MyFrameLayout frame;    private ImageView image;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);frame=(MyFrameLayout)findViewById(R.id.frame);image=(ImageView)findViewById(R.id.image);}}

以上就是整个自定义的FrameLayout，不只是imageView和TextView，还可以是其它组件，只要放在该FrameLayout内，即可实现通过手势滑动来控制各层组件的显示

源代码地址：源代码