iOS高仿支付寶手機(jī)充值界面按鈕

周末,對(duì)于年輕人來(lái)說(shuō)园担,應(yīng)該是很美好的日子届谈。帶著親愛(ài)的她/他去逛自己想去的地方,吃想吃的美食弯汰,或者是玩想玩的lol疼约。呃...三句終究還是離不開(kāi)打擼,有毒蝙泼。而對(duì)于我來(lái)說(shuō)除了一個(gè)人打擼程剥,其它只是想想就好,嗯汤踏,想想就好织鲸。

ok,閑話(huà)不多扯了溪胶,回到正題搂擦。想著前些天老板兼安卓開(kāi)發(fā)工程師兼產(chǎn)品經(jīng)理說(shuō)要寫(xiě)個(gè)界面,我看了一眼跟支付寶手機(jī)充值的頁(yè)面差不多哗脖,WK瀑踢!原來(lái)這公司這么叼(應(yīng)屆生,來(lái)公司才一個(gè)多月才避,還沒(méi)轉(zhuǎn)正)橱夭,不關(guān)后臺(tái)、藍(lán)牙支付牛逼桑逝,現(xiàn)在還要搞手機(jī)充值這種業(yè)務(wù)棘劣,牛逼的不行。接著老板說(shuō)只是先把界面搭著楞遏,充值通道暫時(shí)還沒(méi)有茬暇,oo聽(tīng)到這話(huà)就安心了,可是搭這界面我也不會(huì)肮押取糙俗!這話(huà)只能在心里默哀~

支付寶手機(jī)充值界面

看到這個(gè)界面當(dāng)時(shí)第一個(gè)想到的就是按鈕,可是按鈕只有一個(gè)title啊预鬓,要是下面是張圖片就好做了巧骚,可是又是一個(gè)字體稍微小點(diǎn)的title。接著問(wèn)同學(xué),同學(xué)說(shuō)用圖片啊网缝,分別設(shè)置normal和highlighted的圖片就好了巨税,多省事!哈哈粉臊,是耶草添,要美工做圖片我啥都不用管,只要寫(xiě)幾句代碼就好扼仲≡洞纾可是這樣如果以后要改一下文字、文字大小屠凶、文字顏色驰后,美工又得重新做,太麻煩了矗愧。 下面是關(guān)于ABButton這個(gè)分類(lèi)的相關(guān)代碼灶芝,還有很多需要完善,比如到底該不該提供內(nèi)部的laber給外面調(diào)用唉韭,是否還需提供給外面設(shè)置文字顏色大小的方法等等夜涕。萬(wàn)一真有大神看到了,有哪里不合適的地方属愤,還請(qǐng)指出來(lái)女器,真心感激。

1.ABButton

首先住诸,想到的是寫(xiě)一個(gè)繼承自UIButton的ABButton驾胆,給外部提供一個(gè)方法,在需要調(diào)用的地方帶上要設(shè)置的title就好贱呐。

/** aStr上面的title bStr下面的title */
- (ABButton *)buttonWithAboveLabelTitle:(NSString *)aStr belowLabelTitle:(NSString *)bStr;

// 注意一下:這里把上下兩個(gè)label拿出來(lái)放在.h文件,是為了方便在調(diào)用的地方可以直接訪(fǎng)問(wèn)到這兩個(gè)屬性
/** aboveLabel */
@property (nonatomic, weak) UILabel *aboveL;
/** belowLabel */
@property (nonatomic, weak) UILabel *belowL;

下面上一下細(xì)節(jié)代碼

/** 設(shè)置按鈕本身相關(guān)屬性 */
- (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).CGColor;
self.layer.borderWidth = 1;
self.layer.cornerRadius = 5.0f;
self.backgroundColor = [UIColor whiteColor];
}
return self;
}
/** 初始化上下兩個(gè)Label */
- (ABButton *)buttonWithAboveLabelTitle:(NSString *)aStr belowLabelTitle:(NSString *)bStr {
UILabel *aboveL = [[UILabel alloc] init];
aboveL.text = aStr;
aboveL.font = [UIFont systemFontOfSize:18.0];
aboveL.textColor = ABColor(21, 135, 228, 1.0);
aboveL.textAlignment = NSTextAlignmentCenter;
[self addSubview:aboveL];
self.aboveL = aboveL;
UILabel *belowL = [[UILabel alloc] init];
belowL.text = bStr;
belowL.font = [UIFont systemFontOfSize:14.0];
belowL.textColor = ABColor(78, 157, 232, 1.0);
belowL.textAlignment = NSTextAlignmentCenter;
[self addSubview:belowL];
self.belowL = belowL;
return self;
}

