Android PopupWindow仿微信、QQ、支付寶右上角彈出效果（超詳細）

前言

在日常使用中我們發(fā)現(xiàn)，很多app右上角都會有更多的選項，就連微信、QQ、支付寶這些大廠貨也是如此。


圖1，大廠效果圖

效果

我們先上效果圖，大家的時間都是寶貴的，合適我們再擼代碼：


圖2，最終效果圖

代碼

對于如圖這種效果，我們決定使用PopupWindow來實現(xiàn)，因為它可以更好的控制彈窗的顯示區(qū)域。基本使用還是很簡單的，注釋寫的很詳細，簡直走心：

private void showPop(){
        // 設置布局文件
        mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.pop_add,null));
        // 為了避免部分機型不顯示，我們需要重新設置一下寬高
        mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
        mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        // 設置pop透明效果
        mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x0000));
        // 設置pop出入動畫
        mPopupWindow.setAnimationStyle(R.style.pop_add);
        // 設置pop獲取焦點，如果為false點擊返回按鈕會退出當前Activity，如果pop中有Editor的話，focusable必須要為true
        mPopupWindow.setFocusable(true);
        // 設置pop可點擊，為false點擊事件無效，默認為true
        mPopupWindow.setTouchable(true);
        // 設置點擊pop外側(cè)消失，默認為false；在focusable為true時點擊外側(cè)始終消失
        mPopupWindow.setOutsideTouchable(true);
        // 相對于 + 號正下面，同時可以設置偏移量
        mPopupWindow.showAsDropDown(iv_add,-100,0);
}

通過觀察圖1，我們發(fā)現(xiàn)：在彈窗出現(xiàn)的時候會發(fā)生背景透明度的變化，背景變暗確實會有比較好的用戶體驗。那我們就來想想如何讓它暗下來吧，單純的背景暗下來還是比較簡單的，在彈窗出現(xiàn)的時候調(diào)用一下如下方法就好，彈窗消失的時候要記得改回來：

private void backgroundAlpha(float bgAlpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = bgAlpha;  // 0.0-1.0
    getWindow().setAttributes(lp);
    // everything behind this window will be dimmed.
    // 此方法用來設置浮動層，防止部分手機變暗無效
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
}

我們可以添加一個彈窗關閉的監(jiān)聽，這樣我們就可以更方便的將透明度更改回去了：

        // 設置pop關閉監(jiān)聽，用于改變背景透明度
        mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                backgroundAlpha(1f)
            }
        });

這樣變暗是變暗了，可是屏幕總是一閃一閃的，這也太不夠優(yōu)雅了。本著用戶至上的理念，我們還是想著實現(xiàn)背景漸變的效果吧。奈何能力實在有限，想了好久都沒有想到比較簡單的實現(xiàn)方法。這里還是借鑒一下我找到的方法吧，參考鏈接和項目源碼我會在文章末尾貼出。
使用還是比較簡單的，在彈窗彈出和消失的時候調(diào)用一下如下方法就好：

private void toggleBright() {
        // 三個參數(shù)分別為：起始值 結束值 時長，那么整個動畫回調(diào)過來的值就是從0.5f--1f的
        animUtil.setValueAnimator(START_ALPHA, END_ALPHA, DURATION);
        animUtil.addUpdateListener(new AnimUtil.UpdateListener() {
            @Override
            public void progress(float progress) {
                // 此處系統(tǒng)會根據(jù)上述三個值，計算每次回調(diào)的值是多少，我們根據(jù)這個值來改變透明度
                bgAlpha = bright ? progress : (START_ALPHA + END_ALPHA - progress);
                backgroundAlpha(bgAlpha);
            }
        });
        animUtil.addEndListner(new AnimUtil.EndListener() {
            @Override
            public void endUpdate(Animator animator) {
                // 在一次動畫結束的時候，翻轉(zhuǎn)狀態(tài)
                bright = !bright;
            }
        });
        animUtil.startAnimator();
    }

