Краткая история макетов пользовательского интерфейса iOS

iOS

Важное напоминание: содержание этой статьи представляет собой мешанину. Выдержки и цитаты можно найти в списке литературы в конце статьи. Кроме того, добавьте некоторые из ваших собственных идей!

В повседневной разработке построение и отладка пользовательского интерфейса будут занимать большую часть нашего времени, поэтому мобильная разработка часто высмеивается как интерфейс. Улучшение технологии компоновки пользовательского интерфейса может повысить эффективность разработки и тратить больше времени на оптимизацию и логику, вместо того, чтобы привязываться к интерфейсному бизнесу.

Технический обзор макета пользовательского интерфейса

  • nib: nib — это английская аббревиатура NeXT interface builder, которая хранит информацию об интерфейсе в двоичной форме и является форматом файла до IB3.0.

  • xib: xib — это английская аббревиатура построителя интерфейса xml. Это новое поколение, запущенное Apple после IB3.0. Он хранит информацию об интерфейсе в формате xml. Перед окончательным выполнением файл xib будет скомпилирован в файл nib. . . . . . (Пожалуйста, обратите внимание на комментарии великого бога @доисторической карты)

  • раскадровка: файл раскадровки — это новая технология, представленная Apple для замены файлов xib при разработке интерфейса. По сути это централизованная область управления xml-файлами, которая может не только описывать структуру отдельного интерфейса xib, но и описывать переходы и зависимости между интерфейсами. В основном его таскают вручную, и он похож на игрушку из строительных блоков.

  • frame: Эквивалент кодовой версии раскадровки, но более гибкий. В настоящее время чаще используется. Если нет хорошего решения для адаптации, все еще немного сложно иметь модели разных размеров. (Добро пожаловать, чтобы добавить самый элегантный адрес учебника по адаптации)

  • AutoLayout: AutoLayout (Автомакет) — это технология компоновки интерфейса, выпущенная iOS 6. Основная идея алгоритма заключается в преобразовании правил компоновки на основе системы ограничений (по сути, системы линейных уравнений, представляющей взаимосвязь компоновки представлений) в геометрические параметры видов, представляющих правила. На самом деле, сам алгоритм AutoLayout не является изобретением, но Apple реализовала алгоритм с помощью Objective-C, что удобно для использования iOS-разработчиками. Существует множество способов использования AutoLayout, например ①Визуальные инструменты: Xcode’s Interface Builder, ②Чистый код: дляMasonryпредставлять. узнать большеАвтоматическая компоновка Автоматическая компоновка (принцип)

  • FlexBox: Гибкая компоновка (Flexible Box). Да, это самый популярный метод компоновки на веб-сайте (ранее блочная модель), и теперь его также можно использовать в приложении. Это решение расширяет многие технологии, такие какYoga(Самый мощный представитель, созданный Facebook, разработал множество решений верхнего уровня, таких как кроссплатформенныйReactNative, АндроидLitho, iOSYogakit),FlexboxLayout(представитель Android, произведенный Google),FlexLib,FLEXЖдать. (Дополнения приветствуются)

  • быстрый интерфейс:Официальный сайт, официально рекомендованный Apple. узнать большеApple выпускает новую платформу SwiftUI: одно кодирование, пять общих концов

nib

В разработке iOS некоторые споры о создании интерфейсов

xib

В разработке iOS некоторые споры о создании интерфейсов

storyboard

В разработке iOS некоторые споры о создании интерфейсов

frame

Основная сложность написания интерфейса через фрейм — адаптация модели, к тому же это громоздко. Вот 2 ключевых момента для адаптации:

Модели без челки

Очевидно, что размер и соотношение сторон этих трех экранов схожи, и размер экрана теперь составляет 4,7+, поэтому iPhone 6(s) часто используется в качестве эталона для пропорционального масштабирования. На практике у всей страницы могут быть все или часть узлов, или только ширина (или высота, и тогда другая сторона будет адаптивной).

// 在AppDelegate.h中
@property float autoSizeScaleX;
@property float autoSizeScaleY;

// 在AppDelegate.m中
#define ScreenHeight [[UIScreen mainScreen] bounds].size.height
#define ScreenWidth [[UIScreen mainScreen] bounds].size.width
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
   
    if(ScreenHeight > 667){ // 这里以(iPhone 6)为准
        myDelegate.autoSizeScaleX = ScreenWidth/375;
        myDelegate.autoSizeScaleY = ScreenHeight/667;
    } else {
        myDelegate.autoSizeScaleX = 1.0;
        myDelegate.autoSizeScaleY = 1.0;
    }
}

