UWP技术咨询：如何在RadialProgressBar进度圈内部显示图片

嘿，这个需求其实挺常见的，我给你两种靠谱的实现思路，看哪种更适配你的开发场景～

方案一：自定义RadialProgressBar（最灵活可控） #

如果是你自己手写的RadialProgressBar，或者想要完全掌控显示效果，直接在绘制逻辑里加个中心图片就搞定了：

• 第一步：先给自定义View加个可配置图片的属性（嫌麻烦也可以直接在代码里硬编码图片，但属性配置更灵活）
  在res/values/attrs.xml里添加：

  <declare-styleable name="CustomRadialProgressBar">
      <attr name="centerImage" format="reference" />
  </declare-styleable>
  

• 第二步：在自定义View的构造方法里读取这个图片资源，转成Bitmap备用

  private Bitmap centerBitmap;
  
  public CustomRadialProgressBar(Context context, AttributeSet attrs) {
      super(context, attrs);
      TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomRadialProgressBar);
      Drawable centerDrawable = ta.getDrawable(R.styleable.CustomRadialProgressBar_centerImage);
      if (centerDrawable != null) {
          centerBitmap = ((BitmapDrawable) centerDrawable).getBitmap();
      }
      ta.recycle();
  }
  

• 第三步：在onDraw方法里，画完进度圆弧后，把图片居中画在圆形区域里
  计算好位置，确保图片在中心：

  @Override
  protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
      // 先执行你原本的进度圆弧绘制逻辑...
  
      // 绘制中心图片
      if (centerBitmap != null) {
          int centerX = getWidth() / 2;
          int centerY = getHeight() / 2;
          // 这里的图片大小可以按需调整，比如取控件宽高的一半
          int imageSize = Math.min(getWidth(), getHeight()) / 2;
          int left = centerX - imageSize / 2;
          int top = centerY - imageSize / 2;
          canvas.drawBitmap(centerBitmap, left, top, null);
      }
  }
  

  这样进度推进的时候，图片会稳稳待在中心，只要进度条的宽度没覆盖中心区域，就不会被遮挡。

方案二：用第三方RadialProgressBar库（快速落地） #

如果你用的是现成的第三方库（比如com.github.lzyzsd:circleprogress这类热门库），不用改源码，直接布局嵌套就能实现：

• 第一步：用FrameLayout把进度条和ImageView包起来，让ImageView居中显示

  <FrameLayout
      android:layout_width="200dp"
      android:layout_height="200dp">
  
      <com.github.lzyzsd.circleprogress.RadialProgressBar
          android:id="@+id/radialProgressBar"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:progress="50"
          app:progress_width="10dp" />
  
      <ImageView
          android:layout_width="100dp"
          android:layout_height="100dp"
          android:layout_gravity="center"
          android:src="@drawable/your_center_image"
          android:scaleType="centerCrop" />
  </FrameLayout>
  

• 第二步：如果发现进度条挡住了图片，要么调小进度条的progress_width留足中心空间，要么给ImageView加个android:elevation="2dp"让它浮在进度条上面。

小提醒 #

• 图片显示别变形，给ImageView加scaleType属性（比如centerCrop或者centerInside）适配圆形区域。
• 自定义View的话，记得在View销毁时回收Bitmap，避免内存泄漏：

  @Override
  protected void onDetachedFromWindow() {
      super.onDetachedFromWindow();
      if (centerBitmap != null && !centerBitmap.isRecycled()) {
          centerBitmap.recycle();
          centerBitmap = null;
      }
  }
  

内容的提问来源于stack exchange，提问作者Aasish