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

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

縦にスクロールするScrollViewを作る

iPhoneアプリ開発

メニューを作成していて、項目が1画面に入りきらなくなったので、スクロールビューを使おうと思い、作り方を調べました。通常のビューと作りかたが異なりますので注意です。

 

作成するScrollViewのイメージ

横は動かず、縦にのみスクロールするものです。

画面はこちらです。

f:id:bettychang:20151228154038p:plain

 

縦にスクロールします。

f:id:bettychang:20151228154050p:plain

 

画面すべてのものがスクロールします。

 

作成方法

まずViewController作成時にデフォルトで存在する最上位のViewを削除し、代わりにScrollViewを配置します

f:id:bettychang:20151228154912p:plain

 

次に、ScrollViewのアウトレットをソースに設定します

@IBOutlet var scrollView: UIScrollView!//最上位のスクロールビュー

 

scrollViewのcontentSizeを設定します。スクロール範囲の定義です。Widthは画面サイズいっぱいの指定。縦は固定値です。

scrollView.contentSize = CGSizeMake(self.view.frame.size.width, 1200)

 

ScrollViewの中にものを入れます。一番上に配置する青いタイトルイメージ画像を例として説明します。

f:id:bettychang:20151228155907p:plain

 

 

ツリー構造はこのようにScrollViewの配下にイメージ、という状態です。

f:id:bettychang:20151228160044p:plain

 

制約を設定します。すべて親ビューのScrollViewに対して設定しますが、このときに必要な制約は下記のようになります。

f:id:bettychang:20151228160149p:plain

 

制約について定義する必要があるのは、配置する場所とそのサイズです。

 

配置場所

・Align Center X to SuperView

 →X軸(横軸)は中央揃え

・Top Space to SperView

縦軸は親ビュー(この場合ScrollView)にTop(上辺)をぴったり付ける

 

サイズ

・Equal Width to Sperview

Widthは親ビューと同じサイズ

・Hight Equal 60

Hightは60固定

 

以上です。縦幅が固定なのが今ひとつですがそんなに違和感ないのでとりあえずこれでよしとします。雑な説明で申しわけありません。

オートレイアウトについては使いかたを理解するのにかなり時間がかかったこともあり、別途時間をとって説明記事を記載できればと思っています。では。