Button的上下圖文混排
先看效果
如何設定的公式是:
上面公式的測試demo:
程式碼如下:
/*
* * * * * * *** * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * *
* * * ***** * * * * * * * * * * * * * * * * * * * *
* ** * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * *
*/
/*
本demo的圖片使用 Assets.xcassets 進行管理。
*/
// ViewController.m
// 按鈕的圖文混排
//
// Created by MAC on 16/9/26.
// Copyright © 2016年 NetworkCode小賤. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
/*
我們正常使用button顯示一個圖片
[self showButtonImage];
我們正常使用button顯示一個文字
[self showButtonText];
我們進行正常的圖文組合
[self showButton_Image_Text];
我想圖片在右邊的組合
[self showButton_Text_Image];
*/
/* 我們進行測試*/
[selftestButtonS];
// Do any additional setup after loading the view, typically from a nib.
}
#pragma mark 只顯示圖片
-(void)showButtonImage{
/* 初始化物件*/
UIButton * ImageBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];
/* 設定大小*/
ImageBtn.frame = CGRectMake(0, 0, 50, 50);
ImageBtn.center = CGPointMake(self.view.center.x, self.view.center.y);
/* 設定圖片*/
[ImageBtn setImage:[UIImageimageNamed:@"btn_0"] forState:UIControlStateNormal];
/* 為按鈕設定顏色*/
ImageBtn.backgroundColor = [UIColorblueColor];
/* 進行渲染*/
[self.viewaddSubview:ImageBtn];
}
#pragma mark 只顯示圖片
-(void)showButtonText{
/* 初始化物件*/
UIButton * TextBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];
/* 設定大小*/
TextBtn.frame = CGRectMake(0, 0, 60, 50);
TextBtn.center = CGPointMake(self.view.center.x, self.view.center.y);
/* 設定文字*/
[TextBtn setTitle:@"成功QQ吧"forState:UIControlStateNormal];
/*設定文字的顏色*/
[TextBtn setTitleColor:[UIColorredColor] forState:UIControlStateNormal];
/* 為按鈕設定顏色*/
TextBtn.backgroundColor = [UIColorblueColor];
/* 進行文字的大小適配*/
TextBtn.titleLabel.adjustsFontForContentSizeCategory = YES;
/* 讓文字適合指定大小範圍*/
TextBtn.titleLabel.adjustsFontSizeToFitWidth = YES;
/* 進行渲染*/
[self.viewaddSubview:TextBtn];
}
#pragma mark 按鈕的圖文混合
-(void)showButton_Image_Text{
UIButton * Button_Image_Text = [UIButtonbuttonWithType:UIButtonTypeCustom];
/* 設定大小*/
Button_Image_Text.frame = CGRectMake(0, 0, 120, 50);
Button_Image_Text.center = CGPointMake(self.view.center.x, self.view.center.y);
/* 設定圖片*/
[Button_Image_Text setImage:[UIImageimageNamed:@"btn_1"] forState:UIControlStateNormal];
/* 設定文字*/
[Button_Image_Text setTitle:@"成功QQ吧"forState:UIControlStateNormal];
/*設定文字的顏色*/
[Button_Image_Text setTitleColor:[UIColorredColor] forState:UIControlStateNormal];
/* 為按鈕設定顏色*/
Button_Image_Text.backgroundColor = [UIColorblueColor];
/* 進行文字的大小適配*/
Button_Image_Text.titleLabel.adjustsFontForContentSizeCategory = YES;
/* 讓文字適合指定大小範圍*/
Button_Image_Text.titleLabel.adjustsFontSizeToFitWidth = YES;
/* 進行渲染*/
[self.viewaddSubview:Button_Image_Text];
}
#pragma mark 圖片在右邊的組合
-(void)showButton_Text_Image{
UIButton * Button_Image_Text = [UIButtonbuttonWithType:UIButtonTypeCustom];
/* 設定大小*/
Button_Image_Text.frame = CGRectMake(0, 0, 120, 50);
Button_Image_Text.center = CGPointMake(self.view.center.x, self.view.center.y);
/* 設定圖片*/
[Button_Image_Text setImage:[UIImageimageNamed:@"btn_1"] forState:UIControlStateNormal];
/* 設定文字*/
[Button_Image_Text setTitle:@"成功QQ吧"forState:UIControlStateNormal];
/*設定文字的顏色*/
[Button_Image_Text setTitleColor:[UIColorredColor] forState:UIControlStateNormal];
/* 為按鈕設定顏色*/
Button_Image_Text.backgroundColor = [UIColorblueColor];
/* 進行文字的大小適配*/
Button_Image_Text.titleLabel.adjustsFontForContentSizeCategory = YES;
/* 讓文字適合指定大小範圍*/
Button_Image_Text.titleLabel.adjustsFontSizeToFitWidth = YES;
/* 進行按鈕的調整*/
/***********************************************************************************/
/* 文右圖左的組合*/
[selfsetButtonContent:Button_Image_Text];
/* 圖上文下*/
// [self setButtonContentType:Button_Image_Text];
/* 進行渲染*/
[self.viewaddSubview:Button_Image_Text];
}
#pragma mark 進行設定按鈕
-(void)setButtonContent:(UIButton*)setButton{
/* 有人說進行資料的匹配進行設定就行了,不錯設定多少?那就慢慢試試啊!。上面的想法不錯,但是沒有考慮到,如果我換一個手機,可不知,按鈕的文字和圖片進行混亂了*/
/* 我們先獲取按鈕裡面的兩個物件,進行輸出*/
/* 文字物件 titleLable */
NSLog(@"按鈕的文字物件:%@",setButton.titleLabel);
/* 文字輸出:
按鈕的文字物件:<UIButtonLabel: 0x7fb560d09d00; frame = (72.5 25; 0 0); text = '成功QQ吧'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x6000000972a0>>
解說:
我們從 frame = (72.5 25; 0 0) 看到,我們只獲取到了 origin 。而 size 我們並沒有獲取到。所以,我們根據文字物件的大小設定偏移是行不通的。
*/
/* 圖片物件 imageView*/
NSLog(@"按鈕的圖片物件:%@",setButton.imageView);
/* 圖片輸出:
按鈕的圖片物件:<UIImageView: 0x7fb562809df0; frame = (6.5 12.5; 25 25); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x618000028d20>>
解說:
我們從 frame = (6.5 12.5; 25 25) 看到,我們只獲取到了 origin 和 size。
*/
/*
按鈕有一個量 titleEdgeInsets 和 imageEdgeInsets 這兩個是可以控制圖片或者文字的在按鈕裡面的位置函式
*/
[setButton setTitleEdgeInsets:UIEdgeInsetsMake(0, -setButton.titleLabel.frame.origin.x+setButton.imageView.frame.origin.x, 0, setButton.titleLabel.frame.origin.x)];
[setButton setImageEdgeInsets:UIEdgeInsetsMake(0, setButton.frame.size.width - setButton.imageView.frame.origin.x - setButton.imageView.frame.size.width, 0,setButton.imageView.frame.origin.x)];
}
#pragma mark 圖上,文下的組合
-(void)setButtonContentType:(UIButton*)setButton{
[setButton setTitleEdgeInsets:UIEdgeInsetsMake(setButton.imageView.frame.origin.y + setButton.imageView.frame.size.height, -setButton.imageView.frame.origin.x-setButton.imageView.frame.size.width, 10,-setButton.imageView.frame.origin.x)];
[setButton setImageEdgeInsets:UIEdgeInsetsMake(0, (setButton.frame.size.width - setButton.imageView.frame.size.width)*0.5, 0,(setButton.frame.size.width - setButton.imageView.frame.size.width)*0.5)];
}
#pragma mark 圖文混排的測試
-(void)testButtonS{
/* 圖片的源*/
NSArray * ImageSource = @[[UIImageimageNamed:@"btn_0"],[UIImageimageNamed:@"btn_1"],[UIImageimageNamed:@"btn_2"],[UIImageimageNamed:@"btn_3"]];
/* 文字的源*/
NSArray * TitleSource = @[@"使用者電話",@"使用者密碼",@"使用者等級",@"使用者成長"];
/* 按鈕的寬度*/
float F = (self.view.frame.size.width - TitleSource.count +1)/ TitleSource.count;
/* 進行建立按鈕*/
for (unsignedint i =0 ; i<TitleSource.count; i++) {
UIButton * ButtonF = [UIButtonbuttonWithType:UIButtonTypeCustom];
ButtonF.frame = CGRectMake(i*(F+1), 64, F, 60);
ButtonF.layer.masksToBounds = YES;
ButtonF.layer.borderColor = [UIColorredColor].CGColor;
ButtonF.layer.borderWidth = 0.5;
[ButtonF setImage:ImageSource[i] forState:UIControlStateNormal];
[ButtonF setTitle:TitleSource[i] forState:UIControlStateNormal];
ButtonF.titleLabel.font = [UIFontsystemFontOfSize:15];
[ButtonF setTitleColor:[UIColorredColor] forState:UIControlStateNormal];
/* 如果Button的文字顯示不全,請使用下面的方法*/
ButtonF.titleLabel.adjustsFontSizeToFitWidth = YES;
/***********************************************************************/
float A = ButtonF.imageView.frame.origin.x;
float C = ButtonF.imageView.frame.size.width;
float D = ButtonF.imageView.frame.origin.y;
float G = ButtonF.imageView.frame.size.height;
[ButtonF setImageEdgeInsets:UIEdgeInsetsMake(0, 0.5*(F-C), 0, 0.5*(F-C))];
[ButtonF setTitleEdgeInsets:UIEdgeInsetsMake(D+G, -(A+C), 0, -A)];
/***********************************************************************/
[self.viewaddSubview:ButtonF];
}
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
成功截圖: