Android基础---PopupWindow实现漂亮的搜索
2017-04-21 本文已影响388人
SmartSean
当初做毕业设计的时候，就在毕业设计 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);
至此就可以完成效果图中的效果了。
与此相关的有：
我的第一个开源项目
Android基础之---工具类 持续更新中...
Android基础---淡入淡出、上下弹出动画的
Android PopupWindow详解
- 我的博客：博客传送门
