螢幕觸控及手勢辨別 靜宜大學資管系 楊子青.

Presentation on theme: "螢幕觸控及手勢辨別 靜宜大學資管系 楊子青."— Presentation transcript:

1 螢幕觸控及手勢辨別 靜宜大學資管系 楊子青

2 專案：PU 選擇Empty Activity drawable資源，放入pu0~pu3圖檔
版面配置：改為LinearLayout (方向vertical)

3 1. View與ViewGroup View ViewGroup
具體可見的視覺元件，如TextView、EditText、 Button等，其內不能再置入其他的元件 ViewGroup 不可見的容器元件，如Layout，用來設定容器內的View和ViewGroup的排列規則

4 public class View extends Object java.lang.Object ↳ android.view.View
extends Object java.lang.Object ↳ android.view.View A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components .

5 public abstract class ViewGroup
extends View java.lang.Object ↳ android.view.View ↳android.view.ViewGroup the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups).

6 onTouchEvent Implement this method to handle touch screen motion events. boolean onTouchEvent (MotionEvent event)

7 程式碼 public class MainActivity extends AppCompatActivity {
TextView txv; ImageView img; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txv = (TextView) findViewById(R.id.txv); img = (ImageView) findViewById(R.id.img); }

8 程式碼 public boolean onTouchEvent (MotionEvent event){
txv.setText("onTouchEvent"); return true; } Touch螢幕 (文字,圖片 或空白處 都可以) 模擬測試看看

9 2. public class GestureDetector
extends Object java.lang.Object ↳ android.view.GestureDetector Detects various gestures and events using the supplied MotionEvents. In the onTouchEvent(MotionEvent) method ensure you call onTouchEvent(MotionEvent). The methods defined in your callback will be executed when the events occur.

10 GestureDetector.OnGestureListener 需實做的方法 (可運用的手勢)
boolean onDown(MotionEvent e): 每次點擊時發生（發生時機相當於ACTION_DOWN） boolean onSingleTapUp(MotionEvent e): 單擊放開且短時間時發生 void onShowPress(MotionEvent e): 使用者點擊後，停留較長一點時間，沒有滑動也還沒放開時發生 void onLongPress(MotionEvent e): 點擊並且停留長時間時發生 boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY): 當滑動時會持續發生 boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY): 當滑動了一段距離後，放開時發生的事件

11 建立手勢偵測步驟 1.建立自己的手勢類別並繼承類別GestureDetector.OnGestureListener
3.幫你要偵測手勢的View元件加入onTouchEvent()或onTouch()方法。 4.在onTouchEvent()或onTouch()內呼叫GestureDetector.onTouchEvent()方法，並傳入系統傳來的MotionEvent物件。 在onTouchEvent()或onTouch()方法內必須回傳true，否則部分手勢將無法被偵測到。

12 程式碼 (Step 1) public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener { TextView txv; ImageView img; GestureDetector gd;

13 程式碼 (Step 2) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txv = (TextView) findViewById(R.id.txv); img = (ImageView) findViewById(R.id.img); gd = new GestureDetector(this, this); } Listener(目前的監聽事件) Context(目前的應用系統)

