[Swift通天遁地]2、表格表單-(10)快速添加日期選擇/多選/動做表單/地圖等自定義表單

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-wxfiuomx-kk.html 
➤若是連接不是山青詠芝的博客園地址,則多是爬取做者的文章。
➤原文已修改更新!強烈建議點擊原文地址閱讀!支持做者!支持原創!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄:[Swift]通天遁地Swiftgit

本文將演示建立一個更增強大的表單。github

Github項目:【Eureka】swift

下載該項目的源代碼。api

選擇該項目中的幾個文件,拖動到本身的開發項目中。按住【Shift】,選擇微信

文件夾【Example】->選擇app

一個自定義的單元格的類文件【CustomCells.swift】框架

文件夾【Helpers】ide

文件夾【CustomRows】post

->保持默認的設置選項,點擊【Finish】

選擇資源文件夾【Assets.xcassets】,導入項目中須要使用的圖片。

在項目導航區,打開視圖控制器的代碼文件【ViewController.swift】

如今開始編寫代碼,建立一個更增強大的表單。

  1 import UIKit
  2 //首先在當前類文件中,
  3 //引入以及安裝的第三方類庫
  4 import Eureka
  5 //引入地圖的框架
  6 import MapKit
  7 
  8 //建立一個字符串的別名,並建立一系列的表情圖標
  9 typealias Emoji = String
 10 let 👦🏼 = "👦🏼", 🍐 = "🍐", 💁🏻 = "💁🏻", 🐗 = "🐗", 🐼 = "🐼", 🐻 = "🐻", 🐖 = "🐖", 🐡 = "🐡"
 11 
 12 //修改當前視圖控制器類的父類的名稱
 13 class ViewController: FormViewController {
 14 
 15     override func viewDidLoad() {
 16         super.viewDidLoad()
 17         
 18         //設置網址行裏的文本框的字體顏色爲藍色
 19         URLRow.defaultCellUpdate = { cell, row in cell.textField.textColor = .blue}
 20         //設置標籤行的字體顏色爲橙色
 21         LabelRow.defaultCellUpdate = { cell, row in cell.detailTextLabel?.textColor = .orange}
 22         //設置複選行行的前景顏色爲橙色
 23         CheckRow.defaultCellSetup = { cell, row in cell.tintColor = .orange}
 24         //設置日期行的最小日期爲當天的日期
 25         DateRow.defaultRowInitializer = { row in row.minimumDate = Date()}
 26         
 27         //往表單中添加一個新的段落
 28         form = Section()
 29             //往段落中添加一個標籤行
 30             <<< LabelRow ()
 31             {
 32                 //設置標籤行的標題
 33                 $0.title = "LabelRow"
 34                 //設置標籤行的默認值
 35                 $0.value = "tap the row"
 36             }
 37             //當用戶點擊該行時,
 38             //往標籤的文字內容中,添加一枚旗幟圖標
 39             .onCellSelection
 40             { 
 41                 cell, row in
 42                 row.title = (row.title ?? "") + " 🇺🇾 "
 43                 row.reload()
 44             }
 45             //添加一個日期表單行,並設置日期行的默認值和標題文字
 46             <<< DateRow()
 47             {
 48                 $0.value = Date()
 49                 $0.title = "DateRow"
 50             }
 51             //添加一個複選框表單行,並設置該行的標題文字和默認值
 52             <<< CheckRow()
 53             {
 54                 $0.title = "CheckRow"
 55                 $0.value = true
 56             }
 57             //添加一個Switch表單行,並設置該行的標題文字和默認值
 58             <<< SwitchRow()
 59             {
 60                 $0.title = "SwitchRow"
 61                 $0.value = true
 62             }
 63             //添加一個滑竿表單行,並設置該行的標題文字和默認值
 64             <<< SliderRow()
 65             {
 66                 $0.title = "SliderRow"
 67                 $0.value = 5.0
 68             }
 69             //添加一個步進表單行,並設置該行的標題文字和默認值
 70             <<< StepperRow() {
 71                 $0.title = "StepperRow"
 72                 $0.value = 1.0
 73             }
 74             
 75             //添加一個新的段落,用來建立一些片斷的示例
 76             +++ Section("SegmentedRow examples")
 77             
 78             //添加一個字符串類型的片斷行,
 79             //並設置該行擁有三個選項
 80             <<< SegmentedRow<String>() { $0.options = ["One", "Two", "Three"] }
 81             
 82             //添加一個表情圖標類型的片斷行
 83             <<< SegmentedRow<Emoji>()
 84             {
 85                 //設置該行的標題文字
 86                 $0.title = "Who are you?"
 87                 //擁有六個選項
 88                 $0.options = [💁🏻, 🍐, 👦🏼, 🐗, 🐼, 🐻 ]
 89                 //默認值
 90                 $0.value = 🍐
 91             }
 92             //添加一個字符串類型的片斷行
 93             <<< SegmentedRow<String>()
 94             {
 95                 //設置該行的標題文字
 96                 $0.title = "SegmentedRow"
 97                 //擁有兩個選項
 98                 $0.options = ["One", "Two"]
 99             }
100             //設置該行的縮略圖標
101             .cellSetup
102             {
103                 cell, row in
104                 cell.imageView?.image = UIImage(named: "plus_image")
105             }
106             //添加另外一個字符串類型的片斷行
107             <<< SegmentedRow<String>()
108             {
109                 //設置該行擁有四個選項
110                 $0.options = ["One", "Two", "Three", "Four"]
111                 //默認值
112                 $0.value = "Three"
113             }
114             //設置該行的縮略圖標
115             .cellSetup
116             {
117                 cell, row in
118                 cell.imageView?.image = UIImage(named: "plus_image")
119             }
120             
121             //在表單中添加另外一個段落
122             +++ Section("Selectors Rows Examples")
123             
124             //添加一個動做表單行,當點擊此行時,將彈出一個動做表單
125             <<< ActionSheetRow<String>()
126             {
127                 //設置該行的標題
128                 $0.title = "ActionSheetRow"
129                 //設置該行的選擇器標題
130                 $0.selectorTitle = "Your favourite player?"
131                 //設置該行選項列表
132                 $0.options = ["Diego Forlán", "Edinson Cavani", "Diego Lugano", "Luis Suarez"]
133                 //默認值
134                 $0.value = "Luis Suarez"
135             }
136             //添加一個警告行,當點擊此行時,將彈出一個警告窗口
137             <<< AlertRow<Emoji>()
138             {
139                 //設置該行的標題
140                 $0.title = "AlertRow"
141                 //設置該行的選擇器標題
142                 $0.selectorTitle = "Who is there?"
143                 //設置該行選項列表
144                 $0.options = [💁🏻, 🍐, 👦🏼, 🐗, 🐼, 🐻]
145                 //默認值
146                 $0.value = 👦🏼
147             }
148             //當值發生變化時
149             .onChange
150             {
151                 row in
152                 //在控制檯輸出該行的值
153                 print(row.value)
154             }
155             //設置在展現時的前景顏色爲紫色
156             .onPresent
157             {
158                 _, to in
159                 to.view.tintColor = .purple
160             }
161             
162             //添加一個導航類型的表單行,
163             //當點擊此行時,將在導航棧中壓入一個新的頁面
164             <<< PushRow<Emoji>()
165             {
166                 //設置該行的標題
167                 $0.title = "PushRow"
168                 //設置該行選項列表
169                 $0.options = [💁🏻, 🍐, 👦🏼, 🐗, 🐼, 🐻]
170                 //默認值
171                 $0.value = 👦🏼
172                 //設置該行的選擇器標題
173                 $0.selectorTitle = "Choose an Emoji!"
174             }
175         
176         //得到表單的最後一個段落
177         let section = form.last!
178         
179         //在段落中添加要給地理座標行
180         section
181             <<< LocationRow(){
182                 //設置該行的標題
183                 $0.title = "LocationRow"
184                 //默認值
185                 $0.value = CLLocation(latitude: -34.91, longitude: -56.1646)
186             }
187             //添加一個圖像表單行,並設置該行的標題
188             <<< ImageRow()
189             {
190                 $0.title = "ImageRow"
191             }
192             //添加一個可進行多選操做的表單行
193             <<< MultipleSelectorRow<Emoji>()
194             {
195                 //設置該行的標題
196                 $0.title = "MultipleSelectorRow"
197                 //設置該行選項列表
198                 $0.options = [💁🏻, 🍐, 👦🏼, 🐗, 🐼, 🐻]
199                 //默認值
200                 $0.value = [👦🏼, 🍐, 🐗]
201             }
202         
203         //再添加一個新的段落
204         //將在該段落中添加拾取器類型的表單行
205         form +++ Section("Generic picker")
206             //添加一個字符串類型的拾取器行
207             <<< PickerRow<String>("Picker Row")
208             { (row : PickerRow<String>) -> Void in
209                 row.options = []
210                 //添加一個十次的循環語句,設置行的選項列表
211                 for i in 1...10
212                 {
213                     row.options.append("option \(i)")
214                 }
215             }
216             
217             //添加一個新的段落
218             +++ Section("FieldRow examples")
219             
220             //添加一個文本表單行
221             <<< TextRow()
222             {
223                 //設置標題
224                 $0.title = "TextRow"
225                 //設置佔位文本
226                 $0.placeholder = "Placeholder"
227             }
228             //添加一個數字表單行
229             <<< DecimalRow()
230             {
231                 //設置標題
232                 $0.title = "DecimalRow"
233                 //設置默認值
234                 $0.value = 5
235                 //對於數字表單行,咱們能夠設置它的數字格式
236                 $0.formatter = DecimalFormatter()
237                 //設置在用戶輸入時,實時對數字進行格式化
238                 $0.useFormatterDuringInput = true
239             }
240             //設置該行的輸入框的鍵盤類型,在此使用數字鍵盤
241             .cellSetup
242             {
243                 cell, _  in
244                 cell.textField.keyboardType = .numberPad
245             }
246             
247             //添加一個網址行
248             <<< URLRow()
249             {
250                 //設置標題
251                 $0.title = "URLRow"
252                 //設置默認值
253                 $0.value = URL(string: "https://www.cnblogs.com/strengthen/")
254             }
255             //添加一個手機號碼行
256             <<< PhoneRow()
257             {
258                 //設置標題
259                 $0.title = "PhoneRow (disabled)"
260                 //設置默認值
261                 $0.value = "+598 9898983510"
262                 //是否激活
263                 $0.disabled = true
264             }
265             //添加一個名稱表單行
266             <<< NameRow()
267             {
268                 //設置標題
269                 $0.title =  "NameRow"
270             }
271             //添加一個密碼錶單行
272             <<< PasswordRow()
273             {
274                 //設置標題
275                 $0.title = "PasswordRow"
276                 //設置默認值
277                 $0.value = "password"
278             }
279             //添加一個整數表單行
280             <<< IntRow()
281             {
282                 //設置標題
283                 $0.title = "IntRow"
284                 //設置默認值
285                 $0.value = 2015
286             }
287             //添加一個郵箱表單行
288             <<< EmailRow()
289             {
290                 //設置標題
291                 $0.title = "EmailRow"
292                 //設置默認值
293                 $0.value = "lifazhan@coolketang.com"
294             }
295             //添加一個特定類型的表單行
296             <<< TwitterRow()
297             {
298                 //設置標題
299                 $0.title = "TwitterRow"
300                 //設置默認值
301                 $0.value = "@tapinfinity"
302             }
303             //添加一個帳戶表單行
304             <<< AccountRow()
305             {
306                 //設置標題
307                 $0.title = "AccountRow"
308                 //設置佔位文本
309                 $0.placeholder = "Placeholder"
310             }
311             //添加一個郵政編碼表單行
312             <<< ZipCodeRow()
313             {
314                 //設置標題
315                 $0.title = "ZipCodeRow"
316                 //設置佔位文本
317                 $0.placeholder = "101100"
318             }
319     }
320 
321     override func didReceiveMemoryWarning() {
322         super.didReceiveMemoryWarning()
323         // Dispose of any resources that can be recreated.
324     }
325 }
相關文章
相關標籤/搜索