cocosでスクロールビューを使う方法。

ここが詳しい


スクロールは設定が少し多いので気をつけよう。

基本は以下のような形。

 //作成、ビューサイズの設定(スクロールビュー自体のサイズ)
 ScrollView* scrollView = ScrollView::create(viewSize);

 //スクロール方向の指定
 scrollView->setDirection(ScrollView::Direction::VERTICAL); //HORIZONTAL, BOTH もある

 //スクロールビュー自体の座標指定. 左下位置を指定すること
 scrollView->setPosition(pos);

 //スクロールビューの中身となるノードを指定. このノード（と子孫のノード）がスクロールすることになる
 //また、このノードのサイズがScrollViewのcontentSizeになる
 scrollView->setContainer(containerNode);

 //スクロールビューの中身のサイズを指定。containerNodeのサイズ通りなら、指定は不要
 //内部的には、scrollViewのcontentSizeでなく、containerのcontentSizeをセットしている。だからsetContainer()の後に実行しないと反映されない
 scrollView->setContentSize(contentSize);

 //スクロールイベントを受け取るdelegateをセットする。通常はthisにして、このメソッドを実行しているLayerクラスを指定するのが自然だろう。
 scrollView->setDelegate(delegate);

 //このスクロールビューを親ノード(parent)の子につける。
 parent->addChild(scrollView, order);

気をつけるポイント1
ScrollViewはsetAnchorPoint()が効かない（バグ？）。setPosition()は常に左下座標を指定すること。

気をつけるポイント2
スクロールビューは、デフォルトだと一番下までスクロールした状態になっている(VERTICALまたはBOTHの場合)。
普通は一番上にスクロールさせるはずだと思う。

   scrollView->setContentOffset(scrollView->minContainerOffset(), false);

こうしておくと、一番上にスクロールした状態になる。
第2引数をtrueにすると、アニメーションしながらスクロールする。
通常はtrueがいいが、この場合は一瞬でスクロールさせたいのでfalseが適切。


スクロールビューは、たとえsetVisible(false)にして見えないようにしていても、タッチイベントに反応してスクロールしてしまう。

これに関する解決は別の記事で。

cocos2d-xでタッチを検知する方法は主に2つ。

1. MenuItemを使う方法

//itemの作成
MenuItemImage* item = MenuItemImage::create(fname1, fname2, CC_CALLBACK_1(HellowWorldScene::tapCallback, this));

item->setPosition(pos);
item->setScale(sx,sy);
item->setAnchorPoint(Vec2(.5f,.5f));


//menuの作成. 今作ったitemImageを表示する
Menu *menu = Menu::create(item, NULL);

//menu自体は親座標と同じ位置
menu->setPosition(Vec2::ZERO);

menu->setVisible(isVisible);

//menuをaddChildする
parent->addChild(menu, order);

void HelloWorldScene::tapCallback(Ref* pSender) {
    MenuItemImage *item = (MenuItemImage*)pSender;
    //何らかの処理
}

この方法だと、Menuの範囲内をタップしたときだけコールバックが呼ばれる。

menu->setEnabled(false);
または
item->setEnabled(false);
とすると反応しなくなる。スプライトは表示されたまま。

menu->setVisible(false);
または
item->setVisible(false);
とすると、スプライトも非表示で、タップも反応しなくなる。



2. イベントリスナーを使う方法

//イベントリスナー作成
auto listener = EventListenerTouchOneByOne::create(); //シングルタップ
//auto listener = EventListenerTouchAllAtOnce::create(); //マルチタップ

//イベントを飲み込むかどうか
listener->setSwallowTouches(true);

//タッチメソッド設定
listener->onTouchBegan = CC_CALLBACK_2(MyScene::onTouchBegan, this);
listener->onTouchMoved = CC_CALLBACK_2(MyScene::onTouchMoved, this);
listener->onTouchEnded = CC_CALLBACK_2(MyScene::onTouchEnded, this);
listener->onTouchCancelled = CC_CALLBACK_2(MyScene::onTouchCancelled, this);

//優先度100でディスパッチャーに登録
this->getEventDispatcher()->addEventListenerWithFixedPriority(listener, 100);


