Search code examples
iosswiftuser-interfacespotifyuislider

How to create UI like spotify's Equalizer UI in swift iOS

Hello i'm iOS fresher & don't have so much idea about creating complex UI, i want to create equalizer UI like spotify's equalizer UI. currently i had setup my equalizer using UISlider. What should i use to modify my UI like spotify'S EQ UI. It will be nice if you can help with Example code. Thank you.

This is my EQ UI.

This is what i want to create. EQ UI of spotify.

Solution

  • The approach could be simple:

    • Make the color of your sliders gauges clear so they are transparent
    • Read the values of your sliders and draw lines between them
    • Create a polygon with the coordinates of your sliders values + the two points at the bottom and fill it with a color gradient

    As your sliders are equally spaced you can deduce their x position knowing the width of the graph container, the y value is the slider current value + some correction with the slider button size.