Как получить музыкальный проигрыватель с круглой шкалой прогресса и кнопкой воспроизведения в центре?

Я знаю, что есть внешний nuget, такой как Telerik и Syncfusion, который предоставляет API для реализации круговой шкалы, чтобы вы могли создать кнопку аудиоплеера в Xamarin.

Если вы хотите реализовать эту функцию самостоятельно, вы можете создать свои собственные макеты. Пусть общая длина аудио равна total, а уже воспроизведенная длина - played.

Approach 1:

Назовем этот макет Base:

• Когда звуковая панель заполнена менее или равной 50%, создайте синий круг на основании B. Покройте левую половину B серым полукругом G1 и правую половину B другим серым полукругом G2. Затем поверните G2 на 360.0 * played / total.

• Когда звуковая панель заполнена более чем на 50%, вместо этого создайте серый круг на основе G. Покройте правую половину G синим полукругом B1 и правую половину G снова другим синим полукругом B2. Затем поверните B2 на 360.0 * played / total - 180.0

Наконец, поместите значок воспроизведения / паузы поверх небольшого белого кружка поверх Base, чтобы создать окончательную кнопку аудиоплеера.

Approach 2:

Вы можете использовать SkiaSharp в Xamarin.Forms для рисования кругов и дуг. Вы можете создать кнопку воспроизведения звука, нарисовав серую дугу и синюю дугу с длиной в соответствии с played и total. У них есть документация о том, как использовать SkiaSharp.