UIScrollView - サムネイル画像を並べて指でスクロールさせる

2010年7月5日月曜日 | Published in , , | 18 コメント

このエントリーをはてなブックマークに追加

UIScrollView について直接使ったことが無いので調べてみた。


情報＆サンプル


iPhone OS Reference Library に解説とサンプルがある。
UIScrollView解説
Scroll View Programming Guide for iPhone OS
スクロールサンプル
Scrolling
２種類の UIScrollView を使ったサンプルプログラム。
サンプルは基本的なところが押さえられているので参考になる。


ポイント


UIScrollView を使うのは簡単で次の２つをやるだけでいい。
1. UIScrollView.contentSize にスクロール対象ビューの全体の大きさを設定する
2. スクロール対象ビューを UIScrollView へ追加する


検証


解説とサンプルを参考にして簡単なプログラムを組んでみた。複数の画像を横へ並べてスクロールするようにしてみた。


実装


UIImageViewを使わず、表示用に UIView のサブクラス ImageViewを用意した。渡された UIImageの配列を元に横方向へ画像を描画する。
@implementation ImageView

- (void)drawRect:(CGRect)rect {

 CGPoint p = CGPointZero;
 for (UIImage* image in imageList_) {
  [image drawAtPoint:p];
  p.x += image.size.width;
 }
}
これで次のようなビューができる（640x80ピクセル）。

nib を開き UIScrollView（320x80ピクセル）を配置し、File's Ownerのアウトレットへ接続しておく。

UIViewControllerの初期化コードで画像の準備と、これらの紐付けを行う。
- (void)viewDidLoad {
 
 NSMutableArray* imageList = [NSMutableArray array];
 for (int i=0; i < 8; i++) {
  UIImage* image = [UIImage imageNamed:
        [NSString stringWithFormat:@"image%04d.png", i+1]];
  [imageList addObject:image];
 }
 ImageView* imageView = [[ImageView alloc] initWithImageList:imageList];

 self.scrollView.contentSize = imageView.bounds.size;
 [self.scrollView addSubview:imageView];

 [imageView release];
}

これで終わり。あとは勝手にフリックをハンドリングしてスクロールしてくれる。

（イメージ）


追記）2011-06-21
サンプル追加
ImageViewTap at master from xcatsan/iOS-Sample-Code - GitHub

サンプルのイメージ


※このサンプルについては下記コメントを参照のこと。