bool HelloWorldScene::onTouchBegan(Touch *touch, Event *unused_event)
{
    Vec2 pos = touch->getLocation(); //左下原点. OpenGL座標系
    //Vec2 posInView = touch->getLocationInView(); //左上原点. ビュー座標系
    Vec2 posInSprite = sprite->convertToNodeSpace(pos); //sprite相対の座標に変換

    //何らかの処理

    return true;
}
bool HelloWorldScene::onTouchMoved(Touch *touch, Event *unused_event){
}
bool HelloWorldScene::onTouchEnded(Touch *touch, Event *unused_event){
}
bool HelloWorldScene::onTouchCancelled(Touch *touch, Event *unused_event){
}

となる。
この場合、スクリーン全体のどこでもタップが検知されるので、範囲チェックを自分で行うこと。
タップ座標が欲しいときは、
touch->getLocation();
touch->getLocationInView();
のいずれかを使う。
cocosが普通使っている左下原点の座標系はgetLocation()のほうである。

上記の例だと、タップした座標をspriteの座標系に変換している。

また、画面のどこをタップしてもonTouchBegan()らが呼ばれるわけではなく、
タップした位置がMenuであれば、そちらのコールバックの呼び出しが優先され、onTouchBeganは呼ばれなくなる。

参考

cocos2d-xのスプライトインスタンス。
座標を取りたいときは

Rect bgRect = bgSprite->getSpriteFrame()->getRectInPixels();
Rect bgRect = bgSprite->getSpriteFrame()->getRect();
などが使える。
ただしこれは、cocoaとは違い、frameというのは自分から見た座標系らしく、bgRect.originは零ベクトルになっている。

Vec2 bgPoint = bgSprite->getSpriteFrame()->getOffset();

というメソッドもあるが、これを使っても零ベクトル。
仕方ないので
bgSprite->getPositionY() + bgRect.size.height
みたいにやることになる。

ここでさらに注意したいのは、cocosはy座標が上向きになっていること。
自己流でyを下向きに持っていたりすると、getPositionY の値が意外なところにいたりするので注意

これは簡単で、

まずcocos2d-xの公式ページへ行く
ダウンロードページ

で、最新のバージョンを選択。


ダウンロードされます。

適当なディレクトリに解凍したあと、
コンソールから setup.py を実行。



$ ./setup.py

バージョンアップでなく、初めてのcocos2d-xのインストールだった場合は、ここでAndroidのSDK_ROOTなどを入れる必要がある。それはまた別記事で。

完了すると、bash_profile を更新するよう言われる。
そこで以下のコマンドを実行する。

$ source ~/.bash_profile

で、コンソールを再起動する。

反映されたかを確認してみる。

$ which cocos
-> /path/to/cocos2d-x-3.2/tools/cocos2d-console/bin/cocos

という具合に表示される。
ディレクトリのバージョン数値があっていればOK。

これにてバージョンアップは完了。

新しいcocosプロジェクトを作成する場合は、以下のコマンド。

$ cocos new NewProject -p com.yourcompany.NewProject -l cpp -d /path/to/NewProject

iPhone6や6Plusが登場することにより、iOSデバイスの画面サイズ種類は

機種	画面サイズ	縦横比
4,4S	960x 640	3:2
5,5S,5C	1136x 640	約16:9
6	1334x 750	約16:9
6Plus	1920x1080	約16:9
iPad mini	1024x 768	4:3
iPad Retina/Air/mini Retina	2048x1536	4:3

と6種類にも及ぶことになる。


ますますUseAutoLayoutを使いこなしていくことは重要になってくる。

UseAutoLayoutを使っていて、動的に指定したくなることがある。
そういう場合、UseAutoLayout自体を使わなくするという手もあるが、画面サイズの違いを吸収できなくなるので適切でない。
UseAutoLayoutのON/OFFはストーリーボード単位での指定になるので、別ストーリーボードに分けることで影響を絞る、という手もあるといえばある。

しかし、コードからレイアウト指定ができると便利になる。
その方法が

参考

に書いてあった。
公式リファレンスは以下を参照。
NSLayoutConstraintクラス

AutoLayoutガイド


なお、注意点をいくつか。

・AutoLayoutによる配置が実行されるタイミング
これは、viewWillAppearとviewDidAppearの間になる。
つまり、レイアウト制約の指定はviewDidLoadかviewWillAppearあたりでやっておけばいいということになる。

