blogレシピ動画サービス「kurashiru」を運営するdelyのテックブログ2018-12-10AppleのUI実装をさぐるTweetこんにちは。delyデザインエンジニアのJohn(@johnny__kei)です。2018の10日目の記事です。https://adventar.org/calendars/3535前日は、プロダクトデザイナーのkassyが「ユーザーの声に振り回されないデザインの改善プロセス」という記事を書きました。いいプロダクトを作るには、ユーザーの声を鵜呑みにするのではなく、きちんと判断する必要がありますよね。Hierarchiesを使用すると、アプリが現在の状態で停止され、Viewの階層や、プロパティを確認できます。WorkflowsAutoLayoutが効いていないのを調査するときに、使用したりする方もいらっしゃると思います。HierarchiesはUIKitのUINavigationBarなどのクラスにも適用され、どのようなView階層か見ることができます。アプリ独自のUIパーツを作成するときに、できるだけ、View構造や、メソッド、プロパティなどを、UIKitにそろえると、使いやすくなると思います。そこで前半は、UIKitのいくつかのクラスのView階層について書きます。後半は、前半をふまえて、サンプルの実装について書きます。UINavigationBarUINavigationBarのsubviewには_UIBarBackground(非公開クラス)があります。下の画像を見るとわかるように、UIVisualEffectViewやshadowImageが設定されるimageViewなどがあることがわかります。UINavigationControllerのnavigationBarでは、StatusBarまでnavigationBarが伸びているように見えるのは、この_UIBarBackgroundがはみ出しているからです。自分で、UINavigationBarをViewControllerのviewにaddSubviewする場合は、適応されないので、UINavigationControllerの方で、そういった実装がされると推測できます。imageViewも、Viewから高さ0.5の分だけ下にはみ出ています。これを発見したとき、ビビりました。UIPageControl横スクロールでページングがあるときに、よく使用されたりします。UIPageControlはdotのサイズやdot間のマージンは変更できません。dot自体は、単なるUIViewであることがわかります。dotは7ptで、dot間のマージンは9ptということがわかりました。シンプルな作りになっています。UIPageControlは、InterfaceBuilderとCodeでの初期状態に違いがあったのも、新しい発見でした。BottomBarSafeAreaの登場で、下部に、Viewを配置したいときに、どういう風に実装したらいいか、悩む場合がありますよね。自分なりに、こうしたらいいんじゃないかという実装を書いていきます。49.0のように本来表示したい高さを定義します。実際にViewControllerのviewにのせるのはこんな感じに制約をつけます。])こうすることで、safeAreaのbottomがある場合は、contentの高さと、safeArea分伸びた状態で表示することができます。このBottomBarの上に、Viewをのせる場合は、contentViewにのせます。contentViewは高さは以下のように固定されているので、ボタンはcontentViewに対して、制約をつけることで、いい感じに表示することができるようになります。BottomBar.viewHeight)さらに、前述した、UINavigationBarのshadowImageを表示するimageViewのように、border部分は、はみ出して作ってあります。これも、contentViewにのせるようにしていて、UINavigationBarのようにしてあります。PageControl前述したように、UIPageControlはdotのサイズやdot間のマージンは定義されていないので、変更することができません。そこで、UIPageControlとほぼ同じ、プロパティやメソッドを持ち、dotのサイズやdot間のマージンを設定できる、PageControlを実装してみます。UIControlは、UIViewのサブクラスなので、普通にViewをのせていくことで大丈夫です。イベントを発火する必要があります。UIPageControlの説明にも書いてあります。その実装は以下のようになっています。.valueChanged)}dotのサイズやマージンを定義することで、サイズの計算も簡単になります。UIPageControlに合わせる。currentPageなどのプロパティの実装に関しても、結構シンプルになっているので、ぜひサンプルの実装をみてもらえばと思います。UIPageControlに実装されていることは、全て実装しています。(たぶん)実装のサンプルは置いておきます。Hierarchiesを使用すると、AppleのUIKit内部の実装が見れておもしろいですよね。UI部分の階層構造しかみれませんが、そこから滲み出る、ロジック部分も想像すると、なお面白いと思います。View階層をデザイナーに見せることで、内部構造を理解してもらえるので、次から、そこを考えて、デザインを作ってくれるようになるかもしれませんね。明日は、サーバーサイドエンジニアのjoeによる「好きな技術を使って作る!くだらないslackBot運用のすヽめ」です。「SwiftUI」と「Flutter」を比較してみたこんにちは!クラシルiOSアプリを開発しているknchstです。月別アーカイブはてなブログをはじめよう!delyjpさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。