読者です 読者をやめる 読者になる 読者になる

せでぃのブログ

ブログ初心者おいどんのどうでもいい愚痴やどうでもいい愚痴やどうでもいいマメ知識などを披露するチラシの裏です。

xcode7.2のscrollviewで画面をスクロールさせる2

xcode7.2 SimVersion9.2 iphoneアプリ開発

 scrollviewのアクセスが多いので、試しに作り直してみたところ、xcode6くらいの比較的新しい手順でも全く動かないことがわかった。
 プライドをかなぐり捨ててスクロールするだけでもと思ったが、これが全く動かない。という訳でさらにプライドを捨てて踏んづけてムシャムシャ食べる勢いで、youtubeの再現をしてみた。

 今回、参考にした動画はこちら。今回は、これを見やすくしただけの記事と思って欲しい。
Swift - How to use Scrollview Xcode 7 (Storyboard) - YouTube


 OK。動いた。
f:id:Sediment:20160111025728p:plainf:id:Sediment:20160111025736p:plain

1.初期設定
 Single View Application、言語はSwift、DevicesはiPhoneで始める。プロジェクト名、プロジェクト作成場所は適当。
 今回、コードは一切使わないし、続かないので、swiftである必要性は全くない。再現だよ、再現!
f:id:Sediment:20160111030249p:plain
f:id:Sediment:20160111030751p:plain


2.ストーリーボードに移行
 Main.Storyboardを選択し、
f:id:Sediment:20160111030819p:plain
 View ControllerのAttribute Inspectorを開く。SizeをiPhone 4.7inchに。
なぜサイズを変えてるか? オレが知るか! 再現だよ再現!
f:id:Sediment:20160111030900p:plain


3.ラベルとテキストフィールドを配置
 右下のペインにobject libraryを表示して、
f:id:Sediment:20160111031413p:plain
動画同様にラベルとテキストフィールドを1個ずつ、適当に置いて適当に幅を広げる。
この時点では、View Controllerの上にViewがあり、その上にラベルやテキストフィールドのコンテンツが置いてある状態だ。
f:id:Sediment:20160111031603p:plain
 あとはひたすら、ラベルとテキストフィールドの両方を選択した状態で、command+optionボタンを押しながら掴んで引っ張るだけでコピペしていく。


4.View Controllerを広げる
 枠いっぱいまでコピペしたら、View ControllerのSize Inspectorを開き、Simulated SizeをFreeformへ変更。
f:id:Sediment:20160111032246p:plain
 動画ではよく見えないので、ここでは適当にheightのサイズを900にしてリターン。
f:id:Sediment:20160111032425p:plain


5.またラベルとテキストフィールドをコピペ
 3.と同じ要領で、広がったビューにまたコンテンツを並べていく。単純作業。
ついでにスクロールがわかるようにラベルに降番を振っていく。
f:id:Sediment:20160111033048p:plain


6.Scroll Viewを挿入
 たぶん、この動画の肝。すべてのラベルとテキストフィールドをShiftで選択して、メニューのEditor→Embed in→Scroll View。
f:id:Sediment:20160111033308p:plain
 すると、ラベルとViewの間にScroll Viewが挟まるようになり、エラーも出た。
f:id:Sediment:20160111033644p:plain


7.エラー対処1
 2つ目の肝。一番上のラベルを選択。
f:id:Sediment:20160111033947p:plain
 画面右下のResolve Auto Layout Issuesをクリック。
f:id:Sediment:20160111034227p:plain
 Reset to Suggested Constraintsを選択。
f:id:Sediment:20160111034245p:plain


8.エラー対処2
 Scroll Viewを選択。
f:id:Sediment:20160111034506p:plain
 画面右下のResolve Auto Layout Issuesをクリック。
f:id:Sediment:20160111034227p:plain
 Reset to Suggested Constraintsを選択。
f:id:Sediment:20160111034245p:plain


10.RUN
 シミュレータを起動してアプリ起動。
f:id:Sediment:20160111034710p:plain


11.シミュレータのリサイズ
 言わなくてもわかると思うが……、最近のシミュレータはデカ過ぎるので25%のサイズへ。
f:id:Sediment:20160111035019p:plain