[Android] Buttonの配置が複雑な時の対処法

Question

複数のボタンの配置に困っています。

上の様な画像を色ごとに分けてそれぞれボタンにしたいと考えてます。
各パーツを切り取って別々の画像として保存することはできたのですが、いざ配置するとなるとどう実装すれば良いのかわからなくなりました。

以下に問題点をあげておきます。
-実際は各ボタンの中に文字だけでなく画像も描かれているため、canvasで描くのは現実的じゃないと思う(いじったことないので実際のところ分かりません)。
-マルチデバイス対応したいので座標をpxとかで指定は没。
-各ボタンの大きさは微妙に統一されてないので各ButtonSizeから座標を計算することはできない。多分できない。

Androidが勝手に画像認識して分割とかしてくれたら楽なんですが、自分が探した限りそういった機能はやっぱりありませんでした。
何か良い方法はございませんでしょうか？
ご教授願います。

---

追記
実際の画像を見せて欲しいとの要望がありましたので、実際の画像とほぼ同一のデザインの画像を新たに貼っておきます。実際のものは挙げていいのか分からないのでこれでご容赦願います。

Comments

[Zuishin]

実際のものを見せてください。

[mosuke]

新たに画像を追加致しました。実際のものとは多少異なりますが、これで実装できれば実物でも実装できると思います。
宜しくお願いいたします。

Answer 1

Viewを継承して独自に作るしかなさそうな気がします。RelativelayoutかFramelayoutでButtonを配置すればと思いましたが、クリックした時の判定がおかしくなりそうなので。

そうなるとやっぱりCanvasを使います。端末のdensityを取得してしっかり作り込めばマルチデバイス対応は可能です。

Comments

[mosuke]

canvasでも実装可能なのですね。canvasで作成したイメージにボタンを乗せる場合、タッチ領域は他の皆さんの仰る通り、イメージに沿って新しく定義することになるのでしょうか？それともcanvasで作成したらその辺は楽ができる様な使用があるのでしょうか？
僕なりに調べたのですが中々その様な記事がなくて...
お手数おかけして申し訳御座いませんが、よろしければご教授願います。

[退会済みユーザー]

私だったら、下記リンクの方法で実装します。初心者だと結構大変ですが、これしかなさそうに思います。この方法だとタッチ領域は独自に実装しなければなりません。また、onTouchの判定処理で、ボタンを押された時のイメージの描画処理も実装が必要です。

http://techbooster.org/android/application/3013/

[mosuke]

中々骨が折れそうですね...
未熟者ゆえ少しイメージできていない部分もありますが、Pathを作成する等他の回答者さんと共通する部分もあるので、当面はcanvas,Region,Path周りを勉強しつつ出来るところから手をつけていこうと思います。
ご回答ありがとうございました！

Answer 2

お仕事でやっているのでしょうか
実装できないデザインは最初から作らなければいいのにとも思いますが ^_^；

まぁでも面白そうなのでいろいろと検索してみたのですが、そのようなUIは、
「Radial Menu」と呼ばれているようですね。

なので、GitHub等でライブラリを探してみるのも手じゃないでしょうか。
radial menu android github

とりあえずRadical Menuで画像検索するだけでも近いイメージのものがたくさん出てきますよ。

似た感じのもので手を打つか、自分で頑張って三角関数駆使すれば
実装できないことも無いと思いますが、いずれにしてもちょっと大変ですね。

Comments

[mosuke]

大学のプロジェクトでiOS版のアプリをAndroidに移行しようとしております。そのため、画像は元のまま使った方が良いのかなと考え、質問させて頂きました、申し訳ございません -.-;
こういったものがあるのですね、見た感じとてもスタイリッシュなので是非実装してみたいです！今回は締め切りが近いのでdsuzukiさんの案を採用させて頂きましたが、余裕ができたら挑戦してみようと思います。
ご回答ありがとうございました！

Answer 3

形の異なる画像を綺麗に並べるのは、難しいですね。

画像を分割するのではなく、タッチ座標から領域を判断するのはどうでしょうか。
一つの円画像とするなら、その表示領域を座標で把握できるのではないでしょうか。
画像の表示位置と画像サイズ、画面サイズから中心座標が計算できれば、タッチ位置との距離・角度でどの領域か判断出来ると考えます。
2点間の距離と角度と座標の求め方

タッチした領域の色を変えたり、浮かせる・沈めるとかしたいなら、この方法は使えませんが。

Comments

[mosuke]

成る程、タッチした座標から擬似的にボタンを判断することもできるのですね！
今の所タッチ時の動作については何も言われていないので当面はその方法で実装していきたいと思います。
ご回答ありがとうございました！

Answer 4

あれ？
どなたか Region について書かれていたと記憶していたんですが、ほかの質問でしたか？
RegionとPathを用いた特定の部分のTouchEventの取り方のように、Path から Region を作って、それを回転させてタッチイベントを実装することで可能なのではないかと思います。

Comments

[mosuke]

ご回答ありがとうございます！
この質問と同時にボタン判定についての質問もさせて頂いていたので、そのことかもしれません。僕の調査不足もあり、これまでRegionという概念を知りませんでした。
回転させるというのは、ボタン1つのタッチ判定領域を定義し、中心座標に対して7つ分回転させる、ということでしょうか？その場合、やはり各ボタンの大きさを統一した画像を新たに作成する必要が出てくる気がします。
細かいことは気にしなくても良いですかね？

[Zuishin]

実際のものが挙げられている程度のシンプルさなら、Region を回転させながら 7 つ作り、塗りつぶして中ほどに文字と蝶を描くことがプログラム中でできると思います。細かな模様が入っているかどうかを聞きたかったのです。

[mosuke]

領域パスに合わせて描画もするということですね。誠に失礼致しました。
実際のものも挙げたものと同程度のデザインで細かな模様は入っておりません。
その方法なら実際に描画したものと判定領域とのあいだにもズレが生じなさそうですね。canvasもRegionも触れたことがなく若干不安ではありますが、挑戦してみようと思います。
ご回答ありがとうございました！