`

[IOS](转)带文字图片(二)

    博客分类:
  • IOS
阅读更多

转自:http://www.jianshu.com/p/3052a3b14a4e

 

1、我最开始实现这个采用的方法:
重新自定义一个view,然后有两个属性label和imageView,然后设置位置布局,再添加单击手势,用代理回传点击方法。

2、第二种方法:
自定义一个Button继承Button,有两个属性label和imageView,然后设置布局。这样就不用添加单击手势。

3、第三种方法:
直接用Button自带的titleLabel和imageView,写个Category,用来设置label和image的排列方式,eg:上下、左右

明显前两种是很不好的,所以这里只说第三种:

Button有两个属性:titleEdgeInsets和imageEdgeInsets,通过设置这两个,就可以实现所有需要的Button的样式,如:image在上、image在下、image在左、image在右。

在设置这两个之前,我们先要理解Button上面的titleLabel和imageView的位置关系(想象Button默认的image和label的显示):

  1. titleEdgeInsets是titleLabel相对于其上下左右的inset,跟tableView的contentInset是类似的;
  2. 如果只有title,那titleLabel的 上下左右 都是 相对于Button 的;
  3. 如果只有image,那imageView的 上下左右 都是 相对于Button 的;
  4. 如果同时有image和label,那image的 上下左相对于Button 的,相对于label 的;
    label的 上下右相对于Button的相对于label 的。

上面一段很重要

理解了,然后我们就可以看懂下面的代码

  1. 创建一个Button的Category,.h文件如下,定义一个Enum,用于决定image和label的样式;一个方法用于调用设置。
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
    MKButtonEdgeInsetsStyleTop, // image在上,label在下
    MKButtonEdgeInsetsStyleLeft, // image在左,label在右
    MKButtonEdgeInsetsStyleBottom, // image在下,label在上
    MKButtonEdgeInsetsStyleRight // image在右,label在左
};
@interface UIButton (ImageTitleSpacing)
/**
 *  设置button的titleLabel和imageView的布局样式,及间距
 *
 *  @param style titleLabel和imageView的布局样式
 *  @param space titleLabel和imageView的间距
 */
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space;
  1. .m文件如下,实现方法
#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space
{
    // 1. 得到imageView和titleLabel的宽、高
    CGFloat imageWith = self.imageView.frame.size.width;
    CGFloat imageHeight = self.imageView.frame.size.height;

    CGFloat labelWidth = 0.0;
    CGFloat labelHeight = 0.0;
    if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
        // 由于iOS8中titleLabel的size为0,用下面的这种设置
        labelWidth = self.titleLabel.intrinsicContentSize.width;
        labelHeight = self.titleLabel.intrinsicContentSize.height;
    } else {
        labelWidth = self.titleLabel.frame.size.width;
        labelHeight = self.titleLabel.frame.size.height;
    }

    // 2. 声明全局的imageEdgeInsets和labelEdgeInsets
    UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
    UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;

    // 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
    switch (style) {
        case MKButtonEdgeInsetsStyleTop:
        {
            imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
        }
            break;
        case MKButtonEdgeInsetsStyleLeft:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
        }
            break;
        case MKButtonEdgeInsetsStyleBottom:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
        }
            break;
        case MKButtonEdgeInsetsStyleRight:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
        }
            break;
        default:
            break;
    }
    // 4. 赋值
    self.titleEdgeInsets = labelEdgeInsets;
    self.imageEdgeInsets = imageEdgeInsets;
}

我写了个Demo在github上,地址:自定义Button

参考

  1. UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列,这篇博客里介绍了上面的原理,建议仔细看,理解之后就可以明白
  2. UIButton 的 imageEdgeInsets 和 titleEdgeInsets,这篇博客末尾有github地址,我写的时候没有理解原理,所以设置的时候,参照了他的代码
  3. 如何布局包含Image和Title的UIButton,这篇是我最开始参考的,只有代码,没有原理
分享到:
评论

相关推荐

    ios-文字、图片轮播.zip

    在iOS开发中,轮播效果是一种常见的用户界面元素,用于展示多张图片或文字内容,通常用在广告、推荐信息或者商品展示等场景。标题"ios-文字、图片轮播.zip"表明这是一个针对iOS平台的轮播器实现,能够同时处理文字和...

    ios-轮播图 带文字描述的轮播图.zip

    本资源“ios-轮播图 带文字描述的轮播图.zip”提供了一个实现带描述文字的轮播图控件,名为JYScrollViewDemo,它扩展了滚动视图的功能,使开发者能够更方便地在轮播图中添加文字描述。 轮播图控件的核心是...

    ios文字处理软件

    在iOS平台上,文字处理软件已经成为了许多用户日常生活和工作中不可或缺的工具,特别是在处理大量文档、笔记或者需要快速转换图片中的文字时。本文将深入探讨基于iOS的文字处理软件,特别是其图像识别技术及其在文字...

    iOS 文字动画(每个字逐个显示)

    "iOS 文字动画(每个字逐个显示)"这个主题主要关注如何逐个展示文本中的每一个字符,从而创建出独特的视觉效果。以下是对这两种实现方式的详细说明: 1. **逐个字符绘制** 这种方法涉及到对字符串进行拆分,然后...

    iOS美白/灰色/旋转/合成图片(添加文字)

    以上就是iOS图片处理的基本方法,包括美白、灰色化、旋转和合成图片以及添加文字。这些功能在实际应用中非常实用,能够帮助开发者实现各种创新的视觉效果。在项目中,你可以根据实际需求调整代码参数,以达到理想的...

    IOS字体名字和图片

    标题和描述提到了一个关于iOS特殊字体的资源整理,包括了字体的名字和对应的图片展示,旨在方便开发者快速查找和使用。这里我们将详细探讨iOS中常见的字体类型、如何在项目中引入自定义字体以及字体的使用技巧。 ...

    IOS中文文字识别DEMO,OCR

    本文将详细解析iOS中文文字识别DEMO及其相关技术,包括OCR(Optical Character Recognition,光学字符识别)技术、图像处理、二值化、滤镜和剪切等关键步骤。 首先,OCR技术是将图像中的文字转换成机器可编辑的文本...

    ios 图片文字识别ocr

    在iOS开发中,图片文字识别(OCR,Optical Character Recognition)是一种关键技术,它允许应用程序从图像中自动识别并提取文本。OCR技术广泛应用于各种场景,如文档扫描、翻译工具、表单填写等。本项目提供的代码...

    ios的文字加图片的Tableview列表,单击某一行,显示该行文字

    在标题和描述中提到的“ios的文字加图片的Tableview列表,单击某一行,显示该行文字”是一个典型的iOS应用功能实现,下面将详细阐述这个功能的实现步骤和涉及的技术点。 首先,我们要创建一个包含文字和图片的`...

    iOS端 Paddle OCR 移动端文字识别

    在iOS开发领域,有时我们需要实现文字识别功能,例如在扫描文档、图片或现实场景中提取文字。在这种情况下,选择一个高效且成本效益高的解决方案至关重要。本文将深入探讨如何利用Paddle OCR这一开源项目,在iOS平台...

    ios-带有图片的按钮.zip

    本资源“ios-带有图片的按钮.zip”显然关注的是如何在按钮中结合文字和图片,创建出视觉效果丰富的UI组件。我们将深入探讨如何在故事板(Storyboard)中实现文字和图片的四种排列方式:上下、左右,并通过一句代码...

    ios转盘效果

    在iOS开发中,实现转盘效果通常涉及到动画和用户交互,这两个方面是iOS应用界面设计中的重要组成部分。本文将深入探讨如何使用Core Animation框架来创建一个简单的拖拽转动的转盘效果,这对于初学者来说是一个很好的...

    iOS 仿新浪微博图片查看功能

    在iOS开发中,实现类似新浪微博的图片查看功能是一项常见的需求,它涉及到图片的展示、手势交互、动画效果以及用户保存图片等多方面的技术。在这个项目中,开发者创建了一个名为"LQPhotoAlbun"的组件,用于实现这个...

    IOS图片BASE64编码解码

    在iOS开发中,图片的BASE64编码与解码是一种常见的数据处理技术,它涉及到字符串与二进制数据之间的转换。BASE64是一种用于将任意二进制数据转化为ASCII字符编码的方法,通常用于在网络上传输非ASCII字符或者作为...

    IOS源码——自定义Tab Bar的文字、颜色和图片加箭头.7z

    这个"IOS源码——自定义Tab Bar的文字、颜色和图片加箭头.7z"压缩包提供了一个示例,展示了如何实现这些功能。下面将详细介绍如何自定义Tab Bar的文字、颜色以及添加箭头。 1. **自定义文字** - `UITabBarItem` 是...

    IOS开发的关于图片和frame的分类

    若要防止系统自动渲染,开发者可以使用`UIImage`的`initWithData:`方法直接从数据源创建图片,或者使用`UIImagePNGRepresentation`或`UIImageJPEGRepresentation`将图片数据转换为二进制格式后再解码。这样能确保...

    ios-自定义AlertView,可图片可文字.zip

    本文将详细解析如何实现一个可自定义的`AlertView`,包括支持图片和文字,并且能够调整颜色等外观属性。我们将探讨以下几个关键知识点: 1. **自定义AlertView**: 自定义`UIAlertView`或`UIAlertController`是为了...

    ios中将base64将图片转码的demo

    在iOS开发中,有时我们需要将图片数据转换成Base64编码,以便于在网络上传输或者存储在数据库中。Base64是一种用64个字符来表示任意二进制数据的方法,通常用于在邮件系统或者HTTP协议中传输非ASCII字符。在这个...

    ios-选择文字验证码.zip

    4. **界面展示**:使用`UILabel`或者其他文本控件展示验证码,可以结合`UIImage`生成带有背景和干扰线的图片,提高安全性。"图文混排"标签提示我们这个验证码可能有图像元素,例如干扰线或背景图案,这些元素可以...

    iOS生成图片文字验证码源码.zip

    本资源提供的是一套用于生成图片文字验证码的源码,主要用于帮助开发者快速实现这一功能。验证码的主要目的是防止恶意自动化程序(如机器人)对服务进行滥用,确保只有人类用户能够执行某些操作,如注册、登录或提交...

Global site tag (gtag.js) - Google Analytics