Jak utworzyć widok popover w systemie Android, np. Na Facebooku?

Question

Zastanawiałem się, czy ktoś wie, jak stworzyć podobny do Facebooka widok popover, jak w aplikacji Facebook na Androida do komentarzy.

To, co mam na myśli:

Wraz z uchwytem, ​​który można przeciągnąć, aby ją odrzucić, jest to rodzimy Android kontrola UI lub został wdrożony Facebook to sami?

Answer 1

Najlepszym sposobem, aby stworzyć podobny popover view jest za pomocą PopupWindow, ponieważ można umieścić PopUpWindow na żadnym z określonej pozycji widzenia (lub na centrum/górnej/dolnej części ekranu). Możesz także osiągnąć ten sam interfejs użytkownika z DialogFragment, ale nie możesz ustawić pozycji w określonym widoku.

Mam kompletny kod pracy tutaj https://gist.github.com/libinbensin/67fcc43a7344758390c3

Krok 1: Utwórz niestandardowy układ, na przykład, jak jej na Facebooku ma Header TextView z ListView i EditText.

Krok 2: Ustaw układ do PopupWindow

napompować układ ustawić

LayoutInflater layoutInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
final View inflatedView = layoutInflater.inflate(R.layout.fb_popup_layout, null,false); 

Ten Layout ma ListView, więc znaleźć ListView w układzie i wypełnić dane . możesz mieć swój własny pogląd tutaj

ListView listView = (ListView)inflatedView.findViewById(R.id.commentsListView); 
listView.setAdapter(new ArrayAdapter<String>(TryMeActivity.this, 
     R.layout.fb_comments_list_item, android.R.id.text1,contactsList)); 

Teraz tworzymy wystąpienie PopupWindow z określonej wysokości i szerokości. Wolę ustawić rozmiar w zależności od urządzenia.

Display display = getWindowManager().getDefaultDisplay(); 
Point size = new Point(); 
display.getSize(size); 

popWindow = new PopupWindow(inflatedView, size.x - 50,size.y - 500, true); 

Ustaw focusability w wyskakującym oknie.

popWindow.setFocusable(true); 

Zrób to poza dotykalne to dismiss the popup window when touched outside obszar okienko

popWindow.setOutsideTouchable(true); 

Teraz ustawić tło do PopupWindow z rozciągliwej. Losowanie ma rectangle shape z corner radius.

popWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.fb_popup_bg)); 

Wreszcie. pokaż PopupWindow w wymaganym miejscu. Zrobiłem to pokazać na bottom ekranu z niektórymi X and Y position

popWindow.showAtLocation(v, Gravity.BOTTOM, 0,150); // 0 - X postion and 150 - Y position 

Można również ustawić Animation używać gdy PopUpWindow pojawia się i znika

popWindow.setAnimationStyle(R.anim.animation); // call this before showing the popup 

Answer 2

Wygląda to jak niestandardowy komponent zbudowany przez Facebooka. Nie jest to standardowy składnik systemu Android. Możesz spróbować go wdrożyć, korzystając z fragmentu okna dialogowego.

Answer 3

Możesz użyć PopupWindow, aby to zrobić. http://developer.android.com/reference/android/widget/PopupWindow.html

Oczywiście musisz go odpowiednio zaprojektować i wypełnić zawartość okna popup. Można uzyskać kilka pomysłów stylizacji z How to make layout with rounded corners..?

Answer 4

Edycja: (! Dialog lub nawet w ogóle)

Faktycznie, chociaż użyłem DialogFragment, jestem pewien ich popup nie używa DialogFragment . Powodem tego jest funkcja zmiany rozmiaru. Jeśli jest to coś, co chcesz, to nie możesz użyć DialogFragment. Będziesz musiał po prostu dodać nowy widok do swojego układu. Wygląda na to, że Facebook ma również inny widok, który znajduje się pomiędzy twoją ścianą a fałszywym wyskakującym okienkiem, który jest lekko przezroczysty i nasłuchuje kliknięć w celu odrzucenia widoku. Coś takiego wymagałoby trochę czasu i wysiłku, aby zbudować, więc nie zrobię tego dla ciebie. Daj mi znać, jeśli masz jakiekolwiek pytania na ten temat, prawdopodobnie poprowadzę cię do rozwiązania, na które masz ochotę.

oryginalny:

pisałem popup dla Ciebie:

public class MyActivity extends Activity { 

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

     if (savedInstanceState == null) { 
      F1.newInstance().show(getFragmentManager(), null); 
     } 
    } 

    public static class F1 extends DialogFragment { 

     public static F1 newInstance() { 
      F1 f1 = new F1(); 
      f1.setStyle(DialogFragment.STYLE_NO_FRAME, android.R.style.Theme_DeviceDefault_Dialog); 
      return f1; 
     } 

     @Override 
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 

      // Remove the default background 
      getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); 

      // Inflate the new view with margins and background 
      View v = inflater.inflate(R.layout.popup_layout, container, false); 

      // Set up a click listener to dismiss the popup if they click outside 
      // of the background view 
      v.findViewById(R.id.popup_root).setOnClickListener(new View.OnClickListener() { 
       @Override 
       public void onClick(View v) { 
        dismiss(); 
       } 
      }); 

      return v; 
     } 
    } 
} 

popup_layout.xml:

<?xml version="1.0" encoding="utf-8"?> 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:clickable="true" 
    android:id="@+id/popup_root"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginTop="72dp" 
     android:layout_marginBottom="72dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:padding="20dp" 
     android:clickable="true" 
     android:background="@drawable/dialog_background"> 

     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textColor="#000" 
      android:text="Content goes here!" /> 

    </FrameLayout> 

</FrameLayout> 

I dialog_background.xml (idzie do RES/odkształcalne):

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#FFF" /> 
    <corners android:topLeftRadius="20dp" android:topRightRadius="20dp" 
     android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/> 
    <stroke android:color="#7F7F7F" android:width="1dp" /> 
</shape> 

A wygląda to tak:

Wystarczy dodać zawartość widoku i jesteś dobry, aby przejść!

Answer 5

Wygląda na to, że najłatwiej byłoby po prostu użyć Fragmentu z przezroczystym (lub w tym przypadku półprzezroczystym) tłem.