UIScrollViewを使ってちゃんとスクロールさせる手順

達成した事があったにもかかわらずちょっとハマってしまったのできちんとメモって二度轍しないようにするための記事。

UIScrollViewを扱うにあたって最低限しておかなければ成らない事

  • 3重の入れ子構造にする
    • Window
      • UIScrollView
        • contentView
          • 実際に見せたいView群

やる事

  1. UIScrollViewを生成
  2. ScrollViewの上に乗せるコンテンツのViewを生成
  3. ScrollViewにaddSubViewでコンテンツのViewを乗せる。
  4. ScrollViewに必要なビューを乗せたいだけ沢山乗せる(載せる)。
  5. ScrollViewの可動域を指定する。
  6. 現在のViewにはUIScrollViewを上書きする。

サンプルコード

– (void)loadView
{
[super loadView];

UIScrollView* scv = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 520)];     //1
scv.scrollEnabled = YES;//4のいちぶ
scv.backgroundColor = [UIColor redColor];

UIView* mainView = [[UIView alloc]initWithFrame:CGRectMake(0,0,320, 7000)];//2
mainView.backgroundColor = [UIColor yellowColor];
//整形用の値
float margineX = 5.0;
float margineY = 5.0;
float buttonWith = 310.0;
float buttonHeight = 70.0;
float margine = 5.0;
float titleHeight = 200.0;

UILabel* titleImage = [[UILabel alloc]initWithFrame:CGRectMake(0,0,320,titleHeight)];
titleImage.backgroundColor = [UIColor blueColor];
titleImage.text = [[NSString alloc]initWithString:@”Title”];
titleImage.textColor = [UIColor whiteColor];
titleImage.font = [[UIFont alloc]fontWithSize:32];
[mainView addSubview:titleImage];//3,4

margine += titleHeight + margineY;

UIButton* btnCamera = [self makeButton:CGRectMake(margineX, margine,buttonWith,buttonHeight) text:@”Camera” tag:BTN_CAMERA];
[mainView addSubview:btnCamera];//3,4

margine += buttonHeight + margineY;

UIButton* btnPhoto = [self makeButton:CGRectMake(margineX,margine,buttonWith,buttonHeight) text:@”Photo” tag:BTN_READ];
[mainView addSubview:btnPhoto];//3,4

margine += buttonHeight + margineY;

UIButton* btnSaved = [self makeButton:CGRectMake(margineX,margine,buttonWith,buttonHeight) text:@”saved” tag:BTN_WRITE];
[mainView addSubview:btnSaved];//3,4

margine += buttonHeight + margineY;

UIButton* btnGraph = [self makeButton:CGRectMake(margineX,margine,buttonWith,buttonHeight) text:@”Graph” tag:BTN_WRITE];
[mainView addSubview:btnGraph];//3,4

margine += buttonHeight + margineY;

[scv setContentSize:CGSizeMake(320.0, 500.0)];//5
[scv addSubview:mainView];
self.view = scv;//6

}

margineの部分の処理はBlockにした方が美しいよね…。

参考

図入りで説明されてて分かりやすいし、ズームのさせ方まで載ってるので勉強になった。
テン*シー*シー:http://ameblo.jp/xcc/entry-10322378932.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です