絶対に挫折しないiPhoneアプリ開発入門Part.19 ~xcode4.2のScroll Viewで画面をスクロールしてみよう(Storyboard編)~

前回:絶対に挫折しないiPhoneアプリ開発入門Part.18 ~Objective-Cのalloc,initとお花見~


StoryboardでのScroll Viewの使い方を教えてほしいとのご要望がありましたので、書きたいと思います。


適当な選択ですが、とりあえず

SingleViewApplication

でプロジェクトを作りましょう。


プロジェクト名はぼくはScrollStoryboardと名付けました。

そして、Storyboardを使うようにチェックをいれてくださいね




さて、MainStoryboard.storyboardを開いてください。

今回使うのは、

Scroll View ですね。

これをViewに配置してください。



まず、ScrollViewというものをなぜみなさん必要になったのかといえば、ただのViewサイズにおさまらないサイズのViewがほしいから。Viewをスクロールさせたいわけですよね。そんなわけで、サイズを変えてみましょう。

縦にスクロールを大きくしてみたいのでHeightを1000にしてみました。じゃっかんでかすぎですかね笑
でかすぎてUIScrollViewの表示が隠れてしまいました笑 まぁこれはこれでよしとしましょう。

ちゃんとあります


ScrollViewが大きくなったところで、配置したいものを配置してみましょう。
UIScrollViewをドラッグして上下させることで、配置したい場所を自分が見えるようにしましょう。
ぼくは今回はてっぺんと底だけボタンを置いてみました。
みなさんは自分の好きなものを置いてみてくださいね!


さて、んじゃぼくはぼくで配置してみますかねっと。

トップにボタンをと…

iPhoneアプリの勉強会をしたいなぁって思ってます。初心者歓迎で、一から作る人、エキスパートの人も一緒に。人が集まればあとはレベル別にやってもいいと思うんです。
みんなでiPhoneアプリ開発したいなぁ。。。開こうかな。。。

UIScrollViewをドラッグして移動させて、底にもボタンを置いてみましょうかねっと…


ぼくは技術を積極的に公開してます…しようと思ってます。正直言って、ソースコードをさらしたりするのはかなり後々恥ずかしくなります笑。なぜなら、自分のコードを書く技術が上がっていくと、過去のコードが気持ち悪くなってしまうんです。
でも、こうやって人の目に触れることで、いいこともきっとあると思ってます。ちょうど、へたくそでも楽器を演奏して聴いてもらって笑われながらうまくなる人みたいな感じを目指してます。


さて、余談はさておき笑、
実はここからがミソになってくるんではないかと思うんですが、一度、このUIScrollViewをiPhoneのサイズに戻します。つまりぼくで言うとHeightが1000だったものを460に戻します。そして、UIScrollViewをトップへ戻しておいてください。

サイズを元に戻すと、底のボタンが見えなくなっていることが分かります。これでいいんです。


ScrollViewを配置しただけではスクロールすることはできません
ちゃんとヘッダーにUIScrollViewを定義して、実装部分にもきちんとどんなViewなのかの記述をしましょう。

AssistantEditorで画面を分割して、

UIScrollViewを選択、コントロールキーを押しながらScrollStoryboardViewControllerにInterface部分にドラッグしてください。名前はぼくはscrollerと名付けました。



最後に、ScrollStoryboardViewController.mを開きます。

そしてViewDidLoad内に以下のコードを追加します。

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.scroller.contentSize = CGSizeMake(320, 1000);   //←画面サイズを決めるということです。ご自分のScrollViewのサイズを書いてください。
 //「scroller」の部分がみなさんが自分のScrollViewにつけてあげた名前を書いてくださいね。
}


あとはビルドするだけです、できましたか?



======================
当ブログ管理人のツイッターこちら
◎フォローしてくださると泣いて喜びます!ツイッター上で当ブログの質問などにもできるだけお答えしますし、役に立つiPhoneアプリ開発情報もつぶやきます。個人的なご依頼(たとえば、プログラミングの家庭教師、Skypeレッスンをしてくれないか、iPhoneアプリ開発の勉強会ってやってるの、とかですね)でもかまいません。
スカイプレッスンについて
開発をしているとその都度ぶつかる問題があると思いますが、検索で調べてもなかなかわからない、あるいは調べても非常に時間がかかる場合があると思います。開発者のみなさんもお忙しいと思いますので、私のレッスンを受けながら開発を進めていただけると、大幅にお時間を短縮できます。加えて、iPhoneアプリ開発の基礎、応用が身につき、今後の開発もスムーズに進められます

お問い合わせはツイッター、またはhiyoshimarukoアットマークgmail.comまでお願いします。(アットマークを@にしてください)お待ちしております!


【絶対に挫折しないiPhoneアプリ開発入門】
番外編 絶対に挫折しないiPhoneアプリ開発入門 番外編1 プログラミング初心者が初めてアプリ開発に挑戦する時
1.絶対に挫折しないiPhoneアプリ開発入門Part.1 ~Xcode4.2でひよしまるを作ろう~
2.絶対に挫折しないiPhoneアプリ開発入門Part.2 ~iOS Developer Programに参加しよう~
3.絶対に挫折しないiPhoneアプリ開発入門Part.3 ~Xcode4.2の起動、InterfaceBuilderの利点欠点、神本紹介~
4.絶対に挫折しないiPhoneアプリ開発入門Part.4 ~Single ViewControllerからスタート~
5.絶対に挫折しないiPhoneアプリ開発入門Part.5 ~画面遷移、Tab Bar Controller,Navigation Controller,Table View Controller~
6.絶対に挫折しないiPhoneアプリ開発入門Part.6 ~UITableViewController その1、Tabの名前変更~
7.絶対に挫折しないiPhoneアプリ開発入門Part.7~Table View Controller その2(ファイルの接続)、Objective C、コメントについて~
8.絶対に挫折しないiPhoneアプリ開発入門Part.8 ~Table View Controller その3、ナビゲーションバーにタイトルと色をつける~
9.絶対に挫折しないiPhoneアプリ開発入門Part.9 ~Table View Controller その4、numberOfSectionsInTableView、numberOfRowsInSection、Xcodeの背景を黒に~
10.絶対に挫折しないiPhoneアプリ開発入門Part.10 ~Table View Controller その5、cellForRowAtIndexPath~
11.絶対に挫折しないiPhoneアプリ開発入門Part.11 ~Table View Controller その6、画面遷移、didSelectRowAtIndexPath、タブバーを消す、アニメーション~
12.絶対に挫折しないiPhoneアプリ開発入門Part.12 ~Table View Controller その7、セクションを使いこなすその1、セルの矢印を表示~
13.絶対に挫折しないiPhoneアプリ開発入門Part.13 ~Table View Controller その8、セクションを使いこなすその2、画面遷移~
14.絶対に挫折しないiPhoneアプリ開発入門Part.14 ~UIWebView、webページを表示する~
15.絶対に挫折しないiPhoneアプリ開発入門Part.15 ~UITextView、電話とリンクをText Viewで表示~
16.絶対に挫折しないiPhoneアプリ開発入門Part.16 ~Table View Controller その9、テーブルを画面遷移させない、App Store申請Reject~
17.絶対に挫折しないiPhoneアプリ開発入門Part.17 ~Xcode4.2のScroll Viewで画面をスクロールしてみよう~
18.絶対に挫折しないiPhoneアプリ開発入門Part.18 ~Objective-Cのalloc,initとお花見~
19.絶対に挫折しないiPhoneアプリ開発入門Part.19 ~xcode4.2のScroll Viewで画面をスクロールしてみよう(Storyboard編)~