初心者がOOUIをiOSアプリ開発から学ぶ その1

なんでOOUI学ぶのにXcode開いたの

上野さんのツイッターからその必要性を察した、からです。

最近、個人的にGUI設計にとてもとても夢中になっております。
今年のWIADのテーマでもあったOOUIについて、特に学びを深めているところです。社内でもナレッジ共有が盛んな話題の1つなんですよ!

そして、OOUIといえば上野さん。ツイッターを追いかけまくっています。ツイートを拝見する限り、どうも「OOUIを知りたくばXcodeを開け!」というメッセージを届けようとされている気がしてならず、額面通り開いてがちゃがちゃいじってみることにしました。

XcodeのGUI

XcodeのGUIです。
操作としては、swiftを書く以外に、キーボードのcontrolを押しながらパーツ類をViewControllerと紐づける動作があります。
キーボードの操作性について「ヒューメイン・インタフェース」に書かれています(値段、嘘でしょw)。本曰く、大文字を入力する際、CapsLookはモードが確立するが、Shiftを押しながら入力はモードが確立しないそう。つまり、controlを押しながら紐づける操作がモードレス!

UIkitの中のオブジェクトたち

UI kitから検索する際のsearch areaのplace holderに「オブジェクト」の文字があり、View・ViewController・クラスオブジェクトであるUIパーツ(Labelなど)を検索できました。
命名規則はMVCに乗っ取っていました。ウィキペディアだけど、内容がわかりやすかったので添付します。
https://ja.m.wikipedia.org/wiki/Model_View_Controller

TableViewとCustomCell

Xcodeをいじるにあたり、弊社で開発しているアプリのようなものを作ることを目標に、とりあえずTableを作ってみることにしました。

CustomCellのxibをいじっている時のcellの表示が上記の図です。

とにかくつまずきまくったのですが、うろ覚えの記憶をたどると、TableViewの中にCustomCellというオブジェクトを入れ、CustomCellのLabelやColor、生成する個数の制御をDataSourceから引っ張ってきたりしました。

なるほどたしかに、オブジェクトは個数の増減があるので、GUIの操作的にもUIkitから選んだCustomCellをTableViewの中に1個だけ入れて、個数などはswift上で制御する、で納得です。

本題とは関係ないけど、XcodeのAutoresizingのGUIがSketchのそれでした。(画像が荒い...)
場合によっては、端末サイズに伴うパーツのサイズ変更について、仕様書に細かく書くよりもこのGUI表現を仕様書に書いた方が伝わるかも?

ここまでで学んだこと

- Xcodeというソフトウェア自体の完成度が高い
- MVCの考え方に準拠している
- オブジェクトについての考え方が作りながら学べる

おまけ

現状できたものです。まだまだアプリとは言えない見た目のものだけど、どんどんアップデートしていくぞ。がんばるぞ。

そのまま使えるサンプルコードをとにかく参考にし、エラー対策を学び、優しい人の記事を参考にして作りました。

スクロールできない悩みしか呟いていないですが、よかったらツイッターフォローしてください。(助けて)


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

わたしも
27

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。