iOS 将系统自带的button改装成上图片下文字的样子

2025-05-29 0 109

经常会用到上面是图片,下面是文字的button。这样的控件可以自定义,但是偶然发现一个直接对系统button进行图片与位置的重新layout实现同样效果的代码,最后使用的按钮是这样的:

iOS 将系统自带的button改装成上图片下文字的样子

代码是通过继承uibutton,然后再重写layoutsubviews方法,对自带的图片和titlelabel进行重新的layout,代码如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46
//

// zzzupdownbutton.h

//

// copyright © 2016年 george. all rights reserved.

//

/**

* 这个button是系统button变成上面图片,下面文字的样子

*/

#import <uikit/uikit.h>

@interface zzzupdownbutton : uibutton

@end

//

// zzzupdownbutton.m

//

// copyright © 2016年 george. all rights reserved.

//

#import "zzzupdownbutton.h"

@implementation zzzupdownbutton

// 加载xib都会先走这个方法

- (void)awakefromnib {

[super awakefromnib];

// 可以在这里对button进行一些统一的设置

self.titlelabel.textalignment = nstextalignmentcenter;

self.titlelabel.numberoflines = 0;

}

// 在重新layout子控件时,改变图片和文字的位置

- (void)layoutsubviews {

[super layoutsubviews];

// 图片上限靠着button的顶部

cgrect tempimageviewrect = self.imageview.frame;

tempimageviewrect.origin.y = 0;

// 图片左右居中,也就是x坐标为button宽度的一半减去图片的宽度

tempimageviewrect.origin.x = (self.bounds.size.width - tempimageviewrect.size.width) / 2;

self.imageview.frame = tempimageviewrect;

cgrect templabelrect = self.titlelabel.frame;

// 文字label的x靠着button左侧(或距离多少)

templabelrect.origin.x = 20;

// y靠着图片的下部

templabelrect.origin.y = self.imageview.frame.size.height;

// 宽度与button一致,或者自己改

templabelrect.size.width = self.bounds.size.width - 40;

// 高度等于button高度减去上方图片高度

templabelrect.size.height = self.bounds.size.height - self.imageview.frame.size.height;

self.titlelabel.frame = templabelrect;

}

@end

以上所述是小编给大家介绍的ios 将系统自带的button改装成上图片下文字的样子,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS 将系统自带的button改装成上图片下文字的样子 https://www.kuaiidc.com/91274.html

相关文章

发表评论
暂无评论