«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Заявки на бэк-энд и фронт-энд с двумя треками, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов! "
предисловие
Привет всем, сегодня четвертая статья о том, как использовать Swift для разработки домашней страницы NetEase Cloud Music. В предыдущих статьях я поделился с вами тем, как использовать шаблон MVVM для создания приложений. статья. :
Возьмите вас за руку с домашней страницей NetEase Cloud Music (1)
Возьмите вас за руку с домашней страницей NetEase Cloud Music (2)
Возьмите вас за руку с домашней страницей NetEase Cloud Music (3)
После завершения вышеуказанного руководства наше приложение готово почти на 70% Теперь давайте еще больше его оптимизируем!
Первое, что нужно сделать, это адаптировать его.
Адаптация макета
Теперь, когда размеры экранов устройств iOS становятся все богаче и богаче, какую стратегию следует принять, чтобы адаптироваться к экранам столь многих устройств! Давайте посмотрим, какие размеры экрана доступны!
масштаб
В этом проекте стратегия, которую я принял, заключалась в том, чтобы выбрать размер экрана устройства в качестве стандарта разработки, например, я использовал размер 5,5-дюймового экрана iPhone 6 plus, чтобы установить коэффициент масштабирования.
func scaleW() -> CGFloat {
return (screenWidth / 414 * CGFloat(self))
}
func scaleH() -> CGFloat {
return (screenHeight / 667 * CGFloat(self))
}
Таким образом, при разметке можно рассмотреть возможность использования приведенных выше коэффициентов для установки высоты и ширины:
/// 根据模型计算 View frame
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)
}
Для удобства масштабный коэффициент, который необходимо использовать, можно реализовать, добавив расширение в проект:
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
/// 布局 A Cell 的宽度
let itemA_width: CGFloat = 120
/// headview 高
let HEADVIEW_H: CGFloat = 40
extension CGFloat {
func scaleW() -> CGFloat {
return (screenWidth / 414 * CGFloat(self))
}
func scaleH() -> CGFloat {
return (screenHeight / 667 * CGFloat(self))
}
}
Распространенные методы экранизации
Существует множество способов адаптации экрана. Вы можете выбрать собственные или сторонние методы адаптации экрана с открытым исходным кодом, такие как:
темный режим/светлый режим
Apple представила новую функцию DarkMode на iOS13. Итак, как адаптироваться к этой новой функции! Нам нужно адаптировать два аспекта: один — цвет, другой — изображение, давайте посмотрим, как это работает!
цвет
iOS 13 добавляет в UIColor метод инициализации, который мы можем использовать для создания динамических цветов.
@available(iOS 13.0, *)
public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)
Этот обратный вызов запускается, когда система переключается между LightMode и DarkMode.
Поэтому мы можем адаптировать цвет фона и цвет шрифта приложения, добавив расширение расширения в UIColor, Код выглядит следующим образом:
import UIKit
extension UIColor {
// UIView 背景颜色
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 背景颜色
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
}
}
// 文字颜色
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
}
}
// 设置Placeholder文字颜色
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)
}
}
.......
}
рисунок
В iOS все наши графические материалы размещены в Assets.xcassets, поэтому здесь нам также необходимо выполнить адаптацию изображения Адаптация изображения относительно проста, нам нужно только указать правильный формат размера Вот и все.
Для начала открываем Assets.xcassets, а затем перетаскиваем в него по одному наши ресурсы изображения.Все должны знать формат ресурсов изображений.Apple требует три набора: @1x,@2x,@3x, Для генерации изображений в этом формате, вы можете использовать внешние инструменты, такие как Sketch, Figma и т. д.
Из-за необходимости адаптироваться к разным режимам требуется два набора разных ресурсов изображения, и выберите Any, Dark при настройке Appearances справа. После настройки мы можем перетащить другой набор ресурсов изображения в соответствующие позиции один за другим, как показано на рисунке:
После настройки образа в Assets.xcassets вам нужно только вызвать следующий метод при его использовании, и работа по адаптации будет завершена автоматически.
@available(iOS 13.0, *)
public /*not inherited*/ init?(named name: String)
Наконец
Ну, после окончания этой статьи, я думаю, у всех уже есть понятие об адаптации iOS в целом.Подробнее об адаптации, пожалуйстанажмите на эту ссылку, весь код для этого поста был отправлен на мойGithubДобро пожаловать, звезда ✨, Увидимся в следующей статье.
Прошлые статьи:
- Возьмите вас за руку с домашней страницей NetEase Cloud Music (3)
- Возьмите вас за руку с домашней страницей NetEase Cloud Music (2)
- Возьмите вас за руку с домашней страницей NetEase Cloud Music (1)
- Код для написания комментариев? напиши и ты проиграешь
- Я так долго не изучал Codable после его выпуска
- iOS изящно обрабатывает сетевые данные, не так ли? Почему бы тебе не посмотреть на это
- Пользовательский макет UICollectionView! Достаточно
Пожалуйста, выпейте ☕️ Нравится + Подпишитесь~
-
Не забудьте поставить лайк после прочтения, есть 👍 и мотивация
-
Обратите внимание на общественный номер ---HelloWorld Цзе Шао, первый раз подтолкнуть новую позу
Наконец, создание не простое. Если оно будет полезно всем, я надеюсь, что оно всем понравится и поддержит его. Если у вас есть какие-либо вопросы, вы также можете обсудить это в области комментариев 😄～