Androidプログラミング・メモ3

by K.I

2016/04/05〜

Index

概要
ジェスチャー
- ジェスチャー操作の実装
- タップ操作時のイベント
- ピンチ操作時のイベント
- スクロール時のイベント
- ダブルタップでスケーリング時のイベント
- フリック時のイベント
PopUp Menu
- Popupのレイアウト
- Popupの表示
- 画面回転時は
- PopupWindowの大きさ
- Closeボタン
- showAtLocationによる表示
- Gravity定数
- PopupWindow関連の参考リンク
- 9-Patch Image
- Context Menu

概要

Androidのアプリケーションプログラムに関する備忘録としてのメモ

ジェスチャーのイベント、それにPopUpウィンドウについて

[top]

ジェスチャー

ジェスチャー操作の実装

GestureDetectorをインプリメントする

public class Customview extends View
        implements      GestureDetector.OnGestureListener,
                        GestureDetector.OnDoubleTapListener,
                        ScaleGestureDetector.OnScaleGestureListener {

Eclipseの場合、これでメソッド・スタブが自動生成されるので、これに必要な操作を記述すれば良い

メソッドの戻り値がbooleanの場合、最初のイベントでtrueを返さないと次のイベントが発生しない様だ

タップ操作時のイベント

シングルタップ時

onTouchEvent⇒ACTION_DOWN
onDown
onTouchEvent⇒ACTION_UP
onSingleTapUp
onSingleTapConfirmed

僅かに長めのシングルタップ時

onTouchEvent⇒ACTION_DOWN
onDown
onShowPress
onTouchEvent⇒ACTION_UP
onSingleTapUp
onSingleTapConfirmed

長めのシングルタップ時

onTouchEvent⇒ACTION_DOWN
onDown
onShowPress
onLongPress
onTouchEvent⇒ACTION_UP

ダブルタップ時

onTouchEvent⇒ACTION_DOWN
onDown
onTouchEvent⇒ACTION_UP
onSingleTapUp
onTouchEvent⇒ACTION_DOWN
onDoubleTap
onDoubleTapEvent
onDown
onTouchEvent⇒ACTION_UP
onDoubleTapEvent

ピンチ操作時のイベント

ピンチ操作によるスケーリング

onTouchEvent⇒ACTION_DOWN
onDown
onTouchEvent⇒ACTION_MOVE
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
  :
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
onScaleBegin    ⇒ピンチ操作の開始（指２本でタッチした時）
onScale         ⇒ピンチ操作中に繰り返し呼ばれる
onScale
onScale
  :
  :
  :
onScale
onScaleEnd      ⇒ピンチ操作の終了（どちらかの指が離れて、１本になった時）
onTouchEvent⇒ACTION_UP

ScaleGestureDetectorのメソッド

getScaleFactorで、１つ前の間隔との比
getCurrentSpanX,getCurrentSpanYで、現在の間隔
getFocusX,getFocusYで、２本の指の中心位置を取得できる
- onScaleEndの時は片方の指だけなので、中心位置にならないことに注意！

スクロール時のイベント

シングルタップからのスクロール

onTouchEvent⇒ACTION_DOWN
onDown
onTouchEvent⇒ACTION_MOVE
onTouchEvent⇒ACTION_MOVE
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
  :
  :
  :
onTouchEvent⇒ACTION_UP

スケーリングと違って、スクロールは終了イベントが無さそうなので、

onTouchEventのACTION_UPで終了を判定するしかないと思う

ダブルタップでスケーリング時のイベント

ダブルタップからのスケーリング

onTouchEvent⇒ACTION_DOWN
onDown
onTouchEvent⇒ACTION_UP
onSingleTapUp
onTouchEvent⇒ACTION_DOWN
onDoubleTap
onDoubleTapEvent
onDown
onShowPress
onTouchEvent⇒ACTION_MOVE
onDoubleTapEvent
onTouchEvent⇒ACTION_MOVE
onDoubleTapEvent
onTouchEvent⇒ACTION_MOVE
onDoubleTapEvent
  :
onTouchEvent⇒ACTION_MOVE
onDoubleTapEvent
onScaleBegin
onScale
onScale
onScale
  :
  :
  :
onScale
onScaleEnd

ダブルタップからスクロール操作をすると、すぐにスケーリング動作に切り替わる様だ¹

ダブルタップした位置を中心として、下方向で拡大、上方向で縮小となる

フリック時のイベント

フリック操作

onTouchEvent⇒ACTION_DOWN
onDown
onTouchEvent⇒ACTION_MOVE
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_MOVE
onScroll
  :
onTouchEvent⇒ACTION_MOVE
onScroll
onTouchEvent⇒ACTION_UP
onFling!

最初は、どうしても少しスクロールしてしまうので、

スクロールとフリックを共存させるのは難しいかもしれない

最初の状態を憶えておいて、普通にスクロールしておいて、

もしフリックの場合は元に戻してから、フリック動作に移るとかすれば良いかも。

¹実際、やってみたら切り替わったが、何か条件があるのかもしれない。

[top]

PopUp Menu

PopupWindowをカスタマイズする

Popupのレイアウト

アイコンとTEXTを、吹き出し形状のPopupWindowで表示するようにする。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/baloon"               ⇒吹き出しの9-patchイメージ
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/popupicon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/popupicon" />            ⇒アイコンイメージ
    
    <TextView
        android:id="@+id/popuptext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="notitle"
        android:textColor="#ffffff"
        android:textSize="20sp" />

</LinearLayout>

Popupの表示

Viewの任意の位置に、PopupWindowを表示する

@Override
public void onLongPress(MotionEvent e) {

        LinearLayout layout = (LinearLayout)activity.getLayoutInflater().inflate(R.layout.popupwindow, null);

        // Textを設定・TextViewの取得は、layoutから指定する必要がある
        TextView poptext = (TextView)layout.findViewById(R.id.popuptext);
        poptext.setText(String.format("%d, %d",(int)e.getX(),(int)e.getY()));
        
        // PopupWindowはActivityから呼出されるので、予め取得しておいたメインのActivityを指定
        PopupWindow popupWindow = new PopupWindow(activity);
        popupWindow.setContentView(layout);

        // PopupWindowの背景に、透明のイメージを指定
        popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.transparent));

        // PopupWindowの外側をタッチすると、消えるようにする
        popupWindow.setOutsideTouchable(true);
        popupWindow.setFocusable(true);

        // showAsDropDownで表示する時は、setWindowLayoutModeで大きさを指定する必要がある
        popupWindow.setWindowLayoutMode(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        popupWindow.showAsDropDown(this,(int)(e.getX()),(int)(e.getY()-view_h));

}

