Changing content of UICollectionView with segmented Control in the header in Swift - ios

I tried to solve this problem since hours and didn't find a proper solution. I want to have a custom UICollectionView with a segmented control in the header. Changing the segmented control index should render the cells differently. So far I can display the segmented control in the header of my collectionView but changing the content of the collectionView inside of my UserSearchHeader doesn't work.
I created a custom UICollectionView called UserSearchController which is a Subclass of UICollectionView and conforms the UICollectionViewDelegateFlowLayout protocol.
class UserSearchController: UICollectionViewController,
UICollectionViewDelegateFlowLayout, UISearchBarDelegate { ....
My custom collectionView UserSearchController has a custom header (UserSearchHeader) and custom cells (UserSearchCell).
collectionView?.register(UserSearchCell.self, forCellWithReuseIdentifier: cellId)
collectionView?.register(UserSearchHeader.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerId")
The UserSearchHeader contains the segmented control.
class UserSearchHeader: UICollectionViewCell {
var segmentedControl: UISegmentedControl = {
let sc = UISegmentedControl(items: ["Username", "Hashtag"])
sc.translatesAutoresizingMaskIntoConstraints = false
sc.tintColor = UIColor.black
sc.selectedSegmentIndex = 0 // automatically highlight
// sc.addTarget(self, action: #selector(segmentedChange), for: .valueChanged)
return sc
}() .....
If the segmentedIndex is 0 I want to render the cells with the UserSearchCell class if the segmentedIndex is 1 I want to render it with a different cellClass (Clicking the segmented control). How can I achieve this behavior with these different classes. shall I use the cellForItem at method inside of the UserSearchController to check the status of the segmented control. But how can I do this when the segmented control is defined in the UserSearchHeader class .
override func collectionView(_ collectionView:
UICollectionView, cellForItemAt indexPath: IndexPath) ->
UICollect. ionViewCell { if segmentedControl.segmentedIndex = 0 ....}

tried using Use the scopeButtonTitles property?
mySearchController.searchBar.scopeButtonTitles = ["Username", "Hashtag"]
Have a look at this question for more details. Basically you use the
func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) {
// respond to your scopeBar selection here
switch selectedScope {
case 0:
print("Username tab selected")
// do your stuff for Username here
case 1:
print("Hashtag tab selected")
// do your stuff for Hashtag here
default:
print("Someone added a tab!")
// you shouldn't have more than 2 tabs
}
EDIT:
Please find below the missing pieces described in the link provided initially. There is no need to add the header from a NIB.
First, you add properties for your search & results controllers:
typealias ResultVC = UserResultController //The class to show your results
var searchController: UISearchController!
var resultController: ResultVC?
Then, in viewDidLoad you add this:
// Search Results
resultController = ResultVC()
setupSearchControllerWith(resultController!)
if #available(iOS 9.0, *) {
searchController?.loadViewIfNeeded()
}
Then you need to add this function to your class:
func setupSearchControllerWith(_ results: ResultVC) {
// Register Cells
results.tableView.register(TableCell.self, forCellReuseIdentifier: "\(TableCell.self)")
results.tableView.register(UINib(nibName: "\(TableCell.self)", bundle: Bundle.main), forCellReuseIdentifier: "\(TableCell.self)")
// We want to be the delegate for our filtered table so didSelectRowAtIndexPath(_:) is called for both tables.
results.tableView.delegate = self
searchController = UISearchController(searchResultsController: results)
// Set Scope Bar Buttons
searchController.searchBar.scopeButtonTitles = ["Comics only", "Digital too"]
// Set Search Bar
searchController.searchResultsUpdater = self
searchController.searchBar.sizeToFit()
tableView.tableHeaderView = searchController.searchBar
// Set delegates
searchController.delegate = self
searchController.searchBar.delegate = self // so we can monitor text & scope changes
// Configure Interface
searchController.dimsBackgroundDuringPresentation = false
searchController.hidesNavigationBarDuringPresentation = true
if #available(iOS 9.1, *) {
searchController.obscuresBackgroundDuringPresentation = false
}
// Search is now just presenting a view controller. As such, normal view controller
// presentation semantics apply. Namely that presentation will walk up the view controller
// hierarchy until it finds the root view controller or one that defines a presentation context.
definesPresentationContext = true
}
Finally, you add the function I was describing initially: searchBar:selectedScopeButtonIndexDidChange:

Related

How to show a done button depending on the edition status of a tableview, from a UITableView extension?

I wrote a UITableView extension that would allow the reordering of cells after holding the tableview.
So the tableView goes edit mode as expected but what I would like to do is to add a Done button in the navigation bar of a viewController, when the tableView is being edited and that would end the edit mode when tapped.
How can I show/hide this button in viewController according to if the tableView being edited or not in UITableView extension?
that is my extension:
import UIKit
extension UITableView {
func addLongPressToTableView() {
let longPress = UILongPressGestureRecognizer(target: self, action: #selector(onLongPressGesture(sender:)))
longPress.minimumPressDuration = 0.8 // optional
self.addGestureRecognizer(longPress)
}
#objc func onLongPressGesture(sender: UILongPressGestureRecognizer) {
if (sender.state == .began) {
self.isEditing = true
self.setEditing(true, animated: false)
UIImpactFeedbackGenerator(style: .light).impactOccurred()
}
}
}
// ViewController, hide/show editButtonItem (done button?)
// navigationItem.rightBarButtonItems = [addButton, editButtonItem]
The UITableViewDelegate provides support for coordinating editing. Use the following two delegate methods to respond to changes in the editing state.
func tableView(UITableView, willBeginEditingRowAt: IndexPath)
func tableView(UITableView, didEndEditingRowAt: IndexPath?)

Should we be using UIView or UIViewController for the following feature?

We have the following app, where user can switch to different "page" (purple, yellow, ... colours) from side menu.
I was wondering, should the "page" be implemented as UIView, or should the "page" be implemented as UIViewController?
The pages shall responsible to
Read/ write from/ to CoreData.
Possible holding a UIPageView, which user can swipe through multiple child pages as shown in https://i.stack.imgur.com/v0oNo.gif
Holding a UICollectionView.
User can drag and move the items in the UICollectionView
User can perform various contextual action (Delete, clone, ...) on the items in UICollectionView.
Can easily port to iPad in the future.
Currently, my implementation of using UIView are as follow.
private func archive() {
if let trashView = self.trashView {
trashView.removeFromSuperview()
self.trashView = nil
}
if self.archiveView != nil {
return
}
let archiveView = ArchiveView.instanceFromNib()
self.view.addSubview(archiveView)
archiveView.translatesAutoresizingMaskIntoConstraints = false
archiveView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
archiveView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
archiveView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
archiveView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
self.archiveView = archiveView
}
private func trash() {
if let archiveView = self.archiveView {
archiveView.removeFromSuperview()
self.archiveView = nil
}
if self.trashView != nil {
return
}
let trashView = TrashView.instanceFromNib()
self.view.addSubview(trashView)
trashView.translatesAutoresizingMaskIntoConstraints = false
trashView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
trashView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
trashView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
trashView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
self.trashView = trashView
}
I notice that if I implement the "pages" using UIView, I will lost some capability of UIViewController like
viewDidLoad callback.
viewWillLoad callback.
viewDidLayoutSubviews callback.
...
However, I am not clear whether losing those capabilities will stop me from implementing a proper "page"?
May I know, should I implement those "pages" using UIView, or using UIViewController?
I would do this with UIViewController because of all the UIKit callback reasons you listed in the question already.
I assume that you have a UINavigationController instance that's set as window.rootViewController for your app. You have a reference to this instance using which you can easily switch between different screens.
Example
class SlideMenuViewController: UIViewController {
enum Option {
case archive
case trash
}
var onSelect: ((_ option: Option) -> Void)?
}
class ArchiveViewController: UIViewController {}
class TrashViewController: UIViewController {}
class AppNavigator {
let mainNavigationController: UINavigationController
init(navigationController: UINavigationController) {
self.mainNavigationController = navigationController
}
private lazy var slideMenuVC: SlideMenuViewController = {
let slideMenu = SlideMenuViewController()
slideMenu.onSelect = { [weak self] (option) in
self?.openScreen(for: option)
}
return slideMenu
}()
private lazy var archiveVC: ArchiveViewController = {
return ArchiveViewController()
}()
private lazy var trashVC: TrashViewController = {
return TrashViewController()
}()
func openScreen(for option: SlideMenuViewController.Option) {
let targetVC: UIViewController
switch option {
case .archive: targetVC = archiveVC
case .trash: targetVC = trashVC
}
mainNavigationController.setViewControllers([targetVC], animated: true)
}
}
Perhaps I totally misunderstood your question, but your UIView should only hold logic related to how the view itself will appear to the user. The UIView should not contain any logic related to the other views or to the model.
UIKit assumes that you use the MVC model to implement apps on the Apple platforms. This means that any code related to controlling which view has to appear and which data the view should get from the model, should be written in the ViewController.
In Xcode you have both the UICollectionViewController and the UIPageViewController to implement page swipes and dragging an dropping views.
View controllers can give the control to other view controllers to present views. The view controller also determine the data that should be presented by the view. Please, check out this article about the MVC model.
Kind regards,
MacUserT

Not able to change view colour in UICollection view

I am trying to change colour of the view inside the uicollectionviewcell. But I am not able to change the colour. When I try to connect to the UIViewController to our view controller it say " cannot connect the repetitive content as an outlet.".
When I change the background of the cell it comes like this
As to make it round I am using view and the giving it layer radius properties.
What I am trying to achieve is:
The values are coming from the model class that I have created and assigned it to UIcolectionviewcell. Model contains only one text field that shows the tags.
When user select any tags the background and text colour will change.I am not to achieve this. It might be easy to do but somehow I am not able to achieve this.
Try to change the background color of your rounded element and not of the entire cell
You can create custom UICollectionViewCell and use it to access different items inside of it, like the textfield with your tag
I've added the sample code to achieve your requirements, Please refer and try implementing based on the following code:
//Your model class
class TagModel{
var tag:String!
var selected:Bool!
init(tag:String, selected:Bool) {
self.tag = tag
self.selected = selected
}
}
//your cell with Xib
class TagCell:UICollectionViewCell{
#IBOutlet weak var tagLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
}
func setTag(_ tagModel:TagModel){
tagLabel.layer.masksToBounds = true
tagLabel.layer.cornerRadius = tagLabel.frame.size.height/2
tagLabel.text = tagModel.tag
if tagModel.selected{
tagLabel.textColor = .white
tagLabel.backgroundColor = .blue
}else{
tagLabel.textColor = .gray
tagLabel.backgroundColor = .lightGray
}
}
}
//Your ViewController which has `UICollectionView`
class TagViewController:UIViewController, UICollectionViewDelegate, UICollectionViewDataSource{
var tagModels:[TagModel]!
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
tagModels[indexPath.item].selected = !tagModels[indexPath.item].selected
collectionView.reloadItems(at: [indexPath])
}
}
Note: Please take this code as sample and make modifications based on your implementations.

