通過button的titleEdgeInsets和imageEdgeInsets快速實現(xiàn)上下布局

應用場景:

開發(fā)中經(jīng)常需要設置點擊控件時要求圖片文字同時高亮或者變色迂尝,這種情況通常有兩種方式設置闯估,一種是使用兩個控件監(jiān)聽點擊事件去改變這兩個控件的狀態(tài)舟陆,另外也可以使用button去改變其內(nèi)部TitleLabel和ImageView的位置背亥,實現(xiàn)上下和左右的布局般眉,其中左右布局是系統(tǒng)默認的方式,上下布局需要自己去操作布局慎宾。

設置button內(nèi)部控件布局的兩種方式

一、通過自定義button控件浅悉,重寫其中的布局方法


- (CGRect)backgroundRectForBounds:(CGRect)bounds{
    NSLog(@"%f----%f",bounds.size.width,bounds.size.height);
    return bounds;
}

- (CGRect)contentRectForBounds:(CGRect)bounds{
    NSLog(@"%f======%f",bounds.size.width,bounds.size.height);
    return bounds;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect{
    NSLog(@"%f----%f----%f----%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
    CGRect rect = CGRectMake(50, contentRect.origin.y+25, contentRect.size.width-50, 30);
    return rect;
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect{
    NSLog(@"%f====%f====%f====%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
    CGRect rect = CGRectMake(10, contentRect.origin.y+25, 30, 30);

    return rect;
}

方法就不介紹了每個方法的方法名描述的都很清楚趟据,你只需設置想要的frame和bounds返回就可以了。

二术健、第二種方式是通過button內(nèi)部控件的EdgeInsets屬性來設置的汹碱,這個屬性也很常見可以設置其上左下右的值來改變button內(nèi)部label和ImageView的布局

    button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);

我這里提供了一個計算方法可以很快的設置button內(nèi)部控件的上下布局

計算代碼

   ///計算button中心點imageview最大x的差
    CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
    ///button的label中心點減去上面的差值就是label的到button中心點的偏移量
    CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
    ///計算imageview到button中心點的偏移量
    CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
    button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);

Demo代碼

   UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 120, 80)];
    button.backgroundColor = [UIColor yellowColor];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:12.0];
    [button setTitle:@"收藏" forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"button-1"] forState:UIControlStateNormal];

    button.titleLabel.backgroundColor = [UIColor redColor];
    button.imageView.backgroundColor = [UIColor blueColor];
    
    ///計算button中心點imageview最大x的差
    CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
    ///button的label中心點減去上面的差值就是label的到button中心點的偏移量
    CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
    ///計算imageview到button中心點的偏移量
    CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
    button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
    
    [self.view addSubview:button];
}

這里只是計算了imageView和Label的居中 具體的高度沒有計算,所以大家使用時可以自己調(diào)整一下高度問題荞估,如果button寬度顯示不下可以調(diào)整b2的大小例如兩邊減去某個值咳促。

注意點:

使用上面的計算代碼時一定要先設置好圖片和標題稚新,不要先計算后設置,否則拿到的iamgeview和label的size可以為nil導致布局失敗跪腹。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末褂删,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子冲茸,更是在濱河造成了極大的恐慌屯阀,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轴术,死亡現(xiàn)場離奇詭異难衰,居然都是意外死亡,警方通過查閱死者的電腦和手機逗栽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門盖袭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人彼宠,你說我怎么就攤上這事鳄虱。” “怎么了兵志?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵醇蝴,是天一觀的道長。 經(jīng)常有香客問我想罕,道長悠栓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任按价,我火速辦了婚禮惭适,結果婚禮上,老公的妹妹穿的比我還像新娘楼镐。我一直安慰自己癞志,他們只是感情好,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布框产。 她就那樣靜靜地躺著凄杯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪秉宿。 梳的紋絲不亂的頭發(fā)上戒突,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機與錄音描睦,去河邊找鬼膊存。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的隔崎。 我是一名探鬼主播今艺,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼爵卒!你這毒婦竟也來了虚缎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤技潘,失蹤者是張志新(化名)和其女友劉穎遥巴,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體享幽,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡铲掐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了值桩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片摆霉。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖奔坟,靈堂內(nèi)的尸體忽然破棺而出携栋,到底是詐尸還是另有隱情,我是刑警寧澤咳秉,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布婉支,位于F島的核電站,受9級特大地震影響澜建,放射性物質(zhì)發(fā)生泄漏向挖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一炕舵、第九天 我趴在偏房一處隱蔽的房頂上張望何之。 院中可真熱鬧,春花似錦咽筋、人聲如沸溶推。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒜危。三九已至,卻和暖如春睹耐,著一層夾襖步出監(jiān)牢的瞬間舰褪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工疏橄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓捎迫,卻偏偏與公主長得像晃酒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子窄绒,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評論 25 707
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫贝次、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,093評論 4 62
  • 事實上彰导,李墨已經(jīng)失蹤一周時間了但是沒有人發(fā)現(xiàn)他蛔翅,或許是因為他的獨來獨往,亦或是因為人們的平淡冷漠 李墨走過許許多多...
    24e2f6668318閱讀 537評論 0 0
  • 曾經(jīng)有人說: 馬氏家族終將統(tǒng)一天下,商界有馬云馬化騰掏父、體育界有馬拉多納笋轨、思想界有馬克思、文學界有馬克吐溫…... ...
    蝸牛慢生活閱讀 1,589評論 1 20
  • 數(shù)學是難的。有三個方面的原因陶缺。 第一:學習數(shù)學的中樞是人大腦的痛苦中樞钾挟。也就是說,感受針刺這樣的疼痛與處理數(shù)字是同...
    aubell閱讀 15,480評論 3 5