Android仿支付宝支付从底部弹窗效果_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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索Android支付宝支付
android 底部弹窗、android 底部弹出弹窗、底部弹窗、ios底部弹窗、jquery 底部弹窗，以便于您获取更多的相关知识。

时间： 2024-09-15 14:08:30

Android仿支付宝支付从底部弹窗效果_Android的相关文章

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

我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 package com.example.hfs.alipayuidemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.wi

Android仿支付宝支付密码输入框

本文实例为大家分享了Android实现一个仿支付宝支付密码的输入框,主要实现如下: PasswordView.java package com.jackie.alipay.password; import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphic

Android仿今日头条滑动页面导航效果_Android

最近项目中用到了滑动页面,也就是和目前市场上很火的"今日头条"页面滑动类似,在网上找了一下,大部分都是用ViewPager来实现的,刚开始我用的是ViewPager+ViewGroup,上面的标题按钮用的是HorizontalScrollView,写完之后感觉效果比较生硬,果断换掉,发现了一个效果比较好的第三方,也就是今天的主题:PagerSlidingTabStrip.好了,下面来具体介绍一下PagerSlidingTabStrip,进行一下源码解析. 一.看一下demo的样子吧 二

Android仿网易客户端顶部导航栏效果_Android

最近刚写了一个网易客户端首页导航条的动画效果,现在分享出来给大家学习学习.我说一下这个效果的核心原理.下面是效果图:          首先是布局,这个布局是我从网易客户端反编译后弄来的.大家看后应该明白,布局文件如下: <FrameLayout android:id="@id/column_navi" android:layout_width="fill_parent" android:layout_height="wrap_content&quo

Android仿京东首页轮播文字效果_Android

京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个链接,那么数据源的结构就很明了了 创建ADEnity

Android仿微信对话列表滑动删除效果_Android

微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理 1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2.

Android仿新闻顶部导航标签切换效果_Android

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo.具体看下图. 那么大致上我们会用到这些知识. 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步. 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了.所以这里就自定义一个HorizontalScrollView impor

Android中PathMeasure仿支付宝支付动画

前言 在 Android 自定义 View 中,Path 可能用的比较多,PathMeasure 可能用的比较少,就我而言,以前也没有使用过 PathMeasure 这个 api,看到别人用 PathMeasure 和 ValueAnimator 结合在一起完成了很好的动画效果,于是我也学习下 PathMeasure ,此处记录下. PathMeasure 构造器: forceClosed 含义: // 创建一个 Path 对象 path = new Path(); path.moveTo(20

Android仿支付宝微信支付密码界面弹窗封装dialog

一,功能效果 二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType="numberPassword",外框是用的一个有stroke属性的shape, (2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线. (3),recycleview 要设置属性  android:overScrollMode=&quo