【Android Training UI】カスタムViewを作成する（Lesson 2-カスタムDrawing）
102445 ワード
私のサイトで公開：http://kesenhoo.github.io/blog/2013/06/30/android-training-ui-creating-custom-views-lesson-2/ ， 訪問を歓迎します
カスタムviewの最も重要な部分は外観をカスタマイズすることです。あなたのプログラムの要求に応じて、カスタマイズは簡単で複雑かもしれません。この授業では最も一般的な操作を見せます。
Override onDraw()
カスタムviewを描き直す一番重要なステップはonDrawを書き換える方法です。onDraw()のパラメータはキャンバスの対象です。Canvasクラスは、テキスト、線、画像、その他の多くの図形を描く方法を定義しています。これらの方法を利用して、あなたのUIを作成することができます。
描画方法を呼び出す前に、オブジェクトを作成する必要があります。
Create Drawing Objecs
android.graphics framewarkは次の2つのタイプに定義されています。
何を描きますか？キャンバス制御どのように描画しますか？Paint制御例えばCanvasは直線を描く方法を提供し、Paintは直線色を提供する。したがって、描画する前に、一つ以上のPaintオブジェクトを作成する必要があります。
Handle Layout Events
あなたのviewを正確に描くためには、viewの大きさを知る必要があります。複雑なカスタムviewは、通常、画面上のサイズと形状に応じて複数回のlayout計算を行う必要がある。このビューの表示サイズを見積もるべきではない。一つのプログラムだけでもあなたのviewを使います。スクリーンのサイズが違って密度が違っていて、方向が違っています。
viewには大きさを計算するための多くの方法がありますが、書き換える必要がない場合が多いです。もしあなたのviewが特別な大きさを制御する必要がないならば、唯一書き換える必要がある方法はオンSize Chengd()です。
オンサイトChengd()は、初めて大きな時間を与えられたとき、またはあなたのビューのサイズが変更されたときに実行されます。オンサイトChengedメソッドで位置、間隔など他のあなたとのviewサイズを計算します。
計算の過程はviewのpaddingを考慮に入れることがあります。これは後述するように、この部分はviewで制御されている。ヘルプ方法recoveSize AndState（）は、最終的に広い値を作成するために使用されます。この方法は、viewのデマンドサイズとspec値を比較することによって、適切なView.Meass respec値を返し、オンメスア法に渡す。オンメスア()は戻り値がありません。これは，setMeass redDimension()を呼び出して結果を得る。この方法を起動すると強制的に実行されます。この方法を忘れたら、運行時に異常が発生します。Draw
viewごとのonDrawは異なりますが、以下のような一般的な操作があります。
テキストを描くにはdrawText()を使います。フォントを指定します。setTypeface()を呼び出して、setColor()によってテキストの色を設定します。基本図形を描画するには、drawRect()、drawOval()、drawArc()を使います。set Style()により、形状を指定します。filledが必要ですか？outlind.いくつかの複雑な図形を描画し、Pathクラスを使用して、Pathオブジェクトに直線と曲線を追加し、次にdrawPath()を使用して図形を描画します。基本図形と同様に、pathsもset Styleによってoutlind、filled、both.に設定できます。
Linear Graadientオブジェクトを作成することによってグラデーションを定義します。set Shaderを呼び出してLinear Greadientを使用します。drawBitmapを使って画像を描きます。
カスタムviewの最も重要な部分は外観をカスタマイズすることです。あなたのプログラムの要求に応じて、カスタマイズは簡単で複雑かもしれません。この授業では最も一般的な操作を見せます。
Override onDraw()
カスタムviewを描き直す一番重要なステップはonDrawを書き換える方法です。onDraw()のパラメータはキャンバスの対象です。Canvasクラスは、テキスト、線、画像、その他の多くの図形を描く方法を定義しています。これらの方法を利用して、あなたのUIを作成することができます。
描画方法を呼び出す前に、オブジェクトを作成する必要があります。
Create Drawing Objecs
android.graphics framewarkは次の2つのタイプに定義されています。
何を描きますか？キャンバス制御どのように描画しますか？Paint制御例えばCanvasは直線を描く方法を提供し、Paintは直線色を提供する。したがって、描画する前に、一つ以上のPaintオブジェクトを作成する必要があります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private void init() { mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint.setColor(mTextColor); if (mTextHeight == 0) { mTextHeight = mTextPaint.getTextSize(); } else { mTextPaint.setTextSize(mTextHeight); } mPiePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPiePaint.setStyle(Paint.Style.FILL); mPiePaint.setTextSize(mTextHeight); mShadowPaint = new Paint(0); mShadowPaint.setColor(0xff101010); mShadowPaint.setMaskFilter(new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL)); ... Handle Layout Events
あなたのviewを正確に描くためには、viewの大きさを知る必要があります。複雑なカスタムviewは、通常、画面上のサイズと形状に応じて複数回のlayout計算を行う必要がある。このビューの表示サイズを見積もるべきではない。一つのプログラムだけでもあなたのviewを使います。スクリーンのサイズが違って密度が違っていて、方向が違っています。
viewには大きさを計算するための多くの方法がありますが、書き換える必要がない場合が多いです。もしあなたのviewが特別な大きさを制御する必要がないならば、唯一書き換える必要がある方法はオンSize Chengd()です。
オンサイトChengd()は、初めて大きな時間を与えられたとき、またはあなたのビューのサイズが変更されたときに実行されます。オンサイトChengedメソッドで位置、間隔など他のあなたとのviewサイズを計算します。
1
2
3
4
5
6
7
8
9
10
11
12
// Account for padding float xpad = (float)(getPaddingLeft() + getPaddingRight()); float ypad = (float)(getPaddingTop() + getPaddingBottom()); // Account for the label if (mShowText) xpad += mTextWidth; float ww = (float)w - xpad; float hh = (float)h - ypad; // Figure out how big we can make the pie. float diameter = Math.min(ww, hh); 1
2
3
4
5
6
7
8
9
10
11
12
13
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // Try for a width based on our minimum int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth(); int w = resolveSizeAndState(minw, widthMeasureSpec, 1); // Whatever the width ends up being, ask for a height that would let the pie // get as big as it can int minh = MeasureSpec.getSize(w) - (int)mTextWidth + getPaddingBottom() + getPaddingTop(); int h = resolveSizeAndState(MeasureSpec.getSize(w) - (int)mTextWidth, heightMeasureSpec, 0); setMeasuredDimension(w, h); } 計算の過程はviewのpaddingを考慮に入れることがあります。これは後述するように、この部分はviewで制御されている。ヘルプ方法recoveSize AndState（）は、最終的に広い値を作成するために使用されます。この方法は、viewのデマンドサイズとspec値を比較することによって、適切なView.Meass respec値を返し、オンメスア法に渡す。オンメスア()は戻り値がありません。これは，setMeass redDimension()を呼び出して結果を得る。この方法を起動すると強制的に実行されます。この方法を忘れたら、運行時に異常が発生します。Draw
viewごとのonDrawは異なりますが、以下のような一般的な操作があります。
テキストを描くにはdrawText()を使います。フォントを指定します。setTypeface()を呼び出して、setColor()によってテキストの色を設定します。基本図形を描画するには、drawRect()、drawOval()、drawArc()を使います。set Style()により、形状を指定します。filledが必要ですか？outlind.いくつかの複雑な図形を描画し、Pathクラスを使用して、Pathオブジェクトに直線と曲線を追加し、次にdrawPath()を使用して図形を描画します。基本図形と同様に、pathsもset Styleによってoutlind、filled、both.に設定できます。
Linear Graadientオブジェクトを作成することによってグラデーションを定義します。set Shaderを呼び出してLinear Greadientを使用します。drawBitmapを使って画像を描きます。
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
protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Draw the shadow canvas.drawOval( mShadowBounds, mShadowPaint ); // Draw the label text canvas.drawText(mData.get(mCurrentItem).mLabel, mTextX, mTextY, mTextPaint); // Draw the pie slices for (int i = 0; i < mData.size(); ++i) { Item it = mData.get(i); mPiePaint.setShader(it.mShader); canvas.drawArc(mBounds, 360 - it.mEndAngle, it.mEndAngle - it.mStartAngle, true, mPiePaint); } // Draw the pointer canvas.drawLine(mTextX, mPointerY, mPointerX, mPointerY, mTextPaint); canvas.drawCircle(mPointerX, mPointerY, mPointerSize, mTextPaint); }