纯 Swift 实现的 Material UITextInput (附 GitHub 源码)

开源项目jeantimex • 于 2016-04-23 07:48:30 +0800 • 最后由 T3rdW2016-05-20 07:25:00 +0800 2450 阅读

Material UITextField (Swift)

最近看到Material-UI的风格非常流行,自己在设计这款五子棋游戏Gomoku的时候也采用了它,所以打算把这种风格的UI引入到iOS里。Google了很久也没有找到完全用Swift实现的扩展UITextField的组件,于是打算自己写一个。

我并不打算扩展一个UIView然后在里面控制label动画以及notes,因为我们完全可以直接扩展UITextField,这样使用起来也非常简单,不需要对原有的项目进行非常大的修改(譬如把本来的UITextField改为UIView,移除Delegate等等)。

详细的示例代码可以参考Github里的源码. 以下是示例的截图:

如何使用这个组件呢?

步骤一. 将MaterialUITextField.swift拷贝到你的项目中。

步骤二. 我们需要FontAwesome来显示icons, 将fontawesome-webfont.ttf拷贝到项目中,并设置好Info.plist和Build Phases,如果你对设置字体不了解,可以参考我的项目源码。

步骤三. 如果你使用StoryBoard的话, 选择一个UITextField控件, 在Identity inspector中将Class设成MaterialUITextField。

步骤四. 去到Attributes inspector, 修改下边界的颜色, 宽度, label标签颜色, note颜色和note文字.

或者你也可以通过代码来修改组件: ```javascript @IBOutlet var emailInput: MaterialUITextField!

emailInput.borderColor = UIColor.darkGrayColor() emailInput.borderWidth = 1.0 emailInput.labelColor = UIColor.blueColor() emailInput.noteText = "Example: jean.timex@gmail.com" emailInput.noteIcon = "\u{f058}" // This is the fontawesome code! ... ```

步骤五. 为了使它看上去好看些,建议设置一个placeholder并将原来UITextField的border设为none.

就这些,build and run!

这是这款组件的第一个版本,本着抛砖引玉的初衷,希望能和大家一起学习开发Swift组件。

回复: 2
  • dugege 2016-04-28 21:31:53 +0800

    很赞!

  • T3rdW 2016-05-20 07:25:00 +0800

    UI攻城狮

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,见 Emoji cheat sheet
  • @name 会链接到用户页面,并会通知他
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
Ctrl+Enter