Responses

  1. takataka says:
    2011年6月14日 16:11

    xcatsan さん

    お世話になります。先日も教えて頂いたtakatakaです、
    ありがとうございます。

    少し畑違いになってしまうかもしれませんが、
    質問させて下さい。

    サムネイル画像をスクロールさせる方法を
    元に、画像viewをボタンにして、
    タップしたら違う画面に移行させることは
    可能でしょうか？
    移行後、サムネイル画像をスクロールさせる画面に移りたいのです。

    横にスクロールさせたいと考えています。
    NSUInteger i;//以下省略　を使用せず、xibを使用するのでは。
    ぐらいしかわかっていないのですが、すみません。

    少しご教授願えたらと思います。
    宜しくお願い致します。

    あと違う質問なんですが、xcatsan さんのように
    プロフェショナル（特にカメラ関連）を目指したいのですが、
    どこから勉強したら良いのでしょうか？
    やはりC言語ですか？何か最初の頃に参考になった
    本などあれば教えて下さい。

    宜しくお願い致します。

  2. takataka says:
    2011年6月14日 16:11

    xcatsan さん

    お世話になります。先日も教えて頂いたtakatakaです、
    ありがとうございます。

    少し畑違いになってしまうかもしれませんが、
    質問させて下さい。

    サムネイル画像をスクロールさせる方法を
    元に、画像viewをボタンにして、
    タップしたら違う画面に移行させることは
    可能でしょうか？
    移行後、サムネイル画像をスクロールさせる画面に移りたいのです。

    横にスクロールさせたいと考えています。
    NSUInteger i;//以下省略　を使用せず、xibを使用するのでは。
    ぐらいしかわかっていないのですが、すみません。

    少しご教授願えたらと思います。
    宜しくお願い致します。

    あと違う質問なんですが、xcatsan さんのように
    プロフェショナル（特にカメラ関連）を目指したいのですが、
    どこから勉強したら良いのでしょうか？
    やはりC言語ですか？何か最初の頃に参考になった
    本などあれば教えて下さい。

    宜しくお願い致します。

  3. xcatsan says:
    2011年6月18日 21:48

    こんばんは takataka さん。
    返事が遅くなりました。

    > サムネイル画像をスクロールさせる方法を
    > 元に、画像viewをボタンにして、
    > タップしたら違う画面に移行させることは
    > 可能でしょうか？

    可能です。ボタンにするのも手ですが、
    UIView のままでもタップを検出することが
    できるので、例で使っている ImageViewに
    手を加える方法も良いかと思います。


    > 横にスクロールさせたいと考えています。
    > NSUInteger i;//以下省略　を使用せず、xibを使用するのでは。
    > ぐらいしかわかっていないのですが、すみません。

    ここは私の方でイメージが掴めなかったので
    うまいアドバイスが思い浮かびません（すみません。。）


    > プロフェショナル（特にカメラ関連）を目指したいのですが、
    > どこから勉強したら良いのでしょうか？
    > やはりC言語ですか？何か最初の頃に参考になった
    > 本などあれば教えて下さい。

    目的がはっきりしているようなので
    カメラ関連のオープンソースのコードをたくさん読むことをおすすめします。
    C言語等は読むために最低限の知識があれば良いです。
    最初から言語を勉強する手もありますが、目的ありきで
    必要に応じて言語を習得する方が（経験上）効率は良いです。

    なお私が Cocoaを勉強すのに一番参考になったのは下の本です。
    Mac OS X Cocoaプログラミング　第三版 [単行本]
    Aaron Hillegass (著), アーロン ヒレガス (著), 村上 雅章 (翻訳)

    http://www.amazon.co.jp/dp/4894714469/ref=as_li_qf_sp_asin_til?tag=xcatsan-22&camp=243&creative=1615&linkCode=as1&creativeASIN=4894714469&adid=0RFS1HPH8V0FNPRNT6YK

    Mac OS X 用で今となっては古い本ですがこれを見ながら
    自作プログラムを作ったりして objective-c や Cocoaを
    習得しました。参考まで。

  4. xcatsan says:
    2011年6月18日 21:48

    こんばんは takataka さん。
    返事が遅くなりました。

    > サムネイル画像をスクロールさせる方法を
    > 元に、画像viewをボタンにして、
    > タップしたら違う画面に移行させることは
    > 可能でしょうか？

    可能です。ボタンにするのも手ですが、
    UIView のままでもタップを検出することが
    できるので、例で使っている ImageViewに
    手を加える方法も良いかと思います。


    > 横にスクロールさせたいと考えています。
    > NSUInteger i;//以下省略　を使用せず、xibを使用するのでは。
    > ぐらいしかわかっていないのですが、すみません。

    ここは私の方でイメージが掴めなかったので
    うまいアドバイスが思い浮かびません（すみません。。）


    > プロフェショナル（特にカメラ関連）を目指したいのですが、
    > どこから勉強したら良いのでしょうか？
    > やはりC言語ですか？何か最初の頃に参考になった
    > 本などあれば教えて下さい。

    目的がはっきりしているようなので
    カメラ関連のオープンソースのコードをたくさん読むことをおすすめします。
    C言語等は読むために最低限の知識があれば良いです。
    最初から言語を勉強する手もありますが、目的ありきで
    必要に応じて言語を習得する方が（経験上）効率は良いです。

    なお私が Cocoaを勉強すのに一番参考になったのは下の本です。
    Mac OS X Cocoaプログラミング　第三版 [単行本]
    Aaron Hillegass (著), アーロン ヒレガス (著), 村上 雅章 (翻訳)

    http://www.amazon.co.jp/dp/4894714469/ref=as_li_qf_sp_asin_til?tag=xcatsan-22&camp=243&creative=1615&linkCode=as1&creativeASIN=4894714469&adid=0RFS1HPH8V0FNPRNT6YK

    Mac OS X 用で今となっては古い本ですがこれを見ながら
    自作プログラムを作ったりして objective-c や Cocoaを
    習得しました。参考まで。

  5. takataka says:
    2011年6月19日 17:27

    xcatsanさん

    お世話になってます、takatakaです。
    お返事ありがとうございます。

    参考書、読んでみたいと思います。ありがとうございます。

    >>UIView のままでもタップを検出することが
    できるので・・・。

    出来るんですか！素晴らしいですね、ただTap検出が難しそうですね。
    何から始めて良いのか・・・・・。

    イメージとしてはapp store にある、フレームlite というアプリの
    横スクロールなんです。これが理想なんですが。
    どうしたら、こうできるのか、全くなんです。

    もし宜しければ、さわりだけでも教えてもらえないでしょうか？

    宜しくお願い致します。
    ご返答頂き、ありがとうございました。

  6. takataka says:
    2011年6月19日 17:27

    xcatsanさん

    お世話になってます、takatakaです。
    お返事ありがとうございます。

    参考書、読んでみたいと思います。ありがとうございます。

    >>UIView のままでもタップを検出することが
    できるので・・・。

    出来るんですか！素晴らしいですね、ただTap検出が難しそうですね。
    何から始めて良いのか・・・・・。

    イメージとしてはapp store にある、フレームlite というアプリの
    横スクロールなんです。これが理想なんですが。
    どうしたら、こうできるのか、全くなんです。

    もし宜しければ、さわりだけでも教えてもらえないでしょうか？

    宜しくお願い致します。
    ご返答頂き、ありがとうございました。

  7. xcatsan says:
    2011年6月21日 23:58

    こんばんは。

    フレームLite をダウンロードしてみました。
    なるほど面白いソフトですね。
    イメージが湧きました。

    簡単なサンプルを作ってみました。
    https://github.com/xcatsan/iOS-Sample-Code/tree/master/ImageViewTap
    ビルドすると８枚の写真のサムネイルが下に表示され、タップするとそれが画面中央に大きく表示されるというものです。お試しあれ。

    画面下のサムネイルへのタップは ThumbnailView の touchedEnd: で処理してます。

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
    {
    UITouch* touch = [touches anyObject];
    CGPoint location = [touch locationInView:self];

    selectedIndex_ = location.x / 100;
    [self setNeedsDisplay];
    [self.viewController touchedAtIndex:selectedIndex_];
    }
    タップ位置(location)を取得したら、画像の横サイズ(100)で割ってやります。そうすると画像リストのインデックスが得られるので、それを画面中央へ表示しています。

    上記ソースコードは改変して自由に使ってもらって構いません。私への連絡は不要です。

    ではでは。

  8. xcatsan says:
    2011年6月21日 23:58

    こんばんは。

    フレームLite をダウンロードしてみました。
    なるほど面白いソフトですね。
    イメージが湧きました。

    簡単なサンプルを作ってみました。
    https://github.com/xcatsan/iOS-Sample-Code/tree/master/ImageViewTap
    ビルドすると８枚の写真のサムネイルが下に表示され、タップするとそれが画面中央に大きく表示されるというものです。お試しあれ。

    画面下のサムネイルへのタップは ThumbnailView の touchedEnd: で処理してます。

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
    {
    UITouch* touch = [touches anyObject];
    CGPoint location = [touch locationInView:self];

    selectedIndex_ = location.x / 100;
    [self setNeedsDisplay];
    [self.viewController touchedAtIndex:selectedIndex_];
    }
    タップ位置(location)を取得したら、画像の横サイズ(100)で割ってやります。そうすると画像リストのインデックスが得られるので、それを画面中央へ表示しています。

    上記ソースコードは改変して自由に使ってもらって構いません。私への連絡は不要です。

    ではでは。

  9. xcatsan says:
    2011年6月22日 0:02

    追記）サンプルの画面イメージをブログ本文末尾に付けておきました。参考まで。

  10. xcatsan says:
    2011年6月22日 0:02

    追記）サンプルの画面イメージをブログ本文末尾に付けておきました。参考まで。

  11. takataka says:
    2011年6月24日 13:54

    xcatsanさん

    お世話になります,takatakaです。
    お返事ありがとうございます！

    本当にありがとうございます！すごいです、素晴らしすぎます。
    参考にさせて頂きます！
    勉強させて頂きます。

    ありがとうございました。
    またお聞きすることがあるかもしれませんが、
    そのときは宜しくお願い致します。

  12. takataka says:
    2011年6月24日 13:54

    xcatsanさん

    お世話になります,takatakaです。
    お返事ありがとうございます！

    本当にありがとうございます！すごいです、素晴らしすぎます。
    参考にさせて頂きます！
    勉強させて頂きます。

    ありがとうございました。
    またお聞きすることがあるかもしれませんが、
    そのときは宜しくお願い致します。

  13. bluedog
    2012年4月3日 18:06

    xcatsanさん

    とてもわかりやすくいつも勉強させていただいています。

    カタログアプリを作りたいとおもい、非常にサンプルと似ていたので質問させてください。

    メインの大きい画像をタップすると、
    下からサムネイル画像をスクロールさせる画面が出てきて、
    同時に上からは商品WEB誘導のボタンが出てくる。
    また、メインの画像もサムネイル同様にスクロールは出来ますでしょうか。

    まだまだ知識が浅く上記の組み合わせ方で困っておりまして
    相談させていただきました。

    ご教授願えたらと思います。
    宜しくお願い致します。

  14. bluedog
    2012年4月3日 18:06

    xcatsanさん

    とてもわかりやすくいつも勉強させていただいています。

    カタログアプリを作りたいとおもい、非常にサンプルと似ていたので質問させてください。

    メインの大きい画像をタップすると、
    下からサムネイル画像をスクロールさせる画面が出てきて、
    同時に上からは商品WEB誘導のボタンが出てくる。
    また、メインの画像もサムネイル同様にスクロールは出来ますでしょうか。

    まだまだ知識が浅く上記の組み合わせ方で困っておりまして
    相談させていただきました。

    ご教授願えたらと思います。
    宜しくお願い致します。

  15. xcatsan says:
    2012年4月4日 6:28

    bluedogさん
    こんにちは

    ＞ メインの大きい画像をタップすると、
    ＞ 下からサムネイル画像をスクロールさせる画面が出てきて、
    ＞ 同時に上からは商品WEB誘導のボタンが出てくる。

    できます。画面が出てくる部分は -[UIView animateWithDuration:animations:] を使えば簡単に（するすると出てくるような）アニメーションが実現できます。この使い方はたくさんのサイトで解説されているので調べれば参考になると思います。

    ＞ また、メインの画像もサムネイル同様にスクロールは出来ますでしょうか。

    できます。ただ自分で実装すると色々と大変なのでオープンソースのライブラリを使うと楽だと思います。

    調べてみるとこんなのがありました（動作確認はしてません）
    https://github.com/exalted/PTImageAlbumViewController
    https://github.com/mwaterfall/MWPhotoBrowser
    https://github.com/dev5tec/FBImageViewer

    他にもあると思うので自分の用途に合いそうなものを探してみてください。


    また１から自分で作る場合は下記のブログの連載が参考になると思います（Cocoaの日々です）。

    http://cocoadays.blogspot.jp/2010/09/1.html


    では。

  16. xcatsan says:
    2012年4月4日 6:28

    bluedogさん
    こんにちは

    ＞ メインの大きい画像をタップすると、
    ＞ 下からサムネイル画像をスクロールさせる画面が出てきて、
    ＞ 同時に上からは商品WEB誘導のボタンが出てくる。

    できます。画面が出てくる部分は -[UIView animateWithDuration:animations:] を使えば簡単に（するすると出てくるような）アニメーションが実現できます。この使い方はたくさんのサイトで解説されているので調べれば参考になると思います。

    ＞ また、メインの画像もサムネイル同様にスクロールは出来ますでしょうか。

    できます。ただ自分で実装すると色々と大変なのでオープンソースのライブラリを使うと楽だと思います。

    調べてみるとこんなのがありました（動作確認はしてません）
    https://github.com/exalted/PTImageAlbumViewController
    https://github.com/mwaterfall/MWPhotoBrowser
    https://github.com/dev5tec/FBImageViewer

    他にもあると思うので自分の用途に合いそうなものを探してみてください。


    また１から自分で作る場合は下記のブログの連載が参考になると思います（Cocoaの日々です）。

    http://cocoadays.blogspot.jp/2010/09/1.html


    では。

  17. bluedog
    2012年4月10日 11:56

    xcatsanさん

    お世話になります。bluedogです。
    お返事ありがとうございます。

    とても参考になりました。オープンソースを探し機能の似ているものを探してイメージに近いものが出来ました。

    またもうひとつだけ質問させてください。
    今現在の機能は下記となるんですが、

    1.カタログ画像表示（スクロールビュー）フリックして46枚。
    2.画像をタップするとナビゲーションバーが出てくる
    上部から「表紙に戻るボタン」「現ページ数」
    下部から「戻る・次へボタン」「アクションシートボタン」
    3.アクションシートには「商品を見る」「ツイート」「キャンセル」ボタン配置

    以上設定できたのですが「商品を見る」からWEBビューを実装した新しいファイルに画面遷移してWEBページを表示させたいのですが悩んでおり、ご教授願えたらと思います。

    オープンソースは下記のURLからダウンロードしました。
    https://github.com/mwaterfall/MWPhotoBrowser
    最初に表示されるセルの2番目を使用してアクションシートの「Save」を「商品を見る」に、「Copy」を「ツイート」に名前を変更しています。この2点のご教授願えたらと思います。

    忙しいところ申し訳ありませんが何卒宜しくお願い致します。

  18. bluedog
    2012年4月10日 11:56

    xcatsanさん

    お世話になります。bluedogです。
    お返事ありがとうございます。

    とても参考になりました。オープンソースを探し機能の似ているものを探してイメージに近いものが出来ました。

    またもうひとつだけ質問させてください。
    今現在の機能は下記となるんですが、

    1.カタログ画像表示（スクロールビュー）フリックして46枚。
    2.画像をタップするとナビゲーションバーが出てくる
    上部から「表紙に戻るボタン」「現ページ数」
    下部から「戻る・次へボタン」「アクションシートボタン」
    3.アクションシートには「商品を見る」「ツイート」「キャンセル」ボタン配置

    以上設定できたのですが「商品を見る」からWEBビューを実装した新しいファイルに画面遷移してWEBページを表示させたいのですが悩んでおり、ご教授願えたらと思います。

    オープンソースは下記のURLからダウンロードしました。
    https://github.com/mwaterfall/MWPhotoBrowser
    最初に表示されるセルの2番目を使用してアクションシートの「Save」を「商品を見る」に、「Copy」を「ツイート」に名前を変更しています。この2点のご教授願えたらと思います。

    忙しいところ申し訳ありませんが何卒宜しくお願い致します。

  19. bluedog
    2012年4月10日 12:24

    xcatsanさん

    何度もすみません…bluedogです。

    イメージとしては、こちらのiPhoneカタログをイメージしております。
    http://www.peachjohn.co.jp/al/info/smartphone/

    ■WEB商品ページに画面移動

    現在はサムネイルビューがないのと横向きにしたとき単ページになるのでイメージのような見開きになると最高なのですが色々試してみた結果…やはり難易度が高く難しいのでもしお時間があればこちらもご教授願えたらとても助かります。

    わがままいって申し訳ありません。何卒宜しくお願い致します。

  20. bluedog
    2012年4月10日 12:24

    xcatsanさん

    何度もすみません…bluedogです。

    イメージとしては、こちらのiPhoneカタログをイメージしております。
    http://www.peachjohn.co.jp/al/info/smartphone/

    ■WEB商品ページに画面移動

    現在はサムネイルビューがないのと横向きにしたとき単ページになるのでイメージのような見開きになると最高なのですが色々試してみた結果…やはり難易度が高く難しいのでもしお時間があればこちらもご教授願えたらとても助かります。

    わがままいって申し訳ありません。何卒宜しくお願い致します。

  21. xcatsan says:
    2012年4月11日 5:11

    bluedog さん、おはようございます。

    >以上設定できたのですが「商品を見る」からWEBビューを実装した新しいファイ>ルに画面遷移してWEBページを表示させたいのですが悩んでおり、ご教授願えたらと思います。
    :
    >最初に表示されるセルの2番目を使用してアクションシートの「Save」を「商品>を見る」に、「Copy」を「ツイート」に名前を変更しています。この2点のご教>授願えたらと思います。

    まず「商品を見る」は、UIWebView を載せた UIViewController を作り、それを表示させればいいと思います。XcodeでUIViewControllerをつくるとインターフェイス(xib)も同時にできるのでそこに UIWebViewを載せて処理させればいいでしょう。MWPhotoBrowser.m の 1026行目付近で「Save」ボタンを押した時に savePhotoメソッドを呼ぶ様になっているのでここに用意した UIViewControllerを呼び出す処理を書くといいと思います（直接書くか、新たに openWeb: のようなメソッドを用意して呼び出します）。UIViewController はモーダル表示（上におおいかぶさる表示）が簡単だと思います。使い方は presentModalViewController で検索するといろいろ見つかると思います。

    次に「ツイート」ですが、iOS5 以降であれば標準でツイートAPIが用意されているのでそれを利用するといいと思います。これは以前書いた記事があるので参考にしてみて下さい。

    「TWTweetComposeViewController でツィート」
    http://cocoadays.blogspot.jp/2011/10/twtweetcomposeviewcontroller.html
    こちらの呼び出しも MWPhotoBrowser.m の 1026行目付近のcopyPhoto呼び出しの箇所を書き換えます（直接書くか、新たに tweet: のようなメソッドを用意）。


    開発頑張ってくださいね。
    では。

  22. xcatsan says:
    2012年4月11日 5:11

    bluedog さん、おはようございます。

    >以上設定できたのですが「商品を見る」からWEBビューを実装した新しいファイ>ルに画面遷移してWEBページを表示させたいのですが悩んでおり、ご教授願えたらと思います。
    :
    >最初に表示されるセルの2番目を使用してアクションシートの「Save」を「商品>を見る」に、「Copy」を「ツイート」に名前を変更しています。この2点のご教>授願えたらと思います。

    まず「商品を見る」は、UIWebView を載せた UIViewController を作り、それを表示させればいいと思います。XcodeでUIViewControllerをつくるとインターフェイス(xib)も同時にできるのでそこに UIWebViewを載せて処理させればいいでしょう。MWPhotoBrowser.m の 1026行目付近で「Save」ボタンを押した時に savePhotoメソッドを呼ぶ様になっているのでここに用意した UIViewControllerを呼び出す処理を書くといいと思います（直接書くか、新たに openWeb: のようなメソッドを用意して呼び出します）。UIViewController はモーダル表示（上におおいかぶさる表示）が簡単だと思います。使い方は presentModalViewController で検索するといろいろ見つかると思います。

    次に「ツイート」ですが、iOS5 以降であれば標準でツイートAPIが用意されているのでそれを利用するといいと思います。これは以前書いた記事があるので参考にしてみて下さい。

    「TWTweetComposeViewController でツィート」
    http://cocoadays.blogspot.jp/2011/10/twtweetcomposeviewcontroller.html
    こちらの呼び出しも MWPhotoBrowser.m の 1026行目付近のcopyPhoto呼び出しの箇所を書き換えます（直接書くか、新たに tweet: のようなメソッドを用意）。


    開発頑張ってくださいね。
    では。

  23. bluedog
    2012年4月11日 12:03

    xcatsanさん

    ご返答ありがとうございます！
    どこをどうしていいかわからず困っていたのですごく助かりました！調べて色々と試してみます！

    不明な点があったらまたお聞きしてしまうかもしれませんが…よろしくお願い致します。ありがとうございました！

  24. bluedog
    2012年4月11日 12:03

    xcatsanさん

    ご返答ありがとうございます！
    どこをどうしていいかわからず困っていたのですごく助かりました！調べて色々と試してみます！

    不明な点があったらまたお聞きしてしまうかもしれませんが…よろしくお願い致します。ありがとうございました！

  25. bluedog
    2012年4月16日 11:28

    xcatsanさん

    いつもお世話になっております。bluedogです。

    >まず「商品を見る」は、UIWebView を載せた UIViewController を作り、それを表示させればいいと思います。XcodeでUIViewControllerをつくるとインターフェイス(xib)も同時にできるのでそこ に UIWebViewを載せて処理させればいいでしょう。MWPhotoBrowser.m の 1026行目付近で「Save」ボタンを押した時に savePhotoメソッドを呼ぶ様になっているのでここに用意した UIViewControllerを呼び出す処理を書くといいと思います（直接書くか、新たに openWeb: のようなメソッドを用意して呼び出します）。UIViewController はモーダル表示（上におおいかぶさる表示）が簡単だと思います。使い方は presentModalViewController で検索するといろいろ見つかると思います。


    下記のように処理を書いてみました。

    - (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex {
    if (actionSheet == _actionsSheet) {
    // Actions
    self.actionsSheet = nil;
    if (buttonIndex != actionSheet.cancelButtonIndex) {
    if (buttonIndex == actionSheet.firstOtherButtonIndex) {
    webViewController* web = [[webViewController alloc] init];
    web.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    UINavigationController *NavigationController =
    [[UINavigationController alloc] initWithRootViewController:web];
    [self presentModalViewController:NavigationController animated:YES];




    とすると、上におおいかぶさるように新しいページが出てくるのですが

    どうしても画面が真っ黒で出てきてしまいます。

    UIViewControllerは、

    ファイル名：webViewController
    webViewController.h
    webViewController.m
    webViewController.xib

    このUIViewControllerにUIWebViewを載せました。

    UIViewControllerの作り方がいけないのでしょうか? コードは下記となります。


    ■webViewController.h

    #import

    @interface webViewController : UIViewController{

    }

    @property (retain, nonatomic) IBOutlet UIWebView *web;
    @end


    ■webViewController.m

    #import "webViewController.h"

    @implementation webViewController
    @synthesize web;

    - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
    {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
    // Custom initialization
    }
    return self;
    }

    - (void)didReceiveMemoryWarning
    {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
    }

    #pragma mark - View lifecycle

    - (void)viewDidLoad


    {
    [super viewDidLoad];
    NSURL *url = [NSURL URLWithString:@"https://www.google.co.jp/"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.web loadRequest:request];
    // Do any additional setup after loading the view from its nib.
    }


    - (void)viewDidUnload
    {
    [self setWeb:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    }

    - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
    }

    - (void)dealloc {
    [web release];
    [super dealloc];
    }

    - (void)webViewDidStartLoad:(UIWebView *)webView{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
    }

    - (void)webViewDidFinishLoad:(UIWebView *)webView{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
    }

    #pragma mark 初期処理



    @end



    また各ページで「商品を見る」ボタンを押すごとに、商品WEBページのURLを変えていくにはどうすればよろしいでしょうか。
    何度もすみません。お手透きのときにご教授いただけないでしょうか？
    宜しくお願い致します。

  26. bluedog
    2012年4月16日 11:28

    xcatsanさん

    いつもお世話になっております。bluedogです。

    >まず「商品を見る」は、UIWebView を載せた UIViewController を作り、それを表示させればいいと思います。XcodeでUIViewControllerをつくるとインターフェイス(xib)も同時にできるのでそこ に UIWebViewを載せて処理させればいいでしょう。MWPhotoBrowser.m の 1026行目付近で「Save」ボタンを押した時に savePhotoメソッドを呼ぶ様になっているのでここに用意した UIViewControllerを呼び出す処理を書くといいと思います（直接書くか、新たに openWeb: のようなメソッドを用意して呼び出します）。UIViewController はモーダル表示（上におおいかぶさる表示）が簡単だと思います。使い方は presentModalViewController で検索するといろいろ見つかると思います。


    下記のように処理を書いてみました。

    - (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex {
    if (actionSheet == _actionsSheet) {
    // Actions
    self.actionsSheet = nil;
    if (buttonIndex != actionSheet.cancelButtonIndex) {
    if (buttonIndex == actionSheet.firstOtherButtonIndex) {
    webViewController* web = [[webViewController alloc] init];
    web.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    UINavigationController *NavigationController =
    [[UINavigationController alloc] initWithRootViewController:web];
    [self presentModalViewController:NavigationController animated:YES];




    とすると、上におおいかぶさるように新しいページが出てくるのですが

    どうしても画面が真っ黒で出てきてしまいます。

    UIViewControllerは、

    ファイル名：webViewController
    webViewController.h
    webViewController.m
    webViewController.xib

    このUIViewControllerにUIWebViewを載せました。

    UIViewControllerの作り方がいけないのでしょうか? コードは下記となります。


    ■webViewController.h

    #import

    @interface webViewController : UIViewController{

    }

    @property (retain, nonatomic) IBOutlet UIWebView *web;
    @end


    ■webViewController.m

    #import "webViewController.h"

    @implementation webViewController
    @synthesize web;

    - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
    {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
    // Custom initialization
    }
    return self;
    }

    - (void)didReceiveMemoryWarning
    {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
    }

    #pragma mark - View lifecycle

    - (void)viewDidLoad


    {
    [super viewDidLoad];
    NSURL *url = [NSURL URLWithString:@"https://www.google.co.jp/"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.web loadRequest:request];
    // Do any additional setup after loading the view from its nib.
    }


    - (void)viewDidUnload
    {
    [self setWeb:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    }

    - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
    }

    - (void)dealloc {
    [web release];
    [super dealloc];
    }

    - (void)webViewDidStartLoad:(UIWebView *)webView{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
    }

    - (void)webViewDidFinishLoad:(UIWebView *)webView{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
    }

    #pragma mark 初期処理



    @end



    また各ページで「商品を見る」ボタンを押すごとに、商品WEBページのURLを変えていくにはどうすればよろしいでしょうか。
    何度もすみません。お手透きのときにご教授いただけないでしょうか？
    宜しくお願い致します。

  27. xcatsan says:
    2012年4月18日 12:58

    bluedog さん、こんにちは。返事が遅くなりました。
    コードを見る限りでは問題なさそうに見えます。
    考えられるとしたら UIWebView のアウトレットが接続されていないことでしょうか。

    webViewController 内の viewDidLoad にNSLogを追加してインスタンスが割り当てられているか確認してみてください。
    - (void)viewDidLoad
    {
    　　NSLog(@"%@", web); // ← 追加
    :
    }
    これが 0x0 (nil) ならアウトレットが接続できていません。



    > また各ページで「商品を見る」ボタンを押すごとに、商品WEBページのURLを変> えていくにはどうすればよろしいでしょうか。

    webViewController に URLString プロパティを設けて、開く前にURLを指定すればいいと思います。

    webViewController.h に
    @property (nonatomic, retain) NSString* URLString;
    を追加

    webViewController.m
    @implement webViewController
    @synthesize URLString; // 追加
    :
    - (void)viewDidLoad
    {
    NSURL *url = [NSURL URLWithString:URLString]; // 変更
    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    }

    としておいて呼び出し元でURL(文字列)を指定します。

    - (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex {
    if (actionSheet == _actionsSheet) {
    // Actions
    self.actionsSheet = nil;
    if (buttonIndex != actionSheet.cancelButtonIndex) {
    if (buttonIndex == actionSheet.firstOtherButtonIndex) {
    webViewController* web = [[webViewController alloc] init];
    webViewController.URLString = @"https://google.co.jp/"; // 追加（ここを商品毎にURLを変えてやる）
    web.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    UINavigationController *NavigationController =
    [[UINavigationController alloc] initWithRootViewController:web];
    [self presentModalViewController:NavigationController animated:YES];
    :


    参考になれば。
    ではでは。

  28. xcatsan says:
    2012年4月18日 12:58

    bluedog さん、こんにちは。返事が遅くなりました。
    コードを見る限りでは問題なさそうに見えます。
    考えられるとしたら UIWebView のアウトレットが接続されていないことでしょうか。

    webViewController 内の viewDidLoad にNSLogを追加してインスタンスが割り当てられているか確認してみてください。
    - (void)viewDidLoad
    {
    　　NSLog(@"%@", web); // ← 追加
    :
    }
    これが 0x0 (nil) ならアウトレットが接続できていません。



    > また各ページで「商品を見る」ボタンを押すごとに、商品WEBページのURLを変> えていくにはどうすればよろしいでしょうか。

    webViewController に URLString プロパティを設けて、開く前にURLを指定すればいいと思います。

    webViewController.h に
    @property (nonatomic, retain) NSString* URLString;
    を追加

    webViewController.m
    @implement webViewController
    @synthesize URLString; // 追加
    :
    - (void)viewDidLoad
    {
    NSURL *url = [NSURL URLWithString:URLString]; // 変更
    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    }

    としておいて呼び出し元でURL(文字列)を指定します。

    - (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex {
    if (actionSheet == _actionsSheet) {
    // Actions
    self.actionsSheet = nil;
    if (buttonIndex != actionSheet.cancelButtonIndex) {
    if (buttonIndex == actionSheet.firstOtherButtonIndex) {
    webViewController* web = [[webViewController alloc] init];
    webViewController.URLString = @"https://google.co.jp/"; // 追加（ここを商品毎にURLを変えてやる）
    web.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    UINavigationController *NavigationController =
    [[UINavigationController alloc] initWithRootViewController:web];
    [self presentModalViewController:NavigationController animated:YES];
    :


    参考になれば。
    ではでは。

  29. bluedog
    2012年5月2日 12:21

    xcatsanさん

    ご返答ありがとうございます！
    無事表示できるようになりました！
    途中でナビゲーションバーにボタンを配置してそこからリンクをつなげるように変更になったのでxcatsanさんにご教授いただいてくださったのをもとにナビゲーションバーから無事できました。
    本当にありがとうございました。
    また色々と参考にさせていただきます。

  30. bluedog
    2012年5月2日 12:21

    xcatsanさん

    ご返答ありがとうございます！
    無事表示できるようになりました！
    途中でナビゲーションバーにボタンを配置してそこからリンクをつなげるように変更になったのでxcatsanさんにご教授いただいてくださったのをもとにナビゲーションバーから無事できました。
    本当にありがとうございました。
    また色々と参考にさせていただきます。

  31. xcatsan says:
    2012年5月9日 12:17

    bluedog さん
    こんにちは

    実現できたようでなによりです。
    開発頑張ってください。

  32. xcatsan says:
    2012年5月9日 12:17

    bluedog さん
    こんにちは

    実現できたようでなによりです。
    開発頑張ってください。

  33. sky
    2012年5月17日 11:13

    xcatsanさん

    こんにちは。
    サムネイルについて質問させてください。
    サンプルデータにあるサムネイル画像を同じように配置したいとおもっています。
    作成方法はIBを使用しているのですが、
    これをIBを使わずコードのみで作りたいと思っています。
    コードのみで書く場合はどのようにしたらよろしいでしょうか。
    サムネイル配置で全く前に進まず困っています…。
    教えていただけないでしょうか。

    メインの大きい画像部分のコードは下記のように書いています。

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    // Browser
    NSMutableArray *photos = [[NSMutableArray alloc] init];
    MWPhoto *photo;
    switch (indexPath.row) {
    case 0:
    photo = [MWPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo" ofType:@"jpg"]];
    [photos addObject:photo];
    photo = [MWPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo" ofType:@"jpg"]];
    [photos addObject:photo];
    photo = [MWPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo" ofType:@"jpg"]];
    [photos addObject:photo];

    break;
    }
    self.photos = photos;

    どうか宜しくお願い致します。

  34. sky
    2012年5月17日 11:13

    xcatsanさん

    こんにちは。
    サムネイルについて質問させてください。
    サンプルデータにあるサムネイル画像を同じように配置したいとおもっています。
    作成方法はIBを使用しているのですが、
    これをIBを使わずコードのみで作りたいと思っています。
    コードのみで書く場合はどのようにしたらよろしいでしょうか。
    サムネイル配置で全く前に進まず困っています…。
    教えていただけないでしょうか。

    メインの大きい画像部分のコードは下記のように書いています。

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    // Browser
    NSMutableArray *photos = [[NSMutableArray alloc] init];
    MWPhoto *photo;
    switch (indexPath.row) {
    case 0:
    photo = [MWPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo" ofType:@"jpg"]];
    [photos addObject:photo];
    photo = [MWPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo" ofType:@"jpg"]];
    [photos addObject:photo];
    photo = [MWPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo" ofType:@"jpg"]];
    [photos addObject:photo];

    break;
    }
    self.photos = photos;

    どうか宜しくお願い致します。

  35. xcatsan says:
    2012年5月20日 22:12

    sky さん、こんばんは。

    コメントに記載されたコードからすると恐らく、テーブルビューの適当なセルを選択すると、そのセルに関連する写真のサムネイルを表示する画面へ遷移するのだと思います。

    IB を使わなくてもサンプルコードのようなことはできます。
    その場合はスクロールを担当する UIScrollView と サムネイルを描画するThumbnailView の２つのインスタンスを作成して、画面上のビューに追加します。
    イメージ（実際には動きませんがこんな感じということで）

    UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, 320, 50)];
    ThumbnailView* thumbnailView = [[ThumbnailView alloc]
    thumnailView. imageList = self.photos; // サムネイルビューへ画像一覧を渡す
    initWithFrame:CGRectMake(0, 0, 100*self.photos.count, 75)]; // サムネイルのサイズを 100x75とした
    [scrollView addSubview:thumbnailView]; // サムネイルビューをスクロールビューへ追加
    scrollView.contentSize = thumbnailView.bounds.size;

    [self.view addSubview:scrollView]; // self.view はメインの表示ビュー
    :


    では。

  36. xcatsan says:
    2012年5月20日 22:12

    sky さん、こんばんは。

    コメントに記載されたコードからすると恐らく、テーブルビューの適当なセルを選択すると、そのセルに関連する写真のサムネイルを表示する画面へ遷移するのだと思います。

    IB を使わなくてもサンプルコードのようなことはできます。
    その場合はスクロールを担当する UIScrollView と サムネイルを描画するThumbnailView の２つのインスタンスを作成して、画面上のビューに追加します。
    イメージ（実際には動きませんがこんな感じということで）

    UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, 320, 50)];
    ThumbnailView* thumbnailView = [[ThumbnailView alloc]
    thumnailView. imageList = self.photos; // サムネイルビューへ画像一覧を渡す
    initWithFrame:CGRectMake(0, 0, 100*self.photos.count, 75)]; // サムネイルのサイズを 100x75とした
    [scrollView addSubview:thumbnailView]; // サムネイルビューをスクロールビューへ追加
    scrollView.contentSize = thumbnailView.bounds.size;

    [self.view addSubview:scrollView]; // self.view はメインの表示ビュー
    :


    では。

Leave a Response

Next Entries»
«Previous Entries
登録: コメントの投稿 (Atom)

人気の投稿（過去 30日間）

  • [iOS] UIWebView でワード書類を表示する
    [前回] Cocoaの日々: [iOS] UIWebView でパワーポイントファイルを表示する エクセル、パワーポイントときたら次はワードでしょ、という訳で試してみた。 サンプル 元のファイル。Word 2004 に付いていたテンプレートを２つ組み合わせて２ページの...
  • UIScrollView - サムネイル画像を並べて指でスクロールさせる
    UIScrollView について直接使ったことが無いので調べてみた。 情報＆サンプル iPhone OS Reference Library に解説とサンプルがある。 UIScrollView解説 Scroll View Programming Guide for ...
  • CALayer を使ってビューの内側に影を落とす
    ビューの上の縁に影を落としたい。こんな感じ。 簡単に出来る方法はないか。 CALayer CALayer を使うと簡単にビューに影を落とすことができる。 CALayer* layer = self.imageView1.layer; layer.shadowO...
  • NSAutoreleasePool を使ってメモリ解放
    autorelease autorelease を使ってオブジェクトを生成した場合、そのオブジェクトはランループ（イベント処理の周期）終了時に解放される。 (例) NSMutableArray* array = [NSMutableArray array]; 通常はこの仕組...
  • Bezelボタンを作る［06］画像を表示する
    [前回] Cocoaの日々: Bezelボタンを作る［05］タッチしてon/offを切り替える 今回は画像を表示する。 画像表示 まずプロパティを追加する。 @property (nonatomic, retain) UIImage* image; 次に描画コードを...