Android實(shí)現(xiàn)底部彈出PopupWindow背景逐漸變暗效果
在Android開發(fā)中,經(jīng)常需要通過點(diǎn)擊某個(gè)按鈕彈出對(duì)話框或者選擇框,通過Dialog或者PopupMenu、PopupWindow都能實(shí)現(xiàn)。
這里主要介紹后兩者:PopupMenu、PopupWindow的實(shí)現(xiàn)。 先看兩個(gè)效果圖上邊PopupMenu,下邊PopupWindow:
PopupMenu PopupWindow


一、PopupMenu實(shí)現(xiàn):
PopupMenu實(shí)現(xiàn)起來比較簡單,主要用來實(shí)現(xiàn)根據(jù)按鈕附近彈出的對(duì)話框。
首先定義一個(gè)menu文件\res\menu\headmenu.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.arbo.hero.LoginActivity"> <item android:id="@+id/camera" android:title="拍照" android:orderInCategory="100" app:showAsAction="never" /> <item android:id="@+id/gallery" android:title="從相冊(cè)中選取" android:orderInCategory="100" app:showAsAction="never" /> <item android:id="@+id/cancel" android:title="取消" android:orderInCategory="100" app:showAsAction="never" /> </menu>
創(chuàng)建一個(gè)PopupMenu并添加點(diǎn)擊事件:
private void showPopmenu(View view){
popupMenu = new PopupMenu(this,view);
popupMenu.getMenuInflater().inflate(R.menu.headmenu,popupMenu.getMenu());
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch(item.getItemId()){
case R.id.camera:
Toast.makeText(HeadPortrait.this,"Click camera",Toast.LENGTH_SHORT).show();
break;
case R.id.gallery:
Toast.makeText(HeadPortrait.this,"Click gallery",Toast.LENGTH_SHORT).show();
break;
case R.id.cancel:
Toast.makeText(HeadPortrait.this,"Click cancel",Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
popupMenu.show();
}
MainActivity很簡單,點(diǎn)擊按鈕調(diào)用showPopmenu()方法即可:
public class MainActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//main.xml頁面主布局只有一個(gè)按鈕,這里就不貼代碼了
setContentView(R.layout.main);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//點(diǎn)擊按鈕就創(chuàng)建并顯示一個(gè)popupMenu
showPopmenu(btnmenu);
}
}
}
}
以上,就實(shí)現(xiàn)了利用PopupMenu在按鈕附近彈出一個(gè)選擇框。
PopupMenu的優(yōu)點(diǎn):簡單;根據(jù)菜單大小自適應(yīng)位置,在按鈕附近彈出;適合某些情景。
缺點(diǎn):形式比較單一,效果一般。
二、PopupWindow實(shí)現(xiàn):
相比之下,PopupWindow的實(shí)現(xiàn)復(fù)雜一些,但是自定義性更強(qiáng),它可以將任意界面設(shè)置為PopupWindow。
先看彈出window布局window_popup.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:background="#dadada" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:id="@+id/camera" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="拍照" android:background="#f0f0f0" /> <TextView android:layout_width="match_parent" android:layout_height="1dp" android:background="#2d2c2c" /> <Button android:background="#f0f0f0" android:id="@+id/gallery" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="從手機(jī)相冊(cè)選擇"/> <TextView android:layout_width="match_parent" android:layout_height="1dp" android:background="#2d2c2c" /> <Button android:background="#f0f0f0" android:id="@+id/savepicture" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="保存圖片"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="vertical"> <Button android:background="#f0f0f0" android:id="@+id/cancel" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="取消" /> </LinearLayout> </LinearLayout>
布局的效果圖:

