Android实现底部支付弹窗效果

Android底部支付弹窗实现的效果：

实现的思路：

1.通过继承PopupWindow自定义View来达到弹窗的弹出效果；

2.通过回调将输入的密码由弹窗传入到主界面中；

2.恩，这就够了——>有些注意点在代码中备注；

自定义View的代码：

public class BottomDialogView extends PopupWindow {
private View dialogView;
private EditText payPassEt;
private Button cancelBtn, confirmBtn;
private ImageView backDialogIv;

public BottomDialogView(Activity context, final BottomDialogOnclickListener bottomDialogOnclickListener) {
super(context);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
dialogView = inflater.inflate(R.layout.dialog, null);
backDialogIv = (ImageView) dialogView.findViewById(R.id.backDialogIv);
payPassEt = (EditText) dialogView.findViewById(R.id.payPassEt);
cancelBtn = (Button) dialogView.findViewById(R.id.cancelBtn);
confirmBtn = (Button) dialogView.findViewById(R.id.confirmBtn);
backDialogIv.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 dismiss();
 }
});
cancelBtn.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 dismiss();
 }
});
confirmBtn.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 bottomDialogOnclickListener.onPositiveClick(payPassEt.getText().toString().trim(), BottomDialogView.this);
 }
});

this.setContentView(dialogView);
this.setWidth(LayoutParams.MATCH_PARENT);
this.setHeight(LayoutParams.MATCH_PARENT);
this.setFocusable(true);
this.setAnimationStyle(R.style.DialogShowStyle); //设置弹出窗体动画效果
ColorDrawable dw = new ColorDrawable(0xb0000000);
this.setBackgroundDrawable(dw);

dialogView.setOnTouchListener(new OnTouchListener() {
 public boolean onTouch(View v, MotionEvent event) {
 int height = dialogView.findViewById(R.id.pop_layout).getTop();
 int y = (int) event.getY();
 if (event.getAction() == MotionEvent.ACTION_UP) {
  if (y < height) { //添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框
//   dismiss();
  }
 }
 return true;
 }
});

}

}

分析：其实很简单，无法就是通过加载布局将布局装载至自定义的View中。bottomDialogOnclickListener 是自定义的回调接口，无法就是将值传递至主界面中。

主界面代码：

public class ShowBottomDialogAct extends AppCompatActivity {
private Button showBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_show_bottom_dialog);
showBtn = (Button) findViewById(R.id.showBtn);
showBtn.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 showDialog();
 }
});
}

private void showDialog() {
DialogUtil.showBottomDialog(ShowBottomDialogAct.this, R.id.activity_show_bottom_dialog, new BottomDialogOnclickListener() {
 @Override
 public void onPositiveClick(String contentStr, BottomDialogView dialogView) {
 dialogView.dismiss();
 }
});
}

}

分析：可以看到，主界面的代码异常简单，主要是通过自定义一个帮助类来进行弹窗的显示——>因为弹窗很可能在多个界面使用，所以这种写法个人还是比较喜欢的。另外通过回调将弹窗对象给传输出来，以便在使用的时候根据网络请求的具体情况来控制弹窗的显示与取消。

帮助类的代码：

public static void showBottomDialog(Activity activity , int dialogLayoutId , BottomDialogOnclickListener bottomDialogOnclickListener){

BottomDialogView bottomDialogView = new BottomDialogView(activity, bottomDialogOnclickListener);
bottomDialogView.showAtLocation(activity.findViewById(dialogLayoutId), Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0); //设置窗口显示在parent布局的位置并显示
InputMethodManager imm = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);//自动打开软键盘
imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);

}

分析：两点——>1.负载布局文件；2.控制软键盘显示与关闭；

另外一个很重要的点，花了不少时间才去发现：弹窗弹起的时候，软键盘一般是会覆盖一部分输入框的，这是非常不好看的。之所以demo中没有出现这种情况，是通过了特殊的处理——>将整个弹窗布局外包一层ScrollView，这样方便软键盘弹起找到输入框焦点时会将整个布局往上顶。但，这还不够，一定要在ScrollView中设置一个属性：

android:fillViewport="true" 

最后，GitHub地址>>https://github.com/ganshenml/BottomDialogApp