iOS 圖文混排小知識匯總

參考鏈接：http://www.lxweimin.com/p/0fd782d67efb

1.一張圖片一個文案的

? ?1.1 方案一：可以使用UIbutton

? 適用場景：

建立一個圖文結(jié)合的控件來響應(yīng)用戶手機操作。(產(chǎn)品還希望有一個按鈕按下高亮或者按下陰影效果時,這種方案更合適)

只需要分別調(diào)用UIButton的setTitle:forState:和setImage:forSate:兩個方法就可以實現(xiàn)具有圖片和文字功能的按鈕。

但是系統(tǒng)默認的圖文結(jié)合的按鈕布局是：圖片在左邊而文字在右邊，而且整體水平和垂直居中。比如下面這個圖文按鈕：


其他場景，比如?圖片在右邊而文字在左邊 /? ?圖片在上邊而文字在下面? /??圖片在按鈕的中間而文字在圖片的下面等等。

先分析下 UIbutton的兩個子視圖：UIImageView和UILabel

UIButton*本身就是一個復(fù)合控件，他分別提供了兩個屬性：

@property(nonatomic,readonly,retain)UILabel? ? *titleLabel NS_AVAILABLE_IOS(3_0); -----保存文字

@property(nonatomic,readonly,retain)UIImageView *imageView? NS_AVAILABLE_IOS(3_0); ----保存圖片

需要注意的是這兩個屬性必須要調(diào)用完setTitle:forSate:和setImage:forSate:后才能獲取到，否則有可能會返回nil。

改變按鈕里面圖片和文字的格局，就必須使用另外兩個屬性：

@property(nonatomic)UIEdgeInsets titleEdgeInsets;// default is UIEdgeInsetsZero ---?調(diào)整按鈕中文本的偏移縮進

@property(nonatomic)UIEdgeInsets imageEdgeInsets;// default is UIEdgeInsetsZero ---?圖片的偏移縮進

調(diào)整策略：

在調(diào)整之前我們先定義幾個特定的變量值:

CGRect titleRect = titleLabel.frame;? ? ? ? //文本控件在按鈕中的frame值。

CGRect imageRect = imageView.frame;? //圖片控件在按鈕中的frame值。

CGFloat padding;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //用于指定文本和圖片的間隔值。

CGFloat selfWidth;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //按鈕控件的寬度

CGFloat selfHeight;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //按鈕控件的高度

CGFloat totalHeight=titleRect.size.height+padding+imageRect.size.height;? //圖文上下布局時所占用的總高度，注意這里也算上他們之間的間隔值padding。

我們可以通過更改按鈕的titleEdgeInsets和imageEdgeInsets的值調(diào)整文本和圖片的位置。如果我們想往右移動20的話，那么就應(yīng)該同時設(shè)置UIEdgeInsets的left=20, right=-20，而如果我們想往上移動20的話，那么就應(yīng)該應(yīng)該同時設(shè)置UIEdgeInsets的top=-20,bottom=20。

調(diào)整效果：

1-1?圖片在左，文字在右，整體居中，調(diào)整間距

圖片在左，文字在右，整體居中，設(shè)置間距

這種方式是按鈕默認的圖文布局方式，因為要調(diào)整圖片和文本的間距，所以只需要文本右移padding/2而圖片左移padding/2值就可以了。設(shè)置的代碼為：

titleEdgeInsets=UIEdgeInsetsMake(0,padding/2,0,-padding/2);

imageEdgeInsets=UIEdgeInsetsMake(0,-padding/2,0,padding/2);

1-2?圖片在右，文字在左，整體居中

圖片在右，文字在左，整體居中

要實現(xiàn)這種布局只需要將文字往左偏移圖片的寬度并且再往左偏移padding/2就可以了，而圖片則只需要往右偏移文本的寬度并再往右偏移padding/2就可以了。設(shè)置的代碼為：

titleEdgeInsets=UIEdgeInsetsMake(0,-(imageRect.size.width+padding/2),0,(imageRect.size.width+padding/2));

