Android仿微信、QQ、支付寶右上角彈出效果
前言
在日常使用中我們發(fā)現(xiàn)，很多app右上角都會有更多的選項，就連微信、QQ、支付寶這些大廠貨也是如此，如圖所示：
效果
我們先上效果圖，大家的時間都是寶貴的，合適我們再擼代碼：
代碼
對于如圖這種效果，我們決定使用PopupWindow來實現(xiàn)，因為它可以更好的控制彈窗的顯示區(qū)域?；臼褂眠€是很簡單的，注釋寫的很詳細(xì)，簡直走心：
private void showPop(){// 設(shè)置布局文件mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.pop_add,null));// 為了避免部分機(jī)型不顯示，我們需要重新設(shè)置一下寬高mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);// 設(shè)置pop透明效果mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x0000));// 設(shè)置pop出入動畫mPopupWindow.setAnimationStyle(R.style.pop_add);// 設(shè)置pop獲取焦點，如果為false點擊返回按鈕會退出當(dāng)前Activity，如果pop中有Editor的話，focusable必須要為truemPopupWindow.setFocusable(true);// 設(shè)置pop可點擊，為false點擊事件無效，默認(rèn)為truemPopupWindow.setTouchable(true);// 設(shè)置點擊pop外側(cè)消失，默認(rèn)為false；在focusable為true時點擊外側(cè)始終消失mPopupWindow.setOutsideTouchable(true);// 相對于 + 號正下面，同時可以設(shè)置偏移量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.0getWindow().setAttributes(lp);// everything behind this window will be dimmed.// 此方法用來設(shè)置浮動層，防止部分手機(jī)變暗無效getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);}
我們可以添加一個彈窗關(guān)閉的監(jiān)聽，這樣我們就可以更方便的將透明度更改回去了：
// 設(shè)置pop關(guān)閉監(jiān)聽，用于改變背景透明度mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {@Overridepublic void onDismiss() {backgroundAlpha(1f)}});
這樣變暗是變暗了，可是屏幕總是一閃一閃的，這也太不夠優(yōu)雅了。本著用戶至上的理念，我們還是想著實現(xiàn)背景漸變的效果吧。奈何能力實在有限，想了好久都沒有想到比較簡單的實現(xiàn)方法。這里還是借鑒一下我找到的方法吧，參考鏈接和項目源碼我會在文章末尾貼出。
使用還是比較簡單的，在彈窗彈出和消失的時候調(diào)用一下如下方法就好：
private void toggleBright() {// 三個參數(shù)分別為：起始值 結(jié)束值 時長，那么整個動畫回調(diào)過來的值就是從0.5f--1f的animUtil.setValueAnimator(START_ALPHA, END_ALPHA, DURATION);animUtil.addUpdateListener(new AnimUtil.UpdateListener() {@Overridepublic 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() {@Overridepublic void endUpdate(Animator animator) {// 在一次動畫結(jié)束的時候，翻轉(zhuǎn)狀態(tài)bright = !bright;}});animUtil.startAnimator();}
這里用到了一個動畫幫助類，直接copy過來的（捂臉）：
/*** 動畫工具類* UpdateListener： 動畫過程中通過添加此監(jiān)聽來回調(diào)數(shù)據(jù)* EndListener： 動畫結(jié)束的時候通過此監(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; //默認(rèn)動畫時常1sstart = 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() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {if (updateListener == null) {return;}float cur = (float) valueAnimator.getAnimatedValue();updateListener.progress(cur);}});valueAnimator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animator) {}@Overridepublic void onAnimationEnd(Animator animator) {if(endListener == null){return;}endListener.endUpdate(animator);}@Overridepublic void onAnimationCancel(Animator animator) {}@Overridepublic 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;@Overrideprotected 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);}@Overridepublic 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() {// 設(shè)置布局文件mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.pop_add, null));// 為了避免部分機(jī)型不顯示，我們需要重新設(shè)置一下寬高mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);// 設(shè)置pop透明效果mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x0000));// 設(shè)置pop出入動畫mPopupWindow.setAnimationStyle(R.style.pop_add);// 設(shè)置pop獲取焦點，如果為false點擊返回按鈕會退出當(dāng)前Activity，如果pop中有Editor的話，focusable必須要為truemPopupWindow.setFocusable(true);// 設(shè)置pop可點擊，為false點擊事件無效，默認(rèn)為truemPopupWindow.setTouchable(true);// 設(shè)置點擊pop外側(cè)消失，默認(rèn)為false；在focusable為true時點擊外側(cè)始終消失mPopupWindow.setOutsideTouchable(true);// 相對于 + 號正下面，同時可以設(shè)置偏移量mPopupWindow.showAsDropDown(iv_add, -100, 0);// 設(shè)置pop關(guān)閉監(jiān)聽，用于改變背景透明度mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {@Overridepublic 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ù)分別為：起始值 結(jié)束值 時長，那么整個動畫回調(diào)過來的值就是從0.5f--1f的animUtil.setValueAnimator(START_ALPHA, END_ALPHA, DURATION);animUtil.addUpdateListener(new AnimUtil.UpdateListener() {@Overridepublic 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() {@Overridepublic void endUpdate(Animator animator) {// 在一次動畫結(jié)束的時候，翻轉(zhuǎn)狀態(tài)bright = !bright;}});animUtil.startAnimator();}/*** 此方法用于改變背景的透明度，從而達(dá)到“變暗”的效果*/private void backgroundAlpha(float bgAlpha) {WindowManager.LayoutParams lp = getWindow().getAttributes();// 0.0-1.0lp.alpha = bgAlpha;getWindow().setAttributes(lp);// everything behind this window will be dimmed.// 此方法用來設(shè)置浮動層，防止部分手機(jī)變暗無效getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);????}}
這里用到的兩個出入動畫，在res文件夾下anim目錄，沒有anim文件夾創(chuàng)建一個即可：
彈出動畫 pop_add_show.xml
android:duration="@integer/config_pop_duration"android:fromAlpha="1.0"android:toAlpha="0.0"/>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"/>
關(guān)閉動畫 pop_add_hide.xml
android:duration="@integer/config_pop_duration"android:fromAlpha="1.0"android:toAlpha="0.0"/>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"/>
然后在style.xml中定義我們自己的style，添加我們的這兩個動畫：
至于pop布局根據(jù)自己的需求自己編寫即可，至此我們的漸變彈窗就基本完成了。
補(bǔ)充一點：不顯示問題
針對部分機(jī)型，看似代碼沒有問題，但仍無法顯示。我們需要在設(shè)置布局資源后，再次設(shè)置一下寬高（推薦都加上，畢竟我們要考慮兼容性問題）。
// 設(shè)置布局文件mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.pop_add, null));// 針對部分機(jī)型不顯示，我們需要重新設(shè)置一下寬高mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
源碼地址：
https://github.com/princekin-f/popupwindow
到這里就結(jié)束啦。
評論
圖片
表情