せでぃのブログ

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

scrollviewで画面をスクロールさせる

お知らせ:xcode7.2、iOS9.2でscrollviewの記事を作り直しました。

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

 

 

iPhoneアプリを実際に開発する段になって、いろいろと、本当にいろいろと不明な点が出てきた。まず、今回のテーマの画面スクロール。ビックリするほど初歩的かもしれないけど、なんと、あれだけ分厚いテキストにはまったく記載がない。

あー、カレンダーの方はちょいお待ちを。

 

 

長くなるけど、スクリーンショットを貼ってく。

1.xcode起動

新規プロジェクトを選択。

f:id:Sediment:20130613133735p:plain

 

2.プロジェクトの開始方法選択

iOS ApplicationのSingle View Applicationを選択。iphoneUIの画面が出るのであれば、何でもいい。

f:id:Sediment:20130613133831p:plain

 

3.プロジェクト名入力

適当にプロジェクト名を決める。Storyboardsを使いたければその辺にもチェックを入れる。

f:id:Sediment:20130613134111p:plain

 

4.UI作成の画面へ

左ペインにある「~.xib」を選択してiphoneUIの画面に遷移。

f:id:Sediment:20130613134224p:plain

 

5.UIscrollview貼り付け

右下のScroll ViewをドラッグアンドドロップiPhoneのところへ持ってく。

f:id:Sediment:20130613134507p:plain

 

6.scrollviewサイズ変更の準備

貼り付けたscrollviewを選択した状態で、右ペインにあるthe size Inspectorというところを選択。

f:id:Sediment:20130613134405p:plain

 

7.scrollviewサイズ変更

ここでは縦にスクロールさせたいので、右ペインのheightのところを適当に1000に変更する。

すると、真ん中のペインにあるscrollviewの文字とオブジェクトの真ん中を示す点が下にずれる。これでOK。

f:id:Sediment:20130613134916p:plain

 

8.オブジェクト貼り付け1

スクロールする画面で表示したいオブジェクトを貼り付ける。

まずは、上端にラベルをドラッグアンドドロップで貼り付け、右ペインをthe attributes Inspectorに切り替えてラベルの表示をtopに変更。

f:id:Sediment:20130613135346p:plain

 

9.オブジェクト貼り付け2

スクロールする画面で表示したいオブジェクトを貼り付ける。

今度は下端にボタンを貼り付ける。scrollviewを上手く掴んで上にスライドさせて下端をiphoneの下端と合わせ、ボタンをドラッグアンドドロップ。bottomと表示を変える。

f:id:Sediment:20130613135556p:plain

 

10.元のサイズに戻す

参考にしたサイトによると、ここが肝らしい。

またscrollviewを上手く掴んで、scrollviewの上端とiphoneの上端を合わせる。そうしたら、右ペインでthe size Inspectorを選択し、viewのheightを元のサイズに戻して、リターン。ここでは548が元のサイズ。

真ん中ペインのscrollviewの文字とオブジェクトの真ん中を示す点が再び真ん中に見えるようになった。

f:id:Sediment:20130613135825p:plain

 

11.scrollviewのソース記述1

 画面右上のAssistant Editorを選択して、「ViewController.h」にscrollviewの記述をする。キーボードのcontrollキーを押しながら左側のscrollviewを掴んで、右側のテキスト部分の@interfaceの次の行にドラッグアンドドロップする。

NameにscrollViewと入力して、Connect。

f:id:Sediment:20130613140519p:plain

 

12.scrollviewのソース記述2

11.の作業の結果、@interfaceの次の行に@propertyの行が挿入された。

f:id:Sediment:20130613140924p:plain

 

13.仕上げ

画面右上のStandard Eidtorを選択。次に左ペインで「ViewController.m」を選択し、[super viewDidLoad];のすぐ下に以下のコードを入力。コードのscrollViewは11.でこのviewに付けた名前。

self.scrollView.contentSize = CGSizeMake(320, 1000);

f:id:Sediment:20130613141120p:plain

 

14.run

シミュレータを起動して動作確認。ここはイチイチ言わなくてもわかるな?

f:id:Sediment:20130613141609p:plain

 

以上。うまく行かない時は最初からやり直してみまっしょ。これだけの作業だというのに、こっちは何回かハマった。けど、原因不明ww

参考)

三千世界のインターネットで烏と共に