效果图看不出渐变效果,实际上半透明的背景是有一个渐显的效果,而底部的菜单弹出来的时候也是有一个从低往上弹的效果。
主要原理是:
1、直接显示PopupWindow
2、渐显半透明背景,同时弹出底下的菜单
话不多说,直接上代码:
MenuBottomPopupWindow 代码
package com.imxiaoyu.common.base.popup_window;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.imxiaoyu.common.R;
import com.imxiaoyu.common.utils.AnimatorUtils;
import com.imxiaoyu.common.utils.DensityUtils;
/**
* 底部弹出的菜单
* Created by 庞光渝 on 2017/3/22.
*/
public class MenuBottomPopupWindow extends BasePopupWindow {
/**
*
*/
private TextView tvCancel;
private TextView tvBg;
private LinearLayout llyMenu;
private LinearLayout llyAddMenu;
private int dpHeight = ;
public MenuBottomPopupWindow(Activity activity) {
super(activity);
}
@Override
protected int getLayoutId() {
return R.layout.popup_window_menu_bottom;
}
@Override
protected void initView() {
llyMenu = findView(R.id.lly_menu);
llyAddMenu = findView(R.id.lly_add_menu);
tvCancel = findView(R.id.tv_cancel, this);
tvBg = findView(R.id.tv_bg, this);
}
@Override
public void onClick(View view) {
if (view.getId() == tvCancel.getId()) {
dismiss();
}
if (view.getId() == tvBg.getId()) {
dismiss();
}
}
/**
* 添加一个菜单
*
* @param name 菜单的显示名称
* @param onClickListener 菜单的相应点击事件
*/
public void addMenu(String name, View.OnClickListener onClickListener) {
dpHeight += ;
MenuModel menuModel = new MenuModel();
menuModel.setButtonName(name);
menuModel.setOnClickListener(onClickListener);
llyAddMenu.addView(getView(menuModel));
}
/**
* 设置,并获取到菜单子项的视图(View)
*
* @param menuModel 菜单对象的模型
* @return
*/
private View getView(final MenuModel menuModel) {
// 引入窗口配置文件
View itemView = LayoutInflater.from(getActivity()).inflate(R.layout.popup_window_menu_bottom_item, null);
TextView textView = (TextView) itemView.findViewById(R.id.tv_item);
if (menuModel != null) {
textView.setText(menuModel.getButtonName() + "");
if (menuModel.getOnClickListener() != null) {
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
menuModel.getOnClickListener().onClick(v);
dismiss();
}
});
}
}
return itemView;
}
/**
* 菜单对象模型
*/
public class MenuModel {
private String ButtonName;//菜单的名称
private View.OnClickListener onClickListener;//菜单相应的点击事件
public String getButtonName() {
return ButtonName;
}
public void setButtonName(String buttonName) {
ButtonName = buttonName;
}
public View.OnClickListener getOnClickListener() {
return onClickListener;
}
public void setOnClickListener(View.OnClickListener onClickListener) {
this.onClickListener = onClickListener;
}
}
public void show() {
super.show();
AnimatorUtils.startMove(llyMenu, , DensityUtils.dip2px(getActivity(), dpHeight));
final AlphaAnimation alp = new AlphaAnimation(, );
alp.setDuration();
alp.setRepeatCount();
tvBg.setAnimation(alp);
}
public void dismiss() {
AnimatorUtils.startMove(llyMenu, DensityUtils.dip2px(getActivity(), dpHeight), );
final AlphaAnimation alp = new AlphaAnimation(, );
alp.setDuration();
alp.setRepeatCount();
alp.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
MenuBottomPopupWindow.super.dismiss();//动画放完了才隐藏
}
});
tvBg.setAnimation(alp);
}
}
共有两个布局:
popup_window_menu_bottom布局
<?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="match_parent">
<TextView
android:id="@+id/tv_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black_50" />
<LinearLayout
android:background="@color/white"
android:id="@+id/lly_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<LinearLayout
android:id="@+id/lly_add_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="12dp"
android:background="@color/gray_f9f9" />
<TextView
android:id="@+id/tv_cancel"
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="@drawable/btn_n_w00_p_cccc"
android:gravity="center"
android:text="@string/cancel"
android:textSize="16dp" />
</LinearLayout>
</RelativeLayout>
popup_window_menu_bottom_item.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="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/gray_cccc" />
<TextView
android:id="@+id/tv_item"
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="@drawable/btn_n_w00_p_cccc"
android:gravity="center"
android:text="@string/cancel"
android:textSize="16dp" />
</LinearLayout>
颜色:
<color name="gray_cccc">#cccccc</color>
<color name="black_50">#88000000</color>
<color name="gray_f9f9">#f9f9f9</color>
<color name="white_00">#00ffffff</color>
点击样式:
btn_n_w00_p_cccc.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="@color/gray_cccc" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<solid android:color="@color/gray_cccc" />
</shape>
</item>
<item android:state_focused="true">
<shape>
<solid android:color="@color/gray_cccc" />
</shape>
</item>
<item>
<shape>
<solid android:color="@color/white_00" />
</shape>
</item>
</selector>
http://doutugongchang.com