這里用到了一個動畫幫助類，直接copy過來的（捂臉）：

/**
 * 動畫工具類
 * UpdateListener： 動畫過程中通過添加此監(jiān)聽來回調(diào)數(shù)據(jù)
 * EndListener： 動畫結束的時候通過此監(jiān)聽器來做一些處理
 */
public class AnimUtil {

    private ValueAnimator valueAnimator;
    private UpdateListener updateListener;
    private EndListener endListener;
    private long duration;
    private float start;
    private float end;
    private Interpolator interpolator = new LinearInterpolator();

    public AnimUtil() {
        duration = 1000; //默認動畫時常1s
        start = 0.0f;
        end = 1.0f;
        interpolator = new LinearInterpolator();// 勻速的插值器
    }


    public void setDuration(int timeLength) {
        duration = timeLength;
    }

    public void setValueAnimator(float start, float end, long duration) {

        this.start = start;
        this.end = end;
        this.duration = duration;

    }

    public void setInterpolator(Interpolator interpolator) {
        this.interpolator = interpolator;
    }

    public void startAnimator() {
        if (valueAnimator != null){
            valueAnimator = null;
        }
        valueAnimator = ValueAnimator.ofFloat(start, end);
        valueAnimator.setDuration(duration);
        valueAnimator.setInterpolator(interpolator);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {

                if (updateListener == null) {
                    return;
                }

                float cur = (float) valueAnimator.getAnimatedValue();
                updateListener.progress(cur);
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {}
            @Override
            public void onAnimationEnd(Animator animator) {
                if(endListener == null){
                    return;
                }
                endListener.endUpdate(animator);
            }
            @Override
            public void onAnimationCancel(Animator animator) {}

            @Override
            public void onAnimationRepeat(Animator animator) {}
        });
        valueAnimator.start();
    }

    public void addUpdateListener(UpdateListener updateListener) {

        this.updateListener = updateListener;
    }

    public void addEndListner(EndListener endListener){
        this.endListener = endListener;
    }

    public interface EndListener {
        void endUpdate(Animator animator);
    }

    public interface UpdateListener {

        void progress(float progress);
    }

}

