专栏首页编程之旅UITextField设置leftView、圆角以及文字距离

UITextField设置leftView、圆角以及文字距离

今天在工作中,搭建一个登录界面,因为涉及到用户名和密码的输入,所以在iOS中我们免不了要用到UITextField这个常见的输入控件。

UITextField效果

这里我们能看到这个UITextField的基本要求有如下几个:

  • 输入框内有提示图片
  • 之后输入的文字与输入框内的图片有间距
  • 输入框有圆角

大致分为上面的三个特殊要求,那么我们一个一个来分析,首先是输入框内的提示图片,这里我们要讲UITextField里的两个属性,leftview和rightview,这两个属性分别能设置textField内的左右两边的视图,可以插入图片,我用最简单的代码来展示textField的leftview怎么实现。

 UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"github.jpg"]];
    
    UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 100, 20)];
    textField.leftView =imgView;
    textField.leftViewMode = UITextFieldViewModeAlways;
    
    [self addSubview:textField];

上面的代码,我们能很清楚的看到首先定义一个UIImageView,之后把这个imageView设置成textField的leftview,之后设置leftview的样式,就可以很简单的定义一个leftview。

UITextFieldViewMode是一个枚举类型,有如下属性:

typedef NS_ENUM(NSInteger, UITextFieldViewMode) {
    UITextFieldViewModeNever,
    UITextFieldViewModeWhileEditing,
    UITextFieldViewModeUnlessEditing,
    UITextFieldViewModeAlways
};

但是这样设置的TextField我们会发现,图片是紧紧贴在输入框的边缘的,看起来特别别扭不舒服,那么该怎么设置呢?我们可以子类化一个TextField,去复写它的一个方法来设置leftView的位置

- (CGRect)leftViewRectForBounds:(CGRect)bounds
{
    CGRect iconRect = [super leftViewRectForBounds:bounds];
    iconRect.origin.x += 15; //像右边偏15
    return iconRect;
}

在继承与UITextField中复写这个方法,得到的结果是leftView像右偏移15,是不是很简单呢。

如果这时候我们在输入框中打字,会发现leftview确实跟最初的输入框产生的距离,但是我们打出来的字还是紧紧的黏在图片上,用户体验也极差,根据上面的思路,我们可以接着在这个子类中复写它的设置方法来实现。

//UITextField 文字与输入框的距离
- (CGRect)textRectForBounds:(CGRect)bounds{
    
    return CGRectInset(bounds, 45, 0);
    
}

//控制文本的位置
- (CGRect)editingRectForBounds:(CGRect)bounds{
    
    return CGRectInset(bounds, 45, 0);
}

之前的图片是20大小,加上偏移的15那么一共是35,所以我们设置偏移45的量,即为文本比leftView的图片的最右边向右15。至此,我们已经完成了textField的文本和图片设置,最后来看一下圆角。

圆角有两种实现方式,一种是在layer层处理,来渲染绘制圆角

    textField.layer.cornerRadius = 4;
    textField.layer.masksToBounds = YES;

第二种是设置UITextfield的样式,也能实现自带圆角,但是这个圆角的值是固定的

textField.borderStyle = UITextBorderStyleRoundedRect; 

写到这里,这个UITextField在界面上的要求就已经基本完成了,一般我们用到的常用属性也就是这些。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS开发——定制UITextField

    在iOS中UITextField这个控件作为文本输入控件一定是使用率最高的几个控件之一,而iOS提供的默认的原始TextField的造型肯定在开发时很难满足我们...

    Originalee
  • 使用Block提高代码可读性

    最近一直在思考并持续的扩充着自己的技术栈,比如每天坚持着学习前端知识,并且时常想着在移动端这条路上,自己的技术盲区。诚然,想要在一个领域达到一定的技术高度是挺困...

    Originalee
  • Swift 宏定义与代码标记

    写Objective-C的时候常常会用到各种宏定义,但是Swift中貌似没有宏的这种定义,更多的是通过全局常量或者全局函数来实现这一效果.我们只需要建立一个文件...

    Originalee
  • 从SAP最佳业务实践看企业管理(163)-复式记账法

    在十四世纪末的地中海,那些阳光和煦的冬日里,威尼斯的港口大概是最繁忙的地方。商船满载着将要运往东方,或者刚从东方运来的货物在码头穿梭,珠光宝气的商人们一面监视着...

    SAP最佳业务实践
  • 如何在 CentOS 上安装 RPM 软件包

    RPM 是一个被 Red Hat 和它的衍生版本例如 CentOS 和 Fedora 使用的包管理系统。

    雪梦科技
  • 1. A + B 问题

    给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符。 不能用求和运算符肯定就是用一些最简单的逻辑运算符实现了。 如果没有进位的情况,可以了解用...

    和蔼的zhxing
  • 简单账本-用完即走的微信小程序

            作为一个记账强迫症患者,对当前手机中的记账App都不太满意。这类软件越来越臃肿,越来越慢,启动要半天、联网同步要半天,进入界面又有一堆新功能要介...

    用户1075292
  • 设计模式

    根据设计模式的参考书 Design Patterns - Elements of Reusable Object-Oriented Software(中文译名:...

    Dato
  • Python模拟登陆 —— 征服验证码 6 126邮箱

    登录之后,打印侧边栏。 ? 登录界面 import requests import re # 构造 Request headers agent = 'Moz...

    SeanCheney
  • java设计模式学习(-)

    在我目前看来博客的作用就是笔记了,所谓的原创也仅仅是复制了别人的东西实践了一下,但为了学习记忆确实要记录下来。在这里感谢网络各处的资源,原谅我对资源的索取。 接...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券