1. 程式人生 > >Button的上下圖文混排

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

成功截圖: