前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【IOS开发基础系列】UIButton专题

【IOS开发基础系列】UIButton专题

作者头像
江中散人_Jun
发布2023-10-16 11:40:56
2530
发布2023-10-16 11:40:56
举报

1 使用技巧

1.1 样式技巧

1.1.1 圆角边框

1. UITextField四周的圆角

//需要导入框架QuartzCore.framework,并且在当前类中引用#import

textField.layer.cornerRadius = 5.0    

1.1.2 边框颜色

self.layer.borderWidth = 1.0f;      //边框宽度

self.layer.borderColor = [[UIColor colorWithRed:213.0/255 green:213.0/255 blue:213.0/255 alpha:1.0] CGColor];  //边框颜色

1.1.3 文字设置

无法显示:

self.titleLabel.text = [NSString stringWithFormat:@"%d积分",_scoreValue];

正确显示:

[self setTitle:[NSString stringWithFormat:@"%d积分",_scoreValue] forState:UIControlStateNormal];

1.1.4 文字图片同时显示

UIButton上的图片和文字位置调整

http://blog.csdn.net/yongyinmg/article/details/8566365

UIButton中setTitleEdgeInsets和setImageEdgeInsets的使用

http://my.oschina.net/u/1781028/blog/406683

1.1.5 高亮背景色设置

UIButton设置高亮状态下的背景色【原创】

http://blog.it985.com/11543.html

    1,通过按钮的事件来设置背景色

- (void)viewDidLoad {

    [super viewDidLoad];

    UIButton *button1 = [[UIButton alloc]  initWithFrame: CGRectMake(50, 200, 100, 50)];

    [button1 setTitle: @"button1" forState: UIControlStateNormal];

    button1.backgroundColor = [UIColor orangeColor];

    [button1 addTarget: self action: @selector(buttonBackGroundHighlighted:)  forControlEvents: UIControlEventTouchDown];

    [button1 addTarget: self action: @selector(buttonBackGroundNormal:)  forControlEvents: UIControlEventTouchUpInside];

    [self.view addSubview: button1];

}

// button普通状态下的背景色

- (void) buttonBackGroundNormal:(UIButton  *)sender

{

    sender.backgroundColor = [UIColor orangeColor];

}

// button高亮状态下的背景色

- (void)buttonBackGroundHighlighted:(UIButton  *)sender

{

    sender.backgroundColor = [UIColor greenColor];

}

    2, 通过把颜色转换为UIImage来作为按钮不同状态下的背景图片

- (void) viewDidLoad {

    [super viewDidLoad];

    UIButton *button2 = [[UIButton alloc]  initWithFrame: CGRectMake(170, 200, 100, 50)];

    [button2 setTitle: @"button2" forState: UIControlStateNormal];

    [button2 setBackgroundImage: [selfimageWithColor: [UIColor redColor]] forState: UIControlStateNormal];

    [button2 setBackgroundImage: [self imageWithColor: [UIColor grayColor]] forState: UIControlStateHighlighted];

    [self.view addSubview: button2];

}

//  颜色转换为背景图片

- (UIImage  *) imageWithColor:(UIColor *)color {

    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);

    UIGraphicsBeginImageContext(rect.size);

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color  CGColor]);

    CGContextFillRect(context, rect);

    UIImage *image =  UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

return image;

}

1.1.6 设置button上的文字和图片上下垂直居中对齐
1.1.6.1 网上代码1

iOS - UIButton(UIEdgeInsets)/设置button上的文字和图片上下垂直居中对齐

http://doc.okbase.net/willingYaTou/archive/38295.html

在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets、titleEdgeInsets、imageEdgeInsets

@property(nonatomic) UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default isUIEdgeInsetsZero

// default is UIEdgeInsetsZero

@property(nonatomic) UIEdgeInsets titleEdgeInsets;                

//default is NO. if YES, shadow reverses to shift between engrave and emboss appearance

@property(nonatomic) BOOL reversesShadowWhenHighlighted; 

@property(nonatomic) UIEdgeInsets imageEdgeInsets;        // default is UIEdgeInsetsZero

UIEdgeInsetsMake

        里面的四个参数表示距离上边界、左边界、下边界、右边界的距离,默认都为零,title/image在button的正中央。

UIKIT_STATIC_INLINE UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloatleft, CGFloat bottom, CGFloat right) {

    UIEdgeInsets insets = {top,left, bottom, right};

    return insets;

}

 self.view.backgroundColor =[UIColor blackColor];

UIButton *button = [UIButton buttonWithType: UIButtonTypeCustom];     //button的类型