Popupの表示位置²は、左下が座標原点（0,0）になる

通常の左上基準の座標と異なるので、予め取得しておいたviewの高さを引いている

showAsDropDownは、ナビゲーションバーも含めた画面全体の左下が基準で、Y方向は何故かマイナス値で指定するようだ。

ナビゲーションバーの高さも考慮する必要があるかもしれない

画面回転時は

でも、画面を回転すると、PopupWindowの位置がズレる。

とりあえずpopupWindowをグローバルにして、回転時（onSizeChanged）で dismissするようにした。
```
        if (popupWindow!=null && popupWindow.isShowing()) {
                popupWindow.dismiss();
        }
```

popupWindowはちゃんと破棄する必要があるが、isShowing()がtrueの時しか破棄できないので注意！（重要）

setOutsideTouchableと、setFocusableにより、画面外のタッチでPopupWindowを消せるようになるが、

Windowを消すために一度タッチする必要がある。

タッチする度にpopupWindowを表示するためには、表示前にdismissで消すのが良いかもしれない。

PopupWindowの大きさ

popupWindow.getWidth()とか、popupWindow.getHeight()では大きさを求められない。

ContentViewから、大きさを求める必要があるようだ。

View v = popupWindow.getContentView();
w = v.getWidth();
h = v.getHeight();

でも、この方法だと、一度Viewを表示させないと大きさがわからない。

表示させないで、大きさを求めることって、出来ないのかな。。

いろいろ調べていたら、ビューが表示される前のビューの大きさを測る方法を見つけたので、

やっと、PopupWindowの大きさを求めることが出来た。

View v = popupWindow.getContentView();
v.measure(
        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), 
        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int w = v.getMeasuredWidth();
int h = v.getMeasuredHeight();

これを見つけるまで、ずいぶんと悩んでしまった。

popupWindowの大きさを求めるには、getMeasuredWidth,getMeasuredHeightを上記のように使う必要がある。（重要）

Viewの大きさが中身によって決まる場合、Viewの内容を設定してからmeasureを実行しないと、正しい大きさが求められないので注意

Closeボタン

popupWindowに、×印の画像を用意して、Closeボタンをつけてみる

画像をボタンとして扱うImageButtonを使ってみた。

LinearLayout layout = (LinearLayout)activity.getLayoutInflater().inflate(R.layout.popupwindow, null);
        ：
// Closeボタン
ImageButton popupClose = (ImageButton)layout.findViewById(R.id.closebtn);
popupClose.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
                popupWindow.dismiss();
        }
});

popupWindow上のリソースは、直接findViewByIdするとnullを返すので、layoutから指定する必要³がある（重要）

画像は src で指定しても良いが、backgroundの方が大きさの調整がやり易かった。

scaleTypeで、いろいろ調整することが出来るが、とりあえず指定なしとした。
```
android:background="@drawable/close"
```

ImageViewをボタンにしても良い。

ImageButtonをImageViewに置き換えるだけ。ImageViewの方がレイアウトがやりやすいかも。

showAtLocationによる表示

showAtLocationでは、Gravityで基準位置を設定できる

// showAtLocationは、setWidth,setHeightで、大きさを指定しないとダメらしい
popupWindow.setWidth(LayoutParams.WRAP_CONTENT);
popupWindow.setHeight(LayoutParams.WRAP_CONTENT);
popupWindow.showAtLocation(this,Gravity.TOP|Gravity.LEFT,(int)e.getX(),(int)e.getY());

基準位置をTopLeftにすれば、クリック位置をそのまま渡せると思ったんだけど、