How to add a searchBar with scopebar inside of a NavigationBar where the navBar automatically increase its height and shows the scopeBar

I read all questions on stackoverflow but none of them could solve my problem. I created a UICollectionView and and anchored a searchBar inside of the navigationBar without using Storyboards!
class UserSearchController: UICollectionViewController ,.. {..
lazy var searchBar: UISearchBar = {
let sb = UISearchBar()
sb.placeholder = "Enter username"
sb.barTintColor = UIColor.gray
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = UIColor.rgb(red: 230, green: 230, blue: 230)
sb.delegate = self
sb.showsCancelButton = true
return sb
}() ....
// adding the searchBar to the collectionView as subView and
anchoring it to the navigationBar
The searchbar is shown inside of the navigationBar and everything works fine. The problem occurs when I try to add a scopebar to my searchbar. I added the following properties to my searchbar
sb.showsScopeBar = true
sb.scopeButtonTitles = ["Username", "Hashtag"]
The scopeBar is hide behind the navigationBar and the navBar is not automatically increasing its height. You just see a gray background.
Adding my code to a simple UiViewController everything works fine
This code works inside a normal VIewController where the searchBar is added as subView and anchored to the view.
lazy var searchBar: UISearchBar = {
let sb = UISearchBar()
sb.placeholder = "Enter username"
sb.barTintColor = UIColor.gray
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = UIColor.rgb(red: 230, green: 230, blue: 230)
sb.delegate = self
sb.scopeButtonTitles = ["Username", "Hashtag"]
sb.tintColor = UIColor.black
sb.barTintColor = UIColor.lightGray
return sb
}()
public func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
searchBar.showsScopeBar = true
searchBar.sizeToFit()
searchBar.setShowsCancelButton(true, animated: true)
return true
}
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
searchBar.showsScopeBar = false
searchBar.endEditing(true)
}
My searchBar looks like the following. If you start typing the scopeBar appears and if you click cancel it disappears. I want the same but only inside of the navBar :
How is it possible to add a searchBar with scopeBar inside of the navigationBar without Storyboards. Isn't there any easy way. Please can you refer to my code and use my code to show me how this works. I also tried to increase the size of the navigationBar but it should work automatically and I don't know if this is the right approach.
I think this is the sort of implementation you are looking for:
Your segment controller
// ( Declare Globaly )
var yourSegmentController = UISegmentedControl()
yourSegmentController.addTarget(self, action: #selector(ParentClass.filterChanged(_:)), for: .touchUpInside)
Then you will have to register your custom UICollectionViewCell classes with your UICollectionView. Do this in your viewDidLoad or whatever initializer method is used in the module you have the UICollectionView inside of:
self.yourCollectionView.register(YourCustomUserCellClassHere.self, forCellWithReuseIdentifier: NSStringFromClass(YourCustomUserCellClassHere))
self.yourCollectionView.register(YourCustomHashtagCellClassHere.self, forCellWithReuseIdentifier: NSStringFromClass(YourCustomHashtagCellClassHere))
Lastly, in your cellForItemAt delegate method, do the following to see which filter is selected and return the cells accordingly:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var cellToReturn = UICollectionViewCell()
// USERS
if yourSegmentController.selectedSegmentIndex == 0 {
let customUserCell = self.yourCollectionView.dequeueReusableCell( withReuseIdentifier: NSStringFromClass(YourCustomUserCellClassHere), for: indexPath) as? YourCustomUserCellClassHere
// Do what you want with your custom cell here...
cellToReturn = customUserCell
}
// HASHTAGS
else if yourSegmentController.selectedSegmentIndex == 1 {
let customHashtagCell = self.yourCollectionView.dequeueReusableCell( withReuseIdentifier: NSStringFromClass(YourCustomHashtagCellClassHere), for: indexPath) as? YourCustomHashtagCellClassHere
// Do what you want with your custom cell here...
cellToReturn = customHashtagCell
}
return cellToReturn
}
This will check to see what filter is selected and then return the cell that suits the filter.
Also keep in mind every time the user changes your segment filter you will have to refresh the UICollectionView.
Refresh it like this:
// Put this method at the same level where your cellForItemAt function is but not inside
func filterChanged (_ sender:UISegmentedControl) {
self.yourCollectionView.reloadData()
}

