iOS中 按钮和标题完美各种排列/完美教程 韩俊强的博客-阿里云开发者社区

开发者社区> 韩俊强> 正文

iOS中 按钮和标题完美各种排列/完美教程 韩俊强的博客

简介: 每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 前言:最近常常用到按钮和相应标题的组合,当按钮设置图片加标题时,触发范围较小,不易触发,最重要的是还要调试偏移量,相信研究过的开发者都很头疼这一点,那我我就想解决,于是在网上研究了一番,个人总结封装了...
+关注继续查看

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

前言:最近常常用到按钮和相应标题的组合,当按钮设置图片加标题时,触发范围较小,不易触发,最重要的是还要调试偏移量,相信研究过的开发者都很头疼这一点,那我我就想解决,于是在网上研究了一番,个人总结封装了一个,觉得很棒,推荐给大家!

下面看教程:

整体是对UIButton的自定义封装:


//UIButton+UIButtonSetEdgeInsets.h

#import <UIKit/UIKit.h>

@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

QQ群:446310206

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
PAI-AutoLearning 图像分类使用教程
PAI AutoLearning(简称PAI AL)自动学习支持在线标注、自动模型训练、超参优化以及模型评估。在平台上只需准备少量标注数据,设置训练时长即可得到深度优化的模型。同时自动学习PAI AL平台与EAS模型在线服务打通,一键完成模型部署。下面通过一个番茄(tomato)和黄瓜(cucumber)的图片分类示例来演示整个流程的实现具体操作实现步骤。
647 0
hyperledger fabric 源码调试(orderer)环境搭建教程
本系列文尝试依据个人理解来描述构建fabric源码调试环境的步骤,去掉docker这层障碍,并给出思考过程。
1654 0
Android NFC 开发教程(2): ApiDemos->NFC->ForegoundDispatch
本例参考ApiDemos中NFC的ForegoundDispatch来介绍编写Android NFC 的基本步骤,因为手边只有MifareClassic 类型的Tag ,需要对ForegoundDispatch的代码做些修改来检测MifareClassic 的类型的NFC Tag,读写其他类型的NFC Tag的基本步骤是一致的。
558 0
短视频APP制作开发,滑动显示按钮,点击按钮置顶
短视频APP制作开发,滑动显示按钮,点击按钮置顶
601 0
在Microsoft Expression Blend 2 中绘制圆角矩形按钮
原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.com 版权所有:a3news(AT)hotmail.com */(1)打开Blend 2,新建一个工程名称为:LinearGradientButton。
1000 0
iOS系列教程 目录 (持续更新...)
    前言:   听说搞iOS的都是高富帅,身边妹子无数。咱也来玩玩。哈哈。   本篇所有内容使用的是XCode工具、Swift语言进行开发。     我现在也是学习阶段,每一篇内容都是经过自己实际编写完一遍之后,发现什么问题百度都弄完了才整理发出来的。
749 0
+关注
韩俊强
高级软件开发工程师, 博客专家, 阿里云MVP, CSDN十大博客之星, 十佳专栏 。
494
文章
7
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载