Thursday, February 21, 2013

UabBarControllerでUIScrollviewを使う

UITabBarControllerでUIScrollViewがうまく使えなくてかなり悩んだので紹介します。
テキストは動画で何をしているかを文字で書きました。動画の補足として使ってください
また、最後に動画で追加したプログラムを載せているので、画質が悪くてよくわからない場合に使ってください




<状況>
--普通のUIViewContorllerを使うappだとscroll viewがうまく動く。
--でも、Tabbar controllerでscroll viewを埋め込むと、frameの設定も効かないし、contentSizeも反映されない

<原因>
--iPhone SDK6.0のauto layoutが原因です

<解決策>
--公式ドキュメントを見て頑張ってみる。
公式ドキュメントはこちら→http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/index.html
ずっとスクロールしていき、コードが貼り付けられているところがuiscrollviewの解決策になります

では、さっそく見ていきましょう

1.スクロールさせたい範囲にuiscrollviewを配置し、それをhファイルにつなげます。
デリゲートを使いたい人はそれも配置します。
ここでは、scrollという名前にしました。以下でself.scrollと出てきたらUIScrollViewのことだなと思ってください

2.translatesAutoresizingMaskIntoConstraintsをNOに設定します
self.scroll.translatesAutoresizingMaskIntoConstraints = NO;

3. UIViewを新しく作り、UIViewのframeとself.scrollのcontentsizeの大きさをそろえます。
ここでは、contentWidthとcontentHeightという変数をframeのサイズを指定するのに使っています。
変数の値は自分のしたいことに合わせて変えましょう
UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(0,0,contentWidth,contentHeight)];
[scrollView addSubview:contentView];

4.self.scrollのcontentSizeをcontentViewのサイズに合わせます
[scrollView setContentSize:CGMakeSize(contentWidth,contentHeight)];

5.自分がscrollviewに表示したいものをどんどん、contentViewにaddSubviewしていき、最後にcontentViewをself.scrollにaddSubviewすれば完成です。
[self.scroll addSubview:contentView];

以下がサンプルです

どのファイルを編集しているのかがわかりづらいのですが、コメントの部分などを手がかりにして、自分のプロジェクトと対応させてください^^;

以下が動画で追加したプログラムになります
    self.scroll.translatesAutoresizingMaskIntoConstraints = NO;
    UIView *contenView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 700)];
    self.scroll.contentSize = CGSizeMake(320, 700);
    
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 300, 100, 30)];
    label.text = @"300";
    [contenView addSubview:label];
    
    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(0, 400, 100, 30)];
    label1.text = @"400";
    [contenView addSubview:label1];

    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(0, 500, 100, 30)];
    label2.text = @"500";
    [contenView addSubview:label2];
    
    [self.scroll addSubview:contenView];

No comments:

Post a Comment