iOS UIButton的imageEdgeInsets和titleEdgeInsets属性

释放双眼,带上耳机,听听看~!

UIButton内可以设置两个控件,imageView和titleLabel,也就是可以生成一个带有文字和图片(非背景图片)的按钮。默认情况下图片居左,文字居右,他们俩个作为一个整体可以通过UIButton的contentHorizontalAlignment属性设置居左、居右或居中显示(默认居中,如图2-1)。

今天主要讲解UIButton的imageEdgeInsets和titleEdgeInsets属性的使用。以图2-1为例,通过设置这两个属性达到图片文字整体居中,图片居上,文字居下的效果。

 

    button.imageEdgeInsets = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>);
           button.titleEdgeInsets = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>);

 

可以看到这4个参数依次为上、左、下、右。默认都为零,我们可以理解为要移动的偏移量,注意上下和左右是分别对应的,可以设置负值(例如第一个参数上,填正数代表向下移动)。思考分析一下这4个参数应该如何计算,如图2-2。

这里面用到一个方法CGRectGetMidY(<#CGRect rect#>) ;表示得到一个中心点的Y坐标。

如图2-2,以image上移为例,image上下位移量 = 整个btn高度的一半 – image高度的一半 – 间距。这个结果是正值,表示距离下端位移量增大的距离,所以应该填在第三个参数上,取负值表示向上位移的距离,填在第一个参数上。其他以此类推。

废话结束,上代码:

for (int i = 0 ; i < array.count; i++) {
        UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake((btnW + 1) * i, 0, btnW, btnW)];
        [btn setTitle:array[i] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        btn.titleLabel.font = [UIFont systemFontOfSize:10.0f];
        [btn setImage:[UIImage imageNamed:imageArray[i]] forState:UIControlStateNormal];
        //调整按钮上imageView与titlelabel位置
        CGFloat imageUpHeight = CGRectGetMidY(btn.bounds) - CGRectGetMidY(btn.imageView.bounds) - 10;
        CGFloat imageLeftWidth = CGRectGetMidX(btn.bounds) - CGRectGetMidX(btn.imageView.frame);
        CGFloat titleUpHeight = CGRectGetMidY(btn.bounds) - CGRectGetMidY(btn.titleLabel.bounds) - 10;
        CGFloat titleLeftWidth = CGRectGetMidX(btn.bounds) - CGRectGetMidX(btn.titleLabel.frame);
        btn.imageEdgeInsets = UIEdgeInsetsMake(- imageUpHeight, imageLeftWidth, imageUpHeight,  -imageLeftWidth);
        btn.titleEdgeInsets = UIEdgeInsetsMake(titleUpHeight, titleLeftWidth, - titleUpHeight, - titleLeftWidth); 

  }

 

运行后得到预想结果,如图2-3。

再举个例子,思考一下如果要让文字居左,图片居右应如何操作。

这个要比上面的简单很多,因为不需要考虑上下位移,只要左右移动即可。因为image和title的长度之和是不变的,所以只需要将image右移文字长度,title左移图片宽度即可。代码如下:

 

  CGSize titleSize = [array[i] sizeWithFont:btn.titleLabel.font];
        CGFloat imageLeftWidth = titleSize.width;
        CGFloat titleLeftWidth = CGRectGetWidth(btn.imageView.bounds);
        btn.imageEdgeInsets = UIEdgeInsetsMake(0, imageLeftWidth, 0, - imageLeftWidth);
        btn.titleEdgeInsets = UIEdgeInsetsMake(0, - titleLeftWidth, 0, titleLeftWidth);

 

运行得到预想结果,如图2-4。

写博客是希望大家共同交流成长,博主水平有限难免有偏颇不足之处,欢迎批评指正。

 

 

 

人已赞赏
iOS文章

iOS 说明并比较关键词:strong, weak, assign, copy等等

2020-2-23 14:24:11

iOS文章

iOS 类(class)和结构体(struct)有什么区别?

2020-2-23 15:24:10

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索