ไอคอนเคอร์เซอร์เมาส์

ผู้ใช้ Android เข้ามายังแอปของคุณจากอุปกรณ์ทุกรูปแบบ ไม่ว่าจะเป็นโทรศัพท์ แท็บเล็ต อุปกรณ์พับได้ และ Chromebook เมื่อโต้ตอบกับแอปพลิเคชัน โดยเฉพาะบนหน้าจอขนาดใหญ่ ผู้ใช้อาจใช้อุปกรณ์ชี้บางประเภท เช่น เมาส์ 3 ปุ่ม แอปพลิเคชัน Android รองรับการใช้รูปแบบต่างๆ กับเคอร์เซอร์ของเมาส์เพื่อช่วยให้ผู้ใช้เหล่านั้นเห็นสัญญาณภาพที่บ่งบอกว่าสามารถโต้ตอบกับออบเจ็กต์ได้

ใช้เคอร์เซอร์เริ่มต้นของระบบ

ผู้ใช้คุ้นเคยกับรูปแบบต่างๆ ในการโต้ตอบกับออบเจ็กต์ประเภทต่างๆ บนอุปกรณ์หน้าจอขนาดใหญ่ Android มีไอคอนเคอร์เซอร์ที่พบบ่อยที่สุดบางส่วนที่ผู้ใช้คุ้นเคยให้แก่นักพัฒนาแอป คุณเพิ่มไอคอนเคอร์เซอร์เริ่มต้นของระบบเหล่านี้ได้โดยใช้โค้ดเพียงไม่กี่บรรทัด มาดูข้อมูลโค้ด Kotlin ต่อไปนี้กัน 

myView.setOnHoverListener { view, _ ->
      view.pointerIcon =
         PointerIcon.getSystemIcon(applicationContext, PointerIcon.TYPE_HAND)
      false // Listener did not consume the event.
}

ในตัวอย่างนี้ myView คือมุมมองที่จะตั้งค่าเป็นไอคอนเคอร์เซอร์ภายใต้เงื่อนไขบางประการ เงื่อนไขที่แสดงที่นี่คือสถานะการวางเมาส์เหนือ ซึ่งจะเกิดขึ้นเมื่อตัวชี้เมาส์อยู่เหนือมุมมอง ในสถานการณ์อื่นๆ คุณอาจต้องการไอคอนรอระหว่างการประมวลผลหรือกากบาทในเกม

setOnHoverListener จะรอให้เคอร์เซอร์เข้าสู่สถานะวางเมาส์ แล้วจึงดำเนินการกับเหตุการณ์นั้น ภายใน Listener เหตุการณ์ ระบบจะเรียกใช้ view.pointerIcon เพื่อตั้งค่าไอคอนเคอร์เซอร์สำหรับมุมมองนั้นๆ ระบบจะใช้ไอคอนของระบบที่มีอยู่เพื่อตั้งค่าไอคอนของเคอร์เซอร์

Android มีไอคอนระบบหลายรายการอยู่ภายใน โดยดูรายการทั้งหมดได้ที่ด้านล่างของหน้านี้ เราใช้ไอคอน TYPE_HAND ซึ่งแสดงมือที่ปิดอยู่โดยมีนิ้วชี้เหยียดออก

ใช้เคอร์เซอร์พิเศษของคุณเอง

// Loading a bitmap to use as a pointer icon
    BitmapFactory.decodeResource(
        this.resources,
        R.drawable.dollar_sign
    ), CURSOR_WIDTH, CURSOR_HEIGHT, false
)

// Creating the pointer icon and sending clicks from the center of the mouse icon
PointerIcon.create(dollarBitmap, (CURSOR_WIDTH/2).toFloat(), (CURSOR_HEIGHT/2).toFloat())

หมายเหตุ: ตำแหน่งของฮอตสปอตจะขึ้นอยู่กับกรณีการใช้งานของคุณ เช่น แอปวาดภาพจะตั้งค่าฮอตสปอตให้เป็นปลายปากกาหรือพู่กัน

ตัวอย่าง

