iOS中 按鈕和標題完美各種排列/完美教程

來源:互聯網
上載者:User

iOS中 按鈕和標題完美各種排列/完美教程

前言:最近常常用到按鈕和相應標題的組合,當按鈕設定圖片加標題時,觸發範圍較小,不易觸發,最重要的是還要調試位移量,相信研究過的開發人員都很頭疼這一點,那我我就想解決,於是在網上研究了一番,個人總結封裝了一個,覺得很棒,推薦給大家!

下面看教程:

整體是對UIButton的自訂封裝:

 

//UIButton+UIButtonSetEdgeInsets.h#import @interface UIButton (CenterImageAndTitle)//上下置中,圖片在上,文字在下- (void)verticalCenterImageAndTitle:(CGFloat)spacing;- (void)verticalCenterImageAndTitle; //預設6.0//左右置中,文字在左,圖片在右- (void)horizontalCenterTitleAndImage:(CGFloat)spacing;- (void)horizontalCenterTitleAndImage; //預設6.0//左右置中,圖片在左,文字在右- (void)horizontalCenterImageAndTitle:(CGFloat)spacing;- (void)horizontalCenterImageAndTitle; //預設6.0//文字置中,圖片在左邊- (void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing;- (void)horizontalCenterTitleAndImageLeft; //預設6.0//文字置中,圖片在右邊- (void)horizontalCenterTitleAndImageRight:(CGFloat)spacing;- (void)horizontalCenterTitleAndImageRight; //預設6.0@end

 

每日更新關注:http://weibo.com/hanjunqiang 新浪微博!

 

//#import "UIButton+CenterImageAndTitle.m"#import "UIButton+CenterImageAndTitle.h"@implementation UIButton (CenterImageAndTitle)- (void)verticalCenterImageAndTitle:(CGFloat)spacing{    // get the size of the elements here for readability    CGSize imageSize = self.imageView.frame.size;    CGSize titleSize = self.titleLabel.frame.size;        // lower the text and push it left to center it    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing/2), 0.0);        // the text width might have changed (in case it was shortened before due to    // lack of space and isn't anymore now), so we get the frame size again    titleSize = self.titleLabel.frame.size;        // raise the image and push it right to center it    self.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing/2), 0.0, 0.0, - titleSize.width);}- (void)verticalCenterImageAndTitle{    const int DEFAULT_SPACING = 6.0f;    [self verticalCenterImageAndTitle:DEFAULT_SPACING];}- (void)horizontalCenterTitleAndImage:(CGFloat)spacing{    // get the size of the elements here for readability    CGSize imageSize = self.imageView.frame.size;    CGSize titleSize = self.titleLabel.frame.size;        // lower the text and push it left to center it    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, imageSize.width + spacing/2);        // the text width might have changed (in case it was shortened before due to    // lack of space and isn't anymore now), so we get the frame size again    titleSize = self.titleLabel.frame.size;        // raise the image and push it right to center it    self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + spacing/2, 0.0, - titleSize.width);}- (void)horizontalCenterTitleAndImage{    const int DEFAULT_SPACING = 6.0f;    [self horizontalCenterTitleAndImage:DEFAULT_SPACING];}- (void)horizontalCenterImageAndTitle:(CGFloat)spacing;{    // get the size of the elements here for readability    //    CGSize imageSize = self.imageView.frame.size;    //    CGSize titleSize = self.titleLabel.frame.size;        self.titleEdgeInsets = UIEdgeInsetsMake(0.0,  0.0, 0.0,  - spacing/2);    self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing/2, 0.0, 0.0);}- (void)horizontalCenterImageAndTitle;{    const int DEFAULT_SPACING = 6.0f;    [self horizontalCenterImageAndTitle:DEFAULT_SPACING];}- (void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing{    // get the size of the elements here for readability    //    CGSize imageSize = self.imageView.frame.size;    //    CGSize titleSize = self.titleLabel.frame.size;        self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing, 0.0, 0.0);}- (void)horizontalCenterTitleAndImageLeft{    const int DEFAULT_SPACING = 6.0f;    [self horizontalCenterTitleAndImageLeft:DEFAULT_SPACING];}- (void)horizontalCenterTitleAndImageRight:(CGFloat)spacing{    // get the size of the elements here for readability    CGSize imageSize = self.imageView.frame.size;    CGSize titleSize = self.titleLabel.frame.size;        // lower the text and push it left to center it    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, 0.0);        // the text width might have changed (in case it was shortened before due to    // lack of space and isn't anymore now), so we get the frame size again    titleSize = self.titleLabel.frame.size;        // raise the image and push it right to center it    self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + imageSize.width + spacing, 0.0, - titleSize.width);}- (void)horizontalCenterTitleAndImageRight{    const int DEFAULT_SPACING = 6.0f;    [self horizontalCenterTitleAndImageRight:DEFAULT_SPACING];}@end
每日更新關注:http://weibo.com/hanjunqiang 新浪微博!
使用方法非常簡單:

 

 

//在使用的地方引入#import "UIButton+CenterImageAndTitle.h"#define kScreenHeight [[UIScreen mainScreen] bounds].size.height      //螢幕高度#define kScreenWidth [[UIScreen mainScreen] bounds].size.width      //螢幕寬度

為了展現所有效果,簡單展示一下:

 

 

for (int i = 0; i< 6; i++)    {        UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];        button1.frame = CGRectMake(60, 80+i*60, kScreenWidth-60*2, 45);        button1.tag = i;        button1.backgroundColor = [UIColor greenColor];        button1.titleLabel.font = [UIFont systemFontOfSize:15];        [button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];        [button1 setImage:[UIImage imageNamed:@"good"] forState:UIControlStateNormal];        [button1 setTitle:@"小韓哥的部落格更新了" forState:UIControlStateNormal];        [button1 addTarget:self action:@selector(testAction:) forControlEvents:UIControlEventTouchUpInside];        [self.view addSubview:button1];                switch (i)        {            case 0:            {                //系統預設圖片在左,文字在右,間隔為0            }                break;                            case 1:            {                //上下置中,圖片在上,文字在下                [button1 verticalCenterImageAndTitle:10.0f];            }                break;                            case 2:            {                //左右置中,文字在左,圖片在右                [button1 horizontalCenterTitleAndImage:50.0f];            }                break;                            case 3:            {                //左右置中,圖片在左,文字在右                [button1 horizontalCenterImageAndTitle:50.0f];            }                break;                            case 4:            {                //文字置中,圖片在左邊                [button1 horizontalCenterTitleAndImageLeft:50.0f];            }                break;                            case 5:            {                //文字置中,圖片在右邊                [button1 horizontalCenterTitleAndImageRight:50.0f];            }                break;                            default:                break;        }    }
每日更新關注:http://weibo.com/hanjunqiang 新浪微博!
最後是點擊事件了:

 

 

- (void)testAction:(UIButton *)sender{    NSLog(@"testAction:%ld", (long)sender.tag);}
最終效果:

 

如有問題可通過微博互動聯絡我哦!

每日更新關注:http://weibo.com/hanjunqiang 新浪微博!

Demo:https://github.com/XiaoHanGe/UIButtonCenterTitleAndImage

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.