Android仿支付寶支付從底部彈窗效果
更新時(shí)間：2021年10月03日 16:11:28 作者：Greathfs
這篇文章主要為大家詳細(xì)介紹了Android仿支付寶選擇支付方式，實(shí)現(xiàn)支付寶付款方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們?cè)儆弥Ц秾氈Ц兜臅r(shí)候，會(huì)從底部彈上來一個(gè)對(duì)話框,讓我們選擇支付方式等等,今天我們就來慢慢實(shí)現(xiàn)這個(gè)功能
效果圖
實(shí)現(xiàn)
主界面很簡(jiǎn)單,就是一個(gè)按鈕,點(diǎn)擊后跳到支付詳情的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="農(nóng)業(yè)銀行"
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="招商銀行(尾號(hào)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="確認(rèn)付款"
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的構(gòu)造器, 獲得的dialog邊框距離屏幕仍有幾毫米的縫隙。
Dialog dialog = new Dialog(getActivity(), R.style.BottomDialog);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // 設(shè)置Content前設(shè)定
dialog.setContentView(R.layout.fragment_pay_detail);
dialog.setCanceledOnTouchOutside(true); // 外部點(diǎn)擊取消
// 設(shè)置寬度為屏寬, 靠近屏幕底部。
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;
}
}
};
}
還有一個(gè)ScrollView嵌套ListView的問題,主要是重寫ListView的計(jì)算高度
package com.example.hfs.alipayuidemo;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ListView;
/**
* ScrollView中嵌套ListView，重寫ListView計(jì)算高度
*/
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);
}
}
好了,其實(shí)還是挺好理解的,附上GitHub項(xiàng)目地址: https://github.com/Greathfs/AliPayUiDemo
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android屏幕鎖屏彈窗的正確姿勢(shì)DEMO詳解
- Android實(shí)現(xiàn)氣泡布局/彈窗效果 氣泡尖角方向及偏移量可控
- Android監(jiān)聽輸入法彈窗和關(guān)閉的實(shí)現(xiàn)方法
- Android仿支付寶微信支付密碼界面彈窗封裝dialog
- Android如何實(shí)現(xiàn)鎖屏狀態(tài)下彈窗
- Android開發(fā)實(shí)現(xiàn)仿京東商品搜索選項(xiàng)卡彈窗功能
- Android實(shí)現(xiàn)隱私政策彈窗與鏈接功能
- Android實(shí)現(xiàn)彈窗進(jìn)度條效果
- Android自定義彈窗提醒控件使用詳解
- Android?Studio實(shí)現(xiàn)彈窗設(shè)置
相關(guān)文章
Android簡(jiǎn)單封裝一個(gè)MVP基類流程詳解
MVP是從經(jīng)典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負(fù)責(zé)邏輯的處理，Model提供數(shù)據(jù)，View負(fù)責(zé)顯示。下面這篇文章主要給大家介紹了關(guān)于Android從實(shí)現(xiàn)到封裝MVP的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧2023-03-03
Java操作FreeMarker模板引擎的基本用法示例小結(jié)
這篇文章主要介紹了Java操作FreeMarker模板引擎的基本用法示例小結(jié),FreeMarker本身由Java寫成,用模板來生成文本輸出,需要的朋友可以參考下2016-02-02
在本篇文章中小編給大家整理了關(guān)于android使用mysql的具體方法和實(shí)例代碼步驟，需要的朋友們學(xué)習(xí)下。2019-05-05
Android基于高德地圖poi的仿微信獲取位置功能實(shí)例代碼
這篇文章主要介紹了Android基于高德地圖poi的仿微信獲取位置功能，當(dāng)用戶打開頁面自動(dòng)定位，同時(shí)搜索周邊所有poi，點(diǎn)擊搜索按鈕輸入關(guān)鍵字，獲取關(guān)鍵字搜索結(jié)果，本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-12-12
Android利用控制點(diǎn)的拖拽畫一個(gè)粽子
端午節(jié)就要到了，本文我們將利用控制點(diǎn)的拖拽式移動(dòng)，動(dòng)態(tài)調(diào)整位置來調(diào)整繪制一個(gè)簡(jiǎn)單的粽子圖形，感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-05-05
ListView實(shí)現(xiàn)下拉刷新加載更多的實(shí)例代碼(直接拿來用)
這篇文章主要介紹了ListView實(shí)現(xiàn)下拉刷新加載更多的實(shí)例代碼(直接拿來用)的相關(guān)資料,需要的朋友可以參考下2016-07-07
Android自定義View實(shí)現(xiàn)五子棋小游戲
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Android PopupMenu彈出菜單的實(shí)現(xiàn)
這篇文章主要介紹了 Android PopupMenu彈出菜單的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家，實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
Android開發(fā)使用UncaughtExceptionHandler捕獲全局異常
本文主要介紹在Android開發(fā)中使用UncaughtExceptionHandler捕獲全局異常，需要的朋友可以參考下。2016-06-06
Android星級(jí)評(píng)分條實(shí)現(xiàn)評(píng)分界面
這篇文章主要為大家詳細(xì)介紹了Android星級(jí)評(píng)分條實(shí)現(xiàn)評(píng)分界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05