การเพิ่มไอคอนเคอร์เซอร์ลงในแอปพลิเคชันเป็นวิธีที่ยอดเยี่ยมในการช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ใช้งานง่ายยิ่งขึ้นในอุปกรณ์รูปแบบต่างๆ ที่ใช้ ไอคอนระบบเริ่มต้นที่ยอดเยี่ยมมีอยู่มากมาย และหากไอคอนเหล่านั้นไม่ตรงกับความต้องการ คุณก็สามารถโหลดหรือสร้างไอคอนของคุณเองได้เสมอ

  • ลากและวาง - หากแอปพลิเคชันของคุณรองรับการลากจากแอปพลิเคชันอื่นและการวางลงในแอปพลิเคชันของคุณ คุณสามารถใช้ไอคอน TYPE_NO_DROP ได้ ซึ่งจะแสดงให้เห็นว่าแอปพลิเคชันของคุณไม่รองรับประเภท MIME ที่พยายามวางลงในแอป
  • การแมป - หากคุณมีแอปพลิเคชันการแมปและต้องการแสดงให้ผู้ใช้เห็นว่าสามารถเลื่อนแผนที่ได้ คุณอาจมีตัวเลือกให้แสดงไอคอน TYPE_GRAB เมื่อวางเมาส์เหนือแผนที่ เมื่อผู้ใช้คลิก คุณสามารถอัปเดตไอคอนเป็นรูปมือที่กำลังจับเพื่อแสดงว่าผู้ใช้กำลังเลื่อนแผนที่
  • การแก้ไขรูปภาพ - ผู้ใช้ที่แก้ไขรูปภาพต้องการมีตัวควบคุมที่ช่วยให้เลือกแว่นขยายเพื่อซูมเข้าได้ คุณเปลี่ยนเคอร์เซอร์เป็นแว่นขยายได้โดยใช้ไอคอน TYPE_ZOOM_IN เมื่อเลือกโหมดซูมเข้า
  • และโอกาสอื่นๆ อีกมากมาย

หมายเหตุ: หากต้องการดูการเปลี่ยนแปลงเคอร์เซอร์ต่างๆ ในการดำเนินการ โปรดดูตัวอย่างเคอร์เซอร์ใน GitHub นี้

ไอคอนเคอร์เซอร์ที่กำหนดเองในแอป Android

ภาคผนวก

อ่านเพิ่มเติม

เคอร์เซอร์เริ่มต้นของระบบ

เคอร์เซอร์เหล่านี้พร้อมใช้งานโดยค่าเริ่มต้นในระบบ Android

ชื่อเคอร์เซอร์ ไอคอน
TYPE_ALIAS เคอร์เซอร์นามแฝง ซึ่งเป็นลูกศรที่มีลูกศรโค้งขนาดเล็กอยู่ข้างๆ
TYPE_ALL_SCROLL เคอร์เซอร์เลื่อนทั้งหมด ซึ่งเป็นวงกลมที่มีลูกศร 4 ตัวชี้ออก
TYPE_ARROW เคอร์เซอร์ลูกศรมาตรฐาน
TYPE_CELL เคอร์เซอร์ของเซลล์
TYPE_CONTEXT_MENU เคอร์เซอร์เมนูตามบริบท ซึ่งเป็นลูกศรที่มีไอคอนเมนูขนาดเล็กอยู่ข้างๆ
TYPE_COPY เคอร์เซอร์คัดลอก ซึ่งเป็นลูกศรที่มีเครื่องหมายบวกอยู่ข้างๆ
TYPE_CROSSHAIR เคอร์เซอร์กากบาท ซึ่งเป็นเครื่องหมายบวกที่มีจุดอยู่ตรงกลาง
TYPE_DEFAULT เคอร์เซอร์ลูกศรเริ่มต้น
TYPE_GRAB เคอร์เซอร์สำหรับจับเป็นรูปมือที่แบออก
TYPE_GRABBING เคอร์เซอร์ที่ใช้จับเป็นรูปมือที่กำอยู่
TYPE_HAND เคอร์เซอร์มือ ซึ่งเป็นรูปมือที่มีนิ้วชี้ชี้อยู่
TYPE_HELP เคอร์เซอร์ความช่วยเหลือ ซึ่งเป็นลูกศรที่มีเครื่องหมายคำถามอยู่ข้างๆ
TYPE_HORIZONTAL_DOUBLE_ARROW เคอร์เซอร์ลูกศรคู่แนวนอนสำหรับการปรับขนาด
TYPE_NO_DROP เคอร์เซอร์ห้ามวาง ซึ่งเป็นวงกลมที่มีเส้นขีดผ่าน
TYPE_NULL ไม่มีเคอร์เซอร์แสดง
TYPE_TEXT เคอร์เซอร์ข้อความ ซึ่งเป็นรูปตัว I
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW เคอร์เซอร์ลูกศรคู่แนวทแยงจากซ้ายบนไปขวาล่างสำหรับการปรับขนาด
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW เคอร์เซอร์ลูกศรคู่แนวทแยงจากขวาบนไปซ้ายล่างสำหรับการปรับขนาด
TYPE_VERTICAL_DOUBLE_ARROW เคอร์เซอร์ลูกศรคู่แนวตั้งสำหรับการปรับขนาด
TYPE_VERTICAL_TEXT เคอร์เซอร์ข้อความแนวตั้ง ซึ่งเป็น I-beam แนวนอน
TYPE_WAIT เคอร์เซอร์รอ ซึ่งเป็นรูปนาฬิกาทรายหรือวงกลมหมุน
TYPE_ZOOM_IN เคอร์เซอร์ซูมเข้า ซึ่งเป็นแว่นขยายที่มีเครื่องหมายบวก
TYPE_ZOOM_OUT เคอร์เซอร์ซูมออก ซึ่งเป็นแว่นขยายที่มีเครื่องหมายลบ