しかしそれは同時に、viewDidAppearまで各ビューのframe,boundsは信用できる値になっていないということでもある。
具体的に言うと、storyboard上で配置してある座標やサイズがそのまま入っていたりする。
その値を使って別のビューの座標やサイズを計算すると、思わぬずれが生じることになる。
storyboard上では、iPhone5Sのサイズで作っていることが多いだろう。だからiPhone5Sの実機やシミュレータで実行していると気付きにくい。別のサイズのデバイスで実行したときに発覚することになるだろう。

対処としては、viewDidAppear後に座標やサイズの計算をすればよい。しかし、一瞬（1フレーム？）計算前の状態でビューが表示されてしまう。
だから、そのビューはstoryboardに配置せずにコードで生成するようにするとか、初めはhiddenにしておくとかいう手間をかけておく必要がありそうだ。

それが面倒なら、viewDidLoadかviewWillAppearで、ということになるが、
その場合はビューの正確な位置をコード中で求めることになりそうだ。AutoLayoutの指定の中で、信用できる数字を使うことになる。例えばHeightを40に指定しているとか、親ビューからの相対座標をx=20にしている、とかそういう制約から計算することになる。
しかしこれはUseAutoLayoutと意味が二重になるのであまりうれしくない。

Xcodeで、久しぶりにプロジェクトを実機に転送しようとすると発生することがある。

A valid provisioning profile for this executable was not found



参考


そして…
スキームを確認し、デバッグBuildになっているかどうか確認すること！

ScrollView
画面に収まりきらないサイズを表示したいときに使う。

ScrollView は垂直方向のスクロールのみできる。
HorizontalScrollView は水平方向のスクロールのみできる。
両方スクロールしたいときは…？ 公式には用意されていない。別記事で。

以下はScrollView（垂直スクロール）に絞って説明する。


ScrollViewの直下には、Layoutしか配置できない。

使い方はとくに難しいことは無い。GraphicalLayoutでそのまま置いていけばよい。

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/relative"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.example.layoutmaster.MainActivity" >

  <ScrollView
      android:id="@+id/scrollView1"
      android:layout_width="70dp"     スクロールするようにわざと小さめにしてるだけ
      android:layout_height="70dp"
      android:layout_alignParentTop="true"
      android:layout_alignParentRight="true"
      android:layout_marginTop="100dp"
      android:layout_marginRight="142dp"
       >

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"
          >

          <ImageView
              android:id="@+id/imageView1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/ic_launcher" />

          <ImageView
              android:id="@+id/imageView2"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/ic_launcher" />

    </LinearLayout>
      
  </ScrollView>

</RelativeLayout>

fillViewport
スクロールビューの中身（つまり直下のLayout）を、ScrollViewのサイズと同じに合わせるかどうか。ビューの中身がスクロールビューのサイズに対して小さいときに意味が出てくる。
trueかfalseで指定。デフォルトはfalse。つまり中身が少ないとビューが小さくなる。

android:fillViewport="false"の場合。（デフォルト）

ScrollViewのbackgroundを赤に、その子のLinearLayoutのbackgroundをシアンにしている。
中身が少ないので、LinearLayoutも小さい。

android:fillViewport="true"の場合。

LinearLayoutもScrollViewと同じサイズになっている。

GridLayout
方眼でオブジェクトを並べるレイアウト。iOSでいうとコレクションビュー。

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.layoutmaster.MainActivity" >

<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="88dp"
android:layout_marginTop="83dp"
android:columnCount="3"
android:orientation="vertical"
android:rowCount="3"
android:rowOrderPreserved="true" >

<ImageView
   android:id="@+id/imageView1"
   android:layout_gravity="left"
   android:src="@drawable/ic_launcher" />

<ImageView
   android:id="@+id/imageView2"
   android:layout_gravity="left"
   android:src="@drawable/ic_launcher" />

<ImageView
   android:id="@+id/imageView3"
   android:layout_gravity="left"
   android:src="@drawable/ic_launcher" />

<ImageView
   android:id="@+id/imageView4"
   android:layout_gravity="left"
   android:src="@drawable/ic_launcher" />

</GridLayout>

</RelativeLayout>

TableLayout
テーブルを作成する。htmlのイメージに近いようだ


参考


