しむしむてるるの日記&雑談 同人誌の進捗やら仕事のあれこれやら書いています。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

Androidでカードを配置する

以前、カードを回転させる処理をしましたが、今回はそのカードを並べます。
並べ方は色々あると思いますが、今回は二人対戦のトランプゲームを想定して、
相手に5枚、自分に5枚、山札1つの形で並べようと思います。

さて、どうやって並べるかですが、今回はLinearLayoutを使って並べてみます。
LinearLayoutはViewを追加していくだけで縦か横の一方向に並べる事が出来るので比較的簡単に奇麗な配置が可能です。
ですが、その前にカードを並べ易くする為にカードを1つのViewにしましょう。
ImageViewのままでも並べる事は出来ますが、のちにカードの1枚1枚を
異なる絵柄(数字とマーク)にする事が予測出来ますので、
早い段階で管理し易い形にまとめてしまいます。
実際にコードにするとこんな感じです。

CardView.java
package jp.sweetsblast.cardturn;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.ScaleAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;

public class CardView extends ImageView implements AnimationListener, View.OnClickListener{

private int imageNo; // カード番号
private boolean state; // 裏か表か false=裏、true=表

public CardView( Context context, int imageNo){
super(context);

this.imageNo = imageNo;
state = false;
setPadding( 0, 0, 0, 0);
setScaleType(ScaleType.CENTER);
setImage();
setLayoutParams( new LayoutParams( 96, 96));
setScaleType(ScaleType.FIT_XY);
setOnClickListener(this);
}

private void setImage(){
if( !state ){
if( imageNo==-1 ) setImageBitmap( createTalon());
else setImageResource( R.drawable.ura);
}else{
if( imageNo==-1 ) this.setImageBitmap( createTalon());
else setImageResource( R.drawable.omote);
}
}

// 山札のイメージ作成
private Bitmap createTalon(){
Bitmap orgBitmap = BitmapFactory.decodeResource( getContext().getResources(), R.drawable.ura);
int width = orgBitmap.getWidth();
int height = orgBitmap.getHeight();
// 元画像より30px大きなbitmapを作成(4枚を10pxずつずらして重ねるため)
Bitmap bm = Bitmap.createBitmap( width+30, height+30, Config.ARGB_8888);
BitmapDrawable db = new BitmapDrawable(orgBitmap);
// ここでdbに対して描画
Canvas canvas = new Canvas(bm);
// 4枚のカードが重なっているイメージを作成
canvas.drawBitmap( orgBitmap, 0, 0, null);
canvas.drawBitmap( orgBitmap, 10, 10, null);
canvas.drawBitmap( orgBitmap, 20, 20, null);
canvas.drawBitmap( orgBitmap, 30, 30, null);
db.draw(canvas);
return bm;
}

public void onClick( View v) {
// 90°回転
ScaleAnimation scale = new ScaleAnimation( 1.0f, 0.0f, 1.0f, 1.0f, 96f/2, 96f/2);
scale.setAnimationListener(this);
scale.setFillAfter(true);
scale.setFillEnabled(true);
scale.setDuration(500);
scale.setInterpolator( new LinearInterpolator());
startAnimation(scale);
}

public void onAnimationEnd(Animation animation) {
// X方向のサイズが0になって画像が見えない内に画像を変更
state = !state;
setImage();

// もう一度90°回転
ScaleAnimation scale = new ScaleAnimation( 0.0f, 1.0f, 1.0f, 1.0f, 96f/2, 96f/2);
scale.setFillAfter(true);
scale.setFillEnabled(true);
scale.setDuration(500);
scale.setInterpolator( new LinearInterpolator());
startAnimation(scale);
}

public void onAnimationRepeat(Animation animation) {
}

public void onAnimationStart(Animation animation) {
}
}

このViewの中で前回のタップされたら回転する動作も行っています。
あと、Viewを作る時にカード番号を受け取るようにしています。
これで、カード番号と絵柄を結びつければトランプゲームに1つ近づきますね。
今回は山札だけ別の絵にする必要があったので、カード番号が"-1"の時だけ
別の絵となるようなコードになっています。
さて、続いて実際にViewを並べるActivityクラスのコードです。

CardTurnActivity
package jp.sweetsblast.cardturn;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.LinearLayout;

