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

В моем примере мне нужно было добавить разделительную линию в верхнюю левую ячейку, разделенную «Имя» и «Продажи» таким образом, чтобы было понятно, что «Имена» вошли в столбец «А», а «Возраст» был частью строки 1.Мы повторим это для этого примера.

1. Откройте пустую книгу в Excel .

2. Вы можете сделать это в ячейке любого размера, но это будет легче понять, если сначала увеличить ее. Чтобы сделать это, мы просто нажмем и удерживаем линию между строками 1 и 2, а затем перетаскиваем до нужной высоты. Затем сделайте то же самое для столбца, чтобы развернуть его по горизонтали .

3. Щелкните правой кнопкой мыши ячейку и выберите Формат ячеек .

4. Вверху, , щелкните вкладку Граница .

5. И затем выберите диагональную линию в правом нижнем углу меню. Вы можете нарисовать линию в противоположной ориентации, щелкнув значок другой диагональной линии в левом нижнем углу меню.

6. Нажмите ОК.

7. Теперь введите нужный текст в верхней части диагональной линии и нажмите Alt + Enter, чтобы перейти к новой строке.

8. Введите текст внизу и нажмите клавишу ввода.

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

Microsoft Excel Советы

Core Tutorial: линии, прямоугольники и градиенты

Примечание по обновлению : Том Эллиотт обновил это руководство для iOS 12, Xcode 10 и Swift 4.2. Рэй Вендерлих написал оригинал.

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

Core Graphics — это действительно классный API для iOS.Как разработчик, вы можете использовать его для настройки своего пользовательского интерфейса с некоторыми действительно аккуратными эффектами, часто даже без необходимости вовлекать художника. Все, что связано с 2D-рисованием — например, рисование фигур, их заполнение и придание им градиентов — является хорошим кандидатом для использования Core Graphics.

С историей, которая восходит к самым ранним временам OS X, Core Graphics является одним из старейших API, все еще используемых сегодня. Возможно, именно поэтому для многих разработчиков iOS Core Graphics поначалу может показаться несколько пугающей: это большой API-интерфейс, в котором много ловушек, которые можно поймать на этом пути.Однако, начиная с Swift 3, API в стиле C были обновлены, чтобы выглядеть и чувствовать себя как современные API Swift, которые вы знаете и любите!

В этом руководстве вы создадите карточное приложение Star Wars Top Trumps, которое состоит из основного представления со списком звездных кораблей:

… а также подробный вид каждого звездолёта.

Создавая это приложение, вы узнаете, как начать работу с Core Graphics, как заполнять прямоугольники и обводить их, а также как рисовать линии и градиенты для создания пользовательских ячеек и фонов табличного представления.

Возможно, вы захотите пристегнуться; пришло время повеселиться с Core Graphics!

Начало работы

Используйте кнопку Download Materials в верхней или нижней части этого руководства, чтобы загрузить стартовый и готовый проекты. Откройте стартовый проект и быстро осмотрите его. Приложение основано на шаблоне приложения Master-Detail App , предоставленном Xcode. Главный контроллер вида содержит список Star Ships, а контроллер подробного вида показывает детали для каждого корабля.

Откройте MasterViewController.swift . В верхней части класса обратите внимание на переменную звездолётов , которая содержит массив типа Звездолет и переменную dataProvider типа StarshipDataProvider .

Перейти к StarshipDataProvider.swift с помощью . Нажать команду StarshipDataProvider и выбрать Перейти к определению . Это простой класс, который читает объединенный файл Starships.json , и преобразует содержимое в массив Starship .

Вы можете найти определение для Starship в Starship.swift . Это просто структура со свойствами общих свойств звездолётов.

Далее откройте DetailViewController.swift . В верхней части файла перед определением класса определено перечисление , FieldsToDisplay , которое определяет удобочитаемые заголовки для свойств звездолета, которые вы хотите отобразить в качестве случаев в перечислении .В этом файле tableView (_: cellForRowAt :) — это просто большой оператор switch для форматирования данных для каждого свойства Starship в нужный формат.

Создайте и запустите приложение.

