日本VTR実験室お使いのブラウザは、バージョンが古すぎます。Explore9には対応しておりません。恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。Javascriptが無効になっています。このサイトは、javascriptが有効になっていないと、正常に表示されません。アプリ開発日記AndroidTipsアプリ開発pencoはてブTwitterFacebookGoogle+Pocketこんにちわ、pencoです。今回はPopupWindowにカスタムのViewを設定する方法について書いていきたいと思います。完成イメージはこんな感じです。リストビューの一行をロングタップすると、ポップアップが表示されるようにします。ポップアップには、長くて”...”表示になっているリストのテキスト全文と、共有ボタンを表示します。レイアウトの作成まずは、ポップアップに設定するViewのレイアウトを作ります。/></LinearLayout>LinearLayoutの背景に吹き出しの画像を設定しています。このポップアップはTextViewに設定されるテキストの長さによってサイズを可変にしたいため、吹き出し画像は9patchで作成しています。次にポップアップを作る!...と、その前に下準備をしておきます。下準備リストビューの一行をロングタップした場合に表示するので、ListViewにOnItemLongClickListenerを設定し、onItemLongClick()の中でポップアップの設定を行います。今回はListFragmentを継承したクラスでListViewの設定をしています。(ListFragmentについては説明を割愛させて頂きます。true;}LayoutInflaterを使って先程作ったレイアウトをinflateします。vは、ロングタップしたリストの一行に設定されているビューが入ります。アダプターに渡しているやつですね。そこからidを使用しTextViewを取得、そこからテキストを取得しています。共有ボタンが押された時の処理も書いてしまいます。ポップアップでは、本題のポップアップです。onItemLongClick()内に続けて書いていきます。LayoutParams.WRAP_CONTENT);popupWindow.setContentView(layout);popupWindow.showAsDropDown(v);レイアウト作成時にも述べましたが、ポップアップのサイズはテキストの長さによって可変にしたいため、popupWindowにもWRAP_CONTENTを設定します。ちなにみこのsetWindowLayoutMode()を省くとポップアップが表示されませんでした。作成したpopupWindowインスタンスに先程読み込んだlayoutをビューとして設定します。最後にshowAsDropDown()でポップアップを表示します。showAsDropDown()の引数は、アンカーとして使用するビューです。リストビューの一行を渡すことで、ロングタップした項目の下にポップアップが表示されます。アンカーのビューとポップアップは紐付けられているため、アンカーのビューが動くとそれに付随してポップアップも移動します。この状態で実行すると、こんな感じになります。位置の調整...いろいろ気になるところはありますが、まずは表示位置を直します。yoff)に変更します。第二、第三引数は、アンカーのビューの左下を(0,0)とした場合のオフセット値です。-yoff);リストの横にポップアップが表示されるよう、リスト全体の幅、リストの一行の高さ分オフセットをかけました。これでもう一度実行してみます。これで位置は意図するものになりました。角丸をきちんと出したい!しかしよく見ると、吹き出しの背景にグレーの四角が...これは、ポップアップにビューを設定しないとわかるのですが、ポップアップのデフォルトの背景です。これをなんとか透明にしたいですね。通常Viewの背景を透明にする場合は、背景に#00000000などを指定します。ところが、このPopupWindowにはsetBackgroundDrawable()しか背景を設定するメソッドがありません。そこで、適当なサイズの透明な画像を用意し、背景に設定します。今回は16×16の透明なPNGを用意し、背景に設定しました。サイズは適当ですが、ポップアップ自体にWRAP_CONTENTを設定しているので、表示したい大きさ(今回は吹き出しのサイズ)よりは小さい方が良いと思います。popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.popup_bg));これでやっと完成形と同じ表示に出来ました!ポップアップを消す処理をつけようあと少し、動作について修正を行いましょう。現状ではポップアップを消す処理がないため、出したはいいが消せません。そこで、setOutsideTouchable()を使います。このメソッドにtrueを設定すると、ポップアップの外側をタッチした時に消えるようになります。これだけだと、下のビューもイベントを受けてしまう為、setFocusable()にもtrueを設定し、ポップアップ表示中のフォーカスを自分に設定します。これで完成です!!まとめのコード最後にポップアップ設定部分のコードをまとめるとこの様になります。true;}長くなってしまいましたが、以上です!閲覧ありがとうございます。日本VTR実験室をご覧いただき、ありがとうございます。コメントをキャンセルメールアドレスは公開されません。付いている欄は必須項目です。ツイート実験室メンバーOKOKpencomashiandyJBブンブン丸チャオメンバー紹介ページへお気軽にお問い合わせください。日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。コンテンツ制作でお困りでしたら、お気軽にご相談ください。ご連絡お待ちしております。