CustomView(自定義視圖) 、 畫布、顏色及多點觸控 靜宜大學資管系 楊子青

Presentation on theme: "CustomView(自定義視圖) 、 畫布、顏色及多點觸控 靜宜大學資管系 楊子青"— Presentation transcript:

1 CustomView(自定義視圖) 、 畫布、顏色及多點觸控 靜宜大學資管系 楊子青

2 1. 觸控專案：CustomView 用程式方式自行定義螢幕畫面 （自訂SingleFingerView）

3 針對SingleFingerView新增constructor

4 SingleFingerView.java程式碼
public class SingleFingerView extends View { Paint paint = new Paint(); float xPos = 200; float yPos = 200; public SingleFingerView(Context context) { super(context); paint.setColor(Color.YELLOW); } public void onDraw(Canvas canvas){ super.onDraw(canvas); canvas.drawColor(Color.LTGRAY); canvas.drawCircle(xPos, yPos, 80, paint); 說明： 淺灰色背景之畫布 使用黃色畫筆 於(200,200)位置 畫一個半徑80的圓形

5 MainActivity.java程式碼 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); setContentView(new SingleFingerView(this)); } 執行結果：

6 畫出文字內容 說明： onDraw方法中，加入以下程式碼： 使用藍色畫筆，50像素 避免鋸齒狀
以(50,200)為軸心，-10度角 畫出文字之內容 onDraw方法中，加入以下程式碼： paint.setColor(Color.BLUE); paint.setTextSize(50); paint.setAntiAlias(true); canvas.rotate(-10,50,200); canvas.drawText("觸控螢幕，圓形呈現不同顏色！", 50,200,paint); 執行結果：

7 畫出資源圖形 先在drowable資料夾中，放入圖檔(例如靜宜校徽 logo.jpg) onDraw方法中，加入以下程式碼：
Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.logo); canvas.drawBitmap(bitmap, 500,600, paint); 說明： 於(500,600) 畫出圖片 執行結果：

8 手勢辨別 public class SingleFingerView extends View implements GestureDetector.OnGestureListener{ Paint paint = new Paint(); float xPos = 200; float yPos = 200; GestureDetector gd; public SingleFingerView(Context context) { super(context); paint.setColor(Color.YELLOW); gd = new GestureDetector(context, this); }

9 處理觸控事件 public boolean onTouchEvent (MotionEvent event) {
gd.onTouchEvent(event); return true; } public boolean onDown(MotionEvent e) { paint.setColor(Color.YELLOW); xPos = e.getX(); yPos = e.getY(); invalidate(); return false; public void onShowPress(MotionEvent e) {

10 處理觸控事件 public boolean onSingleTapUp(MotionEvent e) {
paint.setColor(Color.MAGENTA); xPos = e.getX(); yPos = e.getY(); invalidate(); return false; } @Override public void onLongPress(MotionEvent e) { paint.setColor(Color.BLACK);

11 處理觸控事件 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { paint.setColor(Color.RED); xPos = e2.getX(); yPos = e2.getY(); invalidate(); return false; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { paint.setColor(Color.GREEN);

12 2. 多點觸控 新增自訂MultiFingersView 新增同名的constructor、新增onDraw方法
public class MultiFingersView extends View { Paint paint = new Paint(); public MultiFingersView(Context context) { super(context); } public void onDraw(Canvas canvas){ super.onDraw(canvas); canvas.drawColor(Color.LTGRAY); paint.setColor(Color.BLUE); paint.setTextSize(50); paint.setAntiAlias(true); canvas.drawText("多指觸控，依序呈現彩虹顏色！", 50,200,paint);

13 修改MainActivity.java public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); //setContentView(new SingleFingerView(this)); setContentView(new MultiFingersView(this)); } 執行結果：

14 MultiFingersView.java屬性宣告
宣告以下三個屬性，分別記錄按下之手指數及X與Y座標 int Count = 0; float[] xPos = new float[20]; float[] yPos = new float[20];

15 多點觸控 event.getAction() //獲取觸控動作，例如ACTION_DOWN
event.getPointerCount(); //獲取觸控點的數量，例如2是兩個手指同時按壓屏幕 event.getPointerId(nID); //對於每個觸控的點的細節，可以藉由一個循環執行getPointerId方法獲取索引 event.getX(nID); //獲取第nID個觸控點的x位置 event.getY(nID); //獲取第nID個點觸控的y位置 event.getPressure(nID); //LCD可以感應出用戶的手指壓力，具體的級別由驅動和物理硬件決定的

16 MultiFingersView.java處理觸控
撰寫onTouchEvent方法 public boolean onTouchEvent (MotionEvent event) { Count = event.getPointerCount(); for (int i = 0; i < Count; i++) { xPos[i] = event.getX(i); yPos[i] = event.getY(i); } invalidate(); return true;

17 MultiFingersView.java觸控時畫圓
擴充onDraw方法 public void onDraw(Canvas canvas){ … for (int i=0; i<Count; i++){ paint.setColor(Color.YELLOW); canvas.drawCircle(xPos[i], yPos[i], 80, paint); } 執行結果：

18 自行定義colors.xml資源檔 Android 中xml 內的顏色對照表

19 於colors.xml定義顏色及陣列 <?xml version="1.0" encoding="utf-8"?>
<resources> <color name="colorPrimary">#008577</color> <color name="colorPrimaryDark">#00574B</color> <color name="colorAccent">#D81B60</color> <color name="red">#FF0000</color><!--紅色 --> <color name="orange">#FFA500</color><!--橙色 --> <color name="yellow">#FFFF00</color><!--黃色 --> <color name="green">#008000</color><!--綠色 --> <color name="blue">#0000FF</color><!--藍色 --> <color name="indigo">#4B0082</color><!--靛青色 --> <color name="purple">#800080</color><!--紫色 --> <array name="rainbow"> </array> </resources>

20 修改MultiFingersView.java讀取顏色
public class MultiFingersView extends View{ Paint paint = new Paint(); int Count = 0; float[] xPos = new float[20]; float[] yPos = new float[20]; int[] rainbow; public SingleFingerView(Context context) { super(context); rainbow = context.getResources().getIntArray(R.array.rainbow); }

21 修改MultiFingersView.java設定顏色
public void onDraw(Canvas canvas){ super.onDraw(canvas); canvas.drawColor(Color.LTGRAY); paint.setColor(Color.BLUE); paint.setTextSize(50); paint.setAntiAlias(true); canvas.drawText("多指觸控，依序呈現彩虹顏色！", 50,200,paint); for (int i=0; i<Count; i++){ //paint.setColor(Color.YELLOW); paint.setColor(rainbow[i % 7]); canvas.drawCircle(xPos[i], yPos[i], 80, paint); } 執行結果：

22 後續自行探索 Handling single and multi touch on Android – Tutorial
This pointer index can change over time, e.g. if one finger is lifted from the device. The stable version of a pointer is the pointer id, which can be determined with the getPointerId(pointerIndex) method from the MotionEvent object. public boolean onTouchEvent(MotionEvent event) { // get pointer index from the event object int pointerIndex = event.getActionIndex(); // get pointer ID int pointerId = event.getPointerId(pointerIndex); // get masked (not specific to a pointer) action int maskedAction = event.getActionMasked(); switch (maskedAction) { … Tutorial: ScaleGestureDetector