是这个充值成功界面界面吗

iOS高仿支付宝手机充值界面按钮 - 简书
iOS高仿支付宝手机充值界面按钮
周末,对于年轻人来说,应该是很美好的日子。带着亲爱的她/他去逛自己想去的地方,吃想吃的美食,或者是玩想玩的lol。呃...三句终究还是离不开打撸,有毒。而对于我来说除了一个人打撸,其它只是想想就好,嗯,想想就好。
ok,闲话不多扯了,回到正题。想着前些天老板兼安卓开发工程师兼产品经理说要写个界面,我看了一眼跟支付宝手机充值的页面差不多,WK!原来这公司这么叼(应届生,来公司才一个多月,还没转正),不关后台、蓝牙支付牛逼,现在还要搞手机充值这种业务,牛逼的不行。接着老板说只是先把界面搭着,充值通道暂时还没有,oo听到这话就安心了,可是搭这界面我也不会啊!这话只能在心里默哀~
支付宝手机充值界面
看到这个界面当时第一个想到的就是按钮,可是按钮只有一个title啊,要是下面是张图片就好做了,可是又是一个字体稍微小点的title。接着问同学,同学说用图片啊,分别设置normal和highlighted的图片就好了,多省事!哈哈,是耶,要美工做图片我啥都不用管,只要写几句代码就好。可是这样如果以后要改一下文字、文字大小、文字颜色,美工又得重新做,太麻烦了。 下面是关于ABButton这个分类的相关代码,还有很多需要完善,比如到底该不该提供内部的laber给外面调用,是否还需提供给外面设置文字颜色大小的方法等等。万一真有大神看到了,有哪里不合适的地方,还请指出来,真心感激。
1.ABButton
首先,想到的是写一个继承自UIButton的ABButton,给外部提供一个方法,在需要调用的地方带上要设置的title就好。
/** aStr上面的title bStr下面的title */
- (ABButton *)buttonWithAboveLabelTitle:(NSString *)aStr belowLabelTitle:(NSString *)bS
// 注意一下:这里把上下两个label拿出来放在.h文件,是为了方便在调用的地方可以直接访问到这两个属性
/** aboveLabel */
@property (nonatomic, weak) UILabel *aboveL;
/** belowLabel */
@property (nonatomic, weak) UILabel *belowL;
下面上一下细节代码
/** 设置按钮本身相关属性 */
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.size = CGSizeMake((SCREEN_WIDTH-60)/3, 80);
self.layer.borderColor = ABColor(21, 135, 228, 1.0).CGC
self.layer.borderWidth = 1;
self.layer.cornerRadius = 5.0f;
self.backgroundColor = [UIColor whiteColor];
/** 初始化上下两个Label */
- (ABButton *)buttonWithAboveLabelTitle:(NSString *)aStr belowLabelTitle:(NSString *)bStr {
UILabel *aboveL = [[UILabel alloc] init];
aboveL.text = aS
aboveL.font = [UIFont systemFontOfSize:18.0];
aboveL.textColor = ABColor(21, 135, 228, 1.0);
aboveL.textAlignment = NSTextAlignmentC
[self addSubview:aboveL];
self.aboveL = aboveL;
UILabel *belowL = [[UILabel alloc] init];
belowL.text = bS
belowL.font = [UIFont systemFontOfSize:14.0];
belowL.textColor = ABColor(78, 157, 232, 1.0);
belowL.textAlignment = NSTextAlignmentC
[self addSubview:belowL];
self.belowL = belowL;
/** 布局两个子控件 */
- (void)layoutSubviews {
[super layoutSubviews];
self.aboveL.frame = CGRectMake(0, 15, self.width, 30);
self.belowL.frame = CGRectMake(0, CGRectGetMaxY(self.aboveL.frame), self.width, 20);
/** 重写按钮高亮状态方法 */
- (void)setHighlighted:(BOOL)highlighted {
[super setHighlighted:highlighted];
self.backgroundColor = highlighted ? ABColor(56, 145, 230, 0.9) : [UIColor whiteColor];
self.aboveL.textColor = highlighted ? [UIColor whiteColor] : ABColor(21, 135, 228, 1.0);
self.belowL.textColor = highlighted ? [UIColor whiteColor] : ABColor(78, 157, 232, 1.0);
/** 重写按钮失效状态方法 */
- (void)setEnabled:(BOOL)enabled {
[super setEnabled:enabled];
if (!enabled) {
self.aboveL.textColor = [UIColor lightGrayColor];
self.belowL.textColor = [UIColor lightGrayColor];
self.layer.borderColor = [UIColor lightGrayColor].CGC
self.layer.cornerRadius = 5.0f;
到这里ABButton这个分类写完了,再看一下在需要调用的地方怎么用
for (int i = 0; i & 8; i++) {
ABButton *abBtn = [[ABButton alloc] init];
switch (i) {
[abBtn buttonWithAboveLabelTitle:@"10元" belowLabelTitle:@"备货中"];
abBtn.enabled = NO;
[abBtn buttonWithAboveLabelTitle:@"20元" belowLabelTitle:@"售价:19.91"];
int col = i % 3;
abBtn.x = col * (abBtn.width + ABButtonMargin)+20;
int row = i / 3;
abBtn.y = row * (abBtn.height + ABButtonMargin)+180;
[self.view addSubview:abBtn];
[abBtn addTarget:self action:@selector(chargePhone:) forControlEvents:UIControlEventTouchUpInside];
是的,就这么简单,只需一句代码就可以创建出来!
/** 点击方法 */
-(void)chargePhone:(ABButton*)sender{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[MBProgressHUD hideHUD];
[MBProgressHUD showMessage:[NSString stringWithFormat:@"充值%@", sender.aboveL.text]];
效果展示.gif
ok,ABButton介绍完毕。 这里面定义了一些宏定义,以及self.size、abBtn.x这种可以直接访问视图的x、y、宽高的是给UIView写了扩展,下面这个地址有完整的demo。
Github地址:
Everyehing will be okay!拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(37be0b4f553d661c-ua98).
重新安装浏览器,或使用别的浏览器

我要回帖

更多关于 h1z1充值界面打不开 的文章

 

随机推荐