My UISearchBar moves to top (animated) --> want to disable

I want implement an UISearchBar on my tableView.
My code (in viewDidLoad) :
self.searchController = UISearchController(searchResultsController: nil)
self.searchController.searchResultsUpdater = self
self.searchController.delegate = self
self.searchController.searchBar.delegate = self
self.searchController.searchBar.autocapitalizationType = .None
self.searchController.searchBar.autocorrectionType = .No
self.searchController.hidesNavigationBarDuringPresentation = false
self.searchController.dimsBackgroundDuringPresentation = false
self.tableView.tableHeaderView = self.searchController.searchBar
When I click on the searchBar, this one move to top, like it wants hide the navigationBar:
I searched on many posts for an answer but nothing works. I want to disable this animation so that the searchBar doesn't move.
You should be able to prevent this by setting:
self.searchController.hidesNavigationBarDuringPresentation = false
You can think of the UISearchController as being presented modally when you start searching. This would work fine if you had a usual UINavigationController setup, however in a more "customized" UI like yours you may run into issues like the search controller attaching to a wrong view, etc.
I would suggest not to use UISearchController in your case and use a separate UISearchBar initialised with the rest of your interface (probably in a storyboard?), and then do the search manually. Implement the UISearchBarDelegate and add your own UITableView for the search results, if you can't simply filter your content in place.
Although looks like you have a tableView var — you could simply add another property, similar to the one you use as a UITableViewDataSource and store filtered data there. So whenever you have something in the UISearchBar you simply use a filtered data source when reloading table view data. For instance:
var data: [String]
var filteredData: [String]
And then use filteredData in the UITableViewDataSource:
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return filteredData.count
}
...
And then do something like this in the UISearchBarDelegate:
func searchBar(searchBar: UISearchBar, textDidChange searchText: String) {
// Filter the data you have. For instance:
filteredData = data.filter({$0.rangeOfString(searchText).location != NSNotFound})
tableView.reloadData()
}
Paste this line in your viewDidLoad of presenting controller:
self.extendedLayoutIncludesOpaqueBars = true

Resources