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

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