“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 ~
-
After reading, remember to give me a like oh, have 👍 have power
-
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 😄 ~