Целевой страницей является MasterViewController , показывающий список звездных кораблей из вселенной Звездных войн. Нажмите, чтобы выбрать X-wing , и приложение перейдет к подробному виду этого корабля, который показывает изображение X-wing с различными свойствами, такими как, сколько он стоит и как быстро он может летать.

Это полнофункциональное, хотя и довольно скучное приложение. Время добавить немного шика!

Анализ стиля табличного представления

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

В главном контроллере представления каждая ячейка:

• Имеет градиент от темно-синего к черному.
• Обведено желтым, вставлено из границ ячейки.

А в подробном виде контроллер:

• Сам стол имеет градиент от темно-синего до черного.
• Каждая ячейка имеет желтый разделитель, отделяющий его от соседних ячеек.

Чтобы нарисовать оба этих дизайна, вам просто нужно знать, как рисовать прямоугольники, градиенты и линии с помощью Core Graphics, и это именно то, что вы собираетесь изучить. :]

Привет, Core Graphics!

Хотя это руководство охватывает использование Core Graphics в iOS, важно знать, что Core Graphics доступна для всех основных платформ Apple, включая MacOS через AppKit, iOS и tvOS через UIKit, а также для Apple Watch через WatchKit.

Вы можете использовать Core Graphics как рисование на физическом холсте; порядок операций рисования имеет значение. Например, если вы рисуете перекрывающиеся фигуры, то последняя добавленная вами будет сверху и перекрывает нижнюю.

Apple спроектировала Core Graphics таким образом, что вы, как разработчик, предоставляете инструкции для , что рисовать в отдельный момент, чем , где .

Базовый контекст графики , представленный классом CGContext , определяет , где .Вы сообщаете контексту , что нужно сделать операциям рисования. Существуют CGContexts для рисования растровых изображений, рисования в файлах PDF и, чаще всего, рисования непосредственно в UIView .

В этой аналогии с картиной основной графический контекст представляет собой холст, на котором художник рисует.

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

Каждый UIView имеет свой собственный базовый графический контекст. Чтобы нарисовать содержимое UIView с использованием Core Graphics, вы должны написать свой код рисования в пределах draw (_ :) вида. Это связано с тем, что iOS устанавливает правильный CGContext для рисования в виде непосредственно перед вызовом draw (_ :) .

Теперь, когда вы понимаете основы того, как вы используете Core Graphics в UIKit, пришло время обновить ваше приложение!

Рисование прямоугольников

Для начала создайте новый файл вида, выбрав Новый ▸ Файл… в меню Файл .Выберите Какао Touch Class , нажмите Далее , а затем установите имя класса StarshipsListCellBackground . Сделайте его подклассом UIView , затем создайте файл класса. Добавьте следующий код в ваш новый класс:

переопределить func draw (_ rect: CGRect) {
  // 1
  guard let context = UIGraphicsGetCurrentContext () else {
    возвращение
  }
  // 2
  context.setFillColor (UIColor.red.cgColor)
  // 3
  контекст.заливка (границы)
}
 

Разбивая эту строку построчно:

1. Сначала вы получаете текущий CGContext для этого экземпляра UIView , используя UIGraphicsGetCurrentContext () . Помните, iOS установил это автоматически перед вызовом draw (_ :) . Если вы не можете получить контекст по какой-либо причине, вы рано вернетесь из метода.
2. Затем вы устанавливаете цвет заливки для самого контекста.
3. Наконец, вы говорите, чтобы заполнить границы представления.

Как видите, Core Graphics API не содержит метода для непосредственного рисования фигуры, заполненной цветом. Вместо этого, как добавление краски к определенной кисти, вы устанавливаете цвет в качестве состояния CGContext , а затем вы указываете контексту, что рисовать этим цветом отдельно.

Возможно, вы также заметили, что когда вы вызывали setFillColor (_ :) в контексте, вы не указали стандарт UIColor . Вместо этого вы должны использовать CGColor , который является основным типом данных, который используется Core Graphics для представления цветов.Преобразовать UIColor в CGColor очень просто, просто используя свойство cgColor любого UIColor .

Показ новой ячейки

Чтобы увидеть ваш новый вид в действии, откройте MasterViewController.swift . В tableView (_: cellForRowAt :) добавьте следующий код сразу после удаления ячейки из первой строки метода:

