Connect with us

Разработка

Изменение порядка Collection View Cells (ячеек просмотра коллекции)

iOS 9 анонсировала изменения в Collection View Cells. Теперь стала доступной функция длительного нажатия, которая заставляет выбрать ячейку и поменять ее позицию относительно других ячеек, тем самым меняя общий порядок.

SwiftBook

Опубликовано

/

     
     

iOS 9 анонсировала изменения в Collection View Cells. Теперь стала доступной функция длительного нажатия, которая заставляет выбрать ячейку и поменять ее позицию относительно других ячеек, тем самым меняя общий порядок. В этом уроке мы покажем как можно изменить порядок ячеек через длительное нажатие на них. Ячейки содержат буквы алфавита, а порядок этих ячеек может быть легко изменен. Этот туториал создан для iOS 9 в Xcode 7.

Откройте Xcode и создайте новое Single View Application.

1

Для имени продукта можете использовать что-то типа iOS9CollectionViewReorderDemo, затем заполните следующие поля аналогично снимку внизу, если вам не хочется ломать над этим голову. Установите Язык -Swift, а в качестве устройства выберите iPhone.

2

Давайте перейдем в наш Main.storyboard и удалим наш единственный View Controller. Затем из библиотеки объектов перетащите на холстCollection View Controller. Выделите View Controller Collection и перейдите в меню Editor -> Embed -> Navigation controller.

3

Затем выделите Navigation Controller и перейдите Attribute Inspector (вкладка в правом верхнем углу). В разделе View Controller выберите галочку “Is Initial View Controller” (исходный View Controller).

4

Дважды щелкните Navigation Bar (серая полоска сверху Collection View Controller’а) в Collection View Controller и измените название на (myAlphabet). Выберите Collection View (просто щелкните в середину Collection View Controller) и перейдите в Size Inspector (предпоследняя вкладка в виде линейки справа вверху). В Collection View Section установите размер ячеек на ширину и высоту на 110.

5

Выберете Collection View Controller Cell перейдите в Attribute Inspector и найдите раздел View. Замените фон – “background” на какой-либо другой, чем просто прозрачный, например, на такой:

6 (1)

Теперь, все так же с выделенной ячейкой, идите в Attribute Inspector и в разделе Collection Reusable View напишите в графе Identifier “Cell”.

6

Перетащите Label из библиотеки объектов и поместите его в центре Collection View Cell. Дважды щелкните на ярлык и введите букву “A”. Затем с выделенным ярлыком (Label) пройдите в Attribute Inspector и поменяйте цвет шрифта на белый, или на тот, который вам подходил лучше, чем стандартный черный.

7

В итоге у вас должно получиться что-то вроде этого:

8

Поскольку View Controller был нами удален, то мы можем так же смело удалить и файл ViewController.swift. Теперь давайте добавим новый файл в наш проект, который будет связан с нашим Collection View Controller. В меню выберите File -> New -> File… -> iOS -> Source -> Cocoa Touch Class. Назовите класс CollectionViewController и сделайте его подклассом  UICollectionViewController.

Затем создайте класс для Collection View Cell. Добавьте новый файл в проект. Выберите File -> New -> File… -> iOS -> Source -> Cocoa Touch Class и назовите класс ABCCell и сделайте его подклассом UICollectionViewCell.

9

Эти новые классы необходимо подключить к нашим объектам в Main.storyboard. Кликните Collection View Controller и перейдите ко вкладкеIdentity Inspector (владка справа вверху, третья слева). Заполните поле class на CollectionViewController.

10

Теперь щелкните на Collection View Cell (ячейку) и пройдите так же в Identity Inspector. Изменените класс на ABCCell.

11

Теперь давайте создадим IBOutlet ярлыка нашей ячейки в коде. Идем в Assistant Editor и смотрим, чтобы файл ABCCell.swift виден. Выделяем наш ярлык (или Label), зажимаем клавишу Ctrl и перетаскиваем курсор в класс AlphabetCell, а затем создайте следующий Outlet:

12

Перейдите во CollectionViewController.swift. Выберите класс viewDidLoad и удалите следующую строку:

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

Идентификатор (reuse identifier) уже имеется у нас в Interface Builder. Поэтому эта строка кода нам не нужна.

Добавьте свойство, чтобы хранить значение буквы алфавита.

var charArr: [String] = []

Давайте теперь изменим метод viewDidLoad на:

override func viewDidLoad() {
        super.viewDidLoad()
        
      let letters = "АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ"
        
        for letter in letters.characters {
            charArr.append(String(letter))
        }
    }

