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

弹窗支付宝 Android 2022-06-06 07:06:16 596人浏览八月长安

摘要

我们再用支付宝支付的时候，会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能效果图实现主界面很简单,就是一个按钮,点击后跳到支付详情的Fra

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

效果图

实现

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

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;

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屏幕锁屏弹窗的正确姿势DEMO详解Android如何实现锁屏状态下弹窗Android监听输入法弹窗和关闭的实现方法Android实现气泡布局/弹窗效果气泡尖角方向及偏移量可控Android仿支付宝微信支付密码界面弹窗封装dialogAndroid UI设计之AlertDialog弹窗控件Android自定义带增长动画和点击弹窗提示效果的柱状图DEMOAndroid程序开发仿新版QQ锁屏下弹窗功能Android控件PopupWindow模仿iOS底部弹窗Android实现自适应屏幕的弹窗广告

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Android仿支付宝支付从底部弹窗效果

本文链接: https://www.lsjlt.com/news/24479.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

公网环境使用navicat图形化工具远程连接本地MariaDB数据库

文章目录 1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. ...

99+

2024-05-14

数据库 mariadb
MariaDB数据库本地部署结合cpolar内网穿透实现远程连接

文章目录 1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. ...

99+

2024-05-14

数据库 mariadb 网络
【AWS系列】巧用 G5g 畅游Android流媒体游戏

序言 Amazon EC2 G5g 实例由 AWS Graviton2 处理器提供支持，并配备 NVIDIA T4G Tensor Core GPU，可为 Android 游戏流媒体等图形工作负载提...

99+

2024-05-14

Amazon aws 游戏 Android G5g
Mac清理软件cleanmymac x4.14.4破解版,2024年有免费cleanmymac x激活码

CleanMyMac X 4.14.4破解版可以快速识别并删除占用磁盘空间的无用文件，提升我们系统的存储空间。它还可以优化启动项、修复系统错误和保护隐私等。总之CleanMyMac X十分强大有需要的赶快下载吧， CleanMyMac...

99+

2024-05-14

macos CleanMyMac mac
山东移动CM311-5-ZG_国科GK6323V100C_安卓4.4.2_免拆U盘卡刷刷机固件包

山东移动CM311-5-ZG_国科GK6323V100C_安卓4.4.2_免拆U盘卡刷刷机固件包特点：适用于对应型号的电视盒子刷机；开放原厂固件屏蔽的市场安装和u盘安装apk；修改dns，三网通用；大量精简内置的没用的软...

99+

2024-05-14

android adb 魔百盒刷机机顶盒ROM 魔百盒固件
基于微信山西太原某小区物业维修报修小程序系统设计与实现研究背景和意义、国内外现状

博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，免费项目配有对应...

99+

2024-05-14

太原某小区物业维修报修小程序
【Android Studio】创建第一个APP工程及生成APK安装包

🌟博主领域：嵌入式领域&人工智能&软件开发前言：本文详细介绍创建Android Studio第一个APP工程及打包生成APK安装包。如下两个博客我记录了第一次创建项目时出现的问题，若你也遇见了同样的问题，可参考：...

99+

2024-05-14

android studio android ide
【Android Studio】APP练手小项目——切换图片APP

本项目效果：前言：本项目最终实现生成一个安卓APP软件，点击按钮可实现按钮切换图片。项目包含页面布局、功能实现的逻辑代码以及设置APP图标LOGO和自定义APP名称。关于Android Studio的下载与安装见我的博文：And...

99+

2024-05-14

android studio android ide
基于微信海南海口某健身房私教预约小程序系统设计与实现研究背景和意义、国内外现状

博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，免费项目配有对应开...

99+

2024-05-14

海口某健身房私教预约小程序
【快速解决】Android Button页面跳转功能

目录让我们直接开始第一步：先建立一个新的activity 编辑第二步：打开第一个页面的Java文件MainActivity 方法一：直接跳转功能如下：方法二：输入密码才能进行跳转功能如下：需要注意的地方结语让我们直接开...

99+

2024-05-14

android 1024程序员节算法软件开发按钮跳转