if! (cell.backgroundView - это StarshipsListCellBackground) {
  клетка.backgroundView = StarshipsListCellBackground ()
}
    
if! (cell.selectedBackgroundView - это StarshipsListCellBackground) {
  cell.selectedBackgroundView = StarshipsListCellBackground ()
}
 

Этот код устанавливает фоновый вид ячеек для вашего нового представления. Создайте и запустите приложение, и вы увидите красивый, хотя и резкий, красный фон в каждой ячейке.

Удивительно! Теперь вы можете рисовать с Core Graphics. И, хотите верьте, хотите нет, вы уже изучили несколько действительно важных приемов: как получить контекст для рисования, как изменить цвет заливки и как заполнить прямоугольники цветом.Вы можете сделать довольно симпатичный интерфейс с этим.

Но вы пойдете дальше и узнаете об одном из самых полезных методов создания отличных интерфейсов: градиентах!

Создание новых цветов

В этом проекте вы снова и снова будете использовать одни и те же цвета, поэтому создайте расширение для UIColor , чтобы они были легко доступны. Перейдите к Файл ▸ Новый ▸ Файл… и создайте новый файл Swift с именем UIColorExtensions.Свифт . Замените содержимое файла следующим:

импорт UIKit

расширение UIColor {
  общедоступная статика let starwarsYellow =
    UIColor (красный: 250/255, зеленый: 202/255, синий: 56/255, альфа: 1,0)
  public static let starwarsSpaceBlue =
    UIColor (красный: 5/255, зеленый: 10/255, синий: 85/255, альфа: 1,0)
  public static let starwarsStarshipGrey =
    UIColor (красный: 159/255, зеленый: 150/255, синий: 135/255, альфа: 1,0)
}
 

Этот код определяет три новых цвета, к которым вы можете получить доступ как статические свойства UIColor .

Градиенты рисования

Далее, так как вы собираетесь рисовать много градиентов в этом проекте, добавьте вспомогательный метод для рисования градиентов. Это упростит проект, сохранив код градиента в одном месте и избежав повторения.

Выберите файл ▸ Новый ▸ Файл… и создайте новый файл Swift с именем CGContextExtensions.swift . Замените содержимое файла следующим:

импорт UIKit

расширение CGContext {
  func drawLinearGradient (
    в прямоугольнике: CGRect,
    Начиная с startColor: CGColor,
    отделка с концаЦвет: CGColor
  ) {
    // 1
    let colorSpace = CGColorSpaceCreateDeviceRGB ()

    // 2
    пусть местоположения = [0.0, 1.0] как [CGFloat]

    // 3
    пусть colors = [startColor, endColor] как CFArray

    // 4
    градиент охраны = CGGradient (
      colorsSpace: colorSpace,
      цвета: цвета,
      локации: локации
    ) еще {
      возвращение
    }
  }
}
 

Существует много методов для этого метода:

1. Сначала вы устанавливаете правильное цветовое пространство . С цветовыми пространствами можно многое сделать, но вы почти всегда хотите использовать стандартное зависящее от устройства цветовое пространство RGB, используя CGColorSpaceCreateDeviceRGB .
2. Затем вы устанавливаете массив, который отслеживает местоположение каждого цвета в пределах диапазона градиента. Значение 0 означает начало градиента, а 1 означает конец градиента.

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

3. После этого вы создаете массив с цветами, которые вы передали в ваш метод.Обратите внимание на использование CFArray , а не Array , здесь, когда вы работаете с API-интерфейсами C более низкого уровня.
4. Затем вы создаете свой градиент, инициализируя объект CGGradient , передавая цветовое пространство, массив цветов и местоположений, которые вы ранее создали. Если по какой-либо причине дополнительный инициализатор завершается неудачно, вы возвращаетесь рано.

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

Стек графических данных

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

переопределить func draw (_ rect: CGRect) {
  //.. получить контекст
     
  context.setFillColor (UIColor.red.cgColor)
  drawBlueCircle (в: контексте)
  context.fill (someRect)
}
  
// ... много строк спустя
  
func drawBlueCircle (в контексте: CGContext) {
  context.setFillColor (UIColor.blue.cgColor)
  context.addEllipse (in: bounds)
  context.drawPath (используя: .fill)
}
 

