【iOS】App imitation--NetEase Cloud Music

foreword

Before the summer vacation, I imitated the NetEase cloud app, but I haven't concluded it yet.
The Netease cloud app mainly made me familiar with the usage and relationship of mutual nesting between views and the usage of custom cells . I hereby write the following blog to summarize.

---

1. Home page interface

First look at the finished effect

This interface is mainly usedThe carousel image used when imitating ZARA，Knowledge of different controls and views in UIScrollView
as well asAdd some small controls to the navigationBar of the navigation bar controllerknowledge

The principle of the carousel map has been explained in the previous blog, so I won’t repeat it here. Here is the blog carousel map

Here we mainly give the code that the button picture is on the bottom and the text is on the top

        btn.frame = CGRectMake((imageViewWidth2) * i, 10, imageViewWidth2, 40);
        // 按钮图片和标题总高度
        CGFloat totalHeight = (btn.imageView.frame.size.height + btn.titleLabel.frame.size.height);
        // 设置按钮图片偏移
        [btn setImageEdgeInsets:UIEdgeInsetsMake(-(totalHeight - btn.imageView.frame.size.height) + 20, 20, 0, -btn.titleLabel.frame.size.width  + 25)];
        // 设置按钮标题偏移
        [btn setTitleEdgeInsets:UIEdgeInsetsMake(20.0, -btn.imageView.frame.size.width , -(totalHeight - btn.titleLabel.frame.size.height),0.0)];

The specific use is based on the blog of the big brother iOS-button settings, the picture is on the top, and the text is on the bottom

2. My interface

In the same way, give the effect picture first

Here I still use the operation of the button picture on the top and the text on the bottom on the homepage. The interface is similar, but there are a few difficulties that bothered me at the time.

• Photo wall change avatar
• Navigation bar custom buttons
• Clip the view

1. Photo wall change avatar

We can see that when we change the avatar on the page that pops up from the photo, the avatar of our "My Interface" will also change accordingly.The method of passing values ​​by protocol is used here, which is a method of passing values ​​from back to front, the value-passing method will be summarized in a blog post later. Next, let's explain the places that need attention in the photo wall.

We can only change one avatar when we change the avatar, so we need to click on our photo to determine whether it is selected. Our photo is UIButtom. In the normal state, the state of the button is normal, and in the selected state, it is select. Here is the code description

[button setImage:image forState:UIControlStateNormal];
[button setImage:selectedImage forState:UIControlStateSelected];

We add a time function to the button, and change its state when it is clicked.

This realizes the switch between the selected and unselected states of the button

The next thing we need to achieve is justTraverse our pictures to find the selected one, pass it to our "My" interface to replace

2. Navigation bar custom buttons

This is relatively simple. It should be noted that the navigation bar buttons are transformed from ordinary buttons, so weWe need to create a normal button first, and then transform it into a UIBarButtonItem to assign to our bar

3. Clip the view

This involves the relationship between views and layers, which will be explained later. Clipping views is used to change our views from squares to other shapes.

---

3. Account interface

1. Night Mode

It can be seen that the main purpose of this interface design is our knowledge of tableview. Here is a brief explanation of the idea of ​​night mode.

We change our pattern by adding an event function to our switch

The switch is the same as the button, both have the property of select, we use this property to change our color

2. Don’t select cells for a long time.
In the gif, you can see that the selected cells disappear after a while after selection. Here is the code directly.

Summarize

Generally speaking, Netease Cloud Music is relatively simple, mainly for laying the groundwork for the following demo. It will be difficult to write at the beginning, but it is actually very easy to write after you become proficient.