Android仿支付寶支付從底部彈窗效果
更新時(shí)間：2021年10月03日 16:11:28 作者：Greathfs
這篇文章主要為大家詳細(xì)介紹了Android仿支付寶選擇支付方式，實(shí)現(xiàn)支付寶付款方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們?cè)儆弥Ц秾氈Ц兜臅r(shí)候，會(huì)從底部彈上來(lái)一個(gè)對(duì)話框,讓我們選擇支付方式等等,今天我們就來(lái)慢慢實(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的問(wèn)題,主要是重寫(xiě)ListView的計(jì)算高度
package com.example.hfs.alipayuidemo;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ListView;
/**
* ScrollView中嵌套ListView，重寫(xiě)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)聽(tīng)輸入法彈窗和關(guān)閉的實(shí)現(xiàn)方法
- Android仿支付寶微信支付密碼界面彈窗封裝dialog
- Android如何實(shí)現(xiàn)鎖屏狀態(tài)下彈窗
- Android開(kāi)發(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 Studio使用Profiler來(lái)完成內(nèi)存泄漏的定位
這篇文章主要介紹了Android Studio使用Profiler來(lái)完成內(nèi)存泄漏的定位，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-03-03
Android開(kāi)發(fā)判斷一個(gè)app應(yīng)用是否在運(yùn)行的方法詳解
這篇文章主要介紹了Android開(kāi)發(fā)判斷一個(gè)app應(yīng)用是否在運(yùn)行的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android判斷應(yīng)用運(yùn)行狀態(tài)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
Android自定義View實(shí)現(xiàn)顏色選取器
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)顏色選取器 ，類似SeekBar的方式通過(guò)滑動(dòng)選擇顏色，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
使用Android Studio創(chuàng)建OpenCV4.1.0 項(xiàng)目的步驟
這篇文章主要介紹了使用Android Studio創(chuàng)建OpenCV4.1.0 項(xiàng)目的步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
自定義 PhotoView 繼承(extends)自 View。并在最中間顯示后面操作的圖片。繪制圖片可以重寫(xiě) onDraw()方法，并在里面通過(guò)Canvas.drawBitmap()來(lái)要繪制圖片2023-04-04
flutter中build.gradle倉(cāng)庫(kù)的配置(解決外網(wǎng)下載速度過(guò)慢失敗的問(wèn)題)
這篇文章主要介紹了flutter中build.gradle倉(cāng)庫(kù)的配置，解決外網(wǎng)下載速度過(guò)慢，失敗的問(wèn)題,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果（八）
這篇文章主要為大家詳細(xì)介紹了Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果的第八篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Kotlin中內(nèi)置函數(shù)的用法和區(qū)別總結(jié)
眾所周知相比Java, Kotlin提供了不少高級(jí)語(yǔ)法特性。對(duì)于一個(gè)Kotlin的初學(xué)者來(lái)說(shuō)經(jīng)常會(huì)寫(xiě)出一些不夠優(yōu)雅的代碼。下面這篇文章主要給大家介紹了關(guān)于Kotlin中內(nèi)置函數(shù)的用法和區(qū)別的相關(guān)資料，需要的朋友可以參考下2018-06-06
Android基于Sensor感應(yīng)器獲取重力感應(yīng)加速度的方法
這篇文章主要介紹了Android基于Sensor感應(yīng)器獲取重力感應(yīng)加速度的方法,涉及Android使用Sensor類實(shí)現(xiàn)感應(yīng)重力變化的功能,需要的朋友可以參考下2015-12-12
android通過(guò)bitmap生成新圖片關(guān)鍵性代碼
android通過(guò)bitmap生成新圖片具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-06-06