Как правильно выровнять большой палец слайдера на пользовательском слайдере Xamarin.Forms в android?

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);
    }