Android仿支付宝支付从底部d窗效果

概述我们再用支付宝支付的时候，会从底部d上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能

我们再用支付宝支付的时候，会从底部d上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能

效果图

实现

主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中

package com.example.hfs.alipayuIDemo;import androID.support.v7.app.AppCompatActivity;import androID.os.Bundle;import androID.vIEw.VIEw;import androID.Widget.button;public class MainActivity extends AppCompatActivity { private button mbutton; @OverrIDe protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_main);  initVIEw(); } private voID initVIEw() {  mbutton= (button) this.findVIEwByID(R.ID.btn_pay);  mbutton.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw vIEw) {    PayDetailFragment payDetailFragment=new PayDetailFragment();    payDetailFragment.show(getSupportFragmentManager(),"payDetailFragment");   }  }); }}

接着是支付详情的Fragment代码

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:ID="@+ID/re_root" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:background="#ffffff"> <!--==================================付款详情================================--> <relativeLayout  androID:ID="@+ID/re_pay_detail"  androID:layout_wIDth="match_parent"  androID:layout_height="fill_parent">  <ScrollVIEw   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content">   <linearLayout    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:orIEntation="vertical">    <relativeLayout     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"     androID:paddingBottom="15dp"     androID:paddingleft="10dp"     androID:paddingRight="10dp"     androID:paddingtop="15dp">     <ImageVIEw      androID:layout_wIDth="10dp"      androID:layout_height="10dp"      androID:src="@mipmap/ic_close" />     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_centerHorizontal="true"      androID:text="订单详情"      androID:textSize="15sp" />     <ImageVIEw      androID:layout_wIDth="10dp"      androID:layout_height="10dp"      androID:layout_alignParentRight="true"      androID:src="@mipmap/ic_doubt" />    </relativeLayout>    <VIEw     androID:layout_wIDth="match_parent"     androID:layout_height="1dp"     androID:background="@color/line"/>    <relativeLayout     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"     androID:paddingBottom="15dp"     androID:paddingleft="10dp"     androID:paddingRight="10dp"     androID:paddingtop="15dp">     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:text="xyk还款"      androID:textcolor="@color/text_color_grey" />     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_alignParentRight="true"      androID:text="农业银行"      androID:textcolor="@color/text_color_grey" />    </relativeLayout>    <VIEw     androID:layout_wIDth="match_parent"     androID:layout_height="1dp"     androID:background="@color/line"/>    <relativeLayout     androID:ID="@+ID/re_pay_way"     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"     androID:paddingBottom="15dp"     androID:paddingleft="10dp"     androID:paddingRight="10dp"     androID:paddingtop="15dp">     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:text="支付方式"      androID:textcolor="@color/text_color_grey" />     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_alignParentRight="true"      androID:drawablepadding="10dp"      androID:drawableRight="@mipmap/ic_open"      androID:text="招商银行(尾号2345)"      androID:textcolor="@color/text_color_grey" />    </relativeLayout>    <VIEw     androID:layout_wIDth="match_parent"     androID:layout_height="1dp"     androID:background="@color/line"/>    <relativeLayout     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"     androID:paddingBottom="15dp"     androID:paddingleft="10dp"     androID:paddingRight="10dp"     androID:paddingtop="15dp">     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:text="订单金额"      androID:textcolor="@color/text_color_grey" />     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_alignParentRight="true"      androID:text="10.00"      androID:textcolor="@color/text_color_grey" />    </relativeLayout>    <VIEw     androID:layout_wIDth="match_parent"     androID:layout_height="1dp"     androID:background="@color/line"/>    <relativeLayout     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"     androID:paddingBottom="15dp"     androID:paddingleft="10dp"     androID:paddingRight="10dp"     androID:paddingtop="15dp">     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:text="需付款" />     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_alignParentRight="true"      androID:text="10.00" />    </relativeLayout>   </linearLayout>  </ScrollVIEw>  <button   androID:ID="@+ID/btn_confirm_pay"   androID:layout_wIDth="fill_parent"   androID:layout_height="wrap_content"   androID:layout_alignParentBottom="true"   androID:layout_marginBottom="20dp"   androID:layout_marginleft="10dp"   androID:layout_marginRight="10dp"   androID:layout_margintop="20dp"   androID:background="@drawable/btn_click"   androID:padding="10dp"   androID:text="确认付款"   androID:textcolor="#ffffff" /> </relativeLayout> <!--=================================付款方式======================================--> <linearLayout  androID:ID="@+ID/lin_pay_way"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:layout_toRightOf="@+ID/re_pay_detail"  androID:background="#ffffff"  androID:orIEntation="vertical"  androID:visibility="gone">  <relativeLayout   androID:layout_wIDth="fill_parent"   androID:layout_height="wrap_content"   androID:background="#ffffff"   androID:padding="10dp">   <TextVIEw    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_centerInParent="true"    androID:text="选择支付方式" />   <ImageVIEw    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_alignParentRight="true"    androID:layout_margin="10dp"    androID:src="@mipmap/ic_close" />  </relativeLayout>  <VIEw   androID:layout_wIDth="match_parent"   androID:layout_height="1dp"   androID:background="@color/line"/>  <ScrollVIEw   androID:layout_wIDth="fill_parent"   androID:layout_height="wrap_content">   <linearLayout    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:orIEntation="vertical">    <com.example.hfs.alipayuIDemo.ScrollvIEwListVIEw     androID:ID="@+ID/lv_bank"     androID:layout_wIDth="fill_parent"     androID:layout_height="fill_parent"     androID:ListSelector="#ffffff"/>    <TextVIEw     androID:layout_wIDth="match_parent"     androID:layout_height="wrap_content"     androID:layout_margintop="1dp"     androID:background="#ffffff"     androID:drawableRight="@mipmap/ic_open"     androID:gravity="center_vertical"     androID:paddingBottom="15dp"     androID:paddingleft="20dp"     androID:paddingRight="20dp"     androID:paddingtop="15dp"     androID:text="添加yhk" />    <VIEw     androID:layout_wIDth="match_parent"     androID:layout_height="1dp"     androID:background="@color/line"/>    <relativeLayout     androID:ID="@+ID/re_balance"     androID:layout_wIDth="fill_parent"     androID:layout_height="wrap_content"     androID:layout_margintop="1dp"     androID:background="#ffffff"     androID:paddingBottom="10dp"     androID:paddingleft="20dp"     androID:paddingtop="10dp">     <ImageVIEw      androID:ID="@+ID/img_balance"      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_centerVertical="true"      androID:src="@mipmap/ic_pay_banlance_able" />     <TextVIEw      androID:ID="@+ID/tv_balance"      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_aligntop="@+ID/img_balance"      androID:layout_toRightOf="@+ID/img_balance"      androID:paddingleft="10dp"      androID:text="账户余额"      androID:textSize="13sp" />     <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_below="@+ID/tv_balance"      androID:layout_toRightOf="@+ID/img_balance"      androID:paddingleft="10dp"      androID:text="可用活期账户500元"      androID:textSize="10sp" />    </relativeLayout>   </linearLayout>  </ScrollVIEw> </linearLayout> <!--====================================支付密码=========================================--> <linearLayout  androID:ID="@+ID/lin_pass"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:layout_toRightOf="@+ID/re_pay_detail"  androID:visibility="gone"  androID:orIEntation="vertical">  <relativeLayout   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:paddingBottom="15dp"   androID:paddingleft="10dp"   androID:paddingRight="10dp"   androID:paddingtop="15dp">   <ImageVIEw    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:src="@mipmap/ic_close" />   <TextVIEw    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_centerHorizontal="true"    androID:text="输入密码" />  </relativeLayout>  <VIEw   androID:layout_wIDth="match_parent"   androID:layout_height="1dp"   androID:background="@color/line"/>  <EditText   androID:ID="@+ID/pass_vIEw"   androID:layout_wIDth="match_parent"   androID:layout_height="48dp"   androID:background="#ffffff"   androID:layout_marginleft="40dp"   androID:layout_marginRight="40dp"   androID:layout_margintop="10dp" />  <VIEw   androID:layout_wIDth="match_parent"   androID:layout_height="1dp"   androID:background="@color/line"/>  <TextVIEw   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:gravity="right"   androID:padding="10dp"   androID:text="忘记密码"   androID:textcolor="@color/colorstatus"   androID:textSize="12sp" /> </linearLayout></relativeLayout>