imageEdgeInsets=UIEdgeInsetsMake(0,(titleRect.size.width+padding/2),0,-(titleRect.size.width+padding/2));

1-3??圖片在上，文字在下，整體居中

這種布局下當圖片和文字要求垂直居中后，新的圖片的頂部位置應(yīng)該等于(selfHeight - totalHeight)/2， 因此垂直需要偏移的值就是新的位置減去原來的位置imageRect.origin.y；而新的圖片的水平中心點要等于selfWidth/2，而原來的圖片的水平中心點等于imageRect.origin.x + imageRect.size.width/2，兩者相減就是水平需要偏移的值。而新的文本的頂部位置應(yīng)該等于新的圖片的頂部位置(selfHeight - totalHeight)/2+ 圖片的高度imageRect.size.height+ 間隔padding,因此垂直需要偏移的值就是新的頂部值減去原來的頂部位置titleRect.origin.y; 而新的文本的水平中心點也是selfWidth/2，而原來的文本的水平中心點是titleRect.origin.x + titleRect.size.width/2， 兩者相減就是水平需要偏移的值，又因為默認的情況下當按鈕比較小時會自動保留圖片的尺寸和將文字部分縮小，因為當我們實現(xiàn)文字和圖片上下布局時，需要將文字的區(qū)域擴展到整個按鈕部分，否則將會縮小按鈕的文字的寬度，因為按鈕的寬度為selfWidth,而文字的默認寬度是titleRect.size.width,所以上面的實現(xiàn)將文本移到中間后還需要分別向兩邊進行拉伸(selfWith - titleRect.size.width)/2來保證文本填充滿所有的按鈕區(qū)域，在下面的各種樣式中凡是文字和圖片垂直居中的情況下都要考慮這種情況設(shè)置的代碼為：

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);

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));

1-4?圖片保持居中，而文字左右居中且頂部距離按鈕頂部

這種布局就是上面的文字和圖片位置調(diào)換，因此設(shè)置代碼為：

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);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));

?1-5 圖片保持居中，而文字左右居中且頂部距離按鈕頂部


這種方式要求圖片在按鈕中居中，而文字則要求左右居中而垂直方向位置則是距離按鈕頂部的間隔值。 上面因為描述了水平居中的調(diào)整，因此這里就不介紹了，只介紹垂直方向的調(diào)整。 因為要求圖片要垂直居中，因此不需要調(diào)整垂直偏移。而文本則要調(diào)整為距離頂部的間隔值，也就是新的文本的頂部值等于padding, 而原來頂部值是titleRect.origin.y，因此只需要偏移titleRect.origin.y - padding就可以了。設(shè)置代碼為：

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);imageEdgeInsets=UIEdgeInsetsMake(0,(selfWidth/2-imageRect.origin.x-imageRect.size.width/2),0,-(selfWidth/2-imageRect.origin.x-imageRect.size.width/2));

六、圖片保持居中，而文字水平居中且底部距離按鈕底部

這種方式要求圖片在按鈕居中，而文字則要求左右居中而垂直方向的底部位置則是距離按鈕底部的間隔值。圖片的調(diào)整上面有介紹，而文字的水平調(diào)整上面也有說到，這里面只說文字的垂直調(diào)整。文字新的底部位置等于selfHeight - padding,? 而舊的底部位置是titleRect.size.height + titleRect.origin.y， 因此要偏移的位置就是兩者相減的值。代碼的設(shè)置為：

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);imageEdgeInsets=UIEdgeInsetsMake(0,(selfWidth/2-imageRect.origin.x-imageRect.size.width/2),0,-(selfWidth/2-imageRect.origin.x-imageRect.size.width/2));

1-7? 圖片保持居中，而文字水平居中并且在圖片的上面

圖片保持居中，而文字水平居中并且在圖片的上面

