首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

設計師如何用週末把 Swift 從不會到學會并做了一個 App

  •  
  •   cctrv · 2017-11-14 04:27:56 +08:00 · 3719 次点击
    这是一个创建于 706 天前的主题,其中的信息可能已经有所发展或是发生改变。

    導言

    起先,本來想用 React Native 做一個微信名片導入到錢包的 App。 某日重裝系統后,原來的 React Native 的環境怎麼裝都跑不起來原來寫的 App。 因此,我怒而轉向 Swift 陣型。

    其實在 React Native 寫 UI 這過程很方便,但是接入 iOS 錢包這個過程,真的看到我一頭暮水。

    新建項目

    當然打開你的 Xcode,我建立了一個叫 Play 的項目。

    B5E0AE4C-EFC1-4059-9293-85B0E3FF451B

    選擇「 Single View App 」,下一步,不使用 Core Data。

    入門

    我覺得一切的語言,最重要還是莫過於。

    print("...")

    無論你想寫什麼命令,用 Print 一下就正解了。

    我在網絡上找了一個庫,叫「 PlainPing 」

    https://github.com/naptics/PlainPing

    PlainPing.ping("www.google.com", withTimeout: 1.0, completionBlock: { (timeElapsed:Double?, error:Error?) in
        if let latency = timeElapsed {
            self.pingResultLabel.text = "latency (ms): \(latency)"
        }
    
        if let error = error {
            print("error: \(error.localizedDescription)")
        }
    })
    

    我突然間開始覺得,Swift 這個語言怎麼做起來跟 node 差不多,想要什麼功能?想網找一個庫回來。

    所以,我就這樣子,入門了一個 Swift 面向 Google 的開發人員了。

    開始嘗試寫一個 App

    在開始寫一個 App 之前,我推薦使用 StoryBoard ( IB )作為 App 的 UI 編輯工具。

    170CBBC8-0242-45BE-9F4B-21E4B13574A4

    IB 的使用規則很簡單,核心就是一個「約束」概念。

    IB 的入門課程我是看了這篇文章入門的(Auto Layout 入門教學 | 設計自適應介面 Adaptive UI)。

    至於大家如何入門,我覺得 Google 多點就可以了。

    949BA62F-998A-4256-AA45-8DE7EAC7

    我們當然可以先拖動一個空間到我們的 IB,再設定一下水平垂直居中。

    670AC0AE-3A4B-4210-85EC-0A83E1FB7966

    接著,用我們的簡單代碼,來體驗一下第一次使用 IB 并可以運行的愉悅感。

    05A9BA49-FA96-4367-B72E-826ACD101 1704B8D7-A894-4C33-A68F-F43AC5FEA813 C8F00057-2D02-49BB-811C-79F43F941125

    按照上圖,我們使用在 IB 添加了一個叫 Label 的控件,接著,把界面切換成「 Assistant 」模式。

    對著我們的 Label 控件右擊后拖動到左邊,建立一個 Outlet。

    先這樣。


    什麼是 Outlet 和 Action 呢?

    其實,這裡就是一個綁定的過程。 在 Storyboard,我們做完的界面是不會和代碼綁定的。作為設計師的你,就理解為 Storyboard 就在另一個次元空間吧。 我們使用神之鼠標把控件給綁定到代碼之中,給代碼暴露了一個可以控制某個控件的接口,這裡,稱呼為 Outlet。 不過這個 Outlet 只能讀取和修改控件的一些樣式,文本內容。

    如果遇到按鈕類的控件呢?我們就要用 Action 這個事情了。 在使用鼠標把控件拖動到代碼,選擇 Action,就會要求你新建一個 Function 了。這樣,你點一下那個控件的操作,就會由 Function 來完成了。 如果,你需要修改一個按鈕的名字,還是需要綁定上 Outlet 才可以。

    簡單而言,Outlet 比較類似一個數據上的綁定。然而 Action 就是去觸發 Function。


    我們繼續回來,原來的代碼。 我們這次,在添加一個 Action,使用剛才的辦法。 添加完 Action 后,我們就寫一個事情進來。

        @IBOutlet weak var PlayLabel: UILabel!
        @IBAction func doAction(_ sender: UIButton) {
            PlayLabel.text = "Hey"
        }
    

    做完這些事情,我們就按下 Command (⌘)+ R 來在模擬器運行我們的 App。

    我們就可以點一下「 Button 」,yo,我們的 Label 的文字就變成,Hey 了!

    Kapture 2017-11-14 at 3.54.12

    是很簡單的吧?

    我們的入門課程就如此結束了。

    設計師如何開發一個 Swift App ?

    首先,我們要做一個設計圖。

    398FC426-CEA7-4D74-A626-C1B4FA37EA9A

    接著,我們把設計圖的樣子,用 Xcode 的 IB 佈局出來。

    DE258572-94E0-4A36-A4FE-4167D817E85B

    放心,在 IB 的樣式不能完全反映 App 的最終樣子。 因為有部分樣式,我們只能使用代碼添加,不能使用 IB 完成。

    接著,引入一大堆的庫和寫一大堆的代碼。

    FA51DDAB-CE20-4D90-93C2-8F448B5FA7B7


    難點﹣UITableView

    UITable 是整個佈局之中最難的第一個地方。
    我從 下午 7 點折騰到凌晨 2 點才搞定這個 UITableView。
    這裡分享兩個視頻,我是後期看了這兩個視頻才知道怎麼折騰。

    Auto Resizing Table View Cell height in swift 3 and Xcode - YouTube

    https://www.youtube.com/watch?v=6bQYd9N6g6A


    最後,在真機運行 App 吧!

    43365B28-AA81-4307-BA88-73DAB8717054 91DF1F52-D3E6-4ECB-B07E-C9E592C728E7

    GitHub 項目位置

    https://github.com/qoli/dailyVerse

    項目應該快可以上架,我週末買了 Apple 開發者會員,可惜都週一過去了,還沒顯示通過會員。 這種 App 寫完了,但是開發者還沒下來真奇怪。哈哈哈

    大家也可以透過這裡查看操作視頻: https://www.youtube.com/watch?v=Y4xG7LScOT8&feature=youtu.be

    第 1 条附言  ·  2018-01-20 05:53:35 +08:00
    經過一堆波折
    包括有

    1. 因為功能太簡單而不讓上架;
    2. 因為 API 不支持 ipv6 而拒絕通過;
    3. 因為 2 那點是假的,是 App Store 審查員無法訪問 API 而向我報告 IPV6 問題;
    4. 因為 2 和 3,所以我寫了一個 API 服務器端代理,請求到 Google GAE 再請求 API ;
    5. 所以,才上架了。

    App Store 下載鏈接:
    https://itunes.apple.com/hk/app/%E6%AF%8F%E6%97%A5%E8%81%96%E7%B6%93%E6%95%85%E4%BA%8B/id1313606731?mt=8
    29 回复  |  直到 2018-01-20 05:54:11 +08:00
        1
    ynyounuo   2017-11-14 06:18:50 +08:00 via iPhone
    挺好看的
        2
    hualongbei   2017-11-14 08:23:45 +08:00 via Android
    真是羡慕可以沉下心来做事的人呢
        3
    fuermosi777   2017-11-14 08:34:52 +08:00
    用心做的东西
        4
    diyisoft   2017-11-14 08:42:07 +08:00 via iPhone
    挺好,记得发过真人照片的。佩服不断学习的
        5
    hugee   2017-11-14 08:42:57 +08:00 via Android
    繁体看着有点累
        6
    hellobanny   2017-11-14 08:44:59 +08:00
    不知道会不会被苹果以功能太简单不让上线?
        7
    66beta   2017-11-14 08:57:14 +08:00
    前端,看了 1 分钟 OC,想吐
        8
    kimown   2017-11-14 09:04:03 +08:00 via Android
    @66beta 试试 swift
        9
    nl101531   2017-11-14 09:20:17 +08:00 via Android
    看发帖时间,妹纸起来的好早
        10
    newbieo0O   2017-11-14 09:35:05 +08:00
    开发还是用原生语言靠谱,平台特性都支持。
        11
    webfrogs   2017-11-14 09:52:51 +08:00
    厉害了!开发者账号申请是比较慢,耐心等待吧。
        12
    missdeer   2017-11-14 10:03:35 +08:00
    开发者账号申请可以直接打中文客服电话,指导你填充必要信息并立马开通~
        13
    cctrv   2017-11-14 10:40:24 +08:00
    @missdeer 還有這樣的操作?我研究一下。
        14
    diyisoft   2017-11-14 10:53:59 +08:00 via iPhone
    @cctrv 当时申请的账号,需要翻译的部分是客服帮我翻译的,哈哈
        15
    laoyur   2017-11-14 10:56:29 +08:00
    能一遍过的话算我输
    哈哈,说句玩笑话,不过审核真的可能会以功能简单为由不给过的
        16
    caizhendi   2017-11-14 11:00:31 +08:00
    厉害了 设计师!!!!
        17
    cctrv   2017-11-14 11:27:26 +08:00 via iPhone
    @laoyur 我先把你這句話記住先。
        18
    aksoft   2017-11-14 13:43:51 +08:00
    不错哦,我试试
        19
    sobigfish   2017-11-14 14:01:09 +08:00
    (昨天在群里看到过 没仔细瞧)

    iOS 钱包是什么
    Apple pay ?
        20
    LeoNG   2017-11-14 14:06:09 +08:00
    佩服楼主的行动力。
        21
    GuangTsang   2017-11-15 13:18:08 +08:00
    厉害了,我想要这种教学,一直想学
        22
    phk   2017-11-15 16:46:50 +08:00
    给你打 call !!
        23
    noli   2017-11-15 17:37:57 +08:00
    @cctrv

    告诉 Apple 审核“我是女生,我从学 swift 到完成 app 才 3 天,我这中开发者还需要审核吗!!!?”

    表情要骄傲自豪,然后库克就会拜访你了。

    因为楼主你简直就是 Apple 梦寐以求的深度用户(开发者 mix 设计者)。
        24
    hanangellove   2017-11-16 09:28:23 +08:00
    楼主可以试试 swift4 的 codable 协议,可以完全不用 swiftJson 了。
        25
    hanangellove   2017-11-16 09:28:53 +08:00
    另外,楼主 App UI 设计的还不错。
        26
    jhdss   2017-12-05 11:30:47 +08:00
    厉害了 我的小姐姐
        27
    nannanziyu   2017-12-06 09:19:18 +08:00
    @hanangellove
    codable 是个残次品
    1, 继承无效
    2, 不能设置默认值
        28
    cctrv   2018-01-20 05:53:49 +08:00
    終於上架了……
        29
    cctrv   2018-01-20 05:54:11 +08:00
    @hanangellove
    SwiftJSON 超級好用~ 我不想換別的了。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2794 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 22ms · UTC 12:28 · PVG 20:28 · LAX 05:28 · JFK 08:28
    ♥ Do have faith in what you're doing.