Androidオーバーレイに関するメモ

Androidにおけるオーバーレイをおさらいする。
私の場合、カメラプレビューにオーバーレイすることが多い。が、別にカメラ画像かどうかというのはほとんど関係がない。

カメラプレビュー自体はここを見て下さい。

##基本

オーバーレイの前に、そもそものレイ（ヤー）の概念。

• レイアウトは後追加のものが上に来る。
• プログラムでも基本、後に描画したものが上に来る。

つまり、上のものを透明にすれば、オーバーレイできる。
上にくる各種要素を透明にする方法としては、

• レイヤー（レイアウト）全体を透明にする
• 各パーツ（View）を透明にする
  • 配置時点で透明にする
  • プログラムの中で透明にする

というような感じである。

テスト用に下記のようにレイアウト配置する。

FrameLayoutをベースにし、その上にSurfaceView（カメラプレビュー）,オーバーレイ用のRelativeLayoutを配置。そのRelativeLayoutにカスタムView(Shape)やImageViewを配置している。

##透明１：レイヤー自体を透明にする

レイヤー上のコンテンツをまとめて透明にする場合は便利
RelativeLayoutの定義に

android:alpha="0.7"

を加える。通常透明度（アルファ）は0~255だが、ここでは0~1である。なぜ？

##透明２：各Viewを透明にする

レイアウト上に配置された各種View毎にalpha値を設定することで各要素個別に透明度を設定することができる。
書式は、変わらず、

android:alpha="0.5"

でOK。
shape等を利用する場合には、その定義のXMLの中で、透明にすることもできる。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00ffffff" />
    <stroke
        android:width="5dp"
        android:color="#ffff0000" />
    <corners android:radius="2dp" />
</shape>

color指定の際、#aaRRGGBBとしていする。aaがアルファ値で00からffまでをとる。

<View
    android:id="@+id/myRect"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/frame" />

activity_main.xml等からは、上記の様に呼び出す(drawable/frame.xmlとなっている前提）。

##透明３：プログラムの中から描画・透明にする

動的要素がある場合などは、Viewを継承した専用のクラスを作成し、描画を行うことが多い。
例えばこんな感じ。各種要素をプログラミ中で定義している。

public class overlayContent extends View {

    public String msg;

    //constructor
    public overlayContent(Context context) {
        super(context);

        //初期値
        msg = "Hello Android";
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);

        //canvas.drawColor(Color.TRANSPARENT);

        //四角形を描画
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setARGB(150, 0, 0, 255);

        //描画：x1,y1,x2,y2,paint
        canvas.drawRect(100, 100, 600, 200, paint);

        //テキストを描画
        paint.setARGB(255, 255, 255, 255);
        paint.setTextSize(30);
        canvas.drawText(msg,300,150,paint);

        //リソースから取得して描画
        Resources res = getResources();
        int res_id = R.drawable.achan100;

        //透明度設定
        paint.setAlpha(255);

        //ビットマップ描画
        Bitmap bmp = BitmapFactory.decodeResource(res,res_id);
        canvas.drawBitmap(bmp,100,100,paint);
    }
}

これを、MainActivityのonCreate()などから、

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //RelativeLayout取得
    myRelativeLayout = (RelativeLayout)findViewById(R.id.myRelativeLayout);
    //レイアウト定義
    overlayContent oc = new overlayContent(this);
    //パラメータ設定
    oc.msg = "hoge";
    //RelativeLayoutに加える
    myRelativeLayout.addView(oc);
}

などとする。ここでは既にSurfaceView上に設定されたRayoutViewに追加している。

実行すると、下記のような感じ。