关于支付宝支付界面的实现

本篇博客,借鉴其他的博客仅仅阐述支付界面的实现而已. 最初我考虑这个问题的时候, 其实有很多疑点, 首先我要创建四个输入框, 输入完了以后, 我是不是要把每个输入框输入的内容在组合在一起, 去判断是不是正确, 最后一个输入框要做处理操作等等… 所以我觉得很麻烦, 后来在qq群里有人发了一些网址, 上去看了一下, 其实我们想的复杂了.
其实是四个输入框是显示的, 默认长度为1, 设置为安全码.在创建一个输入框不用于显示, 用于存储键盘输入的值, 就可以达到支付宝的效果了.下面看代码(大部分为其他博客粘贴过来, 处理了一些小问题而已)

- (void)setUI
{
//这个输入框是隐藏的, 输入内容存在这里面
    topTX = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    topTX.hidden = YES;
    topTX.keyboardType = UIKeyboardTypeNumberPad;
    [topTX addTarget:self action:@selector(txchange:) forControlEvents:UIControlEventEditingChanged];
    [self.view addSubview:topTX];

    //进入界面,topTX成为第一响应
    [topTX becomeFirstResponder];
    //下面这四个输入框, 为界面显示的输入框.
    for (int i = 0; i < 4; i++)
    {
        UITextField *pwdLabel = [[UITextField alloc] initWithFrame:CGRectMake(90+i*40, 100, 30, 30)];
        pwdLabel.layer.borderColor = [UIColor blackColor].CGColor;
        pwdLabel.enabled = NO;
        pwdLabel.textAlignment = NSTextAlignmentCenter;//居中
        pwdLabel.secureTextEntry = YES;//设置密码模式
        pwdLabel.layer.borderWidth = 1;
        [self.view addSubview:pwdLabel];
        //dataScoure为显示输入框的数组
        [dataSource addObject:pwdLabel];
    }
}

pragma mark 文本框内容改变

- (void)txchange:(UITextField *)tx
{
    NSString *password = tx.text;
    NSLog(@"测试%@", password);
    //是否需要隐藏键盘自己可以考虑
    if (password.length == dataSource.count)
    {
    //长度等于数组的长度时候隐藏键盘
        [tx resignFirstResponder];//隐藏键盘
    }

    for (int i = 0; i < dataSource.count; i++)
    {
        UITextField *pwdtx = [dataSource objectAtIndex:i];
        if (i < password.length)
        {
            NSString *pwd = [password substringWithRange:NSMakeRange(i, 1)];
            pwdtx.text = pwd;
        } else {
        //这里处理的是点击键盘的x号, 显示的输入框往后退一位
            pwdtx.text = @"";//点击x号, 可以后退以为
        }
    }
    //如果到最后一位, 要处理密码是否正确,或者错误
    if (password.length == 4)
    {
    //在这里做处理, 如果password等于你所存储的密码
        if(等于){
    //这里面做处理密码输入正确的事件
        } else {

//错误的话将键盘和内容全部清空,  再次输入
            tx.text = @"";//将内容先清空掉
            for (int i = 0; i < dataSource.count; i++)
            {
                UITextField *pwdtx = [dataSource objectAtIndex:i];
                if (i < password.length)
                {
                //清空显示的密码框
                    pwdtx.text = @"";
                }
            }
        }
    }
}

界面的处理基本上就这样了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Android 支付宝首页界面的代码示例,主要是展示了常见的功能入口和广告轮播图。需要根据实际需求进行修改: ```xml <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_alipay_banner" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" android:src="@drawable/alipay_banner"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="10dp" android:weightSum="4"> <ImageView android:id="@+id/iv_scan_code" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/scan_code"/> <ImageView android:id="@+id/iv_pay" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/pay"/> <ImageView android:id="@+id/iv_transfer" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/transfer"/> <ImageView android:id="@+id/iv_bill" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/bill"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:orientation="horizontal" android:gravity="center_vertical"> <ImageView android:id="@+id/iv_ad" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="centerCrop" android:src="@drawable/ad"/> <TextView android:id="@+id/tv_ad_text" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:text="这里是广告位"/> </LinearLayout> </LinearLayout> ``` 在代码,我们使用了一个 LinearLayout 来作为整个支付宝首页的容器,包括广告轮播图、功能入口和广告位等控件。其,广告轮播图可以使用 ViewPager 和 PagerAdapter 来实现,功能入口使用了四个 ImageView 进行布局,并使用了 weightSum 属性来实现等宽布局。在实际开发,需要根据设计稿进行样式和布局的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值