Come creeresti una visualizzazione popover in Android, come i commenti di Facebook?

Question

Mi chiedevo se qualcuno sa come creare una visualizzazione popover simile a Facebook come nell'app Facebook Android per i commenti.

Questo è quello che voglio dire:

Insieme con il manico che è possibile trascinare per respingerlo, si tratta di un controllo dell'interfaccia utente Android nativo o ha facebook implementato questa se stessi?

Answer 1

Il modo migliore per creare popover view simile è utilizzando PopupWindow, poiché è possibile posizionare PopUpWindow in una qualsiasi posizione della vista specifica (o sul centro/alto/basso dello schermo). Puoi anche raggiungere la stessa interfaccia utente con DialogFragment, ma non puoi posizionarti in una posizione specifica.

Ho un codice di lavoro completo qui https://gist.github.com/libinbensin/67fcc43a7344758390c3

Fase 1: Crea il tuo layout personalizzato, per esempio, come Facebook ha un suo Header TextView con un ListView e EditText.

Fase 2: impostare il layout della PopupWindow

Gonfiare il layout per impostare

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

Questo Layout ha un ListView, in modo da trovare la ListView nel layout e riempire i dati . si può avere il proprio punto di vista qui

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

Ora, creare un'istanza di PopupWindow con particolare altezza e larghezza. Preferisco impostare la dimensione dipende dal dispositivo.

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

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

Impostare la focusability della finestra pop-up.

popWindow.setFocusable(true); 

Fai fuori tangibile to dismiss the popup window when touched outside l'area pop-up

popWindow.setOutsideTouchable(true); 

Ora, impostare uno sfondo per la PopupWindow con un disegnabile. Il drawable ha rectangle shape con corner radius.

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

Infine. mostra PopupWindow nel luogo richiesto. L'ho fatta mostrare al bottom dello schermo con una certa X and Y position

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

È inoltre possibile impostare un Animation da utilizzare quando il compare e PopUpWindow scompare

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

Answer 2

Questo sembra un componente personalizzato creato da Facebook. Non è un componente Android standard. Puoi provare a implementarlo derivando dal frammento della finestra di dialogo.

Answer 3

È possibile utilizzare un PopupWindow per farlo. http://developer.android.com/reference/android/widget/PopupWindow.html

Ovviamente avrete bisogno di adattarlo e compilare i contenuti del popup da soli. È possibile ottenere alcune idee di styling da How to make layout with rounded corners..?

Answer 4

Edit: (! O anche un dialogo a tutti)

In realtà, anche se ho usato un DialogFragment, sono abbastanza certa la loro comparsa non utilizza un DialogFragment . La ragione di ciò è la funzione di ridimensionamento. Se quello è qualcosa che vuoi, allora non puoi usare un DialogFragment. Dovresti semplicemente aggiungere una nuova vista al tuo layout. Sembra che Facebook abbia anche un'altra vista tra il tuo muro e il finto popup che è leggermente traslucido e ascolta i clic per chiudere la vista. Qualcosa del genere richiederebbe uno sforzo e un tempo effettivi per costruire, quindi non lo farò per te. Fammi sapere se hai qualche domanda a riguardo, posso probabilmente guidarti verso la soluzione che cerchi.

originale:

ho scritto il popup per voi:

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> 

E dialog_background.xml (va in res/drawable):

<?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> 

e sembra che questo:

è sufficiente aggiungere il contenuto e siete pronti per partire!

Answer 5

Sembra che sia più semplice utilizzare solo un frammento con uno sfondo trasparente (o in questo caso traslucido).