“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

preface

Hello, everyone. Today is the fourth article to share with you how to use Swift to develop netease Cloud Music home page. In the previous articles, I have shared with you how to use MVVM mode to build applications.

Hand in hand with you a netease Cloud Music home page (I)

Hand in hand with you a netease Cloud Music home page (2)

Hand in hand with you a netease Cloud Music home page (3)

After completing the above tutorial, our application is almost 70% complete, so let’s optimize it further!

The first thing to do is to adapt it.

Layout of the adapter

As the screen sizes of iOS devices become more and more diverse, what’s the best strategy to adapt to the screen size of so many devices? Let’s take a look at what screen sizes are available.

ratio

In this project, the strategy I adopted was to select the screen size of a device as the development standard. For example, I used the screen size of the 5.5-inch iPhone6 plus here to set a scale factor.

func scaleW(a) -> CGFloat {
        return (screenWidth / 414 * CGFloat(self))}func scaleH(a) -> CGFloat {
        return (screenHeight / 667 * CGFloat(self))}Copy the code

In this way, you can consider using the above coefficient to set the height and width of the layout:

/// Calculate the View frame according to the model
    class func caculateFrame() - >CGRect {
        let height: CGFloat = sectionC_height * CGFloat(scaleW)
        let width: CGFloat = CGFloat(kScreenWidth)
        return CGRect(x: 0, y: 0, width: width, height: height)
    }
Copy the code

For convenience, we can add extension in the project to realize the scaling coefficient needed:

import UIKit

let kScreenWidth = UIScreen.main.bounds.width // max(UIScreen.main.bounds.height, UIScreen.main.bounds.width)
let kSreenHeight = UIScreen.main.bounds.height // min(UIScreen.main.bounds.height, UIScreen.main.bounds.width)
let kSreenBounds = UIScreen.main.bounds

let kLeftMargin: CGFloat = 20.0
let kTopMargin: CGFloat = 20.0

let sectionA_height: CGFloat = 200 + 40

let sectionB_height: CGFloat = 140 + 40

let sectionC_height: CGFloat = 100

let sectionD_height: CGFloat = 180

let sectionE_height: CGFloat = 250 + 40

/// Layout the width of A Cell
let itemA_width: CGFloat = 120

/ / / headview high
let HEADVIEW_H: CGFloat = 40


extension CGFloat {
        
    func scaleW(a) -> CGFloat {
        return (screenWidth / 414 * CGFloat(self))}func scaleH(a) -> CGFloat {
        return (screenHeight / 667 * CGFloat(self))}}Copy the code

Common screen adaptation methods

There are many ways of screen adaptation, you can choose native or third-party open source screen adaptation, such as:

  • AutoLayout

  • SnapKit

  • Masonry

Dark mode/light mode

Apple has released new features for DarkMode in iOS13. So how to adapt to this new feature! We need to match from two aspects, one is the color, the other is the picture, let’s see how to operate in detail!

color

IOS 13 adds an initialization method to UIColor that we can use to create dynamic colors.

@available(iOS 13.0.*)
public init(dynamicProvider: @escaping (UITraitCollection) - >UIColor)
Copy the code

This callback is triggered when the system switches between LightMode and DarkMode.

Therefore, we can add the extension for UIColor to match the background color and font color of the App. The code is as follows:

import UIKit

extension UIColor {
    
    // UIView background color
    public class var darkModeViewColor:UIColor {
        if #available(iOS 13.0.*) {
            return UIColor{(trainCollection) -> UIColor in
                if trainCollection.userInterfaceStyle = = .dark {
                    return .systemBackground
                } else {
                    return UIColor(red: 248/255, green: 248/255, blue: 248/255, alpha: 1)}}}else {
            return .systemBackground
        }
    }
    
    // Cell Background color
    public class var homeCellColor:UIColor {
        if #available(iOS 13.0.*) {
            return UIColor{(trainCollection) -> UIColor in
                if trainCollection.userInterfaceStyle = = .dark {
                    return UIColor(red: 23/255, green: 23/255, blue: 23/255, alpha: 1)}else {
                    return .white
                }
            }
        } else {
            return .white
        }
    }
    
    
    // Text color
    public class var darkModeTextColor: UIColor {
       if #available(iOS 13.0.*) {
           return UIColor{(trainCollection) -> UIColor in
               if trainCollection.userInterfaceStyle = = .dark {
                   return .white
               } else {
                   return .black
               }
           }
       } else {
           return .black
       }
    }
    
    // Set the Placeholder text color
    public class var placeholderColor: UIColor {
        if #available(iOS 13.0.*) {
            return UIColor{(trainCollection) -> UIColor in
                if trainCollection.userInterfaceStyle = = .dark {
                    return UIColor(red: 255, green: 255, blue: 255, alpha: 0.25)}else {
                    return UIColor(red: 0, green: 0, blue: 0, alpha: 0.25)}}}else {
            return UIColor(red: 0, green: 0, blue: 0, alpha: 0.25)}}.
 }
Copy the code

The picture

In iOS, all our image materials are placed in assets. xcassets, so we also need to carry out image adaptation here. Image adaptation is relatively simple, we only need to provide the correct size format.

First, open assets. xcassets, and then drag our image resources into them one by one. The format of the image resources must be clear to all of us. Apple requires that three sets should be provided: @1x, @2x, @3X. To generate images in these formats, use external tools such as Sketch, Figma, etc.

Due to the need to fit different modes, two different sets of picture resources are required, and select Any, Dark on the right side when setting the Appearances. After setting, we can drag another set of image resources into corresponding positions one by one, as shown in the figure below:

When you configure the image in assets. xcassets, just call the following method and the adaptation will be done automatically.

@available(iOS 13.0.*)
public /*not inherited*/ init?(named name: String)
Copy the code

The last

All the code from this article has been pushed to my Github. Welcome to Star ✨. We’ll see you in the next article.

Previous articles:

  • Hand in hand with you a netease Cloud Music home page (3)
  • Hand in hand with you a netease Cloud Music home page (2)
  • Hand in hand with you a netease Cloud Music home page (I)
  • 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

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

Finally, creation is not easy, if it is helpful to everyone, I hope everyone likes support, what questions can also be discussed in the comment area 😄 ~