LoginSignup
47

More than 3 years have passed since last update.

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

Last updated at Posted at 2015-08-25

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

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

基本

オーバーレイの前に、そもそものレイ(ヤー)の概念。

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

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

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

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

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

ol

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

透明1:レイヤー自体を透明にする

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

android:alpha="0.7"

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

透明2:各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となっている前提)。

透明3:プログラムの中から描画・透明にする

動的要素がある場合などは、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に追加している。

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

ol

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47