自定義按鈕UIControl

寫在前面

#圖標(biāo)和文字在一起是開發(fā)難免的問題，系統(tǒng)的按鈕默認(rèn)是圖片居左的文字居右的， 且圖片和文字的距離不好調(diào)整，圖片的位置更是讓人頭疼， 故在閑暇之余封裝了一個控件。 復(fù)制代碼

所用到知識的

# 1、蘋果系統(tǒng)自帶的自動布局，減少第三方的依賴 # 2、kvo監(jiān)聽UIControl的狀態(tài) # 3、富文本的使用，如何更新約束，如何獲取一段文字的寬高復(fù)制代碼

先看看效果

擁有功能

1、任意調(diào)整圖片和文字的間距。 2、圖片的位置可以放置在上下左右不同位置。 3、支持富文本，自定義布局，高亮和選中狀態(tài)。 復(fù)制代碼

如何使用

/**自定義按鈕初始化方法@param image 默認(rèn)的圖片@param title 標(biāo)題@param titleFond 標(biāo)題大小@param imageMargin 標(biāo)題與圖標(biāo)的距離@param imageAlignmentTYpe 圖片的顯示類型@return 自定義按鈕的實例*/ - (instancetype)initWithImage:(UIImage *) imagetitle:(NSString *) titletitleFond:(UIFont *) titleFondimageMargin:(CGFloat) imageMarginimageAlignmentTYpe:(MyButtonImageAlignmentTYpe )imageAlignmentTYpe;_myButton = [[MyButton alloc]initWithImage:[UIImage imageNamed:@"cache_pause"]title:@"來點我啊"titleFond:[UIFont systemFontOfSize:14]imageMargin:10imageAlignmentTYpe:MyButtonImageAlignmentLeft];[self.view addSubview:_myButton];self.myButton.frame = CGRectMake(20, 100, 120, 40);self.myButton.backgroundColor = UIColor.grayColor;[self.myButton setImage:[UIImage imageNamed:@"cache_delete"] withState:UIControlStateSelected];[self.myButton setImage:[UIImage imageNamed:@"cache_pause"] withState:UIControlStateHighlighted];[self.myButton setTitle:@"選中了" withState:UIControlStateSelected];[self.myButton setTitle:@"正在按下..." withState:UIControlStateHighlighted];[self.myButton setTitleColor:UIColor.blueColor withState:UIControlStateSelected];[self.myButton setTitleColor:UIColor.yellowColor withState:UIControlStateHighlighted];這樣就可以了，和普通的按鈕用法一樣。復(fù)制代碼

關(guān)鍵代碼

1、自定義布局（只列出了一種） //圖片居左 - (void)setImageLeftLayoutConstraint {CGFloat imageWidth = self.normalImage.size.width;CGFloat titleWidth = [self sizeWithText:self.titleLabel.text font:self.titleLabel.font].width;CGFloat imageCenterXMargin = (imageWidth /2.0 - (imageWidth + titleWidth + self.imageMargin) / 2.0);//創(chuàng)建Image約束NSLayoutConstraint *imageCenterYLc = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];NSLayoutConstraint *imageCenterXLc = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:imageCenterXMargin];[self addConstraints:@[imageCenterYLc,imageCenterXLc]];//創(chuàng)建title約束NSLayoutConstraint *titleCenterYLc = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];NSLayoutConstraint *titleLeftLc = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.imageView attribute:NSLayoutAttributeRight multiplier:1.0 constant:self.imageMargin];[self addConstraints:@[titleCenterYLc,titleLeftLc]]; }//獲取文字的寬高 - (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font {NSDictionary *attrs = @{NSFontAttributeName : font};return [text boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size; }//kvo監(jiān)聽 - (void)addObserver {[self addObserver:selfforKeyPath:@"enabled"options: NSKeyValueObservingOptionNewcontext:nil];[self addObserver:selfforKeyPath:@"selected"options: NSKeyValueObservingOptionNewcontext:nil];[self addObserver:selfforKeyPath:@"highlighted"options: NSKeyValueObservingOptionNewcontext:nil];[self.titleLabel addObserver:selfforKeyPath:@"text"options:NSKeyValueObservingOptionNewcontext:nil]; }//kvo 監(jiān)聽處理（只列出了部分） - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {if ([keyPath isEqualToString:@"selected"]) {if(self.selected) {self.imageView.image = self.selectedImage ? self.selectedImage : self.normalImage;self.backgroundColor = self.selectedBackgroundColor ? self.selectedBackgroundColor : self.normalBackgroundColor;if (!self.selectedTitleAttribute && !self.normalTitleAttribute) {self.titleLabel.text = self.selectedTitle ? self.selectedTitle : self.normalTitle;self.titleLabel.textColor = self.selectedTitleColor ? self.selectedTitleColor : self.normalTitleColor;return;}self.titleLabel.attributedText = self.selectedTitleAttribute ? self.selectedTitleAttribute : self.normalTitleAttribute;} else {self.imageView.image = self.normalImage;self.backgroundColor = self.normalBackgroundColor;if (!self.normalTitleAttribute) {self.titleLabel.text = self.normalTitle;self.titleLabel.textColor = self.normalTitleColor;return;}self.titleLabel.attributedText = self.normalTitleAttribute;}} //監(jiān)聽到字體變化，更新自動布局if ([keyPath isEqualToString:@"text"]) {[self removeConstraints:self.constraints];[self.superview layoutIfNeeded];[self updateConstraints:self.imageAlignmentTYpe];[self.superview layoutIfNeeded];} 復(fù)制代碼

以上只是部分代碼，詳細(xì)代碼請查看

歡迎查看MyApp

自定義按鈕 https://github.com/dudongge/MyApp

如果對您有幫助，請不吝star一下

總結(jié)

以上是生活随笔為你收集整理的自定义按钮 图片标题位置随意放置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。