/** 布局兩個(gè)子控件 */
- (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);
}
/** 重寫(xiě)按鈕高亮狀態(tài)方法 */
- (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);
}
/** 重寫(xiě)按鈕失效狀態(tài)方法 */
- (void)setEnabled:(BOOL)enabled {
[super setEnabled:enabled];
if (!enabled) {
self.aboveL.textColor = [UIColor lightGrayColor];
self.belowL.textColor = [UIColor lightGrayColor];
self.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.layer.cornerRadius = 5.0f;
}
}

到這里ABButton這個(gè)分類(lèi)寫(xiě)完了丧诺,再看一下在需要調(diào)用的地方怎么用

for (int i = 0; i < 8; i++) {
ABButton *abBtn = [[ABButton alloc] init];
switch (i) {
case 0:
{
[abBtn buttonWithAboveLabelTitle:@"10元" belowLabelTitle:@"備貨中"];
abBtn.enabled = NO;
}
break;

case 1:
{
[abBtn buttonWithAboveLabelTitle:@"20元" belowLabelTitle:@"售價(jià):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];
}

是的,就這么簡(jiǎn)單吼句,只需一句代碼就可以創(chuàng)建出來(lái)锅必!

/** 點(diǎn)擊方法 */

-(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這種可以直接訪(fǎng)問(wèn)視圖的x远搪、y、寬高的是給UIView寫(xiě)了擴(kuò)展逢捺,下面這個(gè)地址有完整的demo谁鳍。

Github地址:https://github.com/schnappiYep/ABButton

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子倘潜,更是在濱河造成了極大的恐慌绷柒,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涮因,死亡現(xiàn)場(chǎng)離奇詭異废睦,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)养泡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)嗜湃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人澜掩,你說(shuō)我怎么就攤上這事购披。” “怎么了肩榕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵刚陡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我株汉,道長(zhǎng)橘荠,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任郎逃,我火速辦了婚禮哥童,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘褒翰。我一直安慰自己贮懈,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布优训。 她就那樣靜靜地躺著朵你,像睡著了一般。 火紅的嫁衣襯著肌膚如雪揣非。 梳的紋絲不亂的頭發(fā)上抡医,一...
    開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音早敬,去河邊找鬼忌傻。 笑死,一個(gè)胖子當(dāng)著我的面吹牛搞监,可吹牛的內(nèi)容都是我干的水孩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼琐驴,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼俘种!你這毒婦竟也來(lái)了秤标?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤宙刘,失蹤者是張志新(化名)和其女友劉穎辜腺,沒(méi)想到半個(gè)月后秋忙,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體容达,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蹂随,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了玉罐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屈嗤。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖吊输,靈堂內(nèi)的尸體忽然破棺而出饶号,到底是詐尸還是另有隱情,我是刑警寧澤季蚂,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布茫船,位于F島的核電站,受9級(jí)特大地震影響扭屁,放射性物質(zhì)發(fā)生泄漏算谈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一料滥、第九天 我趴在偏房一處隱蔽的房頂上張望然眼。 院中可真熱鬧,春花似錦葵腹、人聲如沸高每。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)鲸匿。三九已至,卻和暖如春阻肩,著一層夾襖步出監(jiān)牢的瞬間带欢,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工烤惊, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留乔煞,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓撕氧,卻偏偏與公主長(zhǎng)得像瘤缩,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子伦泥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,144評(píng)論 25 707
  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線(xiàn)程剥啤,因...
    小菜c閱讀 6,419評(píng)論 0 17
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件不脯、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,104評(píng)論 4 62
  • 大家好府怯,我是親楚歌
    秦楚歌閱讀 222評(píng)論 0 0
  • 《866479020881719》
    蛋殼DK閱讀 384評(píng)論 34 0