UIButton实现各种图文排版

作者: 木马不在转 | 来源:发表于2016-11-22 11:11 被阅读167次

UIButton实现各种图文排版
UIButton实现各种图文结合的效果以及原理
iOS - UIButton的特殊用法
UIKit-NSAttributedString一篇全
iOS中UIButton实现各种图文结合的效果以及原理
图文排版
iOS中NSAttributedString 的21种属性详细介
新媒体学习小记
UIButton图文布局
uibutton 图文上下

头文件 .h ：

//
//  UIButton+ImageTitleStyle.h
//  blockDemo
//
//  Created by 王小x on 2016/11/22.
//  Copyright © 2016年 王小x. All rights reserved.
//
# import <UIKit/UIKit.h>
/*
 针对同时设置了Image和Title的场景时UIButton中的图片和文字的关系
*/
typedef NS_ENUM(NSInteger, ButtonImageTitleStyle ) {
   ButtonImageTitleStyleDefault = 0,       //图片在左，文字在右，整体居中。
   ButtonImageTitleStyleLeft  = 0,         //图片在左，文字在右，整体居中。
   ButtonImageTitleStyleRight     = 2,     //图片在右，文字在左，整体居中。
   ButtonImageTitleStyleTop  = 3,          //图片在上，文字在下，整体居中。
   ButtonImageTitleStyleBottom    = 4,     //图片在下，文字在上，整体居中。
   ButtonImageTitleStyleCenterTop = 5,     //图片居中，文字在上距离按钮顶部。
   ButtonImageTitleStyleCenterBottom = 6,  //图片居中，文字在下距离按钮底部。
   ButtonImageTitleStyleCenterUp = 7,      //图片居中，文字在图片上面。
   ButtonImageTitleStyleCenterDown = 8,    //图片居中，文字在图片下面。
   ButtonImageTitleStyleRightLeft = 9,     //图片在右，文字在左，距离按钮两边边距
   ButtonImageTitleStyleLeftRight = 10,    //图片在左，文字在右，距离按钮两边边距
};
@interface UIButton (ImageTitleStyle)
/*
 调整按钮的文本和image的布局，前提是title和image同时存在才会调整。
padding是调整布局时整个按钮和图文的间隔。
*/
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:  (CGFloat)padding;
@end

实现文件 .m :

 -(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding {
if (self.imageView.image != nil && self.titleLabel.text != nil) {   //先还原
    self.titleEdgeInsets = UIEdgeInsetsZero;
    self.imageEdgeInsets = UIEdgeInsetsZero;
    
    CGRect imageRect = self.imageView.frame;
    CGRect titleRect = self.titleLabel.frame;
    
    CGFloat totalHeight = imageRect.size.height + padding + titleRect.size.height;
    CGFloat selfHeight = self.frame.size.height;
    CGFloat selfWidth = self.frame.size.width;
    
    switch (style) {
        case ButtonImageTitleStyleLeft:
            if (padding != 0)
            {
                self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                        padding/2,
                                                        0,
                                                        -padding/2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        -padding/2,
                                                        0,
                                                        padding/2);
            }
            break;
        case ButtonImageTitleStyleRight:
        {
            //图片在右，文字在左
            self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                    -(imageRect.size.width + padding/2),
                                                    0,
                                                    (imageRect.size.width + padding/2));
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    (titleRect.size.width+ padding/2),
                                                    0,
                                                    -(titleRect.size.width+ padding/2));
        }
            break;
        case ButtonImageTitleStyleTop:
        {
            //图片在上，文字在下
            self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
                                                    (selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2,
                                                    -((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
                                                    -(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2);
            
            self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
                                                    (selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
                                                    -((selfHeight - totalHeight)/2 - imageRect.origin.y),
                                                    -(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
            
        }
            break;
        case ButtonImageTitleStyleBottom:
        {
            //图片在下，文字在上。
            self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
                                                    (selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                    -((selfHeight - totalHeight)/2 - titleRect.origin.y),
                                                    -(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
            
            self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
                                                    (selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
                                                    -((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
                                                    -(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
        }
            break;
        case ButtonImageTitleStyleCenterTop:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y - padding),
                                                    (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                    (titleRect.origin.y - padding),
                                                    -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                    0,
                                                    -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
        }
            break;
        case ButtonImageTitleStyleCenterBottom:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
                                                    (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                    -(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
                                                    -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                    0,
                                                    -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
        }
            break;
        case ButtonImageTitleStyleCenterUp:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
                                                    (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                    (titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
                                                    -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                    0,
                                                    -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
        }
            break;
        case ButtonImageTitleStyleCenterDown:
        {
            self.titleEdgeInsets = UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
                                                    (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                    -(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
                                                    -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                    0,
                                                    -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
        }
            break;
        case ButtonImageTitleStyleRightLeft:
        {
            //图片在右，文字在左，距离按钮两边边距
            
            self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                    -(titleRect.origin.x - padding),
                                                    0,
                                                    (titleRect.origin.x - padding));
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    (selfWidth - padding - imageRect.origin.x - imageRect.size.width),
                                                    0,
                                                    -(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
        }
            
            break;
            
        case ButtonImageTitleStyleLeftRight:
        {
            //图片在左，文字在右，距离按钮两边边距
            
            self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                    (selfWidth - padding - titleRect.origin.x - titleRect.size.width),
                                                    0,
                                                    -(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
            
            self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                    -(imageRect.origin.x - padding),
                                                    0,
                                                    (imageRect.origin.x - padding));
            
            
            
        }
            break;
        default:
            break;
    }
}
else {
    self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
}}

UIButton实现各种图文排版
头文件 .h ：实现文件 .m :
UIButton实现各种图文结合的效果以及原理
iOS的UIButton是一个非常常见而且常用的控件，我们一般用他来实现某个功能的提交以及选择操作。我们可以建立只...
iOS - UIButton的特殊用法
在此主要介绍UIButton的一些特殊用法：UIButton的图片与文字排版，UIButton的UIControl...
UIKit-NSAttributedString一篇全
NSAttributedString介绍 NSAttributedString 可以非常方便的实现文字排版和图文混...
iOS中UIButton实现各种图文结合的效果以及原理
iOS的UIButton是一个非常常见而且常用的控件，我们一般用他来实现某个功能的提交以及选择操作。我们可以建立只...
图文排版
iOS中NSAttributedString 的21种属性详细介
NSAttributedString 可以非常方便的实现文字排版和图文混排功能. 共有21种效果(API), 本文...
新媒体学习小记
微信图文编辑排版了解图文排版工具微信图文排版工具简介秀米、（字间距1，行间距2，段落为8像素，两端对齐，字号...
UIButton图文布局
关于实现UIButton的上图下文、上文下图、左图右文、右图左文的布局需求，我也尝试过扩展分类使用EdgeInse...
uibutton 图文上下
#if __IPHONE_OS_VERSION_MIN_REQUIRED >= 70000#define SS_S...