uibutton

UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片。给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示。它们两个做为一个整体依赖于button的contentHorizontalAlignment居左居右或居中显示。

    1.当button.width < image.width时,只显示被压缩后的图片,图片是按fillXY的方式压缩。

    2.当button.width > image.width,且 button.width < (image.width + text.width)时,图片正常显示,文本被压缩。

    3.当button.width > (image.width + text.width),两者并列默认居中显示,可通过button的属性contentHorizontalAlignment改变对齐方式。

    4.想两改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。需要注意的是,对titleLabel和imageView设置偏移,是针对它当前的位置起作用的,并不是针对它距离button边框的距离的。

下面是测试结果,效果为图片靠右,文字在图片的左边,紧挨着图片

        UIButton *btAccount = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 104/2, 64/2)];
        UIImage *image = [UIImage TSimageNamed:@"commen_button_personalcernter.png"];
        [btAccount setImage:image forState:UIControlStateNormal];
        [btAccount setTitle:NSLocalizedString(@"菜单", @"'") forState:UIControlStateNormal];
        [btAccount setTitleColor:[UIColor colorWithHexString:@"c0c0c0"] forState:UIControlStateNormal];
        CGSize strSize = [NSLocalizedString(@"菜单", @"") sizeWithFont:btAccount.titleLabel.font];
        [btAccount setImageEdgeInsets:UIEdgeInsetsMake(0, btAccount.frame.size.width - 0 - image.size.width, 0, (0 - strSize.width))];
        
        CGFloat titleRightInset = btAccount.frame.size.width - 10 - strSize.width;
        if (titleRightInset < 10 + image.size.width) {
            titleRightInset = 10 + image.size.width;
        }
        
        [btAccount setTitleEdgeInsets:UIEdgeInsetsMake(0, (btAccount.frame.size.width-image.size.width-strSize.width)-image.size.width, 0, image.size.width)];
        [btAccount addTarget:self action:@selector(onHitAccount:) forControlEvents:UIControlEventTouchUpInside];
        UIBarButtonItem *btItemAccount = [[UIBarButtonItem alloc]initWithCustomView:btAccount];
        
        self.navigationItem.leftBarButtonItem = btItemAccount;

下面说一下个人的理解

image的左侧距离btAccount的左侧的距离为按钮的宽度减去图片的宽度 ,就是btAccount.frame.size.width - 0 - image.size.width,这里的0可以修改为图片距离右侧的距离。

图片的右侧距离btAcount的右侧的距离的计算方式就不是只考虑图片了,而是需要考虑如下原则:

设置edgeInsets要始终记住的一个原则是:将label和imageView看成一个整体,imageView在前,label在后,中间没有空隙。

那么需要假想图片的右侧还有label,则(image+label)整体的右侧距离btAccount右侧的距离计算方式就是0-strSize.width,因为image的右侧与btAccount的右侧对齐。

所以:

        [btAccount setImageEdgeInsets:UIEdgeInsetsMake(0, btAccount.frame.size.width - 0 - image.size.width, 0, (0 - strSize.width))];


label的右侧距离btAccount的右侧的距离为image.size.width,因为label的右侧需要保留位置给image进行显示。


label的左侧距离btAccount的左侧的距离的计算方式与image的右侧距离计算方式同理,具体如下:

label左侧距离btAccount的左侧的距离为

labelLeftMargin = btAccount.frame.size.width-image.size.width-strSize.width, 

假想label的左侧还有image,则(image+label)的整体的左侧距离btAccount的左侧的距离计算方式就是:

labelLeftMargin-image.size.width,则就是

        [btAccount setTitleEdgeInsets:UIEdgeInsetsMake(0, (btAccount.frame.size.width-image.size.width-strSize.width)-image.size.width, 0, image.size.width)];

总结一下:设置图片的imageEdgeInsets的距离右侧的距离的时候,需要考虑(image+label)整体距离右侧的距离,设置label的labelEdgeInset的距离左侧的距离的事后,需要考虑(image+label)整体距离左侧的距离。




第二种方法:容易理解


[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, image.size.width)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];

uibutton默认是左图片,右文字。并且在设置edge insets之前,位置已经有了设定。所以设置title的edge insets,真实的作用是在原来的边距值基础上增加或减少某个间距,负值便是减少。以title为例,设置右边距增加图片宽度,就使得自己的右边界距离按钮的右边界多了图片的宽度,正好放下图片。此时,title lable变小了,而title lable的左边界还在原来的位置上,所以lable的左边界距离按钮的左边界减少图片的宽度,lable就和原来一样大了,而且左侧起始位置和图片的左侧起始位置相同了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值