类似 qq 切换效果

   如果用 android 等智能手机一定 会用qq吧，那么你肯定见过下面这样：

上面的布局 分为 三块  ，历史，好友，和群组

当分别在这三个上面点击的时候 圆角背景会 移动到新的点击处，同时 下方区域 也会 切换到 相应的 历史或者 其他界面

同时，在下面的区域 用手指滑动 上面的标题栏 也会 移动。

 

   1  实现 下方区域 手指滑动 ，用viewflipper

<?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" >

    <include layout="@layout/title" 
        android:layout_height="fill_parent"
        android:layout_weight="1"
        />
    <ViewFlipper
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/viewflipper"
        android:layout_weight="1"
        >
        		<!-- 第一个页面 -->
		<include  layout="@layout/first_linearlayout"/>
		<!-- 第二个页面 -->
		<include  layout="@layout/second_linearlayout"/>
		<!-- 第三个页面 -->
		<include  layout="@layout/third_linearlayout"/>
    </ViewFlipper>
    
</LinearLayout>

       first_linearlayout

<?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:gravity="center"
    android:orientation="vertical" >
			<ImageView 
			    android:layout_width="wrap_content"
				android:layout_height="wrap_content" 
				android:src="@drawable/a" 
				/>
</LinearLayout>

 实现 接口如下：

public class ViewflipperTestActivity extends Activity implements OnTouchListener,OnGestureListener,OnClickListener{

 

在

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {

里

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE&& Math.abs(velocityX) > FLING_MIN_VELOCITY) {              
			  // 当像左侧滑动的时候             
			  //设置View进入屏幕时候使用的动画    
			//或者直接：mFlipper.setInAnimation(getApplicationContext(), R.anim.in_left); add by 午夜凶林
			  next();
		     } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) {       
			  // 当像右侧滑动的时候              
			  previous();
		  }          
		  return false;
	}

 private void next(){
  mFlipper.setInAnimation(AnimationUtil.inFromRightAnimation(getApplicationContext()));              
    //设置View退出屏幕时候使用的动画              
    mFlipper.setOutAnimation(AnimationUtil.outToLeftAnimation(getApplicationContext()));    
    mFlipper.showNext();          
 }
 private void previous(){
   mFlipper.setInAnimation(AnimationUtil.inFromLeftAnimation(getApplicationContext()));              
    mFlipper.setOutAnimation(AnimationUtil.outToRightAnimation(getApplicationContext()));              
    mFlipper.showPrevious();         
 }

这样就可以实现 下方区域 跟随手指滑动而移动，这个难度不大 ，要实现 上方的标题栏 圆角背景 移动 ，我们 采用动画来做。

在 点击 事件 里

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.textView_1:
			move(textView_1);
			mFlipper.setDisplayedChild(0);
			break;
		case R.id.textView_2:
			move(textView_2);
			mFlipper.setDisplayedChild(1);
			break;
		case R.id.textView_3:
			move(textView_3);
			mFlipper.setDisplayedChild(2);
			break;

		default:
			break;
		} 
		
	}

mFlipper.setDisplayedChild(0); 是控制 下方区域 移动 ，move  是控制圆角背景移动

	private void move(TextView tv){
		if(tv != curr_view){
			if(isFirst){
				from_left = getLeft(textView_1);
				isFirst = false;
				changeParent();
				move(tv);
			}else{
				to_left = getLeft(tv);
				//iv_bg.startAnimation(AnimationUtil.startTransform(getApplicationContext(), from_left, to_left));
				TranslateAnimation animation = new TranslateAnimation(from_left, to_left, 0, 0);
				animation.setDuration(400);
				animation.setFillAfter(true);
				iv_bg.bringToFront();
				iv_bg.startAnimation(animation);
				
				//fly
				mFlipper.setNextFocusDownId(R.id.relativeLayout_3);
				mFlipper.setNextFocusRightId(R.id.relativeLayout_3);
				curr_view = tv;
				from_left = to_left;
			}
		}
	}

ok ，可以了，将move（。。。） 方法 加在 onFling  （。。。） 里就可以实现我们所需要的全部效果了。

 

下面是我的效果图：