Взглянув на этот код, вы можете подумать, что он нарисует красный прямоугольник и синий круг на виде, но вы ошибаетесь! Вместо этого этот код рисует синий прямоугольник и синий круг — но почему?

Поскольку drawBlueCircle (in :) устанавливает синий цвет заливки для контекста и, поскольку контекст является конечным автоматом, он переопределяет красный цвет заливки, установленный ранее.

Это — то, где saveGState () , и его метод партнера restoreGState () ), входят!

Каждый CGContext поддерживает стек графического состояния, содержащий большинство, хотя и не все, аспекты текущей среды рисования. saveGState () помещает копию текущего состояния в стек графических состояний, а затем вы можете использовать restoreGState () , чтобы позже восстановить контекст в этом состоянии и удалить состояние из стека в процессе.

В приведенном выше примере вы должны изменить drawBlueLines (в :) следующим образом:

func drawBlueCircle (в контексте: CGContext) {
  context.saveGState ()
  context.setFillColor (UIColor.blue.cgColor)
  context.addEllipse (in: bounds)
  context.drawPath (используя: .fill)
  context.restoreGState ()
}
 

Вы можете проверить это сами, открыв RedBluePlayground.playground в кнопке Скачать материалы вверху или внизу этого урока.

Завершение градиента

Обладая знаниями о стеке графических состояний, пришло время завершить рисование градиента фона. Добавьте следующее к концу drawLinearGradient (в: начальная с: окончательная с :) :

// 5
let startPoint = CGPoint (x: rect.midX, y: rect.minY)
let endPoint = CGPoint (x: rect.midX, y: rect.maxY)
    
// 6
saveGState ()

// 7
addRect (прямоугольник)
клип ()
drawLinearGradient (
  градиент,
  начало: startPoint,
  конец: конечная точка,
  параметры: CGGradientDrawingOptions ()
)

restoreGState ()
 

5. Вы начинаете с вычисления начальной и конечной точек для градиента.Вы устанавливаете это как линию от верхней средней до нижней средней прямоугольника. Полезно, что CGRect содержит некоторые переменные экземпляра, такие как midX и maxY , чтобы сделать это действительно простым.
6. Далее, так как вы собираетесь изменить состояние контекста, вы сохраняете его графическое состояние и завершаете метод, восстанавливая его.
7. Наконец, вы рисуете градиент в предоставленном прямоугольнике. drawLinearGradient (_: start: end: options :) — это метод, который фактически рисует градиент, но, если не указано иное, он заполнит весь контекст, который представляет собой весь вид в вашем случае, градиентом.Здесь вам нужно только заполнить градиент в предоставленном прямоугольнике. Для этого нужно понимать отсечения .

   Обрезка — это потрясающая функция в Core Graphics, которая позволяет ограничивать рисование произвольной формой. Все, что вам нужно сделать, это добавить фигуру в контекст, но вместо того, чтобы заполнять ее, как вы это обычно делаете, вы вызываете clip () для контекста, которая затем ограничивает весь будущий рисунок этим регионом.

   Таким образом, в этом случае вы установите заданный прямоугольник в контексте и обрежете его перед тем, как окончательно вызвать drawLinearGradient (_: start: end: options :) , чтобы нарисовать градиент.

Время, чтобы дать этому методу вихрь! Откройте StarshipsListCellBackground.swift и после получения текущего UIGraphicsContext замените код следующим:

let backgroundRect = границы
context.drawLinearGradient (
  в: backgroundRect,
  начальный с: UIColor.starwarsSpaceBlue.cgColor,
  отделка с: UIColor.black.cgColor
)
 

Создайте и запустите приложение.

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

Исправление темы

Откройте Main.storyboard и выберите представление таблицы в главной сцене . В инспекторе Атрибутов установите Разделитель на Нет .

Затем выберите Navigation Bar в Master Navigation Controller и установите Navigation Bar Style на Black и отмените выбор Translucent .Повторите эти действия для Navigation Bar в Detail Navigation Controller сцены.

Далее откройте MasterViewController.swift . В конце viewDidLoad () добавьте следующее:

tableView.backgroundColor = .starwarsSpaceBlue
 

Затем в tableView (_: cellForRowAt :) , непосредственно перед возвратом ячейки, установите цвет текста:

