`

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

    博客分类:
  • IOS
阅读更多

转自:http://blog.csdn.net/u011462377/article/details/48595485

 

//创建一个button

   UIButton *btn = [[UIButtonalloc]init];

    [self.viewaddSubview:btn];

    btn.frame =CGRectMake(100,200,90,90);

    btn.backgroundColor = [UIColorgrayColor];

    

    //添加图片

    [btn setImage:[UIImageimageNamed:@"tab_0"]forState:UIControlStateNormal];

    //添加文字

    [btn setTitle:@"首页"forState:UIControlStateNormal];

//    //设置文字的大小

    btn.titleLabel.font = [UIFontsystemFontOfSize:16];

    

   //为了能更好的显示图片和文字的位置我们设置一下图片和文字的背景颜色

    btn.titleLabel.backgroundColor = [UIColorpurpleColor];

    btn.imageView.backgroundColor = [UIColorcyanColor];

 

 

如图我们可以看到imageView和titleView的的分布关系 那么如何使imageView和titleView上下分布且居中呢,我想到的第一个方法就是设置frame值,但是设置frame值并没有什么用,这个可以自己试验一下。

那么我的第二种方法就是通过设置imageEdgeInsets和titleEdgeInsets来实现移动imageView和titleView
1.我们打印一下imageView和titleView的frame值,获得它们的位置和尺寸
NSLog(@"imageView:%@",NSStringFromCGRect(btn.imageView.frame));
NSLog(@"titleView:%@",NSStringFromCGRect(btn.titleLabel.frame));
得到如下结果
imageView:{{14, 30}, {30, 30}}
titleView:{{44, 35.5}, {32, 19.5}}

2.通过设置imageEdgeInsets和titleEdgeInsets来移动imageView和titleView
imageEdgeInsets和titleEdgeInsets时图片和文字在button中的内边距
typedefstruct UIEdgeInsets {
CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
通过设置top, left, bottom, right可以实现向下,右,上,左移动,为什么是反方向,因为我们设置的是内
边距
注意:1.+代表正向,-代表反向
 

下面我们做一个试验来,探索一下imageView和titleView的移动

btn.imageEdgeInsets =UIEdgeInsetsMake(0,0,0,0);

移动前

imageView:{{14, 30}, {30, 30}}

移动后:

imageView:{{14, 30}, {30, 30}}

得出结论 全部设置为0 不做任何的移动


 

btn.imageEdgeInsets =UIEdgeInsetsMake(1,0,0,0);
得到如下结果
移动前imageView:{{14, 30}, {30, 30}}
移动后imageView:{{14, 30.5}, {30, 30}}
得出结论:当改变一个值的时候,正值是向原有既定方向移动一半的改变值,负值是向反方向移动一半的改变值,前提是在没有设置button的对齐方式的时候,后面会有解释

 

                       在设置button内部控件的对齐方式后,在设置内边距

btn.contentHorizontalAlignment =UIControlContentHorizontalAlignmentLeft;

 //UIControlContentHorizontalAlignmentLeft水平左对齐

btn.contentVerticalAlignment =UIControlContentVerticalAlignmentTop;

 //UIControlContentVerticalAlignmentTop垂直上对齐

NSLog(@"对齐后的imageView%@",NSStringFromCGRect(btn.imageView.frame));

NSLog(@"对齐后的titleLabel%@",NSStringFromCGRect(btn.titleLabel.frame));

设置对其方式后,button内部的控件分布如下图所示
对齐后的imageView{{0, 0}, {30, 30}}
对齐后的titleLabel{{30, 0}, {32, 19.5}}

此时我们在对imageView进行移动
//改变上内距的值

btn.imageEdgeInsets =UIEdgeInsetsMake(40,0,0,0);

移动后imageView:{{0, 40}, {30, 30}}


 

此时我们可以改变左内距的值

 

btn.imageEdgeInsets =UIEdgeInsetsMake(40,10,0,0);

移动后imageView:{{10, 40}, {30, 30}}

 

结论:1.必须设置一种对其方式,那么该方向的移动的距离才为我们设置的值

2.因此我们如果想移动button内部的控件先改变其对其方式,在进行移动。

 

                                          对button内部控件进行移动

 

//1.使imageView居中

    

 //获取imageView中的宽度和高度

    CGFloat imageW = btn.imageView.frame.size.width;

    CGFloat imageH = btn.imageView.frame.size.height;

    //获取titleLabel的宽度

    CGFloat labelW = btn.titleLabel.frame.size.width;

    CGFloat labelH = btn.titleLabel.frame.size.height;

    //计算移动距离

    CGFloat imageDistance = (btn.frame.size.width - imageW) * 0.5;

    //设置上内距

    CGFloat imageTop = (btn.frame.size.height - imageH - labelH) * 0.5;

    //进行移动

    btn.imageEdgeInsets = UIEdgeInsetsMake(imageTop, imageDistance, 0, 0);

    NSLog(@"移动后的imageView%@",NSStringFromCGRect(btn.imageView.frame));

 


移动后的imageView{{30, 20}, {30, 30}}

这时我们发现imageView的frame相对于对齐后确实发生了改变

//使titleLabel居于imageView的正下方且居中

    //获取titleLabel的宽度

    CGFloat labelW = btn.titleLabel.frame.size.width;

    //计算移动距离

    CGFloat labelDistance = - imageW + (btn.frame.size.width - labelW) *0.5 ;

    //上内距

    CGFloat labelTop = imageTop + imageH;

    btn.titleEdgeInsets =UIEdgeInsetsMake(labelTop, labelDistance,0,0);

    NSLog(@"移动后的titleLabel%@",NSStringFromCGRect(btn.titleLabel.frame));


移动后的titleLabel{{30, 0}, {32, 19.5}}

此时我们发现移动后的titleLabelframe值和对齐后的frame值相同


结果图:
 
特别提醒:当我们设置button某一种对齐方式时 我们在该方向上的设置内边距才为我们实际上设置的值

 

比如我们设置了左对齐方式
btn.contentHorizontalAlignment =UIControlContentHorizontalAlignmentLeft;
那么我们设置的左内距,移动的才是我们设置的值
分享到:
评论

相关推荐

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

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

    ios-文字、图片轮播.zip

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

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

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

    ios文字处理软件

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

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

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

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

    在iOS开发中,图片处理是一项常见的任务,尤其在设计用户界面或者进行图形编辑时。本文将探讨如何实现图片美白、灰色、旋转以及合成,并添加文字的功能。这些技术主要基于Core Graphics框架,它是苹果iOS和macOS平台...

    IOS字体名字和图片

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

    ios 图片文字识别ocr

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

    IOS中文文字识别DEMO,OCR

    在iOS平台上进行中文文字识别是一项复杂而重要的任务,特别是在移动应用开发中,它能为用户提供便捷的信息录入方式。本文将详细解析iOS中文文字识别DEMO及其相关技术,包括OCR(Optical Character Recognition,光学...

    iOS端 Paddle OCR 移动端文字识别

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

    ios转盘效果

    这个视图将包含一个圆形的背景和一些标记(比如数字或图片),它们会随着转盘转动而移动。为了实现拖拽功能,我们需要监听用户的触摸事件,如`touchesBegan`, `touchesMoved`和`touchesEnded`。 1. **设置基础视图*...

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

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

    ios-带有图片的按钮.zip

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

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

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

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

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

    IOS图片BASE64编码解码

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

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

    例如,对于一个带有边框的按钮图片,可以设置边框为不可拉伸,中间区域为可拉伸。这可以通过`resizableImageWithCapInsets:`或`resizableImageWithCapInsets:resizingMode:`方法实现,其中`capInsets`参数定义了图片...

    ios中将base64将图片转码的demo

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

    ios-选择文字验证码.zip

    "ios-选择文字验证码.zip"这个压缩包文件很可能是包含了一个iOS应用中实现文字验证码功能的示例代码或资源。下面我们将深入探讨文字验证码的原理、设计以及如何在iOS应用中实现。 首先,文字验证码的核心在于生成...

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

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

Global site tag (gtag.js) - Google Analytics