實現qq ipad客戶端的對話方塊平滑移動的效果

鴨脖發表於2012-07-17

今天要寫一個android對話方塊,實現對話方塊隨著手指能夠移動,而且當對話方塊移動到一定程度的時候,能夠實現對話方塊在左右自動隱藏。這個功能比較難,需要系統的學習一下onTouch函式,現在貼出我的原始碼:

package com.yelbosh.test;


import java.io.IOException;


import com.yelbosh.test.classes.MyButton;


import android.Manifest;
import android.opengl.Visibility;
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.text.Layout;
import android.util.Log;
import android.view.ContextMenu;
import android.view.ContextMenu.ContextMenuInfo;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.support.v4.app.NavUtils;
import android.webkit.*;
import android.widget.Button;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;


/**
 * 
 * @author yelbosh
 * 2012-7-15
 */
public class MainActivity extends Activity {
private static final boolean LEFT = true;
private static final boolean RIGHT = false;

private View talkdiv;
private Button photo;
private RelativeLayout rl;
//talkdiv上面的title
private TextView titleBar;
//設定talkidv出現的方向
private boolean talkOrentation = LEFT; 

private int WINDOW_HEIGHT;
private int WINDOW_WIDTH;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rl = (RelativeLayout)findViewById(R.id.mainlayout);
        photo = (Button)findViewById(R.id.myphoto);
        talkdiv = getLayoutInflater().inflate(R.layout.talk, rl,false);
        rl.addView(talkdiv);
        talkdiv.setVisibility(View.INVISIBLE);
        
        titleBar = (TextView)findViewById(R.id.titleBar);
        
        //為titleBar設定監聽函式
        titleBar.setOnTouchListener(new View.OnTouchListener() {
//記錄初始位置
        int temp;
        int viewLeft;
       
public boolean onTouch(View arg0, MotionEvent event) {
// TODO Auto-generated method stub
int eventaction = event.getAction();
int x = (int)event.getRawX();


switch (eventaction) {
case MotionEvent.ACTION_DOWN:
temp = (int) event.getRawX();//記錄起始x座標
viewLeft = (int)MainActivity.this.talkdiv.getLeft();
break;
case MotionEvent.ACTION_MOVE:
MainActivity.this.talkdiv.layout(viewLeft+x-temp, 0, viewLeft+x-temp+MainActivity.this.talkdiv.getWidth(), MainActivity.this.talkdiv.getHeight());
MainActivity.this.talkdiv.postInvalidate();
break;
case MotionEvent.ACTION_UP:
//根據滑動的距離進行判斷
//滑到右邊
if((viewLeft + x-temp) > 0.3*MainActivity.this.WINDOW_WIDTH){

//滑向右邊
Animation temani = new TranslateAnimation(MainActivity.this.talkdiv.getLeft(),MainActivity.this.talkdiv.getWidth(),0,0);
temani.setDuration(600);
MainActivity.this.talkdiv.startAnimation(temani);
MainActivity.this.talkdiv.setVisibility(View.INVISIBLE);
//使其居中
MainActivity.this.talkdiv.layout(0, 0,MainActivity.this.talkdiv.getWidth(), MainActivity.this.talkdiv.getHeight());
//設定下次從右邊出現
MainActivity.this.talkOrentation = MainActivity.this.RIGHT;
}else if((viewLeft + x-temp) < -0.3*MainActivity.this.WINDOW_WIDTH){
//滑向左邊
Animation temani = new TranslateAnimation(viewLeft + x-temp,-MainActivity.this.talkdiv.getWidth(),0,0);
temani.setDuration(600);
MainActivity.this.talkdiv.startAnimation(temani);
MainActivity.this.talkdiv.setVisibility(View.INVISIBLE);
MainActivity.this.talkdiv.layout(0, 0,MainActivity.this.talkdiv.getWidth(), MainActivity.this.talkdiv.getHeight());
//設定下次從左邊出現
MainActivity.this.talkOrentation = MainActivity.this.LEFT;
}else{
//保持在(0,0)
Animation temani = new TranslateAnimation(viewLeft + x-temp,0,0,0);
temani.setDuration(600);
MainActivity.this.talkdiv.startAnimation(temani);
//使其居中
MainActivity.this.talkdiv.layout(0, 0,MainActivity.this.talkdiv.getWidth(), MainActivity.this.talkdiv.getHeight());
//重繪至中間
MainActivity.this.talkdiv.postInvalidate();
}
break;
}
return true;
}
});
        
        
        WINDOW_HEIGHT = this.getWindowManager().getDefaultDisplay().getHeight();
        WINDOW_WIDTH = this.getWindowManager().getDefaultDisplay().getHeight();
        /**
         * 為按鈕設定監聽函式
         */
        photo.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
//只有當其不可見的時候我們才執行動畫
if(talkdiv.getVisibility() == View.INVISIBLE){
talkdiv.setVisibility(View.VISIBLE);
//判斷應該從哪個方向拉出
int temx = MainActivity.this.talkOrentation?-MainActivity.this.talkdiv.getWidth():MainActivity.this.talkdiv.getWidth();
Animation translate = new TranslateAnimation(Animation.RELATIVE_TO_SELF,temx,Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0);
translate.setDuration(200);
MainActivity.this.talkdiv.startAnimation(translate);
}
}
});
        
        
        //rl.addView(talkdiv);
        
    }
@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    
}

這是整個類所有的原始碼,xml檔案我就不寫了,大家自己慢慢理解吧。


需要注意的幾點:

注意onTouch的返回值。改成return true,這樣onouch會繼續監聽

注意取得視窗長寬的方法:

 WINDOW_HEIGHT = this.getWindowManager().getDefaultDisplay().getHeight();

 WINDOW_WIDTH = this.getWindowManager().getDefaultDisplay().getHeight();


這裡我是根據視窗的橫座標的值來判斷是否應該自動隱藏,並且以視窗的寬的三分之一為邊界

注意動畫效果的實現,我使用了TranslateAnimation這個類,但是貌似這個動畫執行了之後物件又會返回到原來的位置。所以在動畫執行完畢後我將其設定為不可見,這樣的話我再將其layout中的位置設定為動畫執行完畢後想將其放置 的位置這樣的話就能達到想要的效果了。

相關文章