UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目前主要用两种方式,一种就是重写按钮,另一种就是通过setTitleEdgeInsets和setImageEdgeInsets方法解决 下图是按钮默认情况下的图文布局 左边文本,右边图片 - (void)layoutSubviews
{ [super layoutSubviews];
CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(30, 30);
imageRect.origin.x = (self.frame.size.width - 30) ;
imageRect.origin.y = (self.frame.size.height - 30)/2.0f;
CGRect titleRect = self.titleLabel.frame;
titleRect.origin.x = (self.frame.size.width - imageRect.size.width- titleRect.size.width);
titleRect.origin.y = (self.frame.size.height - titleRect.size.height)/2.0f;
self.imageView.frame = imageRect; self.titleLabel.frame = titleRect;
} 效果如下: 上面图片,下面文本 - (void)layoutSubviews{
[super layoutSubviews]; CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(30, 30);
imageRect.origin.x = (self.frame.size.width - 30) * 0.5;
imageRect.origin.y = self.frame.size.height * 0.5 - 40; CGRect titleRect = self.titleLabel.frame;
titleRect.origin.x = (self.frame.size.width - titleRect.size.width) * 0.5;
titleRect.origin.y = self.frame.size.height * 0.5 ; self.imageView.frame = imageRect; self.titleLabel.frame = titleRect;
} 效果如下: 另一种方法就是通过setTitleEdgeInsets和setImageEdgeInsets方法解决 UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(50, 100, 80, 40);
[btn1 setImage:[UIImage imageNamed:@'icon_shouye'] forState:UIControlStateNormal];
[btn1 setTitle:@'首页' forState:UIControlStateNormal];
[btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn1.backgroundColor = [UIColor redColor]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(50, 50, 80, 40);
[btn setImage:[UIImage imageNamed:@'icon_shouye'] forState:UIControlStateNormal];
[btn setTitle:@'首页' forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor]; //上左下右
btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.frame.size.width - btn.imageView.frame.origin.x - btn.imageView.frame.size.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, -(btn.frame.size.width - btn.imageView.frame.size.width ), 0, 0);
[self.view addSubview:btn1];
[self.view addSubview:btn]; 完全颠倒的效果 上面图片下面文本 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(50, 50, 80, 60);
[btn setImage:[UIImage imageNamed:@'icon_shouye'] forState:UIControlStateNormal];
[btn setTitle:@'首页的事' forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor];
btn.imageEdgeInsets = UIEdgeInsetsMake(- (btn.frame.size.height - btn.titleLabel.frame.size.height- btn.titleLabel.frame.origin.y),(btn.frame.size.width -btn.titleLabel.frame.size.width)/2.0f -btn.imageView.frame.size.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(btn.frame.size.height-btn.imageView.frame.size.height-btn.imageView.frame.origin.y, -btn.imageView.frame.size.width, 0, 0);
[self.view addSubview:btn]; 效果图: 关于setTitleEdgeInsets和setImageEdgeInsets下面进行一些解释: 显示格式区分: 想改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。对titleLabel和imageView设置偏移是针对他当前的位置起作用的,并不是针对距离button边框的距离的。 typedefNS_ENUM(NSInteger, UIControlContentHorizontalAlignment) { 想两改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。需要注意的是,对titleLabel和imageView设置偏移,是针对它当前的位置起作用的,并不是针对它距离button边框的距离的。感觉设置不设置UIControlContentHorizontalAlignmentCenter居中都没有影响,这个网上也找了些相关的信息,感觉都没有说到重点,我这里也没有完全理解透彻,之前都是在设置setTitleEdgeInsets和setImageEdgeInsets这些参数时都是不停的尝试得到的结果。目前这是我理解后,代码实现最后的答案,希望可以帮到大家。 文章转自 Migi000的简书
|
|