端末ごとの画面サイズに合わせた画像の調整するサンプル#trySurfaceView00

2012年5月25日 aa android, 2

カスタマイズしたSurfaceViewをxmlレイアウトの中に埋め込む。
SurfaceViewいっぱいに画像を表示する、だけど縦横の拡大率を一緒にして画像の中心をキャンバスの中心に合う様に調整して表示する。
はみ出た部分は切り捨てる代わりに変なゆがんだ画像が画面に表示されない様にする。

●大事なところ
　main.xmlに追加したSurfaceViewをカスタマイズしたSurfaceViewに置き換える
　　例えばtrial.sample.trysurfaceview00.SurfaceViewExtの様に。
　カスタマイズしたSurfaceViewのコンストラクタは3種類とも用意する。
　画像のファイル名に大文字は使えない trySurfaceView00GB.pngとかはだめ
　　try_surface_view_00_bg.pngとかにする(小文字の0-9とa-zに_.だけ使える)

●検索した事
　android SurfaceView 画像を表示する
　android 親のレイアウト サイズ
　android SurfaceView Bitblt

●開発環境
　Eclipse IDE バージョン: 3.7 Indigo Service Release 2
　ターゲットプラットフォーム: 2.1
　API レベル: 7

package trial.sample.trysurfaceview00;

import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.widget.LinearLayout;

public class TrySurfaceView00Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.main);
    }
}

// ////////////////////////////////////////////////////////////
// サーフェイスビューの拡張
class SurfaceViewExt extends SurfaceView implements SurfaceHolder.Callback {

	private SurfaceHolder mSurfaceHolder;	// サーフェイスホルダー
	
	// 画像を表示するためのモノ
	final Resources mRes = this.getContext().getResources();
	Bitmap mBitmapBG = BitmapFactory.decodeResource(this.mRes, R.drawable.try_surface_view00_bg);
	
	// ////////////////////////////////////////////////////////////
	// コンストラクタ
	public SurfaceViewExt(Context context) {
		super(context);

		// サーフェイスホルダの準備
		this.initSurfaceHolder();
	}
	
	// ////////////////////////////////////////////////////////////
	// コンストラクタ
	public SurfaceViewExt(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		// サーフェイスホルダの準備
		this.initSurfaceHolder();
	}

	// ////////////////////////////////////////////////////////////
	// コンストラクタ
	public SurfaceViewExt(Context context, AttributeSet attrs) {
		super(context, attrs);
		// サーフェイスホルダの準備
		this.initSurfaceHolder();
	}

	// ////////////////////////////////////////////////////////////
	// サーフェイスホルダの準備
	private void initSurfaceHolder() {
		// サーフェイスホルダーを取り出す
		this.mSurfaceHolder = this.getHolder();
		// コールバック関数を登録する
		this.mSurfaceHolder.addCallback(this);
	}

	// ////////////////////////////////////////////////////////////
	// Bitmapの拡大率を出す
	private float calcBitmapScale(int canvasWidth, int canvasHeight, int bmpWidth, int bmpHeight) {

		// 最初は幅で調べる
		float scale = (float)canvasWidth / (float)bmpWidth;
		float tmp = bmpHeight * scale;

		// 画像の高さがキャンバスの高さより小さい（余白ができてしまう場合）高さの方で横幅をスケールする
		if (tmp < canvasHeight) {
			scale = (float)canvasHeight / (float)bmpHeight;
			return scale;
		}
		
		return scale;
	}
	
	// ////////////////////////////////////////////////////////////
	// 描画処理
	private void draw() {
		// キャンバスに何か描く
		Canvas canvas = this.mSurfaceHolder.lockCanvas();
		canvas.drawColor(Color.rgb(30, 120, 222));
		
		// キャンバスのサイズ
		int canvasWidth = canvas.getWidth();
		int canvasHeight = canvas.getHeight();

		// ビットマップのサイズ
		int bmpWidth = this.mBitmapBG.getWidth();
		int bmpHeight = this.mBitmapBG.getHeight();

		// 画面サイズに合う様に縦横スケール値を求める（最大限画面に収まる様に努力する）
		float toCanvasScale = this.calcBitmapScale(canvasWidth, canvasHeight, bmpWidth, bmpHeight);

		// キャンバスの大きさに画像を合わせたときにサイズのずれがどれくらいあるか
		float diffX = (bmpWidth * toCanvasScale - canvasWidth);
		float diffY = (bmpHeight * toCanvasScale - canvasHeight);
		
		// すみを残して中心から取り出す様にする
		float addX = (diffX / toCanvasScale) / 2;
		float addY = (diffY / toCanvasScale) / 2;
		
		// Bitmapを表示する
		Paint paint = new Paint();
		// 画像の切り取り位置を調整して画像の中心がキャンバスの中心に来る様にする
		Rect rSrc = new Rect((int)addX, (int)addY,
				(int)((canvasWidth / toCanvasScale) + addX), (int)((canvasHeight / toCanvasScale) + addY));
		RectF rDest = new RectF(0, 0, canvasWidth, canvasHeight);
		canvas.drawBitmap(this.mBitmapBG, rSrc, rDest, paint);
		this.mSurfaceHolder.unlockCanvasAndPost(canvas);
	}
	
	// ////////////////////////////////////////////////////////////
	// サーフェイスサイズの変更があったときとかに呼ばれる
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height) {
		this.draw();
	}

	// ////////////////////////////////////////////////////////////
	// サーフェイスが作られたときに呼ばれる
	public void surfaceCreated(SurfaceHolder holder) {
	}

	// ////////////////////////////////////////////////////////////
	// サーフェイスが破棄された時に呼ばれる
	public void surfaceDestroyed(SurfaceHolder holder) {
		// TODO 自動生成されたメソッド・スタブ
		
	}

	public void run() {
	}
	
}

 

java, ooapp004, SurfaceHolder.Callback, SurfaceView

Androidのエミュレーターでlocalhostに接続したい！ Spinnerの文字サイズを大きくするサンプル#trySpinner00

2 Responses to “端末ごとの画面サイズに合わせた画像の調整するサンプル#trySurfaceView00”

• nanohoka より:

  2012年9月10日 9:35 AM

  
  参考にさせてもらいます。

  返信
  • aa より:

    2012年9月10日 6:48 PM

    
    ご訪問ありがとうございます。
    これからもよろしくお願いいたします。

    返信

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

名前 *

メールアドレス *

ウェブサイト

キャプチャコード *

コメント

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>