Высота экрана iPhone 6 равна 667, поэтому, когда размер экрана больше, чем у iPhone 6, autoSizeScaleX и autoSizeScaleY представляют собой соотношение сторон текущего экрана и размера iPhone 6. Если мобильный телефон Iphone6, соотношение экрана равно 1, если это Iphone6s, соотношение экрана увеличивается, а соотношение экрана Iphone5 уменьшается. Теперь, когда мы получили пропорциональную зависимость, давайте посмотрим, как решить адаптацию интерфейса настройки кода.

CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)Этот метод делает наш обычный метод установки размера в файле .m

CG_INLINE CGRect TS_CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
    CGRect rect;
    rect.origin.x = x * myDelegate.autoSizeScaleX; 
    rect.origin.y = y * myDelegate.autoSizeScaleY;
    rect.size.width = width * myDelegate.autoSizeScaleX;
    rect.size.height = height * myDelegate.autoSizeScaleY;
    return rect;
}

Делайте это напрямую, когда мы используемUIImageView *imageview = [[UIImageView alloc] initWithFrame:TS_CGRectMake(100, 100, 50, 50)];Таким образом, мы получаем преобразованные координаты. Соотношение положения и размера этого изображения в 5, 6 и 6 Plus одинаковое.

Не только адаптация размера, но и адаптация размера текста.

#define MainScreenWidth [[UIScreen mainScreen] bounds].size.width

#define font(R) (R)*(MainScreenWidth)/375.0

Таким образом, вы часто будете видеть следующий код:

self.btnForgetPassWord = [UIButton alloc]initWithFrame:TS_CGRectMake(161, 499, 54, 12);
[self.btnForgetPassWord setFont:[UIFont systemFontOfSize:font(12)]];

Одним словом, маме больше не нужно беспокоиться об адаптации экрана.

челка модель

Отличие челки от не челки в том, что есть дополнительная безопасная область SafeArea, поэтому проще всего убрать размер небезопасной области, а потом адаптировать к модели без челки.

Общая схема метода - макрос!

#define K_iPhoneXStyle ( (CGSizeEqualToSize(CGSizeMake(414, 896), [[UIScreen mainScreen] bounds].size)) || ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO) )
// 或
#define K_iPhoneXStyle ((KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO) || (KScreenWidth == 414.f && KScreenHeight == 896.f ? YES : NO))


// 其他宏
#define KScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define KScreenHeight ([UIScreen mainScreen].bounds.size.height)
#define K_iPhoneXStyle ((KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO) || (KScreenWidth == 414.f && KScreenHeight == 896.f ? YES : NO))
#define KStatusBarAndNavigationBarHeight (K_iPhoneXStyle ? 88.f : 64.f)
#define KStatusBarHeight (K_iPhoneXStyle ? 44.f : 20.f)
#define KTabbarHeight (K_iPhoneXStyle ? 83.f : 49.f)
#define KMagrinBottom (K_iPhoneXStyle ? 34.f : 0.f)

#define KScaleWidth(width) ((width)*(KScreenWidth/375.f))
#define IsIphone6P          SCREEN_WIDTH==414
#define SizeScale           (IsIphone6P ? 1.5 : 1)
#define kFontSize(value)    value*SizeScale
#define kFont(value)        [UIFont systemFontOfSize:value*SizeScale]

Рассмотрим только большинство других случаев~ Например, горизонтальный экран, новое разрешение и т. д. будут обсуждаться отдельно.

AutoLayout

По сравнению с фреймом гибкость была повышена, а влияние размера уменьшено с целого на локальное, но его по-прежнему сложно использовать при обновлении, и недавно введена концепция приоритета. О разнице между несколькими способами обновления:

  • setNeedsLayout: сообщает, что страницу необходимо обновить, но не начинает обновление немедленно. layoutSubviews будет вызываться сразу после выполнения.
  • layoutIfNeeded: Скажите макету страницы немедленно обновиться. Поэтому он обычно используется с setNeedsLayout. Если вы хотите создать новый кадр немедленно, вам нужно вызвать этот метод.Используя эту общую анимацию макета, вы можете использовать этот метод, чтобы анимация вступила в силу сразу после обновления макета.
  • layoutSubviews: система переопределяет макет.
  • setNeedsUpdateConstraints: сообщает, что ограничения необходимо обновить, но не запускается немедленно.
  • updateConstraintsIfNeeded: указать ограничениям немедленно обновиться.
  • updateConstraints: ограничения обновления системы.

