あなたがステップバイステップバイステップに従うことが興味を持っていない場合は、この記事では、カスタムビューの基礎の一部を使用することである
あなたは、ビューの手順に従うことができ、レビューとコーミングの下でこの知識の一部をしたい場合は、テキスト文書は、監督の対象ですが、また、寛大に見えますコメント。

レンダリング

分析

カスタムビューは、主なものは、明確なロジックを描くの一種です。ロジック、ステップバイステップを理解し、複雑なビューにはあまり複雑になることはありません。

次のように描画の手順をまとめると：

湾曲した発光を描きます
図面のスケールとデジタル
ポインタの影を描きます
背景中間描画黒丸
手を描きます
深い青色の円を描きます
ダイヤルテキストを描画
コントロールの下に追加

実現

発光効果を使用するには、ビューの必要性、我々が達成するためにシェーダを使用し、その後、我々はハードウェアアクセラレーションをオフ最初にオンにする必要があります。

  // 关闭硬件加速
  setLayerType(LAYER_TYPE_SOFTWARE, null);

発光円弧を描く1

  canvas.translate(getPaddingLeft() + radiusDial, getPaddingTop() + radiusDia
  arcPaint.setShader(null);
  arcPaint.setStyle(Paint.Style.STROKE);
  arcPaint.setAntiAlias(true);
  arcPaint.setAlpha(70);
  arcPaint.setStyle(Paint.Style.STROKE);
  arcPaint.setStrokeWidth(strokeWidthDial);
  arcPaint.setShadowLayer(10, 0, 0, Color.parseColor("#FFFFFF"));
  arcPaint.setColor(Color.parseColor("#38F9FD"));
  canvas.drawArc(mRect, 150, (360 - openAngle), false, arcPaint);

2.ドロースケールとデジタル

  canvas.rotate(150);
  for (int i = 0; i < clockPointNum + 1; i++) {
      pointerPaint.setColor(colorDialMiddle);
      if (i % 10 == 0) {     //长表针
          pointerPaint.setStrokeWidth(3);
          canvas.drawLine(radiusDial - DEFAULT_border - strokeWidthDial, 0, radiusDial - strokeWidthDial - dp2px(15), 0, pointerPaint);
          drawPointerText(canvas, i);
      } else if (i % 5 == 0f) {    //短表针
          pointerPaint.setStrokeWidth(2);
          canvas.drawLine(radiusDial - DEFAULT_border - strokeWidthDial, 0, radiusDial - strokeWidthDial - dp2px(9), 0, pointerPaint);
      }
      canvas.rotate((360 - openAngle) / clockPointNum);
  }
  canvas.rotate(-((180 - openAngle) / 2 + ((360 - openAngle) / clockPointNum)));

  /**
   * 绘制刻度数字
   */
    private void drawPointerText(Canvas canvas, int i) {
        canvas.save();
        pointerPaint.setColor(getResources().getColor(R.color.white));
        int currentCenterX = (int) (radiusDial - strokeWidthDial - dp2px(21) - pointerPaint.measureText(String.valueOf(i)) / 2);
        canvas.translate(currentCenterX, 0);
        canvas.rotate(360 - 150 - ((360 - openAngle) / clockPointNum) * i);        //坐标系总旋转角度为360度
        int textBaseLine = (int) (0 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);
        canvas.drawText(String.valueOf(i + clockMinValue), 0, textBaseLine, pointerPaint);
    }

3.ドローポインタの影

  int currentDegree = (int) ((currentValue - clockMinValue) * ((360 - openAngle) / clockPointNum) + 150);
  canvas.rotate(currentDegree);
  int[] colorSweep = {0xAAFFE9EC, 0x0028E9EC, 0xAA28E9EC};
  float[] position = {0f, 0.9f, 1f};
  SweepGradient mShader = new SweepGradient(0, 0, colorSweep, position);
  arcPaint.setShader(mShader);
  arcPaint.setStyle(Paint.Style.STROKE);
  arcPaint.setStrokeWidth((float) (radiusDial * 0.4));
  arcPaint.clearShadowLayer();
  RectF mRect = new RectF((float) (-mRealRadius - DEFAULT_border + radiusDial * 0.2), (float) (-mRealRadius - 
  DEFAULT_border + radiusDial * 0.2),
          (float) (mRealRadius + DEFAULT_border - radiusDial * 0.2), (float) (mRealRadius + DEFAULT_border - radiusDial * 0.2));
  canvas.drawArc(mRect, 360 - (currentDegree - 150), (currentDegree - 150), false, arcPaint);

中間黒丸背景を描画4

  canvas.restore();
  canvas.translate(getPaddingLeft() + radiusDial, getPaddingTop() + radiusDial);
  Paint pointerPaint = new Paint();
  pointerPaint.setAntiAlias(true);
  pointerPaint.setStyle(Paint.Style.FILL);
  pointerPaint.setColor(Color.parseColor("#05002D"));
  canvas.drawCircle(0, 0, (float) (radiusDial * 0.6), pointerPaint);

5.ドロー手

  canvas.save();
  int currentDegree = (int) ((currentValue - clockMinValue) * ((360 - openAngle) / clockPointNum) + 150);
  canvas.rotate(currentDegree);
  titlePaint.setColor(Color.WHITE);
  titlePaint.setAntiAlias(true);
  pointerPath.moveTo(radiusDial - dp2px(12), 0);
  pointerPath.lineTo(0, -dp2px(5));
  pointerPath.lineTo(-12, 0);
  pointerPath.lineTo(0, dp2px(5));
  pointerPath.close();
  canvas.drawPath(pointerPath, titlePaint);
  canvas.save();
  canvas.restore();

深い青色の円を描く6

  canvas.rotate(0);
  canvas.restore();
  Paint pointerPaint = new Paint();
  pointerPaint.setAntiAlias(true);
  pointerPaint.setStyle(Paint.Style.FILL);
  pointerPaint.setColor(Color.parseColor("#050D3D"));
  pointerPaint.setShadowLayer(15, 0, 0, Color.parseColor("#006EC6"));
  canvas.drawCircle(0, 0, (float) (radiusDial * 0.4), pointerPaint);

ダイヤルテキストを描画7.

  titlePaint.setColor(Color.WHITE);
  titlePaint.setColor(titleDialColor);
  titlePaint.setTextSize(titleDialSize);
  canvas.drawText(formatData(currentValue), 0, 0, titlePaint);
  titlePaint.setColor(Color.parseColor("#38F9FD"));
  titlePaint.setTextSize(sp2px(14));
  canvas.drawText("(" + dataUnit + ")", 0, dp2px(18), titlePaint);

コントロールの下を追加します8.

コードのこの部分は、メインのダッシュボードの後に描かれた、より柔軟性があり、あなたは、レイアウトファイルの一番下にある他のコントロールを追加することができます。そして、クリックイベントを設定します。この中でテーブルをスキップしません

＃最後に、
私は私のGitHubと遊ぶために、関連するコンテンツへのアクセスを、私のAndroidのコア技術の学習シラバスを囲みますhttps://github.com/Meng997998/AndroidJX

あなたが学習に投資するあなたの時間を取る、それはあなたが、スキルを獲得し、収益を増加させる機会を持つことができることを意味します。

ここに私のAndroidのPDF Daquanのは、このAndroidのPDF Daquanのは、本当にすべての側面を含んで学ぶ、学ぶことを学ぶ共有し、コレクションアルゴリズムのように基本的なJavaの知識、アンドロイド、Androidの高度な拡張の基礎とするが含まれています

アクセス：私は個人的な紹介をご覧懸念、または直接クリックすると、私は受け取るために解放します

マイコレクション本研究では、効果的にあなたが知識ポイントを把握するのに役立つことができます。

要するに、私たちは、高度な学習強化ここで助けにもありますが、またあなたは、オンライン検索データを学習する時間を節約するにも一緒に勉強親しい友人と共有することができます

アルファ789

公開された168元の記事・ウォン称賛71 ・ビュー20000 +

プライベートの手紙の懸念

Androidのカスタムビューシリーズ：手のラインとオーラ技術のダッシュボードの感覚！

レンダリング

分析

実現

おすすめ