首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在UITextFIeld中将图标/图像放在文本的最后一个字母旁边?

在UITextFIeld中将图标/图像放在文本的最后一个字母旁边,可以通过以下步骤实现:

  1. 创建一个自定义的UIView,用于容纳文本框和图标/图像。
  2. 在UIView中添加一个UITextField和一个UIImageView,分别用于显示文本和图标/图像。
  3. 设置UITextField的delegate为当前的ViewController,以便处理文本输入事件。
  4. 在UITextField的代理方法中,监听文本变化事件,获取文本的最后一个字母的位置。
  5. 根据最后一个字母的位置,计算图标/图像的位置,并设置UIImageView的frame。
  6. 将UIView添加到父视图中,并设置合适的布局约束。

以下是一个示例代码,演示如何实现上述功能:

代码语言:swift
复制
import UIKit

class ViewController: UIViewController, UITextFieldDelegate {
    let textField = UITextField()
    let iconImageView = UIImageView(image: UIImage(named: "icon"))

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 设置UITextField的属性
        textField.borderStyle = .roundedRect
        textField.placeholder = "请输入文本"
        textField.delegate = self
        
        // 添加UITextField和UIImageView到自定义的UIView中
        let customView = UIView()
        customView.addSubview(textField)
        customView.addSubview(iconImageView)
        
        // 设置布局约束
        textField.translatesAutoresizingMaskIntoConstraints = false
        iconImageView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            textField.leadingAnchor.constraint(equalTo: customView.leadingAnchor),
            textField.topAnchor.constraint(equalTo: customView.topAnchor),
            textField.bottomAnchor.constraint(equalTo: customView.bottomAnchor),
            iconImageView.leadingAnchor.constraint(equalTo: textField.trailingAnchor, constant: 5),
            iconImageView.centerYAnchor.constraint(equalTo: textField.centerYAnchor),
            iconImageView.widthAnchor.constraint(equalToConstant: 20),
            iconImageView.heightAnchor.constraint(equalToConstant: 20)
        ])
        
        // 将自定义的UIView添加到父视图中
        view.addSubview(customView)
        
        // 设置布局约束
        customView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            customView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            customView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            customView.widthAnchor.constraint(equalToConstant: 250),
            customView.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
    
    // UITextField的代理方法,监听文本变化事件
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // 获取文本的最后一个字母的位置
        let lastCharacterIndex = textField.text?.index((textField.text?.endIndex)!, offsetBy: -1)
        
        // 计算图标/图像的位置
        let iconXPosition = textField.frame.size.width - 20
        
        // 设置UIImageView的frame
        iconImageView.frame = CGRect(x: iconXPosition, y: 0, width: 20, height: 20)
        
        return true
    }
}

在上述示例代码中,我们创建了一个自定义的UIView,其中包含一个UITextField和一个UIImageView。通过设置UITextField的代理方法,我们监听文本变化事件,并根据最后一个字母的位置计算图标/图像的位置,然后设置UIImageView的frame。最后,将自定义的UIView添加到父视图中,并设置合适的布局约束。

这样,当用户在UITextField中输入文本时,图标/图像就会显示在文本的最后一个字母旁边。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS开发——定制UITextField

在iOS中UITextField这个控件作为文本输入控件一定是使用率最高几个控件之一,而iOS提供默认原始TextField造型肯定在开发时很难满足我们要求,原因很简单,不够美观,实在太单调。...所以今天我们从一些简单复写UITextField方法开始,来讲一讲如何定制一个属于自己UITextField。...今天我们主要从UITextField键盘收起、placeholder设置以及自定义距离、字体,以及控制输入文本时,距离UITextField边框距离和UITextField中一些常用方法和枚举变量等方面来阐述如何定制自己...键盘收起 首先我们先来看UITextField键盘弹出和回收,UITextField在默认情况下,键盘在输入完成后是不会自动回收,这里我们讲解如何在按下Return键时,键盘自动回收。...placeholder设置 在一些特定功能文本输入框,我们常常要设置placeholder属性来指明当期UITextField功能,例如:请在此处输入密码。

1.6K40

SwiftUI TextField进阶——格式与校验