Каждая буква в алфавите присваивается массиву charArr. Затем измените предопределенные методы делегата Collection View.

  // 1
  override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
  }
  
  
  // 2
  override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return charArr.count
  }

  // 3
  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! ABCCell
    
    cell.ABCLabel.text = charArr[indexPath.row]
    
    return cell
  }
  1. Collection View будет содержать всего один раздел.
  2. 33 секций будут созданы в Collection View, так как в массиве charArr содержится 33 членов.
  3. В каждой ячейке будет находится по одной букве или, другими словами, по одному члену массива.

Когда происходит изменение порядка ячеек, то содержание должно быть изменено. Это может быть сделано в методе CollectionView: moveItemAtIndexPath:toIndexPath

override func collectionView(collectionView: UICollectionView, moveItemAtIndexPath sourceIndexPath: NSIndexPath,toIndexPath destinationIndexPath: NSIndexPath) {

        let temp = charArr[sourceIndexPath.row]
        charArr[sourceIndexPath.row] = charArr[destinationIndexPath.row]
        charArr[destinationIndexPath.row] = temp
    }

Что мы по сути сделали, так это просто поменяли поменяли значения двух членов.

Теперь давайте запустим приложение и попробуем длительным зажатием изменить порядок ячеек.

13

Уверен, что результат вас не разочаровал! Наверное, сейчас вас так и подмывает сделать “пятнашки” :)

Конечный проект доступен по ссылке.

swift

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Новости

Интересные материалы: 23.01

Сегодня у нас мобильные облака, карьера разработчика Xamarin и новые библиотеки.

Леонид Боголюбов

Опубликовано

/

Весь день мы собираем лучшие материалы о разработке и маркетинге технологий, стартапов, мобильных приложений и игр для iOS и Android из самых разных источников:

Комментарии
Продолжить чтение

Медиа

Podlodka #43: Профессия – архитектор

Продолжаем разбираться, что ждет разработчика после достижения сеньорности.

AppTractor

Опубликовано

/

Автор:

Podlodka

Переход в менеджмент мы уже обсудили, и в этот раз на очереди другой популярный вариант – карьера архитектора. Сергей Орлов, архитектор из Avito, помогает нам вникнуть в суть этой роли, определить её область ответственности и требуемый багаж знаний.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Создание шрифта с нуля за 24 часа

Графический дизайнер Джеймс Барнард бросил себе вызов – он захотел за 24 часа создать шрифт и отправить его в Google Fonts. Как он это сделал и что узнал в процессе — в нашем переводе статьи Джеймса.

Анна Гуляева

Опубликовано

/

Я большой фанат One Day Builds Адама Сэвиджа. В начале дня у него есть только материалы, а в конце он становится обладателем чего-то, что он хотел.

Поэтому я бросил себе вызов: создать с нуля абсолютно новый шрифт и отправить его в Google Fonts за 24 часа.

В старом блокноте у меня были эскизы нескольких букв. Я хотел создать узкий шрифт без засечек, который можно будет использовать на постерах или на других больших изображениях. Во время работы в Men’s Health я использовал шрифты вроде Tungsten или Heron, которые выглядят ужасно в тексте, но отлично смотрятся в заголовках или промоматериалах (которые и были моей основной работой). Это был стиль, который я и хотел создать.

Очень грубые наброски

13:00, среда

Я отправился в Adobe Illistrator с двумя-тремя буквами, которые были у меня в эскизах. Я создал сетку из пяти строк – для линии нижних выносных, базовой линии, линии строчных, линии прописных и линии верхних выносных букв. Затем я определил ширину прописных букв и толщину основного штриха.

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

  • Линия строчных = 2 × высота линии верхних выносных / высота линии нижних выносных
  • Ширина основного штриха = ¼ ширины прописной буквы
  • Ширина строчной буквы = ¾ ширины прописной буквы

Вот как это выглядит на иллюстрации

Сначала я создал буквы O и B. Я решил, что эти буквы будут иметь не форму овала, а форму скругленного угла. Многие буквы будут выглядеть, как высокий прямоугольник, но O, B и D будут иметь скругленные углы вместо овалов.

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

Мой шрифт был очень простым, но с одним «украшением». Любая апертура, то есть, срез концов полуовала, должна была быть отрезана под углом. Самыми сложными буквами стали G и K.

Затем я приступил к строчным буквам. Это было сложнее, но с установленными правилами работать было проще. Я использовал больше «украшений», особенно в верхних выносных и нижних выносных элементах. Самыми сложными стали буквы f, g, a и e, так как они были абсолютно новыми.

21:00, среда

