投稿

5月, 2018の投稿を表示しています

【Android】Canvasを使ってルーレットを作る② - Animationクラスとフリックイベント -

イメージ
今回は前回作成したルーレット板にアニメーションを付けてくるくる回してみる部分です。 Animationクラスを継承したArcAnimationからRouletteViewのパラメータを調整しながらonDrawを何度も呼ぶという処理です。 実装 ArcAnimationクラスのソースコード import android.view.animation.Animation; import android.view.animation.Transformation; public class ArcAnimation extends Animation { int base = 20; int count = 0; private MainActivity.RouletteView rouletteView; public ArcAnimation(MainActivity.RouletteView rouletteView) { this.rouletteView = rouletteView; } @Override protected void applyTransformation(float interpolatedTime, Transformation transformation) { count++; int move = base - (count / 25); if(move < 0){ move = 0; } rouletteView.addPos(move); rouletteView.requestLayout(); if(move == 0){ cancel(); rouletteView.setIsAnimation(false); } } } メンバ変数のbaseはパネルを移動させる初期値です。つまりルーレット始動直後は20℃ずつ回転します。 メンバ変数のcountはアニメーションの回数です。このカウンタによりだんだんと回転速度

【Android】Canvasを使ってルーレットを作る① - CanvasにdrawArcでルーレットを描画する -

イメージ
android.graphics.CanvasはAPI Level 1の頃からある最古のAPIです。 これを利用してルーレットアプリを作るまでを記事にしたいと思います。 何回かに分けるので今回はViewを継承したRouletteViewを作り、onDraw()で描画するところまでです。 実装 Viewクラスを継承したRouletteViewクラス.コンストラクタ コンストラクタ public RouletteView(Context context, int num) { super(context); paint = new Paint(); paint.setAntiAlias(true); textPaint = new Paint(Color.DKGRAY); textPaint.setTextSize(60); textPaint.setAntiAlias(true); pos = 0; this.num = num; angle = 360 / num; } パネル用のPaintオブジェクトとテキスト用のPaintオブジェクトを生成します。 setAntiAliasにtrueを設定しておくと文字や線が滑らかに描画されます。 numはパネルの数、angleはパネル1個の角度をそれぞれセットします。 onDraw()メソッド 初回時の処理 if(init == 0) { if(xc == 0.0f) xc = canvas.getWidth() / 2; if(yc == 0.0f) yc = canvas.getHeight() / 2; if(rectF == null) rectF = new RectF(0.0f, yc - xc, canvas.getWidth(), yc + xc); init = 1; } これは初回描画時の処理です。 Canvasの中心点とRectFオブジェクトをMainActivityのメンバ変数にセットし、次回のonDrawからは再利用するようにしています。 rectFはCanvasの横幅にあわせた正方形で生成し、この中にルーレットのパネル(弧)を描画します。 パネルの描画