SwiftUI TextField进阶——格式与校验 想获得更好阅读体验,请访问我博客 www.fatbobman.com[1] SwiftUITextField可能是开发者在应用程序中最常使用文本录入组件了...本文为【SwiftUI 进阶】系列文章中一篇,在本文中,我将介绍如何在TextField中实现如下功能: •屏蔽无效字符•判断录入内容是否满足特定条件•对录入文本实时格式化显示 textfieldDemo1...开发可以直接使用非String类型数据(整数、浮点数、日期等),通过Formatter来格式化录入内容。...•支持类型种类方案一可以直接使用多种数据类型,方案二中需在TextField构造方法中将原始数值转换成对应格式字符串。方案二演示代码中,可以通过result获取字符串对应数值。...不利于判断用户是否录入新信息(更多信息可参阅如何在SwiftUI中创建一个实时响应Form[10])。方案二中允许不提供初始值,支持可选值。

8.2K20
  • 【iOS 开发】基本 UI 控件详解 (UIButton | UITextField | UITextView | UISwitch)

    ; -- 高亮 : UI 控件突出显示, 处于高亮状态; 手放在按钮上处于高亮状态; -- 禁用 : UI 控件关闭后, 处于禁用状态; 禁用状态控件不可操作, 禁用操作在 Interface Builder..., 常用与显示列表详情, 效果如下 :  -- Info Light | Info Dark : 显示 i 图标, 显示简短说明信息, 效果如下 :  -- Add Contact : 显示 +...UITextField 属性 (1) PlaceHolder 属性 PlaceHolder 属性 : 属性值是一个字符串, 再文本框没有输入内容时, 文本框内显示灰色文本, 用于作为文本框提示信息...属性 Capitalization 属性 :  -- None : 不切换大小写; -- Words : 自动将首字母转大写字母; -- Sentence : 每个句子首字母转为大写字母; -- All...Characters : 将每个字母转为大写字母; (6) Correction 属性 Correction 属性 : 自动更正属性; -- No : 不自动更正字母; -- Yes : 自动更正字母

    6.8K20

    何在Ubuntu 14.04上使用Rancher管理Jenkins

    要启动容器,请单击要使用计算节点下“ 添加容器”,然后添加以下选项: 在名称旁边文本框中使用Master作为容器名称。 使用jenkins作为源图像,在“ 选择图像旁边文本框中。...单击“ 卷”旁边“ +”,然后在出现文本框中指定/var/jenkins_home。将Jenkins主目录放在卷中可以让您在重新启动容器时保留配置,并允许您使用其他容器功能中卷备份容器。...在下一个菜单中,在节点名称旁边文本框中输入您从站名称(并记住它 - 我们稍后会再次需要它),选择Dumb Slave作为类型,然后单击OK。 您将被重定向到包含有关此节点详细信息页面。...在选择图像旁边文本框中使用usman / jenkins-slave作为源图像。 然后单击高级选项。您将从Command选项卡开始。...单击“ volume”旁边“ +”,然后在出现文本框中指定/var/jenkins。 最后,单击“ 创建”。

    2.2K00

    iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField代理方法通知UITextField 在storyboard 中设置属性

    对象风格选项,你还可以定制化UITextField对象,为他添加许多不同重写方法,来改变文本字段显示行为。...这些方法都会返回一个CGRect结构,制定了文本字段每个部件边界范围。以下方法都可以重写。...//这对于想要加入撤销选项应用程序特别有用 //可以跟踪字段内所做最后一次修改,也可以对所有编辑做日志记录,用作审计用途。...下拉菜单中有四个选项: 13.1 None : 不设置大写 13.2 Words : 每个单词首字母大写,这里单词指的是以空格分开字符串 13.3 Sentances : 每个句子一个字母大写...18、Auto-enable Return Key : 选择此项,则只有至少在文本框输入一个字符后键盘返回键才有效。

    7.2K60

    1.注册或登录页面设计:UILabel,UIButton,UITextField

    一.注册或登录界面 如下图,实现了一个注册或登录界面,这里先只介绍单个页面,不介绍点击“完成”按钮后动作,在之后系列《iOS开发入门总结》中会逐步介绍,等基础知识介绍差不多了,就可以以一个完整注册系统作为小结...说明: 这里为了展现UITextField文本框关联键盘设置,这里把“密码”和“确定密码”关联键盘都设置为数字键盘,实际应用中密码一般都允许为数字或字母。 实现了键盘收回操作。...UITextAutocapitalizationTypeSentences, 句子字母大写 UITextAutocapitalizationTypeAllCharacters, 所有字母都大写...//每输入一个字符就变成点 ,用语密码输入 [passwordTextField setSecureTextEntry:YES]; 也可以设置文本框关联键盘,如下: //设置键盘样式 text.keyboardType...//限制输入文本长度 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString

    2.4K50

    Power BI模拟京东、微信读书卡片图

    《微信读书、多看阅读、京东读书可视化》介绍了三个阅读APP可视化效果,昨天介绍了多看卡片图如何在Power BI实现,今天分享京东和微信模拟思路。...下方三个卡片比较简单,使用新卡片图视觉对象可以一次性设置: 标签设置低于值: 上方两个指标相对复杂,体现在指标名称旁边有个图标,以下是Power BI模拟效果。...图标很好加,还是新卡片图视觉对象,在我提供《复制粘贴就可以使用Power BI图标素材查询系统2.0》搜索对应SVG图标代码,放到卡片图图像URL,位置在上方。...此处有一个问题:指标名称也会显示在图标下方,如何让指标名称和图标并列? 我们需要将视觉对象默认指标名称隐藏,接着修改SVG图标,在尾部增加一个text元素,将指标名称显示出来。...因文本需要横向空间,所以需要修改整个图像width值,此处由48增加到了200像素。 以上是京东读书模拟,微信读书的卡片原理是一致,也是图标+文本

    27420

    iOS UITextField详解

    receiver对应键盘往下收 return YES; } 重写绘制行为 除了UITextField对象风格选项,你还可以定制化UITextField对象,为他添加许多不同重写方法,来改变文本字段显示行为...这些方法都会返回一个CGRect结构,制定了文本字段每个部件边界范围。以下方法都可以重写。...//这对于想要加入撤销选项应用程序特别有用 //可以跟踪字段内所做最后一次修改,也可以对所有编辑做日志记录,用作审计用途。...//要防止文字被改变可以返回NO //这个方法参数中有一个NSRange对象,指明了被改变文字位置,建议修改文本也在其中 return YES; } - (BOOL...return YES; } ``` ### 通知 UITextField派生自UIControl,所以UIControl类中通知系统在文本字段中也可以使用。

    1.8K30

    VCL 控件分类_验证控件分类

    动态窗体:主窗体和动态生成窗体(Project|Options|Forms) 在一个头文件中添加另一个头文件(File|Use Unit) new TForm2(this); (this: 指以此为容器...可以用来做悬浮控件(该事件中将控件Top属性设为一确定值)。 Anchors:可视控件边界,在窗体大小变化时设置控件与窗体某边距离不变。...创建二级菜单:右键,CreateSubMenu 在菜单Caption中字母前加 & 字符,使得该字母为该菜单加速键。...Flat:是否鼠标在突起显示,或作为普通按钮 Images:按钮图像列表 DisableImages:按钮被禁用时图像列表 HotImages:鼠标指向该按钮时图像列表 ImageIndex:确定按钮显示图像序号...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    4.3K10

    ArcMap 基本词汇

    Layer地图图层定义了GIS数据集如何在地图视图中进行符号化和标注(即描绘)。每个图层都代表ArcMap中一部分地理数据,例如具有特定主题数据。...各种地图图层例子包括溪流和湖泊、地形、道路、行政边界、宗地、建筑物覆盖区、公用设施管线和正射影像。内容列表内容列表中将列出地图上所有图层并显示各图层中要素所代表内容。...内容列表 内容列表中将列出地图上所有图层并显示各图层中要素所代表内容。每个图层旁边复选框可指示当前其显示处于打开状态还是关闭状态。...常见地图元素包括一个或多个数据框(每个数据框都含有一组有序地图图层)、比例尺、指北针、地图标题、描述性文本和符号图例。 ?...目录 窗口可提供一个包含文件夹和地理数据库树视图。文件夹用于整理 ArcGIS 文档和文件。而地理数据库则用于整理 GIS 数据集。 ? 标注 用于标注地图图层中要素文本字符串即为标注。

    6.1K20

    UI界面视觉平衡终极指南

    为了在视觉上与方形保持平衡,三角形应该更宽、更高,这样它们面积才会相似。需要注意是,此方法只适用于简单形状。 ? 如何在界面中利用这个特性?...如果将Twitter和Pinterest图标放大一些,看起来就能和Facebook和Instagram图标保持平衡了。 ? 视觉平衡一个例子就将是一个文本框和一个圆形按钮放在一起。...而在右图中,由于输入框有实线描边,所以我们将它与其他文本对齐,并且将对应文本内容进行了缩进处理。“发送”按钮有一个三角形边,并且向右移动了一点,以与上面的矩形输入元素保持平衡。 ?...图标按钮情况与文本按钮略有不同。我们把“发送”图案放在一个圆形按钮背景上。你认为哪种图标在视觉上更平衡? ? 你应该已经注意到左边不平衡了,这是因为不同对齐方法。...应该将多个SVG组合在一起,在代码中包含特殊公式或脚本,或者使用像Apple应用程序图标一样把png放在一个统一蒙版上。

    2.5K40

    iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

    系统按钮: 默认状态下不含边界,也不含背景图 可以是图标或者文字标题 支持自定义样式,描边或者加背景图(想要自定义按钮外观,可以使用 UIButtonTypeCustom 类型按钮,并且提供背景图片...4.3.18文本框 开关按钮展示了两个互斥选项或状态。 ? API提示: 想要了解如何在代码中定义文本框,以及在文本框中支持图片和按钮,可以参考UITextField....你可以自定义一个文本框,帮助用户更好地理解如何使用它。举个例子,你可以在文本左侧或者右侧加入自定义图形,或者加入系统按钮,书签按钮等。...一般来说,文本左侧用于表述文本含义,而右侧用于展示附加功能,书签。 合适的话,在文本框右侧加入清除按钮。...当文本框里没有任何其它提示文字时,会展示占位符文本(placeholder text),名字、地址等。 根据输入内容类型来指定不同键盘类型。

    13.2K30

    VsCode中使用Jupyter

    (以前称为IPython Notebook)是一个开源项目,可让您轻松地在一个名为Notebook画布上组合Markdown文本和可执行Python源代码。...建立一个新笔记本 新建默认名字 Ctrl+S 写一个靠谱名字奥 这个是加载文本形式笔记本 还没有呗渲染出来 不知道这个为什么找不到python安装路径 CMD可以找到 pip list列出安装过包...要在PDF中包含SVG图形,请确保您输出包含非SVG图像格式,否则您可以首先导出为HTML,然后使用浏览器另存为PDF。...运行上一个 运行下一个 运行所有输出 运行所有代码 清楚所有输出 ---- 移动代码小区# 使用每个代码单元旁边垂直箭头可以在笔记本中向上或向下移动代码单元。...对于一个有作用小片段 在调试方面还是建议单独一个py文件 点左上运行 可以看到有一些别的操作 鼠标放在函数上面 可以出现详细信息 调试时候点虫子 和上面的显示相同 可以看到里面的列表已经被展开了

    6K40

    Flutter中构建布局 顶

    建立布局 第0步:设置 第1步:绘制布局图 第2步:实施标题行 第3步:实现按钮行 第4步:实现文本部分 第5步:实现图像部分 第6步:把它放在一起 Flutter布局方法 布置一个小部件 垂直和水平放置多个小部件...首先,确定更大元素。 在这个例子中,四个元素排列成一列:一个图像,两行和一个文本块。 ? ? ? ? 接下来,绘制每一行。 第一行称为标题部分,有三个孩子:一列文字,一个星形图标一个数字。...将第一行文本放入Container中可以添加填充。 列中第二个子项(也是文本)显示为灰色。 标题行中最后两项是一个红色星形图标和文字“41”。 将整行放在容器中,并沿着每个边缘填充32像素。...此行中列均匀分布,文本图标用主颜色绘制,在应用程序build()方法中将其设置为蓝色: class MyApp extends StatelessWidget { @override Widget...它还显示了一个简单Hello World应用程序完整代码。 在Flutter中,只需几个步骤即可在屏幕上放置文本图标图像。 1.选择一个布局小部件来保存该对象。

    43.1K10

    Google Earth Engine(GEE)——GEE最全介绍(7000字长文)初学者福音!

    当按下“获取链接”按钮时,浏览器地址栏中将出现一个唯一链接。此链接表示按下按钮时编辑器中代码。...创建一些导入后,您应该会看到类似于图 5 内容。要将导入复制到另一个脚本,或将导入转换为 JavaScript,请单击 subject图标旁边Imports 标题并将生成代码复制到您脚本中。...将出现一个配置对话框,允许您选择图像分辨率或大小,以及表格格式(CSV、GeoJSON、KML 或 KMZ)。运行任务后,将鼠标悬停在任务管理器中任务上将显示“?” 可用于检查任务状态图标。...要配置几何图形导入脚本方式,请单击 地图上Geometry Imports部分或代码编辑器Imports部分中图层旁边图标。几何图层设置工具将显示在一个对话框中,该对话框应类似于图 9。...几何配置工具 最后,为了防止图层中几何图形被编辑,您可以通过按 图层旁边图标。这将阻止添加、删除或编辑图层上任何几何图形。要再次解锁图层,请按 图标。防止你改动或者删除之类操作!

    1.7K11

    flutter 输入框组件TextField实现代码

    TextField 顾名思义文本输入框,类似于iOS中UITextField和Android中EditText和Web中TextInput。主要是为用户提供输入文本提供方便。...然后我们为输入框做一些其他效果,提示文字,icon、标签文字等。...我们给上面的代码新增decoration属性,设置相关属性,可以发现当我们TextField获得焦点时,图标会自动变色,提示文字会自动上移。 ? 还可以看到 我加了一个onChanged。...当按下一个未完成操作(“next”或“previous”)时,用户内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]中一个输入小部件。...TextCapitalization.sentences : 这是我们期望正常类型大写,每个句子字母大写。 ?

    4.8K11

    linux常见面试题

    通常,一个桌面环境,KDE或Gnome,足以在没有问题情况下运行。尽管系统允许从一个环境切换到另一个环境,但这对用户来说都是优先考虑问题。...CLI提供更大灵活性。但是,已经习惯使用GUI其他用户发现很难记住包含随附属性命令。 14)什么是GUI? GUI或图形用户界面使用用户单击和操作图像图标作为与计算机通信方式。...使用图形元素不仅需要记住和键入命令,还可以更轻松地与系统交互,以及通过图像图标和颜色添加更多吸引力。 15)如何在发出命令时打开命令提示符?...在命令中,color.ui变量设置变量默认值,例如color.diff和color.grep。 55)如何在Linux中将一个文件附加到另一个文件?...要在Linux中将一个文件附加到另一个文件,你可以使用命令cat file2 >> file 1. operator >>附加指定文件输出或创建文件(如果未创建)。

    2.5K10

    GoLand IDE 2023 快捷键大全:提高开发效率必备操作

    最后但同样重要是,您可以在 Find Tool Window(查找工具窗口)一个单独选项卡中打开当前搜索结果并运行另一个查询。...只需点击 Search Everywhere(随处搜索)右侧 Open in Find Window(在查找窗口中打开)图标即可。...此外,您可以随时按如下方式执行此操作:将文本光标放在代码上,按 ⌥↵/Alt+Enter,选择要禁用操作,点击旁边向右箭头,然后点击 Disable (禁用 )。...为了提高操作速度,您还可以下载 Key Promoter X 插件:https://plugins.jetbrains.com/plugin/9792-key-promoter-x 有了这个插件,每次您在 IDE 中将鼠标放在按钮上时...然后,我们讨论了“Generate”功能,该功能可用于快速创建常用代码结构和重复元素,函数、结构体、getter 和 setter 等。

    67610

    iOS学习——UIAlertController详解

    上面我们讲到了如何在UIAlertController提示器上添加按钮,但是有时候,我们需要在提示器上添加一个或多个文本框让用户填写一些信息,在UIAlertController中也提供了一个方法直接可以在提示器上添加文本框...只有一个参数,就是一个Block,用于我们队该文本框进行配置,比喻说其字体大小,行数限制等等,都可以在该Block中进行设置。...时才有 文本添加多个 我们可以看到,在配置文本框这里还有一个参数是textFields,这各参数是一个只读数组类型,用于获取UIAlertController提示器上所有的文本框对象,这个经常在我们点击按钮时用这个来获取到每一个文本框...but,在某些情况下,万恶UI会要求你修改显示文字大小、颜色,虽然系统自带有一种红色字体UIAlertAction,但是这种Action并不能放在Cancel位置,所以,更多时候,需要我们自己修改文字字体和颜色...主要方法有两种: 利用第三方控件 利用KVC方法进行自定义修改 2.1 利用第三方控件进行UIAlertController属性自定义 现在Github上有着众多Alert控件(SCLAlertView

    3.1K170

    Notion系列-视图、过滤和排序

    创建视图和切换视图 首次创建数据库时会使用默认视图布局,之后就可以点击左上角+ New view按钮创建其他视图。 • 在文本框中命名视图,然后选择想要视图类型。...• 可以通过向上或向下拖动视图旁边 ⋮⋮ 图标来重新排序视图。 图片 • 在侧边栏中,视图显示为任何整页数据库中嵌套项目。 • 单击边栏中视图可直接跳转到该视图。...• Gallery 画册布局:将数据通过图像展示出来。可以设置为显示 Files & media 属性中包含图像或页面中内容。 打开页面为 在每个视图中,您可以设置数据库页面的打开方式。...添加过滤器 • 点击数据库右上方 Filter 过滤器(如果是内联表,你可以在蓝色 新建 New 按钮旁边找到它)。 • 在出现窗口左下方点击 Add a filter 添加一个过滤器 。...例如,你可以根据优先级,或最后编辑,或按字母顺序排列。 • 点击数据库右上方 Sort ,然后点击 + Add a Sort 。

    60740
    领券