基本形。
列だけでなく行も揃えられる。

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.layoutmaster.MainActivity" >

<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginTop="21dp" >

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<ImageView
 android:id="@+id/imageView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_launcher" />

<TextView
 android:id="@+id/textView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Large Text"
 android:textAppearance="?android:attr/textAppearanceLarge" />

</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<ImageButton
 android:id="@+id/imageButton1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_launcher" />

<Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button" />

</TableRow>

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextViewaaaaa" />

<ImageView
 android:id="@+id/imageView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/abc_ab_bottom_solid_dark_holo" />

</TableRow>

<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<SeekBar
 android:id="@+id/seekBar1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />

<ImageView
 android:id="@+id/imageView3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@android:drawable/btn_dialog" />

</TableRow>

</RelativeLayout>

FrameLayout
1つのオブジェクトだけを配置するレイアウト。
基本的に左上に置くだけ。複数の子オブジェクトを配置したら単に重なる。ただしlayout_gravity指定は可能。
子オブジェクトとしてLinearLayoutやRelativeLayoutを置くことも可能。
子オブジェクトの表示・非表示を切り替えて、表示内容を変えたりに使うようだ。

RelativeLayoutでも同じことできるじゃんとは思う。ただ意味的にFrameLayoutが合っているということか。


要素

foreground
このレイアウト全体を覆う画像。最前面に表示される。idで指定。
#rgb, #aarrggbb などで色指定も可能。ただしこの場合、後述のforegroundGravityと併用はできない（色がつかなくなる）

例

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.layoutmaster.MainActivity" >

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="86dp"
android:layout_marginTop="45dp"
android:foreground="@drawable/abc_ic_search" >  <!-- ここ！！！！！！！ ->

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="24sp"
    android:text="TextView" />
</FrameLayout>

</RelativeLayout>

foregroundにsearch（虫眼鏡）画像。
子ビューにドロイド君画像。その手前の子ビューにTextView。
重なりとしては
（最前面）虫眼鏡→TextView→ドロイド（最背面）


foregravityGroundを指定すると、foreground画像は本来のサイズになり、指定方向に寄る

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"      
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.layoutmaster.MainActivity" >

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="86dp"
android:layout_marginTop="45dp"
android:foreground="@drawable/abc_ic_search"
android:foregroundGravity="right"
 >

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="24sp"
    android:text="TextView" />
</FrameLayout>
</RelativeLayout>

なお、子オブジェクトがgoneになると、FrameLayoutのサイズ自体が縮まる

↓これが…

↓こうなる。

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.layoutmaster.MainActivity" >

<FrameLayout
 android:id="@+id/frameLayout1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_marginRight="86dp"
 android:layout_marginTop="45dp"
 android:foreground="@drawable/abc_ic_search"
 android:foregroundGravity="right" >

 <ImageButton
     android:id="@+id/imageButton1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:visibility="gone"            <!-- 注目！！！！！！ ->
     android:src="@drawable/ic_launcher" />

 <TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="TextView"
     android:textSize="24sp" />

</FrameLayout>

<ImageView
 android:id="@+id/imageView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/frameLayout1"
 android:layout_below="@+id/frameLayout1"
 android:src="@drawable/abc_ab_bottom_solid_dark_holo" />

</RelativeLayout>

ただし、measureAllChildrenをtrueにしておくと、可視状態をgoneにしても約まらない。

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.layoutmaster.MainActivity" >

<FrameLayout
 android:id="@+id/frameLayout1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_marginRight="86dp"
 android:layout_marginTop="45dp"
 android:foreground="@drawable/abc_ic_search"
 android:foregroundGravity="right"
 android:measureAllChildren="true" >        <!-- 注目！！！！！！ ->

 <ImageButton
     android:id="@+id/imageButton1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:visibility="gone"
     android:src="@drawable/ic_launcher" />

 <TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="TextView"
     android:textSize="24sp" />

</FrameLayout>

<ImageView
 android:id="@+id/imageView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/frameLayout1"
 android:layout_below="@+id/frameLayout1"
 android:src="@drawable/abc_ab_bottom_solid_dark_holo" />

</RelativeLayout>

参考…可視状態
VISIBLE 見える
INVISIBLE 見えない。非表示部分を詰めない
GONE 見えない。非表示部分を詰める