API ใดที่ใช้ในการวาดบนแอพอื่น ๆ (เช่น Chat Chat ของ Facebook)


226

Facebook สร้าง Chat Heads บน Android อย่างไร API เพื่อสร้างมุมมองแบบลอยอยู่ด้านบนของมุมมองอื่น ๆ ทั้งหมดคืออะไร


6
แอพนี้ยังมี "Chat Heads" play.google.com/store/apps/details?id=com.ninja.sms
Oli

11
หากคุณกำลังมองหาตัวอย่างให้ดูgithub.com/marshallino16/FloatingNotification
marshallino16

5
คุณสามารถค้นหาตัวอย่างและห้องสมุดง่าย ๆ ได้ที่นี่: github.com/ericbhatti/floatiesการใช้ห้องสมุดนี้คุณสามารถสร้างหน้าต่างลอยได้โดยใช้เพียง 2 บรรทัด
Eric B.

คำตอบ:


217

อันนี้ :

อนุญาตให้แอปพลิเคชันเปิดหน้าต่างโดยใช้ประเภท TYPE_SYSTEM_ALERT ที่แสดงอยู่ด้านบนของแอปพลิเคชันอื่นทั้งหมด แอปพลิเคชั่นน้อยมากที่ควรใช้การอนุญาตนี้ หน้าต่างเหล่านี้มีจุดประสงค์สำหรับการโต้ตอบของระบบกับผู้ใช้

ค่าคงที่: "android.permission.SYSTEM_ALERT_WINDOW"

// แก้ไข: รหัสเต็มที่นี่ :

public class ChatHeadService extends Service {

  private WindowManager windowManager;
  private ImageView chatHead;

  @Override public IBinder onBind(Intent intent) {
    // Not used
    return null;
  }

  @Override public void onCreate() {
    super.onCreate();

    windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);

    chatHead = new ImageView(this);
    chatHead.setImageResource(R.drawable.android_head);

    WindowManager.LayoutParams params = new WindowManager.LayoutParams(
        WindowManager.LayoutParams.WRAP_CONTENT,
        WindowManager.LayoutParams.WRAP_CONTENT,
        WindowManager.LayoutParams.TYPE_PHONE,
        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
        PixelFormat.TRANSLUCENT);

    params.gravity = Gravity.TOP | Gravity.LEFT;
    params.x = 0;
    params.y = 100;

    windowManager.addView(chatHead, params);
  }

  @Override
  public void onDestroy() {
    super.onDestroy();
    if (chatHead != null) windowManager.removeView(chatHead);
  }
}

อย่าลืมที่จะเริ่มบริการอย่างใด:

startService(new Intent(context, ChatHeadService.class));

.. และเพิ่มบริการนี้ในรายการของคุณ


4
ฉันคิดว่ามีของแปลก ๆ อีกมาก สิ่งที่เกี่ยวกับการจัดการอินพุตภายนอก "หัว" เช่นเดียวกับการลาก? ฉันคิดว่าอย่างน้อยคุณก็จำเป็นต้องมีFLAG_NOT_TOUCH_MODALอย่างน้อยต้องมีตรรกะที่ชาญฉลาดเพื่ออัปเดตแอตทริบิวต์ของหน้าต่าง (เช่นย้ายมัน) ในขณะที่คุณกำลังลาก
Delyan

2
ในวิธีการลบการแชทหัว?
Nirav Mehta

6
คิดว่ามันคุ้มค่าที่จะพูดถึง SDK ที่ฉันพัฒนาขึ้นเพื่อสร้าง UI แบบลอยตัว: www.tooleap.com
Arik

@NiravMehta คุณสามารถนำหัวแชทออกได้หรือไม่
KK_07k11A0585

วิธีลบระยะขอบของหัวการแชทเนื่องจากในโค้ดด้านบนวงกลมมีช่องว่างจากเส้นขอบใน Facebook ฟองไม่มีพื้นที่นั้น
Debugger

51

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

คุณสามารถทำ UIs พิเศษของคุณเองได้เช่นกัน คุณสามารถเพิ่มมุมมองโดยตรงไปที่WindowManagerระบุประเภทธง หัวสำหรับการพูดคุยอาจจะใช้TYPE_PHONE มีประเภทที่คล้ายกันอยู่สองสามอย่าง แต่วัตถุประสงค์ก็เหมือนกัน: ทับซ้อนของวัตถุประสงค์พิเศษที่สามารถปรากฏที่ด้านบนสุดของสิ่งอื่นโดยไม่ต้องมีแอปพลิเคชันหลักปรากฏอยู่

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

