MaterialKit MKTextField实战教程如何3步做出Material Design标志性的浮动标签下边框高亮动画【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKitMaterialKit 是一款用 Swift 编写的 iOS Material Design 组件库其中的MKTextField组件能以 3 步做出 Google 设计规范里标志性的浮动标签 下边框高亮输入框动画点击后底部细线加粗变亮占位符自动上浮缩小全程带缓出动画。本文带你从零上手。为什么需要 MKTextField 原生UITextField的占位符placeholder只是灰色静态文字无法实现 Material Design 要求的这种经典交互聚焦或输入文字时占位符从输入区中央浮到顶部缩小、变淡下边框高亮聚焦时 1pt 的灰色细线变成 1.75pt 的主题色高亮线附带Ripple 波纹动画、阴影等 Material 细节MKTextField 把这些全部封装好了源码只有一个文件Source/MKTextField.swift继承自UITextField所有原生 UITextField 的 API 都能照常使用迁移成本几乎为零。准备安装 MaterialKit方式一CocoaPods推荐pod MaterialKit, ~ 0.4方式二直接拷贝源码把 Source/ 目录下的 Swift 文件拖进工程即可核心文件是MKTextField.swift、MKLayer.swift波纹动画的底层 CALayer 封装和MKColor.swiftGoogle 扁平色板。⚠️ 注意组件要求 iOS 8.0。项目属于早期 Swift 语法风格若用新版 Xcode 编译个别方法名需要小迁移作为学习和定制参考非常合适。详见 MaterialKit.podspec 与 LICENSEMIT 协议。第 1 步把 UITextField 换成 MKTextField代码方式只需一行升级let textField MKTextField(frame: CGRect(x: 20, y: 100, width: 280, height: 44))Storyboard 方式在 IB 中选中 TextField → Identity Inspector → 把 Class 改为MKTextField。官方示例的 Main.storyboard 里有 4 个现成的 MKTextField可以直接参考。第 2 步开启浮动标签动画关键开关是floatingPlaceholderEnabled默认是 false这正是不显示浮动标签的最常见原因textField.floatingPlaceholderEnabled true textField.placeholder Email内部原理Source/MKTextField.swift#L239-L247当输入框出现文字时组件会在 0.45 秒内用.CurveEaseOut缓出曲线把一个隐藏的小号标签从输入区中央淡入并上移到顶部——这就是浮动动画。清空文字时标签立即隐藏占位符回归原位交互体验完全符合 Material 规范。浮动标签的字体和颜色也可以单独定制textField.floatingLabelFont UIFont.boldSystemFont(ofSize: 10) textField.floatingLabelTextColor UIColor.lightGray第 3 步配置下边框高亮MKTextField 默认自带一条 1pt 的下边框Source/MKTextField.swift#L93-L113。高亮逻辑在布局刷新时触发Source/MKTextField.swift#L158-L177聚焦时边框宽度变为bottomBorderHighlightWidth默认 1.75pt颜色切换为tintColor失焦时恢复 1pt bottomBorderColor默认浅灰所以想让高亮跟随品牌色只需改tintColortextField.tintColor UIColor.MKColor.Pink.P500 // 聚焦高亮色 textField.bottomBorderColor UIColor.MKColor.Grey.P500 // 静止底色 小技巧原生 TextField 的整圈边框会和 Material 风格打架。官方示例 TextFieldViewController.swift#L16 的做法是把layer.borderColor设为透明只保留下边框。进阶调参一张表看懂常用属性属性默认值作用floatingPlaceholderEnabledfalse开启浮动标签bottomBorderHighlightWidth1.75聚焦时高亮线粗细bottomBorderWidth1.0静止时边框粗细rippleLayerColor浅灰Ripple 波纹颜色rippleLocation—波纹扩散位置.Center/.Left/.TapLocationrippleDuration0.35波纹动画时长elevation0组件阴影悬浮感波纹动画效果可参考 README.md 中 MKButton 的演示MKTextField 的animateRipple机制与其完全一致。加分项Interface Builder 实时预览 MKTextField 标注了IBDesignableSource/MKTextField.swift#L12且上述属性均为IBInspectable——这意味着你在 Storyboard 的Attributes Inspector 里拖动滑块、选颜色画布上会实时重绘不用每次跑一遍 App 看效果对新手调试特别友好。常见问题Q1浮动标签为什么没出现floatingPlaceholderEnabled默认关闭必须显式设为true另外标签只在有文字时显示空输入框只会展示占位符。Q2高亮颜色改bottomBorderColor没生效聚焦态用的是tintColor而非bottomBorderColor后者是失焦态颜色改对地方就生效了。Q3整圈边框还残留执行textField.layer.borderColor UIColor.clear.cgColor与官方示例保持一致。小结3 步回顾把UITextField换成MKTextFieldSource/MKTextField.swift开启floatingPlaceholderEnabled true获得浮动标签动画设置tintColor与bottomBorderColor完成下边框高亮MaterialKit 的其他组件MKButton、MKRefreshControl、MKTableViewCell 等均位于 Source/ 目录沿用同一套波纹 高亮设计语言学会 MKTextField 后其他组件的上手会非常快。【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考