This article is published on my wechat official account. You can follow it by scanning the QR code at the bottom of the article or searching for HelloWorld Jieshao in wechat.

preface

Hello, everyone. Recently, I have been learning to use Swift coding. Since I implemented many projects with OC before, I am still in the learning stage of Swift. In order to improve my learning efficiency, I always set a short-term goal for myself. For example, this time, in order to accelerate my use of Swift, I set a goal for myself to complete a Swift version of netease Cloud Music App. Do you know how to improve the efficiency of learning a new language? Might as well in the comments section with everyone to communicate.

The research analysis

First, let’s analyze the home page of netease Cloud Music App on iOS, as shown in the figure below:

After reading, the first difficulty in front of me is how to get these data! My first thought, of course, was to go to GitHub to find out if there was any open source API. I didn’t know, but I was really satisfied with it. It turned out that a big guy had already provided the API of netease Cloud Music:

Among them, there are “home page discovery” and “home page – discovery – circular icon entry list” API, we do not need to call multiple interfaces and data source stitching, you can get all the data of the home page! When analyzing the returned JSON data format, I gave him an issue, and he replied quickly, again worshipping him.

{
    "code": 200,
    "data": {
        "cursor": null,
        "blocks": [
            {
                "blockCode": "HOMEPAGE_BANNER",
                "showType": "BANNER",
                "extInfo": {
                    "banners": [
                        {
                            "adLocation": null,
                            "monitorImpress": null,
                            "bannerId": "1622653251261138",
                            "extMonitor": null,
                            "pid": null,
                            "pic": "http://p1.music.126.net/gWmqDS3Os7FWFkJ3s8Wotw==/109951166052270907.jpg",
                            "program": null,
                            "video": null,
                            "adurlV2": null,
                            "adDispatchJson": null,
                            "dynamicVideoData": null,
                            "monitorType": null,
                            "adid": null,
                            "titleColor": "red",
                            "requestId": "",
                            "exclusive": false,
                            "scm": "1.music-homepage.homepage_banner_force.banner.2941964.-1777659412.null",
                            "event": null,
                            "alg": null,
                            "song": {
                
                ......
}
Copy the code

The problem of data source has been solved, the next step is to solve how to visualize the data. According to the analysis of the display effect on the home page of netease Cloud Music, the overall view supports scrolling up and down, and the view of a single Cell supports horizontal scrolling. So the UITableView nested UICollectionView is the perfect way to think about it.

All that is left is a few third-party libraries that we need to use. In this case, we use the following third-party libraries:

  • Alamofire

  • Kingfisher

  • SnapKit

Functions that need to be implemented

Its home page can be roughly divided into the following parts:
  1. Top search view
  2. Banner
  3. Circular menu button
  4. Recommend the playlist
  5. recommendation
  6. Featured Music Videos
  7. Radar playlist
  8. Popular podcasts
  9. Exclusive scene playlist
  10. New songs, new discs, digital albums
  11. Music calendar
  12. 24 hour podcast
  13. Video collection
Support for light Mode and Dark Mode themes

Here is my final rendering:

The detailed implementation details will be explained in the next article, and the features will be implemented in the order I listed above. At the same time, I will put the code of the project on the GitHub repository. Please click ⭐️ to support it.

The last

Because the amount of code in this project is quite large, I will divide the article into three parts and highlight the key points of each article as much as possible. If my article is helpful to you, please click “like” to support me.

Previous articles:

  • Should I comment my code? Write and you lose
  • Codable release so long I did not learn, touch the fish is cool, ah ~ just play
  • IOS handles network data elegantly, do you? Why don’t you read this
  • UICollectionView custom layout! Just read this one
  • Swift explore the SupplementaryView and Decoration View of UICollectionView

Please have a drink ☕️ like + follow oh ~

  1. After reading, remember to give me a like oh, have 👍 have power

  2. Follow the public account — HelloWorld Jieshao, the first time to push new postures