這種方式要求圖片在按鈕居中，而文字則要求左右居中并且在垂直在圖片的上面并保留出padding的間隔。 圖片的偏移上面有說到，而文字的水平偏移上面也有說到，這里只說垂直偏移，文字新的底部位置等于圖片的頂部位置 -padding而文字老的底部位置等于titleRect.size.height + titleRect.origin.y, 因此兩者的差值就是文字需要垂直偏移的值。代碼設(shè)置為：

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);imageEdgeInsets=UIEdgeInsetsMake(0,(selfWidth/2-imageRect.origin.x-imageRect.size.width/2),0,-(selfWidth/2-imageRect.origin.x-imageRect.size.width/2));

1- 8 圖片保持居中，而文字水平居中并且在圖片的下面

圖片保持居中，而文字水平居中并且在圖片的下面

這種方式要求圖片在按鈕居中，而文字則要求左右居中并且垂直在圖片的下面并保留出padding的間隔。圖片的偏移上面有說到，而文字的水平偏移上面也有說到，這里只說垂直偏移，文字新的頂部位置等于imageRect.origin.y + imageRect.size.height + padding,? 而文字老的頂部位置等于titleRect.origin.y，因此兩者的差值就是文字需要垂直偏移的值。代碼設(shè)置為：

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);imageEdgeInsets=UIEdgeInsetsMake(0,(selfWidth/2-imageRect.origin.x-imageRect.size.width/2),0,-(selfWidth/2-imageRect.origin.x-imageRect.size.width/2));

1-9 圖片在右，文字在左，距離按鈕兩邊邊距

在這種方式中，圖片和文本都是垂直居中對齊，這部分是不需要調(diào)整的，而文本的左邊則需要由原來的titleRect.origin.x移動到左邊padding的位置，而圖片的左邊則需要由原來的imageRect.origin.x移動到selfWidth - padding - imageRect.size.width位置。因此代碼設(shè)置為：

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));

1-10 圖片在左，文字在右，距離按鈕兩邊邊距

這種方式中，圖片和文字的垂直位置不需要調(diào)整，而只需要將圖文的水平位置調(diào)整即可，而調(diào)整的方法和上面的相似，只是圖片移到左邊兒文字移到右邊而已。代碼設(shè)置為：

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));

前面說的的十種圖文結(jié)合樣式，我想應(yīng)該可以滿足您的需求了，如果這些圖文結(jié)合的樣式還是無法滿足您的需求時則您還是別用UIButton了。

為了方便大家的使用，我把上面的圖文結(jié)合樣式整理成了一個UIButton的分類方法，大家可以直接拷貝使用：

頭文件：

//? //? UIButton+ImageTitleStyle.h? //??

針對同時設(shè)置了Image和Title的場景時UIButton中的圖片和文字的關(guān)系

*/typedefNS_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,//圖片在左，文字在右，距離按鈕兩邊邊距};@interfaceUIButton(ImageTitleStyle)/*

調(diào)整按鈕的文本和image的布局，前提是title和image同時存在才會調(diào)整。

padding是調(diào)整布局時整個按鈕和圖文的間隔。


*/-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding;@end

實現(xiàn)文件：

////? UIButton+ImageTitleStyle.m////? Created by 歐陽大哥 on 14-7-13.//#import"UIButton+ImageTitleStyle.h"@implementationUIButton(ImageTitleStyle)-(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){caseButtonImageTitleStyleLeft:if(padding!=0){self.titleEdgeInsets=UIEdgeInsetsMake(0,padding/2,0,-padding/2);self.imageEdgeInsets=UIEdgeInsetsMake(0,-padding/2,0,padding/2);}break;caseButtonImageTitleStyleRight:{//圖片在右，文字在左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;caseButtonImageTitleStyleTop:{//圖片在上，文字在下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;caseButtonImageTitleStyleBottom:{//圖片在下，文字在上。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;caseButtonImageTitleStyleCenterTop:{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;caseButtonImageTitleStyleCenterBottom:{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;caseButtonImageTitleStyleCenterUp:{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;caseButtonImageTitleStyleCenterDown:{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;caseButtonImageTitleStyleRightLeft:{//圖片在右，文字在左，距離按鈕兩邊邊距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;caseButtonImageTitleStyleLeftRight:{//圖片在左，文字在右，距離按鈕兩邊邊距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);}}@end