完整的Activity代碼：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView iv_add;
    private TextView tv_1, tv_2, tv_3, tv_4, tv_5;
    private PopupWindow mPopupWindow;

    private AnimUtil animUtil;
    private float bgAlpha = 1f;
    private boolean bright = false;

    private static final long DURATION = 500;
    private static final float START_ALPHA = 0.7f;
    private static final float END_ALPHA = 1f;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // 實現(xiàn)透明狀態(tài)欄
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {

        mPopupWindow = new PopupWindow(this);
        animUtil = new AnimUtil();

        iv_add = findViewById(R.id.iv_add);
        iv_add.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv_add:
                showPop();
                toggleBright();
                break;
            case R.id.tv_1:
                mPopupWindow.dismiss();
                Toast.makeText(this, tv_1.getText(), Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_2:
                mPopupWindow.dismiss();
                Toast.makeText(this, tv_2.getText(), Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_3:
                mPopupWindow.dismiss();
                Toast.makeText(this, tv_3.getText(), Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_4:
                mPopupWindow.dismiss();
                Toast.makeText(this, tv_4.getText(), Toast.LENGTH_SHORT).show();
                break;
            case R.id.tv_5:
                mPopupWindow.dismiss();
                Toast.makeText(this, tv_5.getText(), Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }

    private void showPop() {
        // 設置布局文件
        mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.pop_add, null));
        // 為了避免部分機型不顯示，我們需要重新設置一下寬高
        mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
        mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        // 設置pop透明效果
        mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x0000));
        // 設置pop出入動畫
        mPopupWindow.setAnimationStyle(R.style.pop_add);
        // 設置pop獲取焦點，如果為false點擊返回按鈕會退出當前Activity，如果pop中有Editor的話，focusable必須要為true
        mPopupWindow.setFocusable(true);
        // 設置pop可點擊，為false點擊事件無效，默認為true
        mPopupWindow.setTouchable(true);
        // 設置點擊pop外側(cè)消失，默認為false；在focusable為true時點擊外側(cè)始終消失
        mPopupWindow.setOutsideTouchable(true);
        // 相對于 + 號正下面，同時可以設置偏移量
        mPopupWindow.showAsDropDown(iv_add, -100, 0);
        // 設置pop關閉監(jiān)聽，用于改變背景透明度
        mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                toggleBright();
            }
        });

        tv_1 = mPopupWindow.getContentView().findViewById(R.id.tv_1);
        tv_2 = mPopupWindow.getContentView().findViewById(R.id.tv_2);
        tv_3 = mPopupWindow.getContentView().findViewById(R.id.tv_3);
        tv_4 = mPopupWindow.getContentView().findViewById(R.id.tv_4);
        tv_5 = mPopupWindow.getContentView().findViewById(R.id.tv_5);

        tv_1.setOnClickListener(this);
        tv_2.setOnClickListener(this);
        tv_3.setOnClickListener(this);
        tv_4.setOnClickListener(this);
        tv_5.setOnClickListener(this);
    }

    private void toggleBright() {
        // 三個參數(shù)分別為：起始值 結束值 時長，那么整個動畫回調(diào)過來的值就是從0.5f--1f的
        animUtil.setValueAnimator(START_ALPHA, END_ALPHA, DURATION);
        animUtil.addUpdateListener(new AnimUtil.UpdateListener() {
            @Override
            public void progress(float progress) {
                // 此處系統(tǒng)會根據(jù)上述三個值，計算每次回調(diào)的值是多少，我們根據(jù)這個值來改變透明度
                bgAlpha = bright ? progress : (START_ALPHA + END_ALPHA - progress);
                backgroundAlpha(bgAlpha);
            }
        });
        animUtil.addEndListner(new AnimUtil.EndListener() {
            @Override
            public void endUpdate(Animator animator) {
                // 在一次動畫結束的時候，翻轉(zhuǎn)狀態(tài)
                bright = !bright;
            }
        });
        animUtil.startAnimator();
    }

    /**
     * 此方法用于改變背景的透明度，從而達到“變暗”的效果
     */
    private void backgroundAlpha(float bgAlpha) {
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        // 0.0-1.0
        lp.alpha = bgAlpha;
        getWindow().setAttributes(lp);
        // everything behind this window will be dimmed.
        // 此方法用來設置浮動層，防止部分手機變暗無效
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    }

}

這里用到的兩個出入動畫，在res文件夾下anim目錄，沒有anim文件夾創(chuàng)建一個即可：

  • 彈出動畫 pop_add_show.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_pop_duration"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
    <scale
        android:duration="@integer/config_pop_duration"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="85%"
        android:pivotY="0%"
        android:toXScale="0"
        android:toYScale="0"/>
</set>
  • 關閉動畫 pop_add_hide.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_pop_duration"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
    <scale
        android:duration="@integer/config_pop_duration"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="85%"
        android:pivotY="0%"
        android:toXScale="0"
        android:toYScale="0"/>
</set>

然后在style.xml中定義我們自己的style，添加我們的這兩個動畫：

<style name="pop_add">
    <item name="android:windowEnterAnimation">@anim/pop_add_show</item>
    <item name="android:windowExitAnimation">@anim/pop_add_hide</item>
</style>

至于pop布局根據(jù)自己的需求自己編寫即可，至此我們的漸變彈窗就基本完成了。

補充一點：不顯示問題

針對部分機型，看似代碼沒有問題，但仍無法顯示。我們需要在設置布局資源后，再次設置一下寬高（推薦都加上，畢竟我們要考慮兼容性問題）。

// 設置布局文件
mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.pop_add, null));
// 針對部分機型不顯示，我們需要重新設置一下寬高
mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

項目源碼：https://github.com/princekin-f/popupwindow
參考鏈接：http://blog.csdn.net/u014616515/article/details/53665768

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容