你會如何在Android中創建一個popover視圖，比如Facebook評論？

Question

我想知道是否有人知道如何在Facebook Android應用程序中創建類似Facebook的彈出視圖以供評論。

這就是我的意思：

除了可以拖動以解除它的句柄，它是一個原生的Android UI控件還是Facebook自己實現了這個？

Answer 1

創建類似popover view的最佳方法是使用PopupWindow ，因為您可以將PopUpWindow在任何特定視圖位置（或屏幕的中心/頂部/底部）。 您也可以使用DialogFragment實現相同的UI，但無法在特定的視圖位置進行定位。

我在這里有完整的工作代碼https://gist.github.com/libinbensin/67fcc43a7344758390c3

第1步：創建自定義布局，例如，Facebook有一個帶有ListView和EditText的Header TextView 。

第2步：將布局設置為PopupWindow

膨脹布局以進行設置

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

此Layout有一個ListView ，因此在布局中找到ListView並填充數據。 你可以在這里看到自己的看法

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

現在，創建一個具有特定高度和寬度的PopupWindow實例。 我更喜歡設置大小取決於設備。

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

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

設置彈出窗口的可focusability性。

popWindow.setFocusable(true);

to dismiss the popup window when touched outside在彈出區域外觸摸時to dismiss the popup window when touched outside使其在外面可觸摸to dismiss the popup window when touched outside

popWindow.setOutsideTouchable(true);

現在，使用drawable為PopupWindow設置背景。 可繪制的具有corner radius rectangle shape 。

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

最后。 在所需位置顯示PopupWindow 。 我把它顯示在屏幕bottom有一些X and Y position

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

您還可以設置要在PopUpWindow出現和消失時使用的Animation

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

Answer 2

編輯：

實際上，即使我使用了DialogFragment，我也很確定它們的彈出窗口不會使用DialogFragment（甚至根本就沒有Dialog）！ 原因是調整大小功能。 如果這是您想要的，那么您不能使用DialogFragment。 您只需要在布局中添加新視圖。 它看起來像facebook還有另一個視圖，它位於你的牆和虛擬彈出窗口之間，略微半透明，並且聽取點擊以消除視圖。 像這樣的東西需要一些實際的努力和時間來構建，所以我不會為你做這個。 如果您對此有任何疑問，請告訴我，我可以引導您找到您想要的解決方案。

原版的：

我為你寫了一個彈出窗口：

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>

和dialog_background.xml（進入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>

它看起來像這樣：

只需添加您的觀看內容，您就可以開始了！

Answer 3

您可以使用PopupWindow來執行此操作。 http://developer.android.com/reference/android/widget/PopupWindow.html

當然，你需要設計它並自己填寫彈出窗口的內容。 你可以從如何制作帶圓角的布局中獲得一些造型想法..？

Answer 4

這看起來像是由Facebook構建的自定義組件。 它不是標准的Android組件。 您可以嘗試通過派生Dialog Fragment來實現它。

Answer 5

看起來使用具有透明（或在這種情況下是半透明）背景的片段是最容易的。