如何在 android 中的 Xamarin.Forms 自定义滑块上正确对齐滑块的拇指？

Question

我正在尝试在 Xamarin.Forms 中创建一个自定义滑块，为此我创建了一个自定义渲染器

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
{
    base.OnElementChanged(e);
    if (e.NewElement != null)
    {
        // Set custom drawable resource
        Control.SplitTrack = false;
        Control.SetProgressDrawableTiled(
        Resources.GetDrawable(
        Resource.Drawable.custom_progressbar_style,
        (this.Context).Theme));

        Control.SetThumb(Resources.GetDrawable(
        Resource.Drawable.custom_thumb,
        (this.Context).Theme));
                        // Control.Bottom = 30;
    }
}

这里我加载了两个 xml 文件，一个用于progress bar，另一个用于滑块的拇指。 Progress bar 是从custom_progressbar_style 加载的，Thumb 是从custom_thumb 加载的，它们都放在Resource/drawable 下。

Progress bar xml content:

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:id="@android:id/background" android:height="10dp">
    <shape>
      <corners android:radius="3dp"/>
    </shape>
  </item>

  <item android:id="@android:id/secondaryProgress" android:height="10dp">
    <clip>
      <shape>
        <corners android:radius="3dp"/>
      </shape>
    </clip>
  </item>

  <item android:id="@android:id/progress" android:height="10dp">
    <clip>
      <shape>
        <corners android:radius="3dp"/>

      </shape>
    </clip>
  </item>

</layer-list>

Thumb xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_gravity="center_vertical">
<!-- Larger white circle in back -->
<item  >
    <shape android:shape="oval">
        <solid android:color="#f0f0f0"/>
        <size
                android:width="30dp"
                android:height="30dp"/>
    </shape>
</item>
<!-- Smaller blue circle in front -->
<item>
    <shape android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke android:color="@android:color/transparent"
                android:width="10dp"/>
        <solid android:color="#6766f6"/>
        <size
                android:width="15dp"
                android:height="15dp"/>
    </shape>
</item>
</layer-list>

我已将自定义滑块的高度固定为 10dp，这会导致滑块拇指对齐问题。你能建议我如何克服这个对齐问题吗？

Answer 1

根据你的描述，我测试了你的代码，修改了你的custom_progressbar_style.xml，我遇到了问题。

这是我的custom_progressbar_style.xml，请看一下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

 <item android:id="@android:id/background">
<shape>
  <corners android:radius="15dip" />
  <gradient
   android:startColor="#d9d9d9"
   android:centerColor="#e6e6e6"
   android:endColor="#d9d9d9"
   android:centerY="0.50"
   android:angle="270" />
  </shape>
 </item>

 <item android:id="@android:id/secondaryProgress">
<clip>
  <shape>
    <corners android:radius="15dip" />
    <gradient
         android:startColor="#e6b3e6"
         android:centerColor="#ffcce0"
         android:endColor="#e6b3e6"
         android:centerY="0.50"
         android:angle="270" />
  </shape>
</clip>
</item>

 <item android:id="@android:id/progress">
<clip>
  <shape>
    <corners android:radius="15dip" />
    <gradient
     android:startColor="#ff0066"
     android:centerColor="#ff00ff"
     android:centerY="0.50"
     android:endColor="#cc0052"
     android:angle="270" />
  </shape>
</clip>
 </item>

 </layer-list>

更新：

  <StackLayout>
        <local:customslider HeightRequest="10" VerticalOptions="CenterAndExpand" />
    </StackLayout>

再次更新：

protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);        

        if (Control == null)
            return;

        SeekBar seekbar = Control;

        Drawable thumb = seekbar.Thumb;          
        thumb.SetBounds(thumb.Bounds.Left, -4, thumb.Bounds.Left + thumb.IntrinsicWidth,  thumb.IntrinsicHeight-4);
    }