你会如何在Android中创建一个popover视图,比如Facebook评论？

Question

我想知道是否有人知道如何在Facebook Android应用程序中创建类似Facebook的弹出视图以供评论.

这就是我的意思:

除了可以拖动以解除它的句柄,它是一个原生的Android UI控件还是Facebook自己实现了这个？

Answer 1

创建类似的最佳方法popover view是使用PopupWindow,因为您可以将其放置PopUpWindow在任何特定视图位置(或屏幕的中心/顶部/底部).您也可以使用相同的UI DialogFragment,但无法在特定的视图位置定位.

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

第1步:创建自定义布局,对于例如,如Facebook其具有Header TextView与ListView和EditText.

第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弹出区域

popWindow.setOutsideTouchable(true);

现在,设置一个PopupWindow带有drawable 的背景.提拉拥有rectangle shape与corner radius.

  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

您还可以设置Animation在PopUpWindow出现和消失时使用

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>

它看起来像这样:

只需添加您的观看内容,您就可以开始了!