iOS_按钮文字图片任意布局，随意定制

导读

按钮是应用中最常见的,最基本的一个控件。
按钮的样式多种多样，系统默认样式为左右结构，图片在左边，文字在右边。系统按钮完全无法满足开发的需求，我们只能自己定制出想要的样式。

在这里分享一个自定义按钮，文字图片位置随意定制的demo给大家。源码地址：https://github.com/HelloYeah/YLButton

欢迎Star，赠人玫瑰，手有余香！！

酷我音乐中的部分按钮

IMG_0942.PNG

IMG_0944.JPG

图片文字,上下左右，C2 * C2 = 4,文字在图片内部的按钮，在酷我音乐中没找到，但实际上也是有的，光布局样式至少有5种。每种布局样式，文字图片大小尺寸位置也不尽相同。

实现方法

重写下面两个方法，返回正确的布局即可。
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
虽然可以实现，每个按钮都重写一遍，一个项目中那需要自定义多个按钮，每个都算一下布局。这是有多无聊和痛苦，有什么好的办法可以一劳永逸，适用所有的样式吗？答案是肯定的！

先上效果图

自定义按钮.gif

外界调用

1.xib创建

IMG_0945.JPG

2.纯代码创建

    //左右结构，图片在左边，文字在右边。
    {
        YLButton * searchBtn = [YLButton buttonWithType:UIButtonTypeCustom];
        [searchBtn setImage:[UIImage imageNamed:@"search"] forState:UIControlStateNormal];
        [searchBtn setTitle:@"搜索按钮图片在左边" forState:UIControlStateNormal];
        searchBtn.titleLabel.font = [UIFont systemFontOfSize:13];
        [searchBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        [searchBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];
        searchBtn.imageRect = CGRectMake(10, 10, 20, 20);
        searchBtn.titleRect = CGRectMake(35, 10, 120, 20);
        [self.view addSubview:searchBtn];
        searchBtn.frame = CGRectMake(SCREEN_WIDTH * 0.5 - 80, 250, 160, 40);
        searchBtn.backgroundColor = [UIColor colorWithRed:255/255.0 green:242/255.0 blue:210/255.0 alpha:1];
    }

实现原理

1.先看.h文件

#import <UIKit/UIKit.h>

@interface YLButton : UIButton
@property (nonatomic,assign) CGRect titleRect;
@property (nonatomic,assign) CGRect imageRect;
@end

2.实现.m文件

@implementation YLButton

- (CGRect)titleRectForContentRect:(CGRect)contentRect{
    if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) {
        return self.titleRect;
    }
    return [super titleRectForContentRect:contentRect];
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect{
    
    if (!CGRectIsEmpty(self.imageRect) && !CGRectEqualToRect(self.imageRect, CGRectZero)) {
        return self.imageRect;
    }
    return [super imageRectForContentRect:contentRect];
}

@end

总结

有没有一种快刀斩乱麻的感觉，有没有感觉很好用，欢迎Star。
源码地址：https://github.com/HelloYeah/YLButton

补充

12月5日补充实现分类。源码请转GitHub

最后编辑于：2017.12.04 16:46:20

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

iOS_按钮文字图片任意布局，随意定制