Popup表示の位置指定は、指定したViewの座標じゃなくて、画面全体の座標のようだ

Centerを指定しても、Viewの中央じゃなくて、画面全体の中央みたいだし。

そうだとすると、Viewを指定している意味が無い気がするんだけど。。

どちらかというと、PopupWindow自体の基準位置を指定できるようにして欲しかったなぁ。

Gravity定数

レイアウトの位置を設定するGravity定数値

意味が分からないものもあるが、とりあえず値を調べたのでメモ

Parameter	Decimal	Hex	意味
TOP	48	0x30	コンテナ上部に配置
BOTTOM	80	0x50	コンテナ下部に配置
LEFT	3	0x03	コンテナ左側に配置
RIGHT	5	0x05	コンテナ右側に配置
CENTER	17	0x11	コンテナ中央に配置
CENTER_HORIZONTAL	1	0x01	コンテナ左右の中央に配置
CENTER_VERTICAL	16	0x10	コンテナ上下の中央に配置
NO_GRAVITY	0	0x00	指定なし
FILL	119	0x77
FILL_HORIZONTAL	7	0x07
FILL_VERTICAL	112	0x70
CLIP_HORIZONTAL	8	0x08
CLIP_VERTICAL	128	0x80
START	8388611	0x800003
END	8388613	0x800005
AXIS_CLIP	8	0x08
AXIS_PULL_AFTER	4	0x04
AXIS_PULL_BEFORE	2	0x02
AXIS_SPECIFIED	1	0x01
AXIS_X_SHIFT	0	0x00
AXIS_Y_SHIFT	4	0x04
DISPLAY_CLIP_HORIZONTAL	16777216	0x1000000
DISPLAY_CLIP_VERTICAL	268435456	0x10000000
HORIZONTAL_GRAVITY_MASK	7	0x07
VERTICAL_GRAVITY_MASK	112	0x70
RELATIVE_HORIZONTAL_GRAVITY_MASK	8388615	0x800007
RELATIVE_LAYOUT_DIRECTION	8388608	0x800000

PopupWindow関連の参考リンク

PopupWindow関連、調べてるといろいろ変な癖がありそうなので、メモしておく

PopupWindowではまったこと

showAtLocationでは、大きさを指定しないと表示されないらしい。

AndroidのPopupWindowがdismissできない備忘録

isShowingがTrueの時しかdismissできないらしい

PopupWindowを生成するときはsetBackgroundDrawableしたほうがいいよ

コードでPopupWindow生成した時は、Backgroundを指定しないとダメらしい

レイアウトファイルだけで簡単に吹き出しを作る方法

これはちょっと関係ないけど

Androidでフリック入力

9-Patch Image

Androidで、引き伸ばし可能な画像フォーマットとして、9-Patch Imageというのがある

自分の環境では、Android SDK の C:\Android\android-sdk\tools\ draw9patch.bat を起動

予め、作成しておいた png 形式のファイルを開く

png画像の周辺に1pxの領域を追加して、その辺上に伸縮する箇所を定義する

上と左で伸縮箇所、下と右でコンテンツ領域を指定

保存すると、拡張子が、 .9.png になる。

Context Menu

Popupメニューというと、標準ではContextMenuというのがあるので、

どうやるのか、調べてみた。

まずContextMenuを表示するViewをActivityのonCreate時に登録

cv = (customView)findViewById(R.id.myView1);
registerForContextMenu(cv);

Contextメニューの生成

@Override
public void onCreateContextMenu(ContextMenu menu, View view, ContextMenuInfo menuInfo) {
    super.onCreateContextMenu(menu, view, menuInfo);

    int viewId = view.getId();

    if (viewId == R.id.myView1) {
                MenuInflater inflater = getMenuInflater();
                inflater.inflate(R.menu.context_menu, menu);
    }
}

メニュー選択時の処理

@Override
public boolean onContextItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.context_menu1:
            showMsg("item0 selected");
            return true;
        case R.id.context_menu2:
            showMsg("item1 selected");
            return true;
        default:
            return super.onContextItemSelected(item);
    }
}

これだけなら、とても簡単だ。

参考： Contextメニューを使う

でもcostomViewで、GestureDetectorをインプリメントしていると、Contextメニューは表示されない

ContextMenuとGestureDetectorは併用出来ないのかな？

これは、 GestureDetectorからコンテキストメニューを表示するを参考にさせてもらって、

costomViewの、onLongPressから、ActivityへopenContextMenuを渡したら表示された。
```
myActivity.openContextMenu(this);
```

でもContextMenuって、アイコン表示されないんだなぁ。文字幅にフィットしてくれないし。

それにタップした位置に表示されるわけじゃないので、Popupメニューとは言えないなぁ。

Viewの中央に表示されるだけ⁴なので、メニューというより使い勝手の悪いDialogのような感じ。。

うーん。これなら、面倒だけど自分でPopupWindowを作った方がいいかも。。。

²PopupWindowの左上を何処に表示するかを指定する。
³これは、popupWindowの構成に因るものなのかもしれない。
⁴Viewが小さければ良いのかもしれないけど。。

[top] [プログラムの部屋に戻る]