cell.textLabel! .textColor = .starwarsStarshipGrey
 

Наконец, откройте AppDelegate.swift и приложение (_: didFinishLaunchingWithOptions :) добавьте следующее непосредственно перед возвратом:

// Тематика
UINavigationBar.appearance (). TintColor = .starwarsYellow
UINavigationBar.appearance (). BarTintColor = .starwarsSpaceBlue
UINavigationBar.appearance (). TitleTextAttributes =
  [.foregroundColor: UIColor.starwarsStarshipGrey]
 

Создайте и запустите приложение.

Это лучше! Ваш главный вид таблицы начинает выглядеть очень космически.:]

Путь поглаживания

Поглаживание в Core Graphics означает рисование линии вдоль пути, а не его заполнение, как вы делали раньше.

Когда Core Graphics обводит контур, она рисует линию обводки на середине точного края пути. Это может вызвать пару общих проблем.

за пределами

Во-первых, если вы рисуете по краю прямоугольника, например, границы, Core Graphics по умолчанию не будет рисовать половину траектории обводки.

Почему? Поскольку контекст, установленный для , UIView распространяется только на границы представления. Представьте, что поглаживание с границей в одну точку по краю вида. Поскольку Core Graphics проходит по середине пути, линия будет на пол-точки за пределами вида и на пол-точки внутри границ вида.

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

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

Сглаживание

Во-вторых, вам нужно знать об эффектах сглаживания, которые могут повлиять на внешний вид вашей границы. Сглаживание, если вы не знакомы с тем, что это такое (даже если вы слышали об этом на экране настроек компьютерной игры!), Это техника, применяемая механизмами рендеринга, чтобы избежать «зубчатых» появлений краев и линий при отображении графики не отображать идеально на физические пиксели на устройстве.

Возьмите пример одноточечной границы вокруг вида из предыдущего абзаца. Если граница следует за границами представления, то Core Graphics попытается нарисовать линию шириной в половину точки по обе стороны от прямоугольника.

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

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

Для первой диаграммы обратите внимание на то, что в 2х-изображении отсутствует сглаживание, поскольку половина точки по обе стороны от желтого прямоугольника попадает на границу пикселей. Однако на изображениях 1x и 3x происходит сглаживание.

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

Добавление границы

Вернуться к вашему приложению! Ячейки начинают хорошо выглядеть, но вы добавите еще один штрих, чтобы действительно выделить их. На этот раз вы будете рисовать ярко-желтую рамку по краям ячейки.

Вы уже знаете, как легко заполнить прямоугольники. Ну, поглаживать их так же легко.

Откройте StarshipsListCellBackground.swift и добавьте следующее в конец розыгрыша (_ :) :

let strokeRect = backgroundRect.insetBy (dx: 4.5, dy: 4.5)
context.setStrokeColor (UIColor.starwarsYellow.cgColor)
context.setLineWidth (1)
context.stroke (strokeRect)
 

Здесь вы создаете прямоугольник для обводки, который вставлен из фонового прямоугольника на 4,5 точки в направлениях x и y. Затем вы устанавливаете цвет обводки на желтый, ширина линии — на одну точку и, наконец, обводите прямоугольник. Создайте и запустите свой проект.

Теперь ваш звездный список действительно выглядит так, будто он исходит из далекой-далекой галактики!

Построение макета карты

Пока ваш главный контроллер вида выглядит причудливо, контроллер детального вида все еще нуждается в некотором обновлении!

Для этого представления вы начнете с рисования градиента на фоне табличного представления с использованием пользовательского подкласса UITableView .

Создайте новый файл Swift с именем StarshipTableView.swift . Замените сгенерированный код следующим:

импорт UIKit

класс StarshipTableView: UITableView {
  переопределить func draw (_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext () else {
      возвращение
    }

    let backgroundRect = границы
    context.drawLinearGradient (
      в: backgroundRect,
      Начиная с: UIColor.starwarsSpaceBlue.cgColor,
      отделка с: UIColor.black.cgColor
    )
  }
}
 

Это должно начать казаться знакомым к настоящему времени. В методе draw (_ :) вашего нового подкласса табличного представления вы получите текущий CGContext , а затем начертите градиент в границах представления, начиная с синего цвета сверху и заканчивая черным снизу. Просто!

