FUIFilterFeedbackControl

@MainActor
open class FUIFilterFeedbackControl : UIView, FUIViewBorderDrawing

FUIFilterFeedbackControl provides an easy way for programmers to represent a list of applied filters. This FUIFilterFeedbackControl usually appears at the top of the screen above a UITableView. Although you can set this view to any height, it is recommended to set the height of this cell to CGFloat(44). And set its height constraint to the same value.

Developers can use in Interface Builder by adding a UIView to their storyboard or XIB, then setting its class to FUIFilterFeedbackControl. Then set the filterGroups, and filterResultsUpdater properties.

@IBOutlet var filterFeedbackControl: FUIFilterFeedbackControl!

// ...

var sortGroup = FUIFilterGroup()
var mileGroup = FUIFilterGroup()
var nearGroup = FUIFilterGroup()

override func viewDidLoad() {
super.viewDidLoad()

let sortDistanceItem = FUIFilterItem("Sort: Distance", isFavorite: false, isActive: true)
let sortPriceItem = FUIFilterItem("Sort: Price", isFavorite: false, isActive: false)
let sortRatingsItem = FUIFilterItem("Sort: Ratings", isFavorite: false, isActive: false)
let sortAvailabilityItem = FUIFilterItem("Sort: Availability", isFavorite: false, isActive: false)

let mile1Item = FUIFilterItem("0.1 mi", isFavorite: true, isActive: false)
let mile2Item = FUIFilterItem("0.2 mi", isFavorite: true, isActive: false)
let mile3Item = FUIFilterItem("0.3 mi", isFavorite: true, isActive: false)
let mile4Item = FUIFilterItem("0.4 mi", isFavorite: true, isActive: true)

sortGroup.items = [sortDistanceItem, sortPriceItem, sortRatingsItem, sortAvailabilityItem]
sortGroup.allowsEmptySelection = false
sortGroup.isMutuallyExclusive = true

mileGroup.items = [mile1Item, mile2Item, mile3Item, mile4Item]
mileGroup.allowsEmptySelection = true
mileGroup.isMutuallyExclusive = true

let nearGasItem = FUIFilterItem("Nearby Gas", isFavorite: true, isActive: false)
let nearCoffeeItem = FUIFilterItem("Nearby Coffee", isFavorite: true, isActive: false)
let nearRestaurantsItem = FUIFilterItem("Nearby Restaurants", isFavorite: true, isActive: false)

nearGroup.items = [nearGasItem, nearCoffeeItem, nearRestaurantsItem]
nearGroup.allowsEmptySelection = true
nearGroup.isMutuallyExclusive = false

filterFeedbackControl.filterGroups = [sortGroup, mileGroup, nearGroup]
filterFeedbackControl.filterResultsUpdater = self

// ...
}

func updateFilterResults(for filterFeedbackControl: FUIFilterFeedbackControl) {
let effectiveItems = filterFeedbackControl.filterItems

// ...
}

To keep selected item in the original order, use following code:

filterFeedbackControl.keepsItemOrderOnSelection = true

Implement the FUIFilterFeedbackControlDelegate to set cell properties such as accessibility:

let myDelegate = MyDelegate()

filterFeedbackControl.delegate = myDelegate

class MyDelegate: FUIFilterFeedbackControlDelegate {
    func filterFeedbackControl(_ filterFeedbackControl: FUIFilterFeedbackControl, willDisplay cell: UICollectionViewCell, with item: FUIFilterItem) {
        cell.accessibilityIdentifier = "identifier"
    }
}

Theming

FUIFilterFeedbackControl is using a list of SegmentedControl componentes. Therefore, theming of FUIFilterFeedbackControl should be using the SegmentedControl theming elements.

fdlSegmentedControl_item_contentView {
border-color: @primary4;
}

fdlSegmentedControl_item_titleLabel {
font-color: @primary2;
}

fdlSegmentedControl_item_contentView_selected {
border-color: @tintColorDark;
}

fdlSegmentedControl_item_titleLabel_selected {
font-color: @tintColorDark;
}

Theming

Supported style classes

// Customize border color
fdlFUIFilterFeedbackControl_lineView