如何在安卓设备中创建一个类似Facebook评论框的弹出窗口?

7
我希望制作一个弹出框,就像Facebook Android应用程序中按下评论按钮时弹出的那样。我想为我的应用程序设计同样类型的弹出窗口。有人能告诉我如何构建它,或者只是指导我设计这种东西需要什么要求吗?
谢谢。

请使用此链接 https://dev59.com/u2Yr5IYBdhLWcg3w29vi 并在对话框中使用 edittext - M S Gadag
1个回答

15

您可以通过

PopupWindow

这是在活动或片段中调用弹出窗口的过程。 Facebook使用Rebound Library进行精美的摇摆动画。但我使用普通的xml动画文件。

popup_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/headerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:orientation="horizontal"
        android:layout_alignParentTop="true"
        android:gravity="center">

        <TextView
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Some One and 20 Others Like this"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_margin="5dp"/>
    </LinearLayout>

    <ListView
        android:id="@+id/commentsListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/headerLayout"
        android:layout_above="@+id/comment_section"
        android:layout_marginBottom="0dp"/>

    <LinearLayout
        android:id="@+id/comment_section"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="5dp"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxHeight="30dp"
            android:minHeight="20dp"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher"
            />
        <EditText
            android:id="@+id/writeComment"
            android:hint="Write a Comment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:maxLines="2"
            android:focusable="true"
            android:layout_marginLeft="2dp"
            android:textSize="12sp"
            android:textColor="@color/black"
            android:background="#00000000"/>

    </LinearLayout>

</RelativeLayout>

在style.xml中实现弹出动画

 <!-- PopuP Enter Exit Animation -->
    <style name="PopupAnimation" parent="Widget.AppCompat.PopupWindow">
        <item name="android:windowEnterAnimation">@anim/bottom_up</item>
        <item name="android:windowExitAnimation">@anim/bottom_down</item>
    </style>

Java方法调用弹出窗口

// call this method when required to show popup
    public void onShowPopup(View v){

        LayoutInflater layoutInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        // inflate the custom popup layout
        inflatedView = layoutInflater.inflate(R.layout.popup_layout, null,false);
        // find the ListView in the popup layout
        ListView listView = (ListView)inflatedView.findViewById(R.id.commentsListView);
        LinearLayout headerView = (LinearLayout)inflatedView.findViewById(R.id.headerLayout);
        // get device size
        Display display = getWindowManager().getDefaultDisplay();
        final Point size = new Point();
        display.getSize(size);
//        mDeviceHeight = size.y;
        DisplayMetrics displayMetrics = mContext.getResources().getDisplayMetrics();
        int width = displayMetrics.widthPixels;
        int height = displayMetrics.heightPixels;


        // fill the data to the list items
        setSimpleList(listView);


        // set height depends on the device size
        popWindow = new PopupWindow(inflatedView, width,height-50, true );
        // set a background drawable with rounders corners
        popWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.popup_bg));

        popWindow.setInputMethodMode(PopupWindow.INPUT_METHOD_NEEDED);
        popWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);

        popWindow.setAnimationStyle(R.style.PopupAnimation);

        // show the popup at bottom of the screen and set some margin at bottom ie,
        popWindow.showAtLocation(v, Gravity.BOTTOM, 0,100);
}

将列表添加到布局的方法

  void setSimpleList(ListView listView){

        ArrayList<String> contactsList = new ArrayList<String>();

        for (int index = 0; index < 10; index++) {
            contactsList.add("I am @ index " + index + " today " + Calendar.getInstance().getTime().toString());
        }

        listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,
                R.layout.popup_list_item, android.R.id.text1, contactsList));
    }

动画文件 bottom_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="75%p" android:toYDelta="0%p"
        android:fillAfter="true"
        android:duration="400"/>
</set>

bottom_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromYDelta="0%p" android:toYDelta="100%p" android:fillAfter="true"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="400" />

</set>

谢谢,我喜欢你的实现,但是你能帮忙实现滑动删除吗? - suulisin
@Pamparanpa,你找到下拉关闭弹窗的解决方案了吗? - Dharmishtha
嘿,大家好。我刚找到了通过滑动解除的解决方案。我使用了这个库:https://github.com/r0adkll/Slidr,并使用nestedScrollview来监听recycleview的位置。 - Shahadat Hossain Shaki
有人能解释一下R.layout.popup_list_item和android.R.id.text1吗?text1应该是布局(popup_list_item)的一部分。@anuj Sharma - Pradeesh tet

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接