上面的方法setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding請在建立完UIButton對象并且指定一個具體的frame值或者自動布局的約束尺寸后，并且調(diào)用setTitle:forState:和setImage:forSate:后再調(diào)用：

UIButton*button=[[UIButton alloc]initWithFrame:CGRectMake(0,0,100,100)];[button setTitle:@"測試文本"forState:UIControlStateNormal];[button setImage:[UIImage imageNamed:@"test"]forState:UIControlStateNormal];[button setButtonImageTitleStyle:ButtonImageTitleStyleTop padding:10];

另外如果你想要你的按鈕中的圖片和文字整體的水平居左，或者水平居右，或者垂直居上或者垂直居下則可以用UIButton的原生(UIControl)屬性：

@property(nonatomic)UIControlContentVerticalAlignment contentVerticalAlignment;// how to position content vertically inside control. default is center@property(nonatomic)UIControlContentHorizontalAlignment contentHorizontalAlignment;// how to position content hozontally inside control. default is center

這兩個屬性來設(shè)置按鈕的垂直和水平的整體位置的調(diào)整，

1.2方案二：可以使用UILabel

參考鏈接：http://www.lxweimin.com/p/c0354aa4ca57，http://www.lxweimin.com/p/c0354aa4ca57

1.顯示圖片

效果圖：


NSTextAttachment

用法，看代碼：

NSMutableAttributedString *textAttrStr = [[NSMutableAttributedString alloc] init];

? ? NSTextAttachment *attach = [[NSTextAttachment alloc] init];

? ? attach.image= [UIImageimageNamed:@"aqi"];

? ? attach.bounds=CGRectMake(0,0,30,30);

? ? NSAttributedString *imgStr = [NSAttributedString attributedStringWithAttachment:attach];

? ? [textAttrStrappendAttributedString:imgStr];

? ? NSMutableAttributedString*textAttributedStr = [[NSMutableAttributedStringalloc]initWithString:@"汪汪隊阿奇"attributes:@{NSAttachmentAttributeName: [UIFontsystemFontOfSize:15.0]}];

? ? [textAttrStrappendAttributedString:textAttributedStr];

? ? self.titleLabel.attributedText= textAttrStr;

2.特殊格式

效果圖：


NSBaselineOffsetAttributeName

用法，看代碼：

UIFont *font1 = [UIFont systemFontOfSize:40.0];

? ? UIFont*font2 = [UIFontsystemFontOfSize:20.0];

? ? NSMutableAttributedString *att = [[NSMutableAttributedString alloc] init];

? ? NSMutableAttributedString *att1 = [[NSMutableAttributedString alloc] initWithString:@"20." attributes:@{NSFontAttributeName : font1, NSForegroundColorAttributeName : [UIColor orangeColor]}];

? ? NSMutableAttributedString *att2 = [[NSMutableAttributedString alloc] initWithString:@"00" attributes:@{NSFontAttributeName : font2, NSForegroundColorAttributeName : [UIColor orangeColor]}];

? ? NSAttributedString *att3 = [[NSAttributedString alloc] initWithString:@"%" attributes:@{NSFontAttributeName:font2,NSForegroundColorAttributeName:[UIColor orangeColor],NSBaselineOffsetAttributeName:@15}];

? ? [attappendAttributedString:att1];

? ? [attappendAttributedString:att2];

? ? [attappendAttributedString:att3];

? ? self.titleLabel.attributedText = att;

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,505評論 6贊 533
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,556評論 3贊 418
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,463評論 0贊 376
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,009評論 1贊 312
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,778評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 55,218評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,281評論 3贊 441
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 42,436評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 48,969評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,537評論 5贊 359
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 44,229評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3贊 392
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2贊 374