實現qq ipad客戶端的對話方塊平滑移動的效果
今天要寫一個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中的位置設定為動畫執行完畢後想將其放置 的位置這樣的話就能達到想要的效果了。
相關文章
- 直播平臺原始碼,針對訊息對話方塊的實際應用效果原始碼
- Android實現類似QQ對話方塊的@他人的整體解決方案Android
- 原生js實現的點選彈出螢幕居中對話方塊效果JS
- CSS帶有箭頭的對話方塊效果CSS
- Qt標準對話方塊實現QT
- Java在Swing中如何實現彈出一個對話方塊的效果?Java
- jQuery模擬實現聊天對話方塊jQuery
- 類似QQ對話方塊上下部分可拖動程式碼
- VC實現對話方塊上資訊的顯示 (轉)
- 直播原始碼網站,實現對話方塊的左滑動刪除原始碼網站
- iOS呼叫QQ客戶端發起臨時會話iOS客戶端會話
- Eclipse平臺中“MessageDialog”訊息對話方塊的簡單實現Eclipse
- c#中的模態對話方塊和非模態對話方塊C#
- 利用input type=file和FileReader API實現在瀏覽器客戶端通過選擇對話方塊讀取檔案API瀏覽器客戶端
- React中的模式對話方塊React模式
- 實現element-ui對話方塊可拖拽功能UI
- 【Android初級】如何實現一個具有選擇功能的對話方塊效果(附原始碼)Android原始碼
- 為什麼CDN對移動客戶端加速“沒有”效果客戶端
- [Parallax Animation]實現知乎 Android 客戶端啟動頁視差滾動效果Android客戶端
- 直播平臺原始碼,簡單實現 彈出確認 取消對話方塊原始碼
- Redis的Pub/Sub客戶端實現Redis客戶端
- 網頁SSH客戶端的實現網頁客戶端
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- 1分鐘實現Autodesk Vault登入對話方塊
- 資料夾選擇對話方塊 JS實現(轉)JS
- 一個Flex 對話方塊的坑Flex
- javascript中的彈出對話方塊JavaScript
- 對話方塊函式函式
- 登入對話方塊
- VUE:點選開啟的對話方塊外面時,對話方塊總是被關閉Vue
- 快速實現客戶查重效果
- 跨平臺的 SQL 客戶端SQL客戶端
- Go 實現簡易的 Redis 客戶端GoRedis客戶端
- Android-TCP客戶端的實現AndroidTCP客戶端
- 客戶端骨架屏實現客戶端
- [MFC]選擇目錄對話方塊和選擇檔案對話方塊
- JavaFX 如何使用內建的對話方塊Java
- React 伺服器端渲染和客戶端渲染效果對比React伺服器客戶端