當初做畢業設計的時候，就在畢業設計 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詳解
你可以通過以下方式關注我：