Android仿支付宝支付从底部弹窗效果
程序员文章站
2024-03-05 16:57:49
我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能
效果图
实现
主界面很简单,就是一个按钮,点击后跳到支付...
我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能
效果图
实现
主界面很简单,就是一个按钮,点击后跳到支付详情的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="信用卡还款" 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="添加银行卡" /> <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; /** * 底部弹窗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);//付款方式(银行卡列表) 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。