UIEdgeInsets 说明
设置 UILabel 和 UITextField 的 Padding 或 Insets
iOS 的控件,只看到 UIButton 可以设置 Padding/Insets,即按钮上文字或图片与按钮边界的间隙,对与 CSS 来说叫做 Padding,在 iOS 中叫做 Insets,UIButton 设置 Insets 相应的属性如下:
Configuring Edge Insets
contentEdgeInsets property
titleEdgeInsets property
imageEdgeInsets property
它们接受的属性类型是:UIEdgeInsets,由函数 UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right ); 构造出,分别表示其中的内容/标题/图片离各边的距离。
在 xib 中也有界面来对按钮的这三个 EdgeInsets 属性的设置,分别是按钮的 Edge 和 Inset 属性。
印像中,Swing 的许多组件都可设置 Insets 属性,可对于 iOS 的控件就没那么幸运了,比如我想设置 UILable 或 UITextField 中的文本离边界的间隙,无伦是在 xib 里还是直接代码的方式都无能为力,因为它们根据未开放相应的属性让你去控制。
办法当然还是有的,自定义相应自己的控件了,比如 InsetsLabel 或是 InsetsTextField,接着就是覆盖某些个方法来达成。
首先来看 UILabel 的子类 InsetsLabel 的实现代码:
- //1.header file
- #import <UIKit/UIKit.h>
- @interface InsetsLabel : UILabel
- @property(nonatomic) UIEdgeInsets insets;
- -(id) initWithFrame:(CGRect)frame andInsets: (UIEdgeInsets) insets;
- -(id) initWithInsets: (UIEdgeInsets) insets;
- @end
- //2. implementation file
- #import "InsetsLabel.h"
- @implementation InsetsLabel
- @synthesize insets=_insets;
- -(id) initWithFrame:(CGRect)frame andInsets:(UIEdgeInsets)insets {
- self = [super initWithFrame:frame];
- if(self){
- self.insets = insets;
- }
- return self;
- }
- -(id) initWithInsets:(UIEdgeInsets)insets {
- self = [super init];
- if(self){
- self.insets = insets;
- }
- return self;
- }
- -(void) drawTextInRect:(CGRect)rect {
- return [super drawTextInRect:UIEdgeInsetsInsetRect(rect, self.insets)];
- }
关键就是覆盖了 -(void) drawTextInRect: (CGRect) rect; 方法,在画 Label 的文本时分别设置文本与 Label 四个边的间隙,即画在 Label 内的一个小矩形内,这个例子提供了便利的构造函数,提供自己的 UIEdgeInsets 属性。另外,函数 UIEdgeInsetsInsetRect(CGRect, UIEdgeInsets) 应该是好理解的。
再看如何设置 UITextField 中文本到四边的间距,这里也可以定义自己的 InsetsTextField:
- //
- // Created by Unmi on 11/2/11.
- // Copyright (c) 2011 http://unmi.cc. All rights reserved.
- //
- #import <UIKit/UIKit.h>
- @interface InsetsTextField : UITextField
- @end
- @implementation InsetsTextField
- //控制 placeHolder 的位置,左右缩 20
- - (CGRect)textRectForBounds:(CGRect)bounds {
- return CGRectInset( bounds , 20 , 0 );
- }
- // 控制文本的位置,左右缩 20
- - (CGRect)editingRectForBounds:(CGRect)bounds {
- return CGRectInset( bounds , 20 , 0 );
- }
- @end
- //-----------------------------------------------------------------
- //下面是使用 InsetsTextField 的代码,可放在 viewDidLoad 等代理方法中
- InsetsTextField *insetTextField = [[InsetsTextField alloc]
- initWithFrame:CGRectMake(10, 10, 180, 25)];
- //须手动设置它的 borderStyle, 不然看不到边框的
- insetsTextField.borderStyle = UITextBorderStyleRoundedRect;
- [self.view addSubview:insetsTextField];
- [insetsTextField release];
效果如下:
上面更像是借鉴的 InsetsLabel 的实现,其实对于 UITextField 还有更好的实现办法,而且更简单,因为 UITextFiled 原来就支持的做法。比如它可以让你做出在文本框最前方固定一个 $ 符号,表示这个文本框是输入钱的,第一个$ 是不能被删除的。确实,你可以在 TextField 上贴个 Label,然后文本框的光标后移,稍显麻烦了。
而 UITextField 可以直接设置 leftView 或 rightView, 然后文本输入区域就在 leftView 和 rightView 之间了,看例子:
- UILabel *paddingView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 10, 25)];
- paddingView.text = @"$";
- paddingView.textColor = [UIColor darkGrayColor];
- paddingView.backgroundColor = [UIColor clearColor];
- textfield.leftView = paddingView;
- textfield.leftViewMode = UITextFieldViewModeAlways;
rightView 也是一样的设置方式,其中的 Mode 有四种,看到名字应该不难理解:
UITextFieldViewModeNever,
UITextFieldViewModeWhileEditing,
UITextFieldViewModeUnlessEditing,
UITextFieldViewModeAlways
它的效果呢就更酷了:
文本框的起始光标是从上图数字 1 位置开始的。
实际应用中,对于 UITextField 如果有类似的需求,我会毫不犹豫的使用 leftView/rightView 属性来设置。
参考:1. http://stackoverflow.com/questions/2694411/text-inset-for-uitextfield
2. http://stackoverflow.com/questions/5674655/uitextfield-align-left-margin
UIEdgeInsets 说明相关推荐
- UIButton中的三个UIEdgeInsets属性
接着昨天的 UIButton中的三个UIEdgeInsets属性 ,今天我们具体谈谈UIButton的contentEdgeInsets.titleEdgeInsets.imageEdgeInsets ...
- UIEdgeInsets
iPhone中有UIEdgeInsets描述一个边. [pre]typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; ...
- iOS UIButton之UIEdgeInsets详解
级别:★★☆☆☆ 标签:「UIButton内偏移量」「titleEdgeInsets」「imageEdgeInsets」 作者: MrLiuQ 审校: QiShare团队 我们先看一下苹果官方对UIE ...
- UICollectionView
UICollectionView 多列的UITableView,最简单的形式,类似于iBooks中书架的布局,书架中放着你下载的和购买的电子书. 最简单的UICollectionView是一个Grid ...
- 计算 webView 显示内容后实际高度
两种方法,方法1可以得到内容的实际高度,方法2得到了将内容显示完整后的 webView 的尺寸(包含 UIEdgeInsets) - (void)webViewDidFinishLoad:(UIWeb ...
- UIImage图片拉伸方法
纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设 ...
- IOS类似9.png
图形用户界面中的图形有两种实现方式,一种是用代码画出来,比如Quartz 2D技术,狠一点有OpenGL ES,另一种则是使用图片. 代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则耗费磁盘 ...
- iOS中你可能没有完全弄清楚的(二)自己实现一个KVO源码及解析
前几天写了一篇blog(点这里),分析了系统KVO可能的实现方式.并添加了简单代码验证. 既然系统KVO不好用,我们完全可以根据之前的思路,再造一个可以在项目中使用的KVO的轮子. 代码已经上传到gi ...
- Swift Code Snippet
1 swi_crecell func numberOfSections(in tableView: UITableView) -> Int {return 1;}func tableView(_ ...
最新文章
- Dom4j 写文件不全
- 陈老师Linux内核内存寻址导学
- python caffe报错:No module named google
- 数据分析 python 用途-想做好数据分析,不用Python怎么行?
- 事务BEGIN TRANSACTION
- MiniGUI+qvfb+Eclipse完成嵌入式系统图形开发(开发环境的搭建)
- C#利用正则表达式实现字符串搜索
- C语言关键字浅析-char
- java struts2 验证码,struts2中验证码的生成和使用
- python绘制基因结构图_分分钟教你绘制基因结构图!
- HDU5855 Less Time, More profit(最大权闭合子图)
- 数组:s.length()与s.length的区别
- 用python识别微信消息界面聊天输入框位置
- Android 8.0 SurfaceFlinger
- SpringBoot——JPA的使用、构建restful风格的JPA
- 路由器设置服务器用什么协议,路由器配置基础知识
- 到底什么是信息检索?
- 电子传真虚拟化的优势
- [AH2017/HNOI2017]影魔(主席树+单调栈)
- Http请求工具类:Get/Post
热门文章
- 差异分析完整解决方案
- R语言使用hexSticker包将lattice包可视化的结果转换为六角图(六角贴、六角形贴纸、lattice plot to hex sticker)
- Python使用sklearn和statsmodels构建多元线性回归模型(Multiple Linear Regression)并解读
- R语言四格表的统计分析及假设检验
- 计算机英语unit,计算机专业英语Unit 7
- 单细胞RNA降维之UMAP
- PacBio But Not Illumina Technology Can Achieve Fast, Accurate and Complete Closure of the High GC, C
- oracle 四分位函数,Oracle分析函数四——函数RANK,DENSE_RANK,FIRST,LAST…
- 平方的观测值表概率_中央气象台:“三九”大概率不会比“二九”更冷
- node.js 微信小程序 部署服务器_微信小程序云开发环境部署,及添加数据