Для получения дополнительной информации об использовании Masonry, пожалуйста, перейдитеПримечания по использованию кирпичной кладки.

Самая большая проблема с AutoLayout заключается в том, что ему необходимо точно знать взаимосвязь ограничений каждого элемента пользовательского интерфейса.Когда ограничения страницы очень сложны, это отличное испытание для внимательности и терпения программиста. Впрочем, это вовсе не самая серьезная проблема.Как правило, страницы собираются из нескольких компонентов.Самое ужасное в AutoLayout то, что он не поддерживает горячую замену компонентов, то есть нельзя уничтожить компонент, у которого есть другие компоненты. которые зависят от ограничений этого компонента.ПрограммистыЕсли вы хотите "удалить" компонент, вам нужно добавить ссылку на ширину или высоту компонента.Если вы хотите "удалить", установите переменную в 0. Сделайте ты думаешь это так просто? Что, если компонент был «подключен» обратно на место?

Бывает, что FlexBox прекрасно решает эту проблему, пожалуйста, продолжайте оглядываться назад.

Я начал переходить на iOS в 2015 году. В то время я пропустил xib и раскадровку и напрямую научился использовать макет чистого кода Masonry, поэтому я до сих пор не знаю Interface Builder. Masonry мне кажется скучным, опыта WYSIWYG нет, а код UI в ВК или View занимает большую часть. Но после прохождения начального уровня удобный опыт совместной разработки с другими коллегами, гибкость, управляемость, повторное использование абстракций и т. д. — это здорово!

FlexBox

Наконец настала очередь главного героя! Happy~~ Есть небольшой веб-фонд, на который можно пойтиМакет Flexbox в деталяхУчитесь и практикуйтесь.

Что решает Flexbox?

  • Направленность (традиционное направление компоновки слева направо, сверху вниз)
  • Эластичное масштабирование (традиционное определение размера точно определяется пикселями и т. д.)
  • Выравнивание элементов (можно подключать и отключать)

Из вышеперечисленных моментов кажется, что это прекрасно решает проблему низкой эффективности разработки нативной верстки iOS, но увеличивает вложенную иерархию страниц и обменивает пространство на эффективность разработки в случае насыщения аппаратной производительности.

Я уверен, что вы сомневаетесь в его эффективности! ?(В комментарии великого бога @ доисторической карты указано, что производительность AutoLayout была обновлена, поэтому, пожалуйста, выполните поиск самой последней актуальной информации 😄)

здесьРассказываем о производительности по алгоритму верстки от AutoLayoutИзмените приведенный выше тестовый код, выложите Frame/AutoLayout/FlexBox, измерьте время компоновки от 10 до 350 UIView в секциях и возьмите в качестве результата среднее значение времени компоновки 100. Единицей времени являются секунды. Результат такой: (Код проекта тестового макетаАдрес GitHub)

Хотя результаты тестов неизбежно оказываются необъективными, согласно линейной диаграмме можно ясно увидеть, что производительность компоновки FlexBox относительно близка к Frame. 60FPS, как золотой стандарт для беглости iOS, требует, чтобы макет был завершен в течение 0,0166667 с. Когда AutoLayout имеет более 50 просмотров, у него могут возникнуть проблемы с плавностью. Соответствующая конфигурация для этого теста: Xcode9.2, симулятор iPad Pro (12,9 дюйма) (2-го поколения).

Yoga

Йога была первоначально получена из открытой библиотеки макетов CSS с открытым исходным кодом от Facebook в 2014 году, которая была изменена в 2016 году и переименована в Йогу. Он реализован на языке C на основе Flexbox, кроссплатформенного кода для написания представлений, упрощения макета и поддержки нескольких платформ, включая Java, C#, C, Objective-C и Swift.

Официальный сайт Yoga Layout. Разработчики библиотек могут интегрировать Йогу в свои системы компоновки точно так же, как Facebook интегрировался в два своих проекта с открытым исходным кодом:React Native,Litho,Componentkit. Кроме того, разработчики iOS могут напрямую использовать YogaKit для компоновки рамки представления.

React Native