Откройте Main.storyboard и щелкните по TableView в сцене Detail .В инспекторе идентичности установите класс для вашего нового StarshipTableView .

Создайте и запустите приложение, затем коснитесь строки X-wing .

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

Вернувшись в Main.storyboard , выберите FieldCell в Detail Scene .В инспекторе атрибутов задайте для background значение Clear Color . Затем откройте DetailViewController.swift и в самом низу таблицы tableView (_: cellForRowAt :) , перед возвратом ячейки, добавьте следующее:

cell.textLabel! .textColor = .starwarsStarshipGrey
cell.detailTextLabel! .textColor = .starwarsYellow
 

Это просто устанавливает имя и значение поля ячеек в более подходящие цвета для вашей темы «Звездные войны».

Затем после tableView (_: cellForRowAt :) добавьте следующий метод для стилизации заголовка табличного представления:

переопределить func tableView (
  _ tableView: UITableView,
  willDisplayHeaderView view: UIView,
  Раздел раздела: Int
) {
    view.tintColor = .starwarsYellow
    если пусть header = рассматривать как? UITableViewHeaderFooterView {
      header.textLabel? .textColor = .starwarsSpaceBlue
    }
  }
 

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

Линии рисования

В качестве последнего кусочка, вы добавите разделитель для каждой ячейки в подробном представлении. Создайте новый файл Swift , на этот раз с именем YellowSplitterTableViewCell.swift . Замените сгенерированный код следующим:

импорт UIKit

Класс YellowSplitterTableViewCell: UITableViewCell {
  переопределить func draw (_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext () else {
      возвращение
    }
    
    пусть у = границы.maxY - 0,5
    пусть minX = bounds.minX
    пусть maxX = bounds.maxX

    context.setStrokeColor (UIColor.starwarsYellow.cgColor)
    context.setLineWidth (1.0)
    context.move (to: CGPoint (x: minX, y: y))
    context.addLine (to: CGPoint (x: maxX, y: y))
    context.strokePath ()
  }
}
 

В YellowSplitterTableVIewCell вы используете Core Graphics для обводки линии в нижней части границ ячеек. Обратите внимание, что используемое значение y на пол-точки меньше границ вида, чтобы сплиттер полностью прорисовывался внутри ячейки.

Теперь вам нужно нарисовать линию, показывающую сплиттер.

Чтобы нарисовать линию между А и В, вы сначала переместитесь в точку А, которая не заставит Core Graphics что-либо рисовать. Затем вы добавляете линию к точке B, которая добавляет линию из точки A в точку B в контекст. Затем вы можете вызвать strokePath () , чтобы провести линию.

Наконец, снова откройте Main.storyboard и установите класс FieldCell в сцене Detail так, чтобы он был вновь созданным YellowSplitterTableViewCell с помощью инспектора идентификации.Создайте и запустите ваше приложение. Затем откройте детальный вид X-wing. Прекрасный!

Куда пойти отсюда?

Вы можете скачать окончательный проект, используя ссылку Download Materials вверху или внизу этого руководства.

Загрузка также включает в себя две игровые площадки. RedBluePlayground.playground содержит пример, изложенный в разделе сохранения / восстановления контекста, а ClippedBorderedView.playground демонстрирует отсечение границы, если она не вставлена.

Кроме того, DemoProject — это полный проект Xcode, который обводит прямоугольник по сетке с одной точкой. Этот проект написан на Objective-C, так что вы можете запустить его без изменений на устройствах без сетчатки, таких как iPad 2, для которых требуется iOS 9, чтобы увидеть эффекты сглаживания для себя. Но не паникуйте! Это легко понять, теперь вы знаете Core Graphics Swift API. :]

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

Если этот учебник немного сложен для понимания, или вы хотите, чтобы раскрыть его основы, посмотрите видео серию Beginning Core Graphics.

Если вы ищете что-то более продвинутое, взгляните на курс Intermediate Core Graphics.

И если вы еще не чувствуете, что можете посвятить себя полному курсу, попробуйте серию статей по основной графике, где вы узнаете, как рисовать все приложение, включая графики, с нуля с помощью Core Graphics!