創(chuàng)建popupWindow并為其添加點(diǎn)擊事件:
void bottomwindow(View view) {
if (popupWindow != null && popupWindow.isShowing()) {
return;
}
LinearLayout layout = (LinearLayout) getLayoutInflater().inflate(R.layout.window_popup, null);
popupWindow = new PopupWindow(layout,
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
//點(diǎn)擊空白處時(shí),隱藏掉pop窗口
popupWindow.setFocusable(true);
popupWindow.setBackgroundDrawable(new BitmapDrawable());
//添加彈出、彈入的動(dòng)畫
popupWindow.setAnimationStyle(R.style.Popupwindow);
int[] location = new int[2];
view.getLocationOnScreen(location);
popupWindow.showAtLocation(view, Gravity.LEFT | Gravity.BOTTOM, 0, -location[1]);
//添加按鍵事件監(jiān)聽
setButtonListeners(layout);
//添加pop窗口關(guān)閉事件,主要是實(shí)現(xiàn)關(guān)閉時(shí)改變背景的透明度
popupWindow.setOnDismissListener(new poponDismissListener());
backgroundAlpha(1f);
}
事件監(jiān)聽的函數(shù)setButtonListeners() :
private void setButtonListeners(LinearLayout layout) {
Button camera = (Button) layout.findViewById(R.id.camera);
Button gallery = (Button) layout.findViewById(R.id.gallery);
Button savepicture = (Button) layout.findViewById(R.id.savepicture);
Button cancel = (Button) layout.findViewById(R.id.cancel);
camera.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (popupWindow != null && popupWindow.isShowing()) {
//在此處添加你的按鍵處理 xxx
popupWindow.dismiss();
}
}
});
gallery.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (popupWindow != null && popupWindow.isShowing()) {
//在此處添加你的按鍵處理 xxx
popupWindow.dismiss();
}
}
});
savepicture.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (popupWindow != null && popupWindow.isShowing()) {
//在此處添加你的按鍵處理 xxx
popupWindow.dismiss();
}
}
});
cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (popupWindow != null && popupWindow.isShowing()) {
popupWindow.dismiss();
}
}
});
}
彈出、收回的動(dòng)畫:
若res文件夾下沒有anim目錄,則自己添加一個(gè):new–>Android resource directory 名字填anim。然后新建兩個(gè)tranlate文件:
彈出 window_out.xml :
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:fromYDelta="100%" android:toYDelta="0" android:duration="300"/>
收回 window_back.xml:
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="0" android:toYDelta="100%" android:duration="200"/>
然后在style.xml中添加我們的這兩個(gè)動(dòng)畫:
<style name="Popupwindow"> <item name="android:windowEnterAnimation">@anim/window_out</item> <item name="android:windowExitAnimation">@anim/window_back</item> </style>
還是上面的同一個(gè)MainActivity,把按鈕點(diǎn)擊事件的處理函數(shù)換成popupwindow的即可:
btnmenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
bottomwindow(btnmenu);
}
}
以上,就可以實(shí)現(xiàn)這樣的點(diǎn)擊按鈕從屏幕底部彈出window窗口的效果,如下:

底部彈出
但是,這樣的效果并不好,我們希望彈出windows的時(shí)候,其他背景可以變成半透明,這樣可以突出重點(diǎn)。網(wǎng)上的方法是通過這段代碼來改變背景的透明度的:
/**
* 設(shè)置添加屏幕的背景透明度
* @param bgAlpha
*/
public void backgroundAlpha(float bgAlpha)
{
WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.alpha = bgAlpha; //0.0-1.0
getWindow().setAttributes(lp); getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
}
然后在彈出的時(shí)候?qū)⒈尘霸O(shè)為半透明:
bottomwindow(btnmenu);
backgroundAlpha(0.5f);
在返回的時(shí)候設(shè)置回來:
backgroundAlpha(1f);
這的確是可以實(shí)現(xiàn)效果,但是點(diǎn)擊的時(shí)候突然變暗和變亮,效果不太好!如下:

