Android實現(xiàn)底部支付彈窗效果

更新時間：2017年01月25日 09:09:06 作者：ganshenml

這篇文章主要為大家詳細介紹了Android實現(xiàn)底部支付彈窗效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Android底部支付彈窗實現(xiàn)的效果：

實現(xiàn)的思路：

1.通過繼承PopupWindow自定義View來達到彈窗的彈出效果；

2.通過回調(diào)將輸入的密碼由彈窗傳入到主界面中；

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); //設(shè)置彈出窗體動畫效果 
 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監(jiān)聽判斷獲取觸屏位置如果在選擇框外面則銷毀彈出框 
//   dismiss(); 
   } 
  } 
  return true; 
  } 
 }); 
 
 } 
 
}

分析：其實很簡單，無法就是通過加載布局將布局裝載至自定義的View中。bottomDialogOnclickListener 是自定義的回調(diào)接口，無法就是將值傳遞至主界面中。

主界面代碼：

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(); 
  } 
 }); 
 } 
 
}

分析：可以看到，主界面的代碼異常簡單，主要是通過自定義一個幫助類來進行彈窗的顯示——>因為彈窗很可能在多個界面使用，所以這種寫法個人還是比較喜歡的。另外通過回調(diào)將彈窗對象給傳輸出來，以便在使用的時候根據(jù)網(wǎng)絡(luò)請求的具體情況來控制彈窗的顯示與取消。

幫助類的代碼：

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); //設(shè)置窗口顯示在parent布局的位置并顯示 
 InputMethodManager imm = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);//自動打開軟鍵盤 
 imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS); 
 
 }

分析：兩點——>1.負載布局文件；2.控制軟鍵盤顯示與關(guān)閉；

另外一個很重要的點，花了不少時間才去發(fā)現(xiàn)：彈窗彈起的時候，軟鍵盤一般是會覆蓋一部分輸入框的，這是非常不好看的。之所以demo中沒有出現(xiàn)這種情況，是通過了特殊的處理——>將整個彈窗布局外包一層ScrollView，這樣方便軟鍵盤彈起找到輸入框焦點時會將整個布局往上頂。但，這還不夠，一定要在ScrollView中設(shè)置一個屬性：

android:fillViewport="true"

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: