類似 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>
           

 實作 接口如下：

在

@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  （。。。） 裡就可以實作我們所需要的全部效果了。

下面是我的效果圖：