Android基础---PopupWindow实现漂亮的搜索

最新推荐文章于 2021-08-03 10:09:03 发布

Sean_css

最新推荐文章于 2021-08-03 10:09:03 发布

阅读量1.9k

点赞数

分类专栏：【Android】【Android常用方法】文章标签： android popupwindow 动画

本文链接：https://blog.csdn.net/sean_css/article/details/70314444

版权

【Android】同时被 2 个专栏收录

70 篇文章 0 订阅

订阅专栏

【Android常用方法】

16 篇文章 0 订阅

订阅专栏

当初做毕业设计的时候，就在毕业设计 App 上面实现了该功能，当初只是简单的堆积代码，代码都是从别处拷贝了，对具体代码的意思也不是很清楚，现在做了一个简单的开源项目，也实现了该搜索功能，现在对 PopupWindow 有了更新的认识。

本文会一步一步的教你实现效果图中的效果，包会。。。如果还是不会的话，欢饮点击下面的链接去看看我的项目中怎么用的。

我的开源项目：Gank.io客户端
App 下载地址：App下载密码：ckgd

效果图

搜索框

一步步的具体实现

1. 搜索框和搜索按钮的背景

在 drawable 文件夹下新建文件 editsharp.xml

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

    <gradient
        android:angle="45"
        android:endColor="#CCCCCC"
        android:startColor="#CCCCCC" />
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
    <!-- 设置圆角矩形 -->
    <corners android:radius="32dp" />
    <solid android:color="#FFFFFF" />

</shape>

2.修改 EditText 光标的颜色

在 drawable 文件夹下新建文件 color_cursor.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:width="1dp" />
    <solid android:color="@color/colorPrimary"  />
</shape>

3.新建 PopupWindow 的布局文件

在 layout文件夹下新建文件 search_popup.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/common_toolbar_height"
    android:background="@color/colorPrimary">

    <RelativeLayout
        android:layout_marginLeft="12dp"
        android:id="@+id/select_type_rl"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/select_type_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:drawableRight="@drawable/toward_bottom_ic"
            android:gravity="center_vertical"
            android:text="@string/all_text"
            android:textColor="@color/white" />
    </RelativeLayout>


    <EditText
        android:id="@+id/search_et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical"
        android:layout_toLeftOf="@+id/search_bt"
        android:layout_toRightOf="@+id/select_type_rl"
        android:background="@drawable/editsharp"
        android:drawableLeft="@drawable/common_search_ic"
        android:hint="请输入关键字..."
        android:imeOptions="actionSearch"
        android:inputType="text"
        android:singleLine="true"
        android:textCursorDrawable="@drawable/color_cursor"
        android:textSize="14sp" />

    <Button
        android:id="@+id/search_bt"
        android:layout_width="56dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/search_et"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/search_et"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:background="@drawable/editsharp"
        android:text="搜索"
        android:textColor="@color/colorPrimary"
        android:textSize="14sp" />

</RelativeLayout>

4. 为 PopupWindow 设置的动画

在 res 下面新建 anim 文件夹。
- 新建 inuptodown.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="100"
        android:fromYDelta="-100%"
        android:toYDelta="0" />
</set>

新建 outdowntoup.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="100"
        android:fromYDelta="0"
        android:toYDelta="-100%" />
</set>

然后在 styles 文件里面添加：

    <!--淡入淡出效果-->
    <style name="AnimBottom" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/inuptodown</item>
        <item name="android:windowExitAnimation">@anim/outdowntoup</item>
    </style>

4.初始化 PopupWindow

/**
     * 初始化PopupWindow
     */
    protected void initPopupWindow() {
        final View view = getLayoutInflater().inflate(R.layout.search_popup, null, false);
        int height = commonTitleTb.getHeight(); //  获取当前页面ToolBar的高度
        final EditText searchEt = (EditText) view.findViewById(R.id.search_et);
        popupWindow = new PopupWindow(view, ViewGroup.LayoutParams.MATCH_PARENT, height, true);
        final TextView selectTypeTv = (TextView) view.findViewById(R.id.select_type_tv);
        final RelativeLayout selectTypeRl = (RelativeLayout) view.findViewById(R.id.select_type_rl);
        popupWindow.setFocusable(true);//设置外部点击取消
        popupWindow.setBackgroundDrawable(new BitmapDrawable());// 不设置的话不能关闭此 PopupWindow
        popupWindow.setAnimationStyle(R.style.AnimBottom);
        view.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (popupWindow != null && popupWindow.isShowing()) {
                    popupWindow.dismiss();
                    popupWindow = null;
                }
                return false;
            }
        });

        searchEt.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId,
                                          KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                    String searchContent = searchEt.getText().toString();
                    if (TextUtils.isEmpty(searchContent)) {
                        return false;
                    } else {
                        // todo someThing
                        // getSearchData(selectType, searchContent);
                    }
                    popupWindow.dismiss();
                }
                return false;
            }
        });
        selectTypeRl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // todo someThing
            }
        });

        view.findViewById(R.id.search_bt).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // todo someThing
                popupWindow.dismiss();
            }
        });
        // PopupWindow的消失事件监听，消失的时候，关闭软键盘
        popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                KeyBoardUtils.closeKeybord(context);
            }
        });
    }

获取 PopupWindow 实例

    /**
     * 获取PopipWinsow实例
     */
    private void getPopupWindow() {
        if (null != popupWindow) {
            popupWindow.dismiss();
            return;
        } else {
            initPopupWindow();
        }
    }

5.调用 PopupWindow

getPopupWindow();
// 设置相对View的偏移，1、相对的view，2、相对view的x方向偏移，3、相对view的y方向偏移
popupWindow.showAsDropDown(new View(this), 0, ScreenUtils.getStatusHeight(MainActivity.this));
//打开软键盘
KeyBoardUtils.openKeyboard(new Handler(), 0, context);

至此就可以完成效果图中的效果了。

我的博客：博客传送门
我的简书：简书传送门
我的CSDN：CSDN传送门
我的GitHub：GitHub传送门

Sean_css

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Android基础---PopupWindow实现漂亮的搜索

当初做毕业设计的时候，就在毕业设计 App 上面实现了该功能，当初只是简单的堆积代码，代码都是从别处拷贝了，对具体代码的意思也不是很清楚，现在做了一个简单的开源项目，也实现了该搜索功能，现在对 PopupWindow 有了更新的认识。本文会一步一步的教你实现效果图中的效果，包会。。。如果还是不会的话，欢饮点击下面的链接去看看我的项目中怎么用的。我的开源项目：Gank.io客户端 App 下载地址
复制链接

扫一扫