Segmented Control своими руками, как в iOS 13.0 и выше
В iOS 13 обновили Segmented Control, но для тех кто не может обновить Xcode, он просто не доступен. Вот я и решил написать, как можно быстро сделать самому такой же Segmented Control.
Поехали!
Первым делом переходим в Storyboard. Размещаем на нашем ViewController элемент View.
Закрепляем его констрейнтами как вам угодно и в каком месте он вам нужен.
Закрашиваем фон и ставим галочку clip to Bounds.
Берем еще одно View и размещаем его внутри нашего первого View. Только обязательно посмотрите что он был внутри вашего первого View. Он должен быть размещен в лестничном порядке.
Далее закрепляем его констрейнтами с отступом в 2 pix со всех сторон.
И он будет размещен внутри вашего первого вью как на фото ниже.
Далее выделяем наш белый View который внутренний. Выбираем leading и traling констрейн, и меняем у них Priority на 750.
Теперь создаем у данного View еще два констрейнта с лева и справа с отступом 0 pix
Так же переходим в редактирование данных констрейнтов которые мы создали только что и меняем у них Priority = 900 и закрепляем их не от краев нашего серого View, а ставим относительно центра и если вы все сделаете правильно то ваш белый View соберется линией в центре.
Теперь выбираем два Button и размещаем их внутри серого вью, но они должны быть по иерархии в самом внизу что бы текст их далее не перекрывался нашим белым вью когда мы будем его двигать. Закрепляем наши кнопки по центру относительно своей половины.
Все. Tеперь соединяем наши элементы с сториборд с ViewController.
Серый View я назвал — fonView.
Белый View назвал — blockView.
Так же две кнопки buttonOne и buttonTwo и создал у них action.
Еще в наш код перетягиваем два констрейнта которые мы сделали с priority 750. Назовем их:
В viewDidLoad мы прописываем только закругление наших View и один констрейн делаем равным priority 950 что бы белое вью не было в середине как линия, а выглядела как выбранный сегмент.
Финишная прямая. В action button мы прописываем такой код. суть в том что мы меняем наши приоритеты и вью увеличивается на нужные размеры и делаем обновление наших констрейнтов анимированно.
Segmented control на Swift
Делаем красивый segmented control на Swift
Сегодня я расскажу про новую рубрику нашего сайта, а также про то, как сделать стильный Segmented control для вашего приложения, не потратив много времени.
Pod digest
Новая рубрика называется pod digest, возможно, вы уже догадались о чем пойдет речь, эта рубрика собирает самые интересные, свежие и полезные Pod’ы. Сегодня у нас пойдет речь об очень интересном проекте под названием Segmentio.
Сегментированный элемент управления
Итак, что же вообще такое segmented control? Как говорит компания Apple: segmented control это горизонтальный элемент управления, выполненный из нескольких сегментов, каждый из которых представлен своей кнопкой. Такой элемент обычно выглядит следующим образом:
и скорее всего, вам неоднократно приходилось с ним сталкиваться, работая со стандартными приложениями от Apple. Обычно, такие элементы используют для переключения приложения между различными типами содержимого на экране. Стандартный segmented control в Cocoa представлен классом UISegmentedControl и является типичным представителем UIKit фреймворка. Он довольно прост в обращении, поэтому сейчас мы не будем рассматривать его стандартную реализацию, а сразу перейдем к Segmentio.
Segmentio
Pod требует Xсode 8.x, Swift 3.x и поддерживает iOS начиная с 8’ой версии. Проект имеет хороший рейтинг на GitHub’е и свежую дату релиза, плюс MIT лицензия делают его неплохим кандидатом на импорт в ваш проект. Segmentio поддерживает довольно много режимов работы и предоставляет богатые возможности для кастомизации дизайна вашего приложения.
Segmentio API
Segmentio поддерживает довольно простой, но вместе с тем функциональный API. Для того что-бы получить экземпляр Segmentio — необходимо задать его положение на экране, воспользовавшись стандартным классом CGRect.
Мы создали эземпляр класса Segmentio и установили его в иерархии View. Для того чтобы сконфигурировать наш объект, необходимо воспользоваться методом setupContent. Давайте взглянем на его сигнатуру:
Как можно заметить он имеет 3 параметра, с довольно содержательными названиями, content — определяет содержимое элемента, style — задает режим отображения, а options — определяет настройки для выбранного режима. Посмотрим, как будут обрабатываться нажатия кнопок на сегментированном элементе:
Мы задаем параметр valueDidChange небольшим замыканием, принимающим экземпляр объекта Segmentio и индекс, соответствующий выбранной пользователем кнопке. Этих знаний нам вполне хватит для того, чтобы написать свое приложение.
Пример использования Segmentio
Segmentio имеет солидное количество настроек, поэтому мы реализуем небольшую обертку, для того, чтобы не тащить лишнюю логику в свой контроллер. Мы не будем рассматривать полиморфную реализацию нашей обертки в рамках данной статьи, ограничившись написанием статичной реализации сегментированного элемента под flat-дизайн.
Создадим новый класс CBSegmentedControl, который будет определять реализацию нашего segemented control’а.
Здесь мы декларируем класс CBSegmentedControl и определяем поля напрямую или косвенно необходимые для работы с Segmentio. Обратите внимание на инициализатор нашего класса, сейчас он принимает три параметра: items — элементы segmeted control’а, view — на который необходимо установить наш элемент и handler — который будет обрабатывать изменение состояния нашего объекта. Пока все поля помечены как опциональные, просто ради поддержания работоспособности кода.
Для начала давайте инициализируем хранимые поля нашего класса:
Теперь можно продетализировать вычисляемые поля, первым делом определим настройки сепараторов:
Мы устанавили геттеры для вычисляемых полей, ответсвенные за настройку вертикальных и горизонтальных разделителей. Теперь установим настройки индикатора выбранной кнопки на нашем элементе:
Основные настройки индикатора включают его
Теперь зададим настройки состояния кнопок на индикаторе:
Сейчас мы установили шрифт надписей, цвет фона и текста для каждого из состояний кнопок:
Это практически все настройки необходимые Segmentio, осталось только собрать объект SegmentioOptions, который мы будем использовать при конфигурации нашего segmented control’a:
Обновим наш конструктор:
Готово. Давайте подключим наш объект и посмотрим как он работает, для этого допишем несколько функций во ViewController и обновим viewDidLoad():
Отлично, давайте соберем проект и посмотрим, как все работает.
Заключение
На этом все, надеюсь, вам понравилась наша новая рубрика так же, как мне писать для нее. Буду рад услышать ваши предложения о развитии данной ветки нашего сайта, не стесняйтесь присылать названия интересных вам Pod’ов на обзор.
Полную версию проекта можно посмотреть у меня на GitHub’е: hol0d/CBSegmentedControl
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
UISegmentedControl
Доступный в iOS 2.0 и позже.
A UISegmentedControl объект является горизонтальным управлением, сделанным из многократных сегментов, каждый сегмент, функционирующий как дискретную кнопку. Сегментированное управление предоставляет компактные средние значения для группирований многих средств управления.
Сегментированное управление может вывести на экран заголовок ( NSString объект) или изображение ( UIImage объект). UISegmentedControl объект автоматически изменяет размеры сегментов для адаптации пропорционально в их суперпредставлении, если им не установили определенную ширину. Когда Вы добавляете и удаляете сегменты, можно запросить, чтобы действие было анимировано со скольжением и исчезающими эффектами.
Вы регистрируете целевые методы действия для сегментированного управления с помощью UIControlEventValueChanged постоянный как показано ниже.
То, как Вы конфигурируете сегментированное управление, может влиять на его поведение отображения:
При установке сегментированного управления для имения мгновенного стиля, сегмент не показывает себя, как выбрано (синий фон), когда пользователь касается его. Кнопка раскрытия всегда мгновенна и не влияет на фактический выбор.
В версиях iOS до 3,0, если сегментированное управление имеет только два сегмента, то оно ведет себя как переключатель — ответвление выбранного в настоящее время сегмента заставляет другой сегмент быть выбранным. На iOS 3.0 и позже, касаясь выбранного в настоящее время сегмента не заставляет другой сегмент быть выбранным.
Настройка появления
В случае сегментированного управления, свойств появления для UIBarMetricsLandscapePhone только уважаются за сегментированные средства управления в меньшей навигации и панелях инструментов, использующихся в альбомной ориентации на iPhone.
Для обеспечения полной настройки необходимо обеспечить изображения делителя для различных комбинаций состояния, с помощью setDividerImage:forLeftSegmentState:rightSegmentState:barMetrics: :
Для получения дополнительной информации о появлении и конфигурации поведения, посмотрите Сегментированные Средства управления.
How Create a Custom Segmented Control — Swift
Jul 9, 2018 · 5 min read
It’s very common our Designer create some components that are not a UIKit pattern. Most of the time we can make then change somethings but sometimes not. Today I will teach you how to create a Custom Segmented Control.
First, let’s a UIKit Segmented Control.
We have a border, tint color, sections in most of the case we can customize this Segmented Control. Let’s suppose you want to create this component.
You don’t have a bottom view in interface builder to modify or remove selected section background.
Let’s create!
NOTE: I will n ot use IBInspectable / IBDesignable but if you know how to use them, you can.
Our CustomSegmentedControl is a subclass of UIView not UISegmentedControl
First, we need to create our variable:
We have three private variables, why private? Because we don’t want other classes can change this value without updateView. Three variables to customize our view with a default value.
Now we need to put our buttons in view but we have an array and this can be unlimited. The best to do this is create a Horizontal Stack View. Stack View makes the subViews with equal spacing without using any constraint.
How did you realize we create four constraints to make our stack view full all custom view.
Now, let’s create our selected view. We want the selected view has the same buttons width. We need to divide our view frame with the equal number of the section.
Let’s add some buttons in our array, how are we gonna do that? Using our buttonTitles array.
We first let’s remove any element in buttons and remove all subviews inside our view. We can create a for from our button titles and create an individual button from our titles, let’s set title, color, and action also add to our buttons array.
In this tutorial, I’m considering that always section zero will be selected.
let’s make this happen set color to button in index zero.
In our action func we must create a for using enumerated from our array buttons because we can have access to our single button and index in an array. First, we need to make the button set title color to default after this we need compare to find what button was clicked. We need to find the X position and move our selectorView to position using UIView.animated after this we set our button title color as selectedColor
Now we create a func called updateView to call others three configurations func. So simple.
We can create a Convenience Init or/and create a func passing an array. I’m gonna create these two. Why? Because with you are using “view code” we gonna using our init but if we gonna create IBOutlet we need call our func.
If you run the code it`s should work. Remember call your CustomSegmentedControl in your viewDidLoad()
Bonus
Hold on a second.
If I want to notify my view controller that my Segmented Control changed? We need to create our delegate.
Let’s create a protocol called CustomSegmentedControlDelegate and just class can use it. We need to create a func inside this protocol called changeToIndex with an Int parameter
In our segmented control, we need to create a weak var with a CustomSegmentedControlDelegate type and make optional.
Let’s back to our action button func and inside comparison, let’s call our delegate func.
Hold on one more second.
Now I want to know what section is selected and set selection index without user button action.
Let’s create func called setIndex and this func do the same thing that buttonAction without comparison.
Now we create to variable one private and other public. The public one just returns the private value because we don’t want that this value changes without called any func. Just back to buttonAction and set our private variable value. That simple.
Well, developers with this tutorial, you learned how to create a custom segmented control. If you any question about the code you can see full code here on GitHub with two examples.
Custom UISegmentedControl In Swift
Jean-Marc Boullianne
I’m passionate about teaching others as well as a firm believer that we should never stop learning!
More posts by Jean-Marc Boullianne.
Jean-Marc Boullianne
Create A Custom UISegmentedControl In Swift
Have you gotten tired of the standard UISegmentedControl in swift, and just wish you could make it match your app’s look and feel?
You’ve wondered how other developers create their own custom components from scratch. Maybe you wanted to add a little bit of animation to it as well.
In this tutorial you’ll learn 3 major concepts:
Getting Started
We begin by creating a new Cocoa Touch Class file which is a subclass of UIView. For this example I chose to name mine ‘STSegmentedView’.
We start by creating the initializers for the class.
From here we’re going to write a quick function which will return the main buttons we need for our custom view. We’ll use this function when define and initialize those buttons.
Then go ahead and define those main UIButtons, as well as the UIStackView the buttons will be placed in.
Using @IBDesignable & @IBInspectable
Next we’re going to starting using Swift Attributes to allow us to see and interact with our view while it’s placed in the Storyboard.
If we apply the @IBDesignable attribute to our ‘STSegmentedView’ class and the @IBInspectable attribute to variables within the class, then we’ll be able to assign values without ever having written a line of code.
Our class will look like this.
. and our variables like this.
Using the @IBInspectable attribute, we will create a few variables to hold the view’s icons and labels. We will have variables for the button’s text as well as a selected and non selected image for the buttons.
Note: I’m using ‘didSet’ in the variable initializer. This is a Property Observer in Swift. Every time this variable is written to, the ‘didSet’ closure will execute perform the code inside. For all cases here, we are simply consolidating the variables inside 3 arrays defined in the first 3 lines.
Now if you switch over to the Storyboard and add our custom view you can see the @IBInspectable properties available in the sidebar.
Adding the buttons to our custom view
Next up we will define a function ‘setupView’ which will add all of the above objects to our custom view.
Let’s walkthrough this function piece by piece.
Finally call the ‘setupView’ function in both of our view’s initializers like so.
Now if you go back to the Storyboard and change the text properties.
The View will update live in the Storyboard. (Note: I also changed the background color of the view for viewing purposes)
Let’s move onto the icons. But first, go ahead and the below functions. They will be used to setup the first button selection the user wants.
The next bit of code is going to be added to our class to allow us to select the proper button when the view is created.
Now if you switch over to the Storyboard, you can see the changes. (Make sure you add some images and select a starting index too)
Finally by adding the animation code inside the ‘didSelectButton’ function, you can animate the changes.
As you can see the old button is identified by our saved index. We remove th etext from it and change it’s image back to its regular unselected image. We then do the opposite for the Selected button.
Additionally, we animate the position of the slideView by placing it at the same position as the selected button.
If you open up the Storyboard you can see the final updates.
And if you run the application.
I’ll leave it as an exercise to the reader to add in code that will change other parts of the view depending on which button is selected. (Hint: I Used a Protocol to help me out)