涙目ブログ

アクセスカウンタ

zoom RSS androidのlayoutのXMLでボタンとSurfaceViewを配置

<<   作成日時 : 2010/05/31 20:42   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 60 / トラックバック 2 / コメント 2

androidネタが続きます。
自分はandroidのGUIツールををよく使います。
とても便利なので、使ったことがない人は使ってみてください。
ほとんどがXMLを直接修正する羽目になりますが(T_T)

たとえば、res/layout/main.xmlを以下の様にすると
上段にボタンが3つ、その下にSurfaceViewによる画像の描画、
そしてその下にボタンを配置することができます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
>
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:text="@string/red"
android:id="@+id/BtnRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<Button android:text="@string/green"
android:id="@+id/BtnGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<Button android:text="@string/blue"
android:id="@+id/BtnBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>

<SurfaceView android:id="@+id/SV"
android:layout_width="wrap_content"
android:layout_height="100px" >
</SurfaceView>

<Button android:text="@string/stop"
android:id="@+id/BtnControl"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<Button android:text="@string/end"
android:id="@+id/BtnEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>

※@string/とあるものはres/values/strings.xmlに定義を追加して下さい。

もちろんこれを全部手打ちしたら大変です。
しかし、SDKにはGUIのツールがあり、項目をドラッグアンドドロップすれば
ある程度は作ってくれるので、プログラムで部品を1つ1つnewしていくよりも
簡単です。
デザインが終わった時点で、完成図を見ることができるのも大きいですね。
是非活用しましょう。

デザインが終わったら、findViewByIdで、idを指定すれば
部品のオブジェクトが取得できるので、ハンドラなどの設定をすれば、
簡単にアプリが作れます。

ちなみにこのサンプルは、中段に赤い画像が左から右へ動いており、
上段のボタンで色を変え、下段のボタンで画像を止めるものです。
実行画面を貼っておきます。

画像


ポイントはSurfaceView のandroid:layout_heightに"100px"と数値を設定しているところです。
これにより、下段に部品を張り付けるスペースができます。
同様にandroid:layout_widthも数値を指定し、LinearLayoutすれば、
SurfaceView の横に部品を配置することもできますね。

XMLの直接修正のコツをつかめば、
これぐらいの画面はあっという間に作れるようになります。




(2010/09/23 追記)
コメントでご質問を頂いたので、回答をこちらに記載します。
コメント欄に回答したら文字数制限に引っ掛かりました(T_T)

とりあえず、ソースから描画に関わる処理を抜粋します。
動作確認はおろか、コンパイル確認すらしてませんが、
大体の感覚をつかんで頂けると幸いです。

--------------------------------------------------------------
public class MixedLayout extends Activity {
private DrawDisp dd;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView( R.layout.main );

// XMLよりSurfaceViewオブジェクトを取得
SurfaceView sv = (SurfaceView)findViewById( R.id.SV );

// DrawDispという自分で作成したクラスへオブジェクトを渡す
dd = new DrawDisp( this, sv );

// 以下省略
}
}

public class DrawDisp implements SurfaceHolder.Callback, Runnable {
private SurfaceHolder holder;
private Thread thread;
private boolean loop;

public DrawDisp( Context context, SurfaceView sv ) {
//SurfaceViewからholderを取得し、インターフェイスを設定する。
holder = sv.getHolder();
holder.addCallback( this );

//以下省略
}

public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
}

public void surfaceCreated(SurfaceHolder holder) {
thread = new Thread( this );
loop = true;
thread.start();
}

public void surfaceDestroyed(SurfaceHolder holder) {
loop = false;
try {
thread.join();
} catch ( Exception e ) {}
}

public void run() {
while ( loop ) {
Canvas canv = holder.lockCanvas();
//描画処理をここに入れる

holder.unlockCanvasAndPost( canv );
try {
Thread.sleep( 10 );
Thread.yield();
} catch ( Exception e ) {}
}
}
}
--------------------------------------------------------------

SurfaceHolder.CallbackというinterfaceをどのようにXMLで定義したSurfaceViewに
設定するかがカギになります。
オブジェクトを ID から取得し、setメソッドでinterfaceをimplementsしたオブジェクトを指定すると
interfaceがコールバックされます。
Androidはこのパターンが多いので、ぜひ覚えてください。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 60
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!)
面白い 面白い 面白い 面白い 面白い
かわいい かわいい かわいい かわいい かわいい

トラックバック(2件)

タイトル (本文) ブログ名/日時
大同跟?
http://hi.baidu.com/dtdear3 大同 ...続きを見る
大同跟?
2013/05/21 03:07
www.whilelimitless.com
android layout XML_{^_SurfaceViewzu __u_O/EFu_u_O ...続きを見る
www.whilelimitless.c...
2017/01/06 23:50

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
とても参考になります。

一つ質問がありますけれども、
『findViewByIdで、idを指定すれば部品のオブジェクトが取得できるので、
ハンドラなどの設定をすれば、簡単にアプリが作れます。』
と言うところで、

ID指定、オブジェクトを取得しましたが、それからどういう風にすれば
SurfaceViewに画像を描画することが出来るのか分からないですね。

この方法を使って描画するサンプルがなかなか検索されないので、悩んでいます。
申し訳ないですが、実際に画像を描画する処理が書いている
Javaサンプルも見てもらえませんか?
良い情報ありがとうございます。
2010/09/20 22:34
良い情報ありがとうございます。さん
とりあえず、本文に回答を追記しました。
参考になれば喜ばしい限りです。
T_T
2010/09/23 20:05

コメントする help

ニックネーム
本 文
androidのlayoutのXMLでボタンとSurfaceViewを配置 涙目ブログ/BIGLOBEウェブリブログ
文字サイズ:       閉じる