RN не будет много говорить, многие приложения на рынке в настоящее время используются, следует сказать, что это лучший выбор для кроссплатформенной разработки приложений:

  • JD 618: Практика использования ReactNative Framework в JD Wireless: Эта статья помогла мне начать работу с RN, а затем продвигала RN в Западном Китае в начале 2018 года, а также ссылалась на эту статью. Но Jingdong теперь главный толчокTaro.
  • Meituan: были найдены только официальные технические статьи RN Meituan, что не является репрезентативным. Но я считаю, что все, кто соприкасается с записью RN, должны были ее скачать.Клиент Meituan с высокой имитацией React-Native версии.
  • Ctrip: Ctrip следует рассматривать как производителя, который больше всего использует RN в APP.В начале, когда он был еще около 0,48, он глубоко настраивал RN, например, горячее обновление, субподряд и т. д. Можно найти множество статей о Ctrip RN. в Интернете, напримерCtrip Ticket React Native Практика чистой архитектуры. Наконец-то с открытым исходным кодом в 2019 годуCRN, я лично считаю, что открытый исходный код запоздал и не дает большого эффекта на рынке РН.
  • Терминал врача Huayitong: Мои первые продукты RN, в дополнение к IM и релевантным, другие страницы RN, что составляет примерно 85% +.

Litho

Litho is a declarative framework for building efficient user interfaces (UI) on Android. It allows you to write highly-optimized Android views through a simple functional API based on Java annotations. It was primarily built to implement complex scrollable UIs based on RecyclerView. With Litho, you build your UI in terms of components instead of interacting directly with traditional Android views. A component is essentially a function that takes immutable inputs, called props, and returns a component hierarchy describing your user interface.

Litho – это декларативный фреймворк для эффективного создания пользовательского интерфейса Android. Он создает высококачественные представления Android с помощью API аннотаций, что очень подходит для сложных списков прокрутки на основе Recyclerview. Litho использует ряд компонентов для создания представлений вместо традиционного для Android взаимодействия с представлениями. Компонент — это, по сути, функция, которая принимает неизменяемые входные данные, называемые реквизитами, и возвращает иерархию компонентов, описывающих пользовательский интерфейс.

Litho – это UI-фреймворк, который полностью отличается от традиционного Android. Он наследует смелый и инновационный стиль Facebook и совершает прорыв в реализации UI-фреймворка в стиле React на Android. Схема архитектуры выглядит следующим образом:

Я не знаком с разработкой Android, поэтому, пожалуйста, переместитеБазовые навыки | Использование и принцип анализа Litho.

YogaKit

Библиотека пользовательского интерфейса Yoga верхнего уровня Componentkit на стороне iOS, но мне было очень трудно ее использовать после прочтения документации, поэтому я пропустил ее.

ноYogaKitНеплохо, поддерживает и OC, и Swift,Учебное пособие по йоге — использование кроссплатформенного механизма компоновкиЭтот учебник по YogaKit на основе Swift неплох.

ps: Хотел найти замену Masonry, особенно для поддержки Flex layout, поэтому возлагал большие надежды разобраться и освоить YogaKit, но разочаровался 😞. Во-первых, код громоздкий, а во-вторых, пользователей YogaKit не так много. Я все еще хорошо изучаю RN~

FlexboxLayout

FlexboxLayoutОн производится Google и поддерживает только Android, поэтому я с нетерпением жду ваших комментариев по этому фреймворку.

Кстати, Google смотрит на любой язык и технологию, он вмешается, а затем разработает набор самостоятельно. Такие как golang, angular, android studio, dart, flutter и т.д., плюс гугл сюжет отечественных разработчиков техники, так что можете испытать на себе. . . Кроме двигателя JS - V8

swiftUI

Пользовательский интерфейс на iOS, я думаю, что swiftUI — король будущего! Я не принимаю опровержение, ха-ха-ха-ха-ха-ха ... Язык разработки пользовательского интерфейса iOS для Objective-C и Swift, скомпилированный из oc, становится интерпретируемым Swift, с точки зрения языка spans или big, во многих технологиях находятся в В быстро развивающуюся современную эпоху интерпретируемые языки более ориентированы на будущее, но Swift еще не реализовал ни одну из двух точек кроссплатформенности, даже на iPhone и Mac.

Если нет свифта от входа до события повторного входа, рынок свифтов может быть другой сценой! Очень надеюсь, что Swift 5 стабилизируется.

послесловие

Базовая компоновка пользовательского интерфейса такая же, от графического рисования OpenGL до библиотеки пользовательского интерфейса, элементов управления пользовательского интерфейса и приложения, и разработка компьютеров не изменилась до сих пор, например, MFC для Windows, UIKit для iOS, только что появившийся Flutter вон и т.д.