14 程式碼 (Step 3) public boolean onTouchEvent (MotionEvent event){
//txv.setText("onTouchEvent"); gd.onTouchEvent(event); return true; }

15 程式碼 (Step 4-1) @Override public boolean onDown(MotionEvent e) {
txv.setText("觸控螢幕開始"); return false; } public void onShowPress(MotionEvent e) { txv.setText("觸控後無後續動作");

16 程式碼 (Step 4-2) @Override public boolean onSingleTapUp(MotionEvent e) {
txv.setText("短按螢幕"); return false; } public void onLongPress(MotionEvent e) { txv.setText("長按螢幕");

17 程式碼 (Step 4-3) @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { txv.setText("持續移動\nx1y1:" + String.valueOf(e1.getX()) + ", " + String.valueOf(e1.getY()) + "\nx2y2:" + String.valueOf(e2.getX()) + "," + String.valueOf(e2.getY())); return false; }

18 程式碼 (Step 4-4) @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { txv.setText("快速滑動\nx1y1:" + String.valueOf(e1.getX()) + "," + String.valueOf(e1.getY()) + "\nx2y2:" + String.valueOf(e2.getX()) + "," + String.valueOf(e2.getY()) + "\nX軸Y軸速度:" + String.valueOf(velocityX) + "," + String.valueOf(velocityY)); return false; } 模擬測試看看

19 3. 針對特定元件進行觸控 前面的作法是利用View的onTouchEvent (全螢幕中的所有元件都可以觸控)
若要指定特定元件(如圖片)才能進行觸控，步驟如下： 實做OnTouchListener監聽事件 登錄元件進行監聽 撰寫onTouch方法

20 程式碼 (Step 1) public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener, View.OnTouchListener { TextView txv; ImageView img; GestureDetector gd;

21 程式碼 (Step 2) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txv = (TextView) findViewById(R.id.txv); img = (ImageView) findViewById(R.id.img); img.setOnTouchListener(this); gd = new GestureDetector(this, this); }

22 程式碼 (Step 3) /* public boolean onTouchEvent (MotionEvent event){
gd.onTouchEvent(event); return true; } */ @Override public boolean onTouch(View v, MotionEvent event) {

23 僅保留短按、長按、滑動 模擬測試看看 @Override public boolean onDown(MotionEvent e) {
//txv.setText("觸控螢幕開始"); return false; } public void onShowPress(MotionEvent e) { //txv.setText("觸控後無後續動作"); public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { //txv.setText("持續移動\nx1y1:" + String.valueOf(e1.getX()) + "," + String.valueOf(e1.getY()) // "\nx2y2:" + String.valueOf(e2.getX()) + "," + String.valueOf(e2.getY())); 模擬測試看看

24 4.利用短按、長按、滑動，切換圖片 public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener, View.OnTouchListener { TextView txv; ImageView img; GestureDetector gd; int PictureNo, TotalPictures; //目前顯示第幾張圖，以及總共幾張圖片

25 設定變數初值 @Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txv = (TextView) findViewById(R.id.txv); img = (ImageView) findViewById(R.id.img); img.setOnTouchListener(this); gd = new GestureDetector(this, this); PictureNo = 0; TotalPictures = 4; }

26 短按，切換到首張圖片 @Override public boolean onSingleTapUp(MotionEvent e) {
//txv.setText("短按螢幕"); PictureNo = 0; img.setImageResource(R.drawable.pu0); return false; }

27 長按，切換到末張圖片 @Override public void onLongPress(MotionEvent e) {
//txv.setText("長按螢幕"); PictureNo = TotalPictures - 1; img.setImageResource(R.drawable.pu3); }

28 長按，切換到末張圖片 @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e1.getX()<e2.getX()){ //向右滑動 PictureNo++; if (PictureNo==TotalPictures){ PictureNo = 0; } } else{ //向左滑動 PictureNo--; if (PictureNo<0){ PictureNo = TotalPictures-1; } txv.setText(String.valueOf(PictureNo)); return false; 模擬測試看看

29 5.根據PictureNo顯示照片 public void ShowPicture(){ switch (PictureNo){
case 0: { img.setImageResource(R.drawable.pu0); break;} case 1: { img.setImageResource(R.drawable.pu1); break;} case 2: { img.setImageResource(R.drawable.pu2); break;} case 3: { img.setImageResource(R.drawable.pu3); break;} }

30 改為呼叫ShowPicture (左右滑動)
@Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e1.getX()<e2.getX()){ //向右滑動 PictureNo++; if (PictureNo==TotalPictures){ PictureNo = 0; } } else{ //向左滑動 PictureNo--; if (PictureNo<0){ PictureNo = TotalPictures-1; } txv.setText(String.valueOf(PictureNo)); ShowPicture(); return false;

31 改為呼叫ShowPicture (短按) @Override
public boolean onSingleTapUp(MotionEvent e) { //txv.setText("短按螢幕"); PictureNo = 0; txv.setText(String.valueOf(PictureNo)); ShowPicture(); //img.setImageResource(R.drawable.pu0); return false; }

32 改為呼叫ShowPicture (長按) @Override
public void onLongPress(MotionEvent e) { //txv.setText("長按螢幕"); PictureNo = TotalPictures - 1; txv.setText(String.valueOf(PictureNo)); ShowPicture(); //img.setImageResource(R.drawable.pu3); }

33 6.動態取得資源識別 public void ShowPicture(){ /* switch (PictureNo){
case 0: { img.setImageResource(R.drawable.pu0); break;} case 1: { img.setImageResource(R.drawable.pu1); break;} case 2: { img.setImageResource(R.drawable.pu2); break;} case 3: { img.setImageResource(R.drawable.pu3); break;} } */ int res = getResources().getIdentifier("pu" + (PictureNo), "drawable", getPackageName()); img.setImageResource(res); 模擬測試看看

34 7.動態取得資源個數 (圖檔數) @Override
protected void onCreate(Bundle savedInstanceState) { … PictureNo = 0; //TotalPictures = 4; int res = -1; int countDrawables = -1; while (res != 0) { countDrawables++; res = getResources().getIdentifier("pu" + (countDrawables), "drawable", getPackageName()); } TotalPictures = countDrawables; *將drawable資料夾的最後一張pu3改為p3， 模擬測試看看 *加入更多圖檔，命名pu3, pu4…模擬測試看看