Upgrade to Pro — share decks privately, control downloads, hide ads and more …

コードでUI構築してみた

9d974d9df914b4540ae8febc6cb89f02?s=47 tiking
October 02, 2020

 コードでUI構築してみた

以前LTで登壇した内容です

9d974d9df914b4540ae8febc6cb89f02?s=128

tiking

October 02, 2020
Tweet

More Decks by tiking

Other Decks in Programming

Transcript

  1. コードでUI構築してみた 2020/07/18 Zli × DMM合同

  2. Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です

    Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76
  3. 背景 先日参加したハッカソンにて初めて体験して めっちゃええやんってなったので、個人でも やってみました。

  4. あと… ・メルカリさんのこの記事をみて来てるぞ!!と思ったので… https://tech.mercari.com/entry/2019/12/13/155700 ・SwiftUIを用いてのXcode Previewによってデバックが手軽になったため。

  5. 今回やったこと storyboardやxibを使わずに、アプリを作った。

  6. まずその前に… コードでUIを作るって実際どうなん?

  7. メリット ・コードレビューがカンタン、差分がわかりやすい
 ・プルリクエスト、マージしようとしたときにコンフリクト(競合)が起きにくい 
 ・パーツやUIViewControllerの再利用、継承がカンタン
 ・実装がコードに集約される(読みやすい) 


  8. storyboardのXML

  9. デメリット ・iOSアプリ開発の入門はStoryboard前提のものが大半のため、学習コストがかかる
 ・レイアウトの確認に時間がかかる 
 ・iOSエンジニア以外がレイアウトを確認したり、微調整するのに困難がある


  10. どうやって作るん? ・コードでパーツを作っていきます。初回するコードの書き方→Initialization Closure ・自分の場合は、navigationControllerとか、rootViewの設定は、 SceneDelegate.swiftに書いてました ・layoutとかは、以下の画像のように実装していました。

  11. SceneDeligateのコード

  12. Layoutのコード Extention.swift

  13. ラベルをつくりたい CustomInputAccessoryView.swif

  14. ボタンをつくりたい CustomInputAccessoryView.swif, RegistrationController.swift

  15. xibみたいなことしたい

  16. None
  17. letとlazyを使う時の注意 letでプロパティを定義した際には、viewDidloadで定義していないとselfが使えずエラー がでます。 button.addTarget(self, action: #selector(showNewMessage), for: .touchUpInside) この時にbuttonをlazyで定義してあげると、アクセス時に初期化されるのでselfが使え るようになります。

    今回は、confighogehogeっていう関数で定義しているので使えている感じです。
  18. 画面遷移したい Loginページからメイン画面に遷移する

  19. DEMO

  20. 参考資料 https://qiita.com/gaku2n/items/fa095276ab2d75cc8797

  21. リポジトリー https://github.com/tiking76/chatapp

  22. やってみておもったこと ・思いのほか自由なことができる反面、改めてIB(Interface Builder)の恩恵が あることを感 じることができました。 ・自分自身UIkitの知識が不足していたので、良い勉強になりました。

  23. ここまで ありがとうございました