SelectiveScrollとは株式会社ONE-UPのエンジニアさんが作ったScrollViewです。
こちらの記事になります → こちら
githubにも公開されております → github
どのようなものか説明する文章を引用させてもらうと、
「CCScrollViewは動きがかなりチープなので、もっとiOSライクに気持ちよくスクロールできるScrollView」
となります。
SelectiveScrollを使えばパズドラのようなモンスターBOXの画面も簡単に作ることができますし、UITableViewみたいな触り心地になるのでかなり便利だと思います。
ただ、使い方が難しい印象を受けました。
というのも、自分の使いやすいような設定をするためにはうまく調整する必要があるためです。
今回はプロジェクトへの追加からサンプルの起動までは省きます。
重要な部分は以下となります。
実行した画面をもとに見ていきます。
このコードを見ると、marginとyによって貼り付けられているラベルの座標が指定されていることが分かります。yの値はforが回るたびに増加していきますので、どんどんラベルの座標は上昇していきます。ですので、ラベルは一番下から(50から)貼り付けられていることになります。
そして、最後に
とあります。これは以下の画像を見ると分かると思います。
という仕掛けになっているので、lastYの行は一番最後に一度だけ実行すればいいのです。
仕組みが分かったのでいろいろカスタマイズすると以下のようなものも作れました。
こちらの記事になります → こちら
githubにも公開されております → github
どのようなものか説明する文章を引用させてもらうと、
「CCScrollViewは動きがかなりチープなので、もっとiOSライクに気持ちよくスクロールできるScrollView」
となります。
SelectiveScrollを使えばパズドラのようなモンスターBOXの画面も簡単に作ることができますし、UITableViewみたいな触り心地になるのでかなり便利だと思います。
ただ、使い方が難しい印象を受けました。
というのも、自分の使いやすいような設定をするためにはうまく調整する必要があるためです。
今回はプロジェクトへの追加からサンプルの起動までは省きます。
重要な部分は以下となります。
for (int i = 0; i < count; i++) { CCSize size = CCSizeMake(WINSIZE.width / count * 0.7, WINSIZE.height * 0.7); SelectiveScroll* scroll = SelectiveScroll::create(); scroll->setPosition(CCSizeMake(WINSIZE.width / (count + 1) * (i + 1), WINCENTER.y)); scroll->setBoundingEffectKind((BoundingEffect)i); scroll->setContentSize(size); scroll->setDelegate(this); scroll->clipToBounds(true); scroll->retain(); float lastY = 0.0; int rowCount = 50; for (int ii = 0; ii < rowCount; ii++) { CCLabelTTF* label = CCLabelTTF::create("", "Helvetica", 44); // position float margin = 100; float y = margin + (label->getScaleY() + margin) * ii; label->setPosition(CCPointMake(size.width * 0.5, y)); scroll->getScrollLayer()->addChild(label); CCPoint p = label->getPosition(); string title = to_string(rowCount - ii) + " (" + to_string((int)p.y) + ")"; label->setString(title.c_str()); lastY = p.y + margin; } scroll->setScrollSize(CCSizeMake(size.width, lastY)); scroll->scrollToTop(); this->addChild(scroll); }
実行した画面をもとに見ていきます。
// position float margin = 100; float y = margin + (label->getScaleY() + margin) * ii; label->setPosition(CCPointMake(size.width * 0.5, y)); scroll->getScrollLayer()->addChild(label);
このコードを見ると、marginとyによって貼り付けられているラベルの座標が指定されていることが分かります。yの値はforが回るたびに増加していきますので、どんどんラベルの座標は上昇していきます。ですので、ラベルは一番下から(50から)貼り付けられていることになります。
lastY = p.y + margin;
とあります。これは以下の画像を見ると分かると思います。
という仕掛けになっているので、lastYの行は一番最後に一度だけ実行すればいいのです。
仕組みが分かったのでいろいろカスタマイズすると以下のようなものも作れました。
しっかりぬるぬる動いてくれるので助かりました。
ただ、メモリに注意してみるとどうやらリークしているようでした。
この部分っているのかなーと思い削除してみると、メモリリークしなくなりました。
また、動作も変わりませんでした。
ただ、メモリに注意してみるとどうやらリークしているようでした。
scroll->retain();
この部分っているのかなーと思い削除してみると、メモリリークしなくなりました。
また、動作も変わりませんでした。