欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-05 16:57:49
我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付...

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

效果图

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

实现

主界面很简单,就是一个按钮,点击后跳到支付详情的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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。