คุณสามารถกำหนดพฤติกรรมนี้โดยใช้LayoutParams FLAG_NOT_TOUCH_MODALหมายความว่ากิจกรรมนอกพื้นที่แสดงผลของคุณไปที่ UIs พื้นฐาน ตอนนี้คุณจะพบว่ามันใช้งานได้ แต่สิ่งเลวร้ายอื่น ๆ ยังคงเกิดขึ้นเช่นปุ่มย้อนกลับ / เมนูจะไม่ถูกนำไปยังแอพรวมทั้งไม่มีแป้นพิมพ์ FLAG_NOT_FOCUSABLEเพื่อแก้ปัญหาที่คุณต้องการ

คุณได้รับผลข้างเคียงจากบิตที่ไม่สามารถโฟกัสได้เช่นกันซึ่งไม่มีการโต้ตอบที่ดีกับการซ้อนทับของคุณอีกต่อไปเช่นการกดปุ่ม คุณสามารถรับเหตุการณ์สัมผัสพื้นฐานบางอย่างซึ่งคุณสามารถทำคณิตศาสตร์ได้ตลอดเวลาและนั่นอาจเพียงพอสำหรับ Chat Heads เพิ่งทราบว่ามันทำให้คุณเป็นเจ้าของในพื้นที่มากมายเช่นภาพเคลื่อนไหว UI

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

นี่คือสิ่งที่ API สาธารณะทั้งหมด แต่ดูเหมือนจะไม่เป็นเรื่องสำคัญที่ควรจะทำตามความเป็นจริง เอกสารถูกทิ้งให้เกลื่อนไปด้วยการอ้างอิงถึงพฤติกรรมของแอประบบพิเศษและด้วยเหตุผลที่ดี; เกิดอะไรขึ้นถ้าทุกคนทำมัน?


ฉันสามารถปิดกั้นการเปลี่ยนแปลงการวางแนวในมุมมองเหล่านี้ได้หรือไม่? หากกิจกรรมพื้นฐานสลับการวางแนวมุมมองของฉันจะเปลี่ยนการวางแนวของเขาด้วย
MG

1
ไม่การเปลี่ยนแปลงการวางแนวนั้นครอบคลุมทั้งอุปกรณ์ไม่ใช่เฉพาะกับกิจกรรม
Rob Pridham

7

Springy headsจะแสดงพฤติกรรมตามการแชทตามหัวของสปริง สิ่งที่คุณต้องกำหนดคือ drawable สำหรับหัวหน้าการแชทและแฟรกเมนต์เพื่อเปิดเมื่อคลิกที่หัวหน้าการแชท หัวแชทยุบเมื่อย่อเล็กสุดและติดตามนิ้วเมื่อลาก

โครงการนี้มีแอพสาธิตซึ่งแสดงให้เห็นถึงฟังก์ชั่นการใช้งานทั้งหมด ในการใช้งานคุณจะต้องเพิ่มสิ่งนี้ลงในการอ้างอิงแบบไล่ระดับ

compile 'com.flipkart.springyheads:library:0.9.6'

เฮ้ @KiranKumar คุณสร้างห้องสมุดที่ชัดเจนมาก .. ฉันรักมัน .. ฉันพยายามเรียนรู้แง่มุมต่าง ๆ จากห้องสมุดนี้ .. ฉันพยายามเรียกใช้นอกหน้าต่างแอปพลิเคชัน แต่ฉันก็ประสบความสำเร็จเล็กน้อยในการทำ อย่างนั้น .. แต่ปัญหาเกิดขึ้นเมื่อฉันคลิกที่หัวแชทนอกหน้าต่างของแอพ .. ส่วนไม่สามารถเปิดและส่งคืน java.lang.OutOfMemoryError .. ถ้ามันเป็นไปได้จากด้านข้างของคุณไป ให้ฉันผ่านสิ่งนี้ .. มันจะเป็นเกียรติอย่างยินดี ..
arraystack

@arraystack ตอนนี้คุณสามารถเรียกใช้ในบริการ ตรวจสอบรายการว่าสาขาใน repo GitHub
Kiran Kumar

@KiranKumar ขอบคุณปัญหาที่เกิดขึ้นกับ lib ใหม่คือการอนุญาตให้ Draw over application ใน Marshmallow Version
arraystack
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.