button.frame = CGRectMake(100,100,90, 90);    //button的frame

button.backgroundColor = [UIColor cyanColor];    //button的背景颜色

// [button setBackgroundImage: [UIImage imageNamed: @"man_64.png"] forState: UIControlStateNormal];

// 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets、titleEdgeInsets、imageEdgeInsets

[button setImage: [UIImage imageNamed: @"IconHome@2x.png"] forState: UIControlStateNormal];

//设置image在button上的位置(上top,左left,下bottom,右right)这里可以写负值,对上写-5,那么image就象上移动5个像素

button.imageEdgeInsets = UIEdgeInsetsMake(5, 13, 21, button.titleLabel.bounds.size.width);

[button setTitle: @"首页" forState: UIControlStateNormal];     //设置button的title

button.titleLabel.font = [UIFont systemFontOfSize: 16];    //title字体大小

button.titleLabel.textAlignment= NSTextAlignmentCenter;    //设置title的字体居中

[button setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; 

[button setTitleColor: [UIColor grayColor] forState: UIControlStateHighlighted];    

button.titleEdgeInsets = UIEdgeInsetsMake(71, -button.titleLabel.bounds.size.width-50, 0, 0);//设置title在button上的位置(上top,左left,下bottom,右right)

[button addTarget: self action: @selector(tap) forControlEvents: UIControlEventTouchUpInside];

[self.view addSubview: button];

//button相应的事件

- (void) tap {

    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle: @"hello" message: @"willingseal" delegate: self cancelButtonTitle: @"ok" otherButtonTitles: nil];

    [alertView show];

}

效果图:我这里使用的image是64*64的

1.1.6.2 网上代码2

iOS UIButton设置图片文字垂直排列

http://my.oschina.net/sayonala/blog/198376

      经过一下午的查阅资料及尝试,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,最开始采用了网上比较多的做法,做法如下:

@interface UIButton (UIButtonExt) 

- (void) centerImageAndTitle: (float) space; 

- (void) centerImageAndTitle; 

@end 

@implementation UIButton (UIButtonExt) 

- (void)centerImageAndTitle: (float) spacing 

{     

    // get the sizeof the elements here for readability 

    CGSizeimageSize = self.imageView.frame.size; 

    CGSizetitleSize = self.titleLabel.frame.size; 

    // get the height they will take up as a unit 

    CGFloattotalHeight = (imageSize.height + titleSize.height + spacing); 

    // raise the image and push it right to center it 

    self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight -imageSize.height), 0.0, 0.0, - titleSize.width); 

    // lower the text and push it left to center it 

    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, -(totalHeight - titleSize.height),0.0);     

- (void) centerImageAndTitle 

    const intDEFAULT_SPACING = 6.0f; 

    [self centerImageAndTitle: DEFAULT_SPACING]; 

 } 

@end

        后面经过测试,如果button的文字长度变更,会导致图片位置变化,经过多次修改UIEdgeInsets的值也没有达到期望效果,最终采用集成UIButton类,重写layoutSubviews函数实现,特将成果记录一下,以便后续查阅。

1.1.6.3 正式开发用代码

-(void) setButtonContentCenter: (UIButton*) btn

{

    CGSize imgViewSize, titleSize, btnSize;

    UIEdgeInsets imageViewEdge, titleEdge;

    CGFloat heightSpace = 10.0f;

    //设置按钮内边距

    imgViewSize = btn.imageView.bounds.size;

    titleSize = btn.titleLabel.bounds.size;

    btnSize = btn.bounds.size;

    imageViewEdge =UIEdgeInsetsMake(heightSpace,0.0, btnSize.height - imgViewSize.height - heightSpace, - titleSize.width);

    [btn setImageEdgeInsets: imageViewEdge];

    titleEdge = UIEdgeInsetsMake(imgViewSize.height + heightSpace, - imgViewSize.width, 0.0, 0.0);

    [btn setTitleEdgeInsets: titleEdge];

}

2参考链接

iOS - UIButton(UIEdgeInsets)/设置button上的文字和图片上下垂直居中对齐

http://doc.okbase.net/willingYaTou/archive/38295.html

UIButton的titleEdgeInsets和imageEdgeInsets属性

http://blog.csdn.net/worldzhy/article/details/41284157

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 使用技巧
    • 1.1 样式技巧
      • 1.1.1 圆角边框
      • 1.1.2 边框颜色
      • 1.1.3 文字设置
      • 1.1.4 文字图片同时显示
      • 1.1.5 高亮背景色设置
      • 1.1.6 设置button上的文字和图片上下垂直居中对齐
  • 2参考链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档