Jakie interfejsy API są używane do rysowania w innych aplikacjach (np. Na czatach Facebooka)?

226

Jak Facebook tworzy czaty na Androidzie? Co to jest interfejs API do tworzenia widoków pływających nad wszystkimi innymi widokami?

Daniel A. White
źródło
6
Ta aplikacja ma również funkcję „ Head
Oli
11
Jeśli szukasz przykładu, zobacz github.com/marshallino16/FloatingNotification
marshallino16
5
Możesz znaleźć wersję demonstracyjną i prostą bibliotekę tutaj: github.com/ericbhatti/floaties Za pomocą tej biblioteki możesz tworzyć pływające okna za pomocą zaledwie 2 linii.
Eric B.,

Odpowiedzi:

217

Ten :

Zezwala aplikacji na otwieranie okien przy użyciu typu TYPE_SYSTEM_ALERT, pokazanego na wierzchu wszystkich innych aplikacji. Bardzo niewiele aplikacji powinno korzystać z tego uprawnienia; te okna są przeznaczone do interakcji na poziomie systemu z użytkownikiem.

Stała wartość: „android.permission.SYSTEM_ALERT_WINDOW”

// EDYCJA: Pełny kod tutaj :

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);
  }
}

Nie zapomnij jakoś uruchomić usługi:

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

.. I dodaj tę usługę do swojego manifestu.

Waza_Be
źródło
4
Myślę, że jest więcej dziwnych rzeczy. Co z przetwarzaniem danych wejściowych poza „głową”, a także możliwości przeciągania? Myślę, że potrzebujesz przynajmniej FLAG_NOT_TOUCH_MODAL , a także sprytnej logiki, aby zaktualizować atrybuty okna (tj. Przenieść go) podczas przeciągania.
Delyan,
2
w jaki sposób usunąć głowice czatu?
Nirav Mehta
6
Pomyślałem, że warto wspomnieć o SDK, który opracowałem do tworzenia pływającego interfejsu użytkownika: www.tooleap.com
Arik
@NiravMehta Czy jesteś w stanie usunąć głowice czatu?
KK_07k11A0585
jak usunąć margines głowicy czatu, ponieważ w powyższym kodzie wyjściowym koło ma trochę miejsca od granicy. na Facebooku bańka nie ma tego miejsca
Debugger
51

Z reguły działania Androida to pełnoekranowe, koncepcyjnie dedykowane interfejsy użytkownika, które biorą całą interakcję. Jest kilka wyjątków od tego. Na początek są wyskakujące okna dialogowe, które nie wypełniają ekranu. Kolejnym jest toast na Androida, który jest nieinteraktywnym okienkiem wyskakującym - nie możesz go dotknąć, a jeśli spróbujesz, przejdzie do wszystkiego, co jest pod nim.

Możesz także tworzyć własne specjalne interfejsy użytkownika. Możesz dodać widoki bezpośrednio do WindowManager, określając flagę typu. Głowy czatu prawdopodobnie używają TYPE_PHONE . Istnieje kilka podobnych typów, ale cel jest taki sam: nakładki specjalnego przeznaczenia, które mogą pojawiać się nad czymkolwiek innym, bez widocznej obecności aplikacji nadrzędnej.

To dotrwa tylko do tej pory z powodu problemów z interakcją. Na początku twoja nakładka pochłonie całą interakcję, więc nie tylko głowa otrzymuje zdarzenia, ale blokujesz interakcję ze wszystkim pod spodem.

To zachowanie konfiguruje się za pomocą LayoutParams . FLAG_NOT_TOUCH_MODALoznacza, że ​​zdarzenia poza obszarem wyświetlania przechodzą do podstawowych interfejsów użytkownika. Przekonasz się, że to działa, ale wciąż zdarzają się inne złe rzeczy, takie jak przyciski Wstecz / Menu nie są kierowane do aplikacji, a także bez klawiatury. Aby rozwiązać ten problem FLAG_NOT_FOCUSABLE.

Uzyskujesz również efekt uboczny z nieregulowanego bitu, który nie jest już przyjemną interakcją z twoją nakładką, np. Naciśnięciem przycisku. Możesz jednak uzyskać podstawowe zdarzenia dotykowe, na których zawsze możesz wykonywać matematykę, i to prawdopodobnie wystarcza dla szefów czatów. Tylko pamiętaj, że pozostawia cię na własną rękę w wielu obszarach, takich jak animacja interfejsu użytkownika.

Dobry przegląd szczegółów, w tym umożliwienie selektywnego zużycia interakcji, można znaleźć w tym wątku StackOverflow . W szczególności jeden z linków odpowiedzi ostatecznie doprowadzi cię tutaj , co jest dobrym przykładem projektu. Zauważ, że ICS zmieniło nieco to, ale wątki to wyjaśniają.

To wszystko są publiczne interfejsy API, ale tak naprawdę nie wygląda to na główny nurt, który należy robić jako coś oczywistego. Dokumentacja jest pełna odnośników do specjalnych zachowań aplikacji systemowych i nie bez powodu; co jeśli wszyscy to zrobili?

Rob Pridham
źródło
Czy mogę jakoś zablokować zmiany orientacji dla tego widoku? Jeśli podstawowa aktywność zmienia orientację, mój widok również zmienia jego orientację.
MG
1
Nie. Zmiana orientacji dotyczy całego urządzenia, nie tylko działania.
Rob Pridham
7

Sprężyste głowy dają wiosenne zachowanie głów czatu po wyjęciu z pudełka. Wszystko, co musisz zdefiniować, to możliwość rysowania dla głowy czatu i fragment, który otworzy się po kliknięciu. Głowice czatu upadają po zminimalizowaniu i podążają za palcem po przeciągnięciu.

Projekt zawiera aplikację demonstracyjną, która demonstruje wszystkie wbudowane funkcje. Aby go użyć, musisz dodać to do swoich zależności między stopniami.

compile 'com.flipkart.springyheads:library:0.9.6'
Kiran Kumar
źródło
Hej @KiranKumar, stworzyłeś bardzo przejrzystą bibliotekę .. Po prostu to uwielbiam .. Próbuję nauczyć się różnych aspektów z tej biblioteki .. Próbowałem uruchomić ją poza oknem aplikacji, jakoś trochę mi się to udaje że tak .. Ale problem pojawia się, gdy klikam głowę czatu poza oknem aplikacji .. fragment nie byłby w stanie otworzyć i zwrócić java.lang.OutOfMemoryError .. gdyby to możliwe z Twojej strony daj mi jakoś przez to przejść .. Z przyjemnością zostanie uhonorowany ..
arraystack
@arraystack teraz możesz uruchomić go w serwisie. Sprawdź listę, jeśli oddziały w repozytorium GitHub
Kiran Kumar
@KiranKumar Dziękuję, Problem z nową biblioteką polega na pozwoleniu Draw na aplikację w wersji Marshmallow
arraystack