美文网首页iOS精选博文iOS精选博文iOS开发笔录
iOS_按钮文字图片任意布局,随意定制

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

作者: HelloYeah | 来源:发表于2016-11-24 21:37 被阅读3304次

    导读

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

    在这里分享一个自定义按钮,文字图片位置随意定制的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

    相关文章

      网友评论

      • 你是我此世不渝的执着:你好问一下 类似马蜂窝那种图片布局他虽然发布的时候图片显示的随机的 但是 他一直就是这样的 咱们每次运行都改变 有没有 那种做法
      • codingZero:666,一年没见,成大神了
        codingZero:@HelloYeah 有卵用,哥都要失业了
        HelloYeah:你的星星都要上千了。
      • 溪枫狼:Bezierpath 绘图 + 工厂方法。
      • HelloYeah:评论里很多人认为用分类来实现。
        那我说说我的看法,分类和继承在这里没有明显的优劣差别。但分类的实现明显要复杂一些,首先要给titleRect,imageRect设置属性关联,其次需要交换方法,把titleRectForContentRect:和 imageRectForContentRect:替换掉(runtime交换方法) 或者 直接覆盖掉(覆盖系统方法,隐患较大,不建议。)
        那在使用的时候有什么差别呢,毋庸置疑,分类和继承都需要导入头文件,继承,需要创建YLButton对象,而分类直接创建系统的UIButton即可。使用时的差别,仅此而已。
        有兴趣的朋友可以自己用分类实现一下,难度不大。
      • 依赖糊涂:这个应该不行吧~。因为categary 就没法继承那2个方法 ~
      • Yi_Yuan_n:直接写子类继承也是可以的
      • c82c89fa243d:建议写一个categary,这样方便使用
        a6ddb149eed6:@Gentear 666
        c82c89fa243d:@ln371494114 可以啊 直接用runtime给绑定一个就行
        a6ddb149eed6:@Gentear categary还能增加属性呢?

      本文标题:iOS_按钮文字图片任意布局,随意定制

      本文链接:https://www.haomeiwen.com/subject/ksqipttx.html