您将如何在 Android 中创建弹出视图，例如 Facebook 评论？

Posted 2023-03-15

【中文标题】您将如何在 Android 中创建弹出视图，例如 Facebook 评论？

【英文标题】：How would you create a popover view in Android, like Facebook Comments?

【发布时间】：2014-06-21 06:26:31

【问题描述】：

我想知道是否有人知道如何在 Facebook android 应用中为 cmets 创建类似 Facebook 的弹出视图。

这就是我的意思：

除了可以拖动以将其关闭的句柄之外，它是原生 Android UI 控件还是 Facebook 自己实现的？

【问题讨论】：

我遇到了类似的问题，创建 cmets 详细信息视图并向右或向下拖动以关闭并在 cmets 视图上打开点赞视图。您能否分享您的代码如何通过视图和视图组实现它，因为它似乎无法通过对话框或弹出窗口实现。

这是您选择截屏的有趣对话。

【参考方案1】：

创建类似popover view 的最佳方法是使用PopupWindow，因为您可以将PopUpWindow 放置在任何特定视图位置（或屏幕的中心/顶部/底部）。您也可以使用 DialogFragment 实现相同的 UI，但您不能定位在特定的视图位置。

我这里有一个完整的工作代码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 设置背景。可绘制对象具有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

【讨论】：

效果很好！你让我朝着正确的方向前进——尽管我最终确实使用了 View 和 ViewGroup 而不是 PopupWindow，

优秀的例子，ty。一个快速的问题，如果我想制作某种类型的线或连接器到锚点，你会建议怎么做？ （请参阅我的图片，以获取连接到锚点的右上角的视觉示例 - i422.photobucket.com/albums/pp308/P_G_Mac/…）

@Silmarilos，你找到办法了吗？

@Faser 很遗憾没有。我最终只是做了一个手动 marginTop 方法，但它在平板电脑上根本无法很好地扩展:(

【参考方案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_
    android:layout_
    android:clickable="true"
    android:id="@+id/popup_root">

    <FrameLayout
        android:layout_
        android:layout_
        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_
            android:layout_
            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: />
</shape>

它看起来像这样：

只需添加您的视图内容，您就可以开始了！

【讨论】：

这是目前为止最好的答案，但我只想问，有没有办法让Dialog不覆盖ActionBar？具体来说，有没有办法让overlay部分只覆盖它显示的Fragment？

你不能，不能用对话框。我认为您只需要通过在位于 ActionBar 下方的 FrameLayout 顶部添加一个具有半透明背景的普通片段来“伪造”一个对话框。当用户点击外部时，只需从布局中删除 Fragment。这样你也有更多的灵活性，你可以控制视图的大小等。

【参考方案3】：

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

当然，您需要自己设置样式并填写弹出窗口的内容。你可以从How to make layout with rounded corners..?获得一些造型创意

【参考方案4】：

这似乎是 Facebook 构建的自定义组件。它不是标准的 Android 组件。您可以尝试通过从 Dialog Fragment 派生来实现它。

【讨论】：

你确定它的对话框片段吗？仅从 Dialog Fragment 派生似乎有点过于复杂。

这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。

【参考方案5】：

看起来只使用具有透明（或在本例中为半透明）背景的 Fragment 是最简单的。