public class CardTurnActivity extends Activity{

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
LinearLayout layoutT = new LinearLayout(this);
layoutT.setOrientation(LinearLayout.HORIZONTAL);
layout.addView( layoutT);
LinearLayout layoutM = new LinearLayout(this);
layoutM.setOrientation(LinearLayout.HORIZONTAL);
layoutM.setGravity( Gravity.RIGHT);
layout.addView( layoutM);
LinearLayout layoutB = new LinearLayout(this);
layoutB.setOrientation(LinearLayout.HORIZONTAL);
layout.addView( layoutB);

layoutT.addView( new CardView(this,0));
layoutT.addView( new CardView(this,1));
layoutT.addView( new CardView(this,2));
layoutT.addView( new CardView(this,3));
layoutT.addView( new CardView(this,4));
layoutB.addView( new CardView(this,5));
layoutB.addView( new CardView(this,6));
layoutB.addView( new CardView(this,7));
layoutB.addView( new CardView(this,8));
layoutB.addView( new CardView(this,9));
layoutM.addView( new CardView(this,-1));

setContentView(layout);
}
}

シンプルですね。
全体を包むLinearLayoutが1つと3列それぞれのLinearLayout。
そして、各列にカードのViewを作って追加。
それだけのコードです。
CardViewの2つ目の引数に適当な番号を入れていますが、今回は最後の"-1"以外は意味がありません。

そして、実行した結果はこんな感じです。
[広告] VPS

山札もクリックすると回転してしまうのはダメですね(^^;
その辺りは、クリック不可にすれば解決するでしょう。

次回は実際にランダムな絵柄を配置したりしてゲームに近づけようと思います。


関連記事
スポンサーサイト
[ 2012/07/09 22:31 ] Androidアプリ開発 | TB(1) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック:
この記事のトラックバック URL

まとめtyaiました【Androidでカードを配置する】
以前、カードを回転させる処理をしましたが、今回はそのカードを並べます。並べ方は色々あると思いますが、今回は二人対戦のトランプゲームを想定して、相手に5枚、自分に5枚、山...
[2012/07/10 02:26] まとめwoネタ速neo
FC2カウンター
カレンダー
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Twitter@sweetsblast
過去ログ

2017年 06月 【3件】
2017年 05月 【3件】
2017年 04月 【3件】
2017年 03月 【5件】
2017年 01月 【1件】
2016年 09月 【2件】
2016年 04月 【2件】
2016年 03月 【2件】
2016年 01月 【5件】
2015年 12月 【3件】
2014年 05月 【1件】
2014年 04月 【1件】
2013年 12月 【1件】
2013年 03月 【4件】
2013年 02月 【3件】
2013年 01月 【1件】
2012年 12月 【3件】
2012年 11月 【4件】
2012年 10月 【2件】
2012年 09月 【4件】
2012年 08月 【2件】
2012年 07月 【3件】
2012年 06月 【11件】
2012年 05月 【11件】
2012年 04月 【9件】
2012年 03月 【15件】
2012年 02月 【17件】
2012年 01月 【5件】
2011年 12月 【14件】
2011年 11月 【11件】
2011年 10月 【19件】
2011年 09月 【10件】
2011年 08月 【4件】
2011年 07月 【11件】
2011年 06月 【4件】
2011年 05月 【1件】
2011年 04月 【17件】
2011年 03月 【29件】
2011年 02月 【24件】
2011年 01月 【30件】
2010年 12月 【30件】
2010年 11月 【22件】
2010年 10月 【26件】
2010年 09月 【27件】
2010年 08月 【30件】
2010年 07月 【27件】
2010年 06月 【24件】
2010年 05月 【7件】
2010年 04月 【6件】
2010年 03月 【3件】
2010年 02月 【6件】
2010年 01月 【8件】
2009年 12月 【8件】
2009年 11月 【5件】
2009年 10月 【7件】
2009年 09月 【18件】
2009年 08月 【22件】
2009年 07月 【14件】
2009年 06月 【16件】
2009年 05月 【28件】
2009年 04月 【25件】
2009年 03月 【5件】
2009年 01月 【2件】
2008年 12月 【1件】
2008年 11月 【2件】
2008年 10月 【3件】
2008年 09月 【6件】
2008年 08月 【3件】
2008年 07月 【2件】
2008年 06月 【2件】
2008年 05月 【3件】
2008年 04月 【4件】
2008年 03月 【11件】
2008年 02月 【12件】
2008年 01月 【7件】
2007年 12月 【8件】
2007年 11月 【5件】
2007年 10月 【8件】
2007年 09月 【6件】
2007年 08月 【15件】
2007年 07月 【10件】
2007年 06月 【14件】
2007年 05月 【12件】
2007年 04月 【10件】
2007年 03月 【7件】
2007年 02月 【19件】
2007年 01月 【18件】
2006年 12月 【25件】
2006年 11月 【27件】
2006年 10月 【19件】
2006年 09月 【26件】
2006年 08月 【12件】
2006年 07月 【5件】



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。