我希望是彈出的過程中,慢慢變暗。是有一個(gè)過程的,而不是一下子就暗下來了。這里利用延時(shí)和Handler來動(dòng)態(tài)地改變背景的透明度。
//在調(diào)用彈出的方法后,開啟一個(gè)子線程
@Override
public void onClick(View view) {
bottomwindow(btnmenu);
new Thread(new Runnable(){
@Override
public void run() {
while(alpha>0.5f){
try {
//4是根據(jù)彈出動(dòng)畫時(shí)間和減少的透明度計(jì)算
Thread.sleep(4);
} catch (InterruptedException e) {
e.printStackTrace();
}
Message msg =mHandler.obtainMessage();
msg.what = 1;
//每次減少0.01,精度越高,變暗的效果越流暢
alpha-=0.01f;
msg.obj =alpha ;
mHandler.sendMessage(msg);
}
}
}).start();
}
同理,返回的時(shí)候把透明度跳回來:
/**
* 返回或者點(diǎn)擊空白位置的時(shí)候?qū)⒈尘巴该鞫雀幕貋?
*/
class poponDismissListener implements PopupWindow.OnDismissListener{
@Override
public void onDismiss() {
// TODO Auto-generated method stub
new Thread(new Runnable(){
@Override
public void run() {
//此處while的條件alpha不能<= 否則會(huì)出現(xiàn)黑屏
while(alpha<1f){
try {
Thread.sleep(4);
} catch (InterruptedException e) {
e.printStackTrace();
}
Log.d("HeadPortrait","alpha:"+alpha);
Message msg =mHandler.obtainMessage();
msg.what = 1;
alpha+=0.01f;
msg.obj =alpha ;
mHandler.sendMessage(msg);
}
}
}).start();
}
}
在Handler里面我們調(diào)用改變背景透明的方法即可:
Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case 1:
backgroundAlpha((float)msg.obj);
break;
}
}
};
這樣修改以后,效果是這樣的:

以上,基本達(dá)到了逐漸變暗、變量的目的。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android PopupWindow 和 Activity彈出窗口實(shí)現(xiàn)方式
- Android Animation實(shí)戰(zhàn)之屏幕底部彈出PopupWindow
- android popwindow實(shí)現(xiàn)左側(cè)彈出菜單層及PopupWindow主要方法介紹
- Android編程實(shí)現(xiàn)popupwindow彈出后屏幕背景變成半透明效果
- Android入門之PopupWindow用法實(shí)例解析
- Android中PopupWindow響應(yīng)返回鍵并關(guān)閉的2種方法
- android使用PopupWindow實(shí)現(xiàn)頁面點(diǎn)擊頂部彈出下拉菜單
- Android之用PopupWindow實(shí)現(xiàn)彈出菜單的方法詳解
- Android PopupWindow實(shí)現(xiàn)右側(cè)、左側(cè)和底部彈出菜單
- Android簡單使用PopupWindow的方法
相關(guān)文章
基于barcodescanner實(shí)現(xiàn)Android二維碼掃描功能
這篇文章主要為大家詳細(xì)介紹了基于barcodescanner實(shí)現(xiàn)Android二維碼掃描功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Android Mms之:對(duì)話與聯(lián)系人關(guān)聯(lián)的總結(jié)詳解
本篇文章是對(duì)Android中對(duì)話與聯(lián)系人的關(guān)聯(lián)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
Android自定義滾動(dòng)選擇器實(shí)例代碼
本篇文章主要介紹了Android自定義滾動(dòng)選擇器實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01
Android開發(fā):微信授權(quán)登錄與微信分享完全解析
本篇文章主要介紹了Android微信授權(quán)登錄與微信分享,具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11
ListView實(shí)現(xiàn)下拉刷新加載更多的實(shí)例代碼(直接拿來用)
這篇文章主要介紹了ListView實(shí)現(xiàn)下拉刷新加載更多的實(shí)例代碼(直接拿來用)的相關(guān)資料,需要的朋友可以參考下2016-07-07
Android 系統(tǒng)語言切換監(jiān)聽和設(shè)置實(shí)例代碼
本篇文章主要介紹了Android 系統(tǒng)語言切換監(jiān)聽和設(shè)置實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
Android自定義實(shí)現(xiàn)可回彈的ScollView
這篇文章主要為大家詳細(xì)介紹了Android自定義實(shí)現(xiàn)可回彈的ScollView,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android簡單實(shí)現(xiàn)計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Android簡單實(shí)現(xiàn)計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08