Здесь заимствована семиуровневая модель TCP/IP (я думаю, что это самая мощная архитектура в мире, никто, никакое опровержение не принимается!), только после наслоения разные сотрудники могут играть разные роли для выполнения соответствующей работы. Пользовательский интерфейс, о котором мы говорим, находится на уровне программного обеспечения и работает на оборудовании, поэтому связь между программным обеспечением и оборудованием зависит от отрисовки графики, которую выполняет операционная система.

При большой среде операционной системы для создания экосистемы необходимо предоставить гибкие комплекты разработки, такие как библиотека пользовательского интерфейса, сетевая библиотека, библиотека драйверов и т. д. Это особенно очевидно в Windows. Потом к вашему лагерю разработчиков присоединятся разработчики, и тогда ваш рынок будет постепенно расширяться, так почему же вы часто слышите, что за языком и технологией тоже нужны сильные компании и средства для его поддержки, такие как Microsoft, Google, Amazon, Facebook, SDK многих сторонних производителей и т. д. Обратите внимание, что различные производители, такие как Alibaba Cloud SDK и Tencent SDK, также считаются этим уровнем.Вы можете рассматривать Windows, Android, iOS и другие операционные системы как производители первого уровня, в то время как Facebook, поставщики услуг, такие как Alibaba Cloud и Tencent Cloud, являются вторичными производителями.

С библиотеками и соответствующими элементами управления, предоставляемыми производителями всех уровней, мы можем лучше создавать приложения, которые расцветают сотней цветов, и только такие разработчики программного обеспечения, как мы, появляются в разных направлениях. Поэтому при взгляде на новую библиотеку или технологию пользовательского интерфейса необходимо проанализировать ее принцип и применение, чтобы найти ее подходящее позиционирование.Если вы не проанализируете глубоко технологию, стоящую за ней, вы не сможете полностью раскрыть ее максимальную ценность.

Как и в случае с React Native, вы попросили меня сделать обмен мгновенными сообщениями и мультимедиа, и я дал вам пощечину! RN просто снижает порог пользовательского интерфейса приложения и расширяет свою аудиторию, прямо как слоган React "learn once write anywhere'. Общий принцип RN заключается в динамическом управлении собственным макетом пользовательского интерфейса с помощью JavaScript и интерпретатора JavaScript, который аналогичен предыдущему поколению пользовательского интерфейса путем анализа XML.LuaЭтот скрипт, похожий на синтаксис JavaScript, процветает в игровой индустрии.Принцип горячего обновления RN таков - путем обновления файла JavaScript для обновления макета пользовательского интерфейса и бизнес-логики, поэтому ядро ​​​​RN состоит в том, чтобы иметь ES JavaScript на 6 /7/8/... и соответствующий интерпретатор JavaScript, про интерпретатор JavaScript в RN можно посмотретьКонтратака на Futter? Facebook выпускает новый кроссплатформенный движок Hermes!,Двигатель JS big PK: АО против V8 против Гермеса.

Не ограничиваясь RN, если вы хотите работать все лучше и лучше, вам нужно проводить больше исследований. Не думайте, что вы можете сделать приложение, потому что вы знаете веб-страницы React.Ха-ха, проблема зависимости библиотеки может вас убить. Дело не в том, что вы красивы, вы можете думать о красоте! Это все равно, что попросить вас использовать openGL API для рисования элемента управления: если вы не умеете хорошо рисовать, значит, вы говорите, что технология openGL не годится? ! В это время я могу послать тебе только одно слово, убирайся!

Сказав так много, я не хочу, чтобы какая-либо библиотека пользовательского интерфейса была потрясающей, но я надеюсь, что спецификация пользовательского интерфейса FlexBox сможет расширить свое влияние на сторону приложения, попытаться соответствовать лучшей веб-стороне с точки зрения макета и наконец, достичь единства, чтобы достичь наиболее фундаментальной кроссплатформенности, но может быть много библиотек или решений для достижения.



Обновлено 2019-07-28: Комментарий ниже, упомянутый @小二FlutterMyLinearLayoutОн тоже очень хороший и мощный, и старая и новая схемы компоновки совместимы, технические специалисты могут его опробовать, может и вам понравится. Но я думаю, что документация не идеальна, особенно с точки зрения использования, что затруднит начало работы.

Прокомментируйте ниже историю макета iOS, упомянутую @prehistorictotem, что-то упомянутое в этой статье неверно, обратите внимание на скрининг! (Хочу изменить, но не знаю, как изменить 😔).



Ссылки: (в произвольном порядке)

Категории