Studio対応版』の解説内容をもとに、本書で説明しきれなかったサンプルアプリを解説しています。「箱入り娘」は古くからあるパズルで、大きさの違ういくつかのピースを動かし、「娘」と書かれたピースを外に出すゲームです。「執事」や「父」「母」などが邪魔をして、なかなか娘を外に出すことができません(必勝法はあるようですが)。→グレーの部分が空きです。空きに接しているピースをクリックすると、ピースが空きの場所に動きます。上と右など2方向に空きがある場合は、ピースの上のほうをクリックすると上に移動し、右のほうをクリックすると右に移動します。アプリは以下のような設定で作成してあります。表にない項目については、設定を変更していません。sample.example.comこのアプリでは、Javaでウィジェットを配置するので、あらかじめ配置されているTextViewウィジェットは削除してあります。Javaのプログラムはアクティビティを表示するためのMainActivity.javaファイルと、ピースを表すクラスを記述したPiece.javaファイルに分かれています。Class]を選びます。[Name:]に「Piece」と入力すると、Piece.javaファイルが作られます。......「父」は幅が1、高さが2のピース。}TextViewをサブクラス化したPieceクラスを作るコンストラクター。タイプと位置を指定して、ピースを作る。タイプが0なら空き、1ならば父、2ならば母...というぐあい。コードは長いが、やっていることは単純。これ以降がPieceクラスで追加したメソッド。ピースの位置を取得したり、動かしたりするのに使う。コードは長いが、やっていることは単純。onDrawメソッドをオーバーライド(描画が必要になったら自動的に呼び出される)。立体的に見せるために、左と上を白い線に、右と下を黒い線にしているだけ。次にメインのコードです。Pieceクラスのオブジェクトを作成し、タッチされたらピースを動かします。OnClickListenerでは、オブジェクトのどの位置がクリックされたかが検出できないので、OnTouchListenerを使っています。上と右に空きがあるときに、オブジェクトの上のほうをタッチすれば上に移動し、右のほうをタッチすれば右に移動できるようにするためです。コードは長く、359行もあるので、1つ1つ解説することはできませんが、やっていることは単純です。タッチされた方向に空きピースがあれば、ピースを入れ替え、「娘」が出口にたどり着いたかを調べているだけです。15パズルのようなアプリケーションであれば、ピースのサイズはすべて同じですが、このアプリケーションではピースのサイズが異なるので、ちゃんと動かせるかどうかを調べるコードが少し複雑になっています。「......」の後の太字のキャプションをざっと眺めてポイントをつかんでください。上に空白のピースがある。上に空白のピースがある。上に隣り合って空白のピースがある。上に隣り合って空白のピースがある。}アクティビティでOnTouchListenerをインプリメントする。OnClickListenerではクリックされたことは検出できるが、どの位置がクリックされたかは検出しないので、タッチされた位置を知るためにこちらを使うピースはVectorオブジェクトとする。配列と似ているが、addメソッドなどが使えるので、個々の要素を扱いやすい。51行目以降のコードが実行されるすべてのピースをビューに追加しOnTouchListenerをセットピースを作って、Vectorオブジェクトに追加タッチされたら自動的に実行されるonTouchメソッドをオーバーライドオブジェクトの対角線の傾き(deltaが左下から右上、-deltaが左上から右下の対角線の傾きになる)オブジェクトのどの位置がクリックされたか(Y位置)オブジェクトのどの位置がクリックされたか(X位置)、それに傾きを掛けて、その場合のY位置を求める)対角線より上をクリックしたか調べる(以下同様)動きたい方向が空いているかどうかを調べる。113行目以降のコードが実行される「娘」を外に出せたか調べる。340行目以降のコードが実行される。上が空白のピースであれば、ピースを動かす。下が空白のピースであれば、ピースを動かす。左が空白のピースであれば、ピースを動かす。実際にピースを動かすためのコード(幅1のピースを上下で交換)実際にピースを動かすためのコード(幅2のピースを上下で交換)実際にピースを動かすためのコード(高さ1のピースを左右で交換)実際にピースを動かすためのコード(高さ2のピースを左右で交換)オブジェクト上のどの位置をタッチしたかを知る66行目~94行目が1つの重要なポイントです。オブジェクトにタッチされたときに呼び出される(6)のonTouchメソッドの引数eventにはgetXメソッドやgetYメソッドがあり、タッチされた位置を知ることができます。オブジェクトの上下左右のどの位置をタッチしたかは、以下のように対角線を描けば、その上か下かで調べることができます。この例であれば、小さい●の位置(タッチされた位置)は赤い対角線(左上から右下)よりも上で、青い対角線(左下から右上)よりも下です。いうことは、オブジェクトの右がクリックされたことがわかります。●のx位置から、それに対する対角線のY位置(y1の値)を求め、それと、●のy位置とを比較すれば上か下かの判定ができますね。位置はオブジェクトの左上を(0,0)としているので、値の大きい方が下になることに注意が必要です。タッチした方向に空きがあるかを調べるもう1つのポイントは115行目の(13)以降です。上に空白のピースがあって入れ替えができるかどうかを調べるコードです。タッチしたオブジェクトが「父」や「弟」のように、幅1のものであれば、真上だけを調べれば入れ替えができるかどうかが分かります。「娘」や「執事」のように、幅が2ある場合は、上の2つのピースが両方空きであるかを調べる必要があります。if文による判定が複雑になっていますが、やっているのはそれだけです。それ以降のコードも、下に動かせるか、左に動かせるか、右に動かせるかを順に調べているだけなので、よく似たコードになっています。実際にピースの入れ替えをするのはswapV(幅1のピースを上下入れ替え)、swapV2(幅2のピースを上下入れ替え)、swapH(高さ1のピースを左右入れ替え)、swapH2(高さ2のピースを左右入れ替え)という各メソッドです。今回解説したのは書籍のサポートページにある「さらに高度なアプリ」の中の「BoxGirl」というサンプルです。本書で扱っている他のアプリもぜひ遊んでみてください。http://book.impress.co.jp/books/1114101120_4このプログラムは、デスクトップアプリケーションとしてSwingを使って作ったものを、Androidアプリケーションに改造したものです。プログラミングの授業で「このへんまでならがんばればできるよ」というサンプルとして示したものなので(解説のために作ったコードではないので)、あまり整ったコードにはなっていません。こころざしのある方はぜひ、簡潔なコードで同じことができるように改造してみてください。※サンプルプログラムの絵は、本書に出てくるものも含め、筆者の手によるものです。イラストレーターさんの絵と比べるとクオリティが落ちますが、そのあたりはご容赦のほど。自分で絵を描いてリソースを変更すると、自分だけの「箱入り娘」が作れますよ。前作『イラストでよくわかるAndroidアプリのつくり方』に改訂版が登場。Androidのプログラムを作りながら、自然にJavaというプログラム言語の知識が身につくようになっています。(心理学専攻)卒業後、NECでユーザー教育や社内SE教育を担当したのち、ライターとして独立。読者の側に立った分かりやすい表現を心がけている。お茶の水女子大学講師。最近の趣味は書道、絵画、ウクレレ、ジャグリング、献血。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。IT会員サービスの概要とメリットをチェック他にもこの記事が読まれています設計/手法/テスト技術解説データ中心設計(DOA)に基づいたデータモデリング2020/2/20クラウド技術解説Rancherコードリーディング入門(3/3)2020/2/19開発ツールイベントGitHub、エンタープライズ向けのイベントを国内で開催。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。