Я перешёл к другим символам, таким как восклицательный и вопросительный знаки. Я стал работать быстрее и успел создать около 35 знаков.

Утро четверга

Утром я довольно быстро закончил цифры от 0 до 9 и начал создавать файл с шрифтом. Это было совершенно новым опытом. Мой знакомый каллиграф Иэн Барнард посоветовал для этого программу Glyphs. Я скачал программу, посмотрел несколько обучающих видео и понял, что неверно создал файл в Illustrator. Поэтому мне пришлось вставлять каждый символ вручную и подгонять его под правила программы.

10:00, четверг

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

11:00, четверг

С расставленными интервалами я приступил к кернингу. Это стало очень болезненным процессом. Сначала я зашёл на этот сайт и вставил в их текст для кернинга свой шрифт.

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

Затем я конвертировал текст в прописные буквы и сделал то же самое для них.

12:59, четверг

Я экспортировал шрифт и конвертировал его в файл .ttf, чтобы отправить в Google. Несколько символов отсутствовали (квадратные скобки и символ копирайта), и я был уверен, что шрифт не примут. У меня также не было времени добавить различные знаки для поддержки разных языков.

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

Название шрифта? Odibee Sans (произносится как oh-dee-bee), то есть, One Day Build — ODB.

Заключение

Я отправил Odibee Sans в Google в мае 2017, и он все ещё находится в очереди на добавление. Команда предложила мне пока уделить время дизайну шрифта, хотя они признали, что это противоречит духу проекта.

Я поработал над шрифтом ещё один день. Я добавил все нужные знаки, а также внёс изменения примерно в 30 символов.

Более того, сейчас в шрифте существует более 1500 кернинговых пар, что стало значительным улучшением шрифта. А также я создал сайт: odibeesans.com.

Комментарии
Продолжить чтение

Разработка

Как сделать собственный VR-шлем за $100

Максим Кутте, 16-летний разработчик, создал свой open source шлем виртуальной реальности.

Леонид Боголюбов

Опубликовано

/

Меня зовут Максим Кутте. Мне 16 лет и я со своими друзьями, Йонасом Сессоном и Габриелем Комбе, сделал свой собственный шлем виртуальной реальности. Он стоил нам всего 100 долларов.

Благодаря моему учителю, я начал программировать в 13. Каждый понедельник и вторник вместо кафе я с друзьями ходил в его класс.

Я потратил один год на создание простой 8-битной операционной системы и участие в конкурсе роботов.

Затем я заинтересовался виртуальной реальностью. И мы с друзьями решили, что неплохо было бы создать собственный мир в VR, в котором мы могли бы проводить время после школы. Но Oculus  тогда стоил 700 долларов, и мы решили создать собственный шлем.

VR для всех

Напечатанная на 3D принтере запчасть

Причиной всего стало аниме под названием Sword Art Online. Его главный герой находится в ролевой виртуальной реальности – и так я влюбился в VR. Я хотел понять все ее аспекты.

Я купил самые дешевые компоненты, которые мог, и начал, изучая основы физики и математики виртуальной реальности (правильное ускорение, первообразные, кватернионы…) А потом мы заново изобрели VR. Я написал WRMHL, а затем с Габриелем FastVR. Объединив все это вместе, мы получили гарнитуру стоимостью $100.

Полностью открытая гарнитура для VR и комплект для разработки

Чтобы ускорить время разработки, мы сделали FastVR – SDK с открытым исходным кодом для разработчиков, который легко понять и кастомизировать. Он работает следующим образом:

  • Главный компьютер шлема вычисляет его позицию в пространстве
  • Позиция из шлема отправляется в WRMHL и часть вычислительной мощности процессора тратится на обработку этого сообщения
  • Затем FastVR извлекает данные и использует их для рендеринга VR-игры

Все, что вам надо – сделать на основе открытых исходников шлем.

Почему open source

Я хочу сделать VR мейнстримом. Поэтому я обратился к Уссаме Аммару, одному из соучредителей The Family. Я обсудил с ним создание компании и запуск на Kickstarter.

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

Мы отправились в Кремниевую долину, и Уссама познакомил меня с главным архитектором в Oculus, Атманом Бринштоком. И они дали мне ценный совет: сделай все это open source.

Следующий шаг

Есть еще много технических моментов, которые мы хотим улучшить.

Сейчас мы работаем над автономной VR-гарнитурой –  у нас уже есть как упрощенная версия с более дешевым 3D-трекингом.

Все это мы скоро выпустим.

Как начать

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

 

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X

Спасибо!

Теперь редакторы в курсе.