IOS Simple Music Player Interface Setup

Build a music player interface with a few simple features:

1, interface coordination, neat.

2. Click Play to control the progress bar.

3. Three favorite songs, click Collection, heart-shaped collection logo color deepened.

4, left and right button, toggle song picture and title.

5, click the middle picture, hide all the buttons, only show the blue background.

The overall idea of the design:

1. When building the interface, in order to clean and facilitate the subsequent function of the addition, the entire interface needs to be divided into several parts:

①: The top line includes: A return button, a song name, a collection button;

②: The second line: A slider control, both sides of the current song playback progress and the total length of the song--two lable;

③: The third line: Put a button in the middle and set the picture;

④: The bottom line: Three buttons, previous song, next song and pause/play;

2, after the division, it will be placed in turn:

①: The first exercise with a view, on which is: Uibuton, uilable, UIButton;

②: The second line is still a view: In order: uilable, UISlider, uilable;

③: The third line is a blank, and a center of the UIButton. If there are special pattern requirements, under UIButton can add one, Uiimageview, and set the desired picture;

④: The last line is still a View:uibutton, UIButton, UIButton;

3, put in place, look for the control combination of the functions to be realized, find the correlation between them and realize the function;

①: Back button: Add click event, click to return to the previous state;

②: Song name: Follow the left and right to switch songs and songs to change the corresponding name;

③: Favorite button: Click the button, change the display status, and memory selected state, until the state is actively changed;

④:uislider the uilable on the right shows the total length of the song;

⑤: The left uilable, according to the progress of real-time display;

⑥:uislider according to the total length of the song combined with their own lengths to determine the timing of the timer and its own step;

⑦: Click the button in the middle, set the hidden property of the child view not to display to Yes, click again to No;

⑧: The left and right toggle button is similar: Click to switch the same time, the change song name, changing the length of the song, change the middle button picture;

⑨: Play/pause button: To connect with UISlider, play, pause while the slider progress bar and display when the forward uilable display content to synchronize the model;

4, the difference does not leak.

After a methodical execution, a simple music player interface is built!

IOS Simple Music Player Interface Setup