package com.example.hfs.alipayuIDemo;import androID.app.Dialog;import androID.os.Bundle;import androID.support.annotation.NonNull;import androID.support.v4.app.DialogFragment;import androID.vIEw.Gravity;import androID.vIEw.VIEw;import androID.vIEw.Window;import androID.vIEw.WindowManager;import androID.vIEw.animation.Animation;import androID.vIEw.animation.AnimationUtils;import androID.Widget.button;import androID.Widget.EditText;import androID.Widget.linearLayout;import androID.Widget.ListVIEw;import androID.Widget.relativeLayout;/** * 底部d窗Fragment */public class PayDetailFragment extends DialogFragment { private relativeLayout rePayWay,rePayDetail,reBalance; private linearLayout linPayWay,linPass; private ListVIEw lv; private button btnPay; private EditText grIDPasswordVIEw; @NonNull @OverrIDe public Dialog onCreateDialog(Bundle savedInstanceState) {  // 使用不带theme的构造器,获得的dialog边框距离屏幕仍有几毫米的缝隙。  Dialog dialog = new Dialog(getActivity(),R.style.BottomDialog);  dialog.requestwindowFeature(Window.FEATURE_NO_Title); // 设置Content前设定  dialog.setContentVIEw(R.layout.fragment_pay_detail);  dialog.setCanceledOntouchOutsIDe(true); // 外部点击取消  // 设置宽度为屏宽,靠近屏幕底部。  final Window window = dialog.getwindow();  window.setwindowAnimations(R.style.AnimBottom);  final WindowManager.LayoutParams lp = window.getAttributes();  lp.gravity = Gravity.BottOM; // 紧贴底部  lp.wIDth = WindowManager.LayoutParams.MATCH_PARENT; // 宽度持平  lp.height = getActivity().getwindowManager().getDefaultdisplay().getHeight() * 3 / 5;  window.setAttributes(lp);  rePayWay = (relativeLayout) dialog.findVIEwByID(R.ID.re_pay_way);  rePayDetail = (relativeLayout) dialog.findVIEwByID(R.ID.re_pay_detail);//付款详情  linPayWay = (linearLayout) dialog.findVIEwByID(R.ID.lin_pay_way);//付款方式  lv = (ListVIEw) dialog.findVIEwByID(R.ID.lv_bank);//付款方式（yhk列表）  reBalance = (relativeLayout) dialog.findVIEwByID(R.ID.re_balance);//付款方式（余额）  btnPay = (button) dialog.findVIEwByID(R.ID.btn_confirm_pay);  grIDPasswordVIEw = (EditText) dialog.findVIEwByID(R.ID.pass_vIEw);  linPass = (linearLayout)dialog.findVIEwByID(R.ID.lin_pass);  rePayWay.setonClickListener(Listener);  reBalance.setonClickListener(Listener);  btnPay.setonClickListener(Listener);  return dialog; } VIEw.OnClickListener Listener = new VIEw.OnClickListener() {  @OverrIDe  public voID onClick(VIEw vIEw) {   Animation slIDe_left_to_left = AnimationUtils.loadAnimation(getActivity(),R.anim.slIDe_left_to_left);   Animation slIDe_right_to_left = AnimationUtils.loadAnimation(getActivity(),R.anim.slIDe_right_to_left);   Animation slIDe_left_to_right = AnimationUtils.loadAnimation(getActivity(),R.anim.slIDe_left_to_right);   Animation slIDe_left_to_left_in = AnimationUtils.loadAnimation(getActivity(),R.anim.slIDe_left_to_left_in);   switch (vIEw.getID()) {    case R.ID.re_pay_way:     rePayDetail.startAnimation(slIDe_left_to_left);     rePayDetail.setVisibility(VIEw.GONE);     linPayWay.startAnimation(slIDe_right_to_left);     linPayWay.setVisibility(VIEw.VISIBLE);     break;    case R.ID.re_balance:     rePayDetail.startAnimation(slIDe_left_to_left_in);     rePayDetail.setVisibility(VIEw.VISIBLE);     linPayWay.startAnimation(slIDe_left_to_right);     linPayWay.setVisibility(VIEw.GONE);     break;    case R.ID.btn_confirm_pay:     rePayDetail.startAnimation(slIDe_left_to_left);     rePayDetail.setVisibility(VIEw.GONE);     linPass.startAnimation(slIDe_right_to_left);     linPass.setVisibility(VIEw.VISIBLE);     break;    default:     break;   }  } };}

还有一个ScrollVIEw嵌套ListVIEw的问题,主要是重写ListVIEw的计算高度

package com.example.hfs.alipayuIDemo;import androID.content.Context;import androID.util.AttributeSet;import androID.Widget.ListVIEw;/** * ScrollVIEw中嵌套ListVIEw，重写ListVIEw计算高度 */public class ScrollvIEwListVIEw extends ListVIEw { public ScrollvIEwListVIEw(Context context) {  super(context); } public ScrollvIEwListVIEw(Context context,AttributeSet attrs) {  super(context,attrs); } public ScrollvIEwListVIEw(Context context,AttributeSet attrs,int defStyleAttr) {  super(context,attrs,defStyleAttr); } protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {  int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,MeasureSpec.AT_MOST);  super.onMeasure(wIDthMeasureSpec,expandSpec); }}

好了,其实还是挺好理解的,附上GitHub项目地址: https://github.com/Greathfs/AliPayUiDemo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android仿支付宝支付从底部d窗效果全部内容，希望文章能够帮你解决Android仿支付宝支付从底部d窗效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。