TestsTested | ✗ |
LangLanguage | SwiftSwift |
License | MIT |
ReleasedLast Release | Apr 2016 |
SPMSupports SPM | ✗ |
Maintained by Frederik Jacques.
TNSwiftyCheckboxGroup is a component to create checkbox groups based on UICollectionView.
There are 3 predefined styles:
And there is an option to create your custom subclass and build your own checkbox type.
It works in both landscape and portrait.
Programmatically is a bit faster to set up because you don’t have to juggle with Interface Builder.
Create the array with TNSwiftyCheckboxModel
classes.
var checkboxModels = [
TNSwiftyCheckboxModel(name: "Elephant with a very long proboscis", checked: false),
TNSwiftyCheckboxModel(name: "Tiger", checked: true),
TNSwiftyCheckboxModel(name: "Antilope", checked: false),
TNSwiftyCheckboxModel(name: "Monkey", checked: true),
TNSwiftyCheckboxModel(name: "Spider", checked: false)
]
a) If you added this class via CocoaPods, you should import the module at the top of your class
import TNSwiftyCheckboxGroup
b) Create an instance of TNSwiftyCheckboxViewController
and add it to the view controller.
checkboxVC = TNSwiftyCheckboxViewController()
addChildViewController(checkboxVC)
view.addSubview(checkboxVC.view)
checkboxVC.didMoveToParentViewController(self)
Set the checkboxModels
property with the array you created in step 1
checkboxVC.checkboxModels = checkboxModels
To add TNSwiftyCheckboxGroup to your Storyboard, you’ll have to do the following steps. Don’t worry it will be over before you can say Deoxyribonucleic acid
:-).
Drag a Container View
object out of the Object library onto your scene. Set constraints on it like you prefer.
Remove the attached view controller (this will be automatically added when you add the container view).
Drag a Collection View Controller
object out of the Object library. Note: you can safely remove the prototype UICollectionViewCell
Interface Builder added.
Ctrl + drag from the container view controller to the UICollectionViewController and select the embed
segue type.
Change the Custom Class
property of the UICollectionView to TNSwiftyCheckboxViewController
.
Now we need to feed the view controller an array with TNSwiftyCheckboxModel
objects. To do this we are going to work with prepareForSegue(_:sender:)
. Select the embed segue you created in step 3 and go to the Attribute inspector. Here you can set an identifier.
a) Open up you view controller class and implement the prepareForSegue(_:sender:)
method.
b) If you added this class via CocoaPods, you should import the module at the top of your class
import TNSwiftyCheckboxGroup
In this method we will first check for the correct segue.
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if( segue.identifier == "YOUR-SEGUE-IDENTIFIER" ) {
// Add code for step 9 here
}
}
Create an array with TNSwiftyCheckboxModel
object for every checkbox you want to be visualised.
var checkboxModels = [
TNSwiftyCheckboxModel(name: "Elephant with a very long proboscis", checked: false),
TNSwiftyCheckboxModel(name: "Tiger", checked: true),
TNSwiftyCheckboxModel(name: "Antilope", checked: false),
TNSwiftyCheckboxModel(name: "Monkey", checked: true),
TNSwiftyCheckboxModel(name: "Spider", checked: false)
]
The TNSwiftyCheckboxViewController
can be referenced via the segue.destinationViewController
property.
checkboxVC = segue.destinationViewController as! TNSwiftyCheckboxViewController
Set the checkboxModels
property with the array you created in step 9
checkboxVC.checkboxModels = checkboxModels
That’s it :-)
You can set your own class as the delegate of TNSwiftyCheckboxViewController
if you want to be informed when a checkbox its value gets changed. Just make your class conform to TNSwiftyCheckboxViewControllerDelegate
.
class YourViewController: UIViewController, TNSwiftyCheckboxViewControllerDelegate {}
Implement the method swiftyCheckboxViewController(viewController:checkedValueChangedTo:ofCheckboxModel:)
You can override the appearance of the class by setting your class to be the styling datasource. This just returns a Dictionary with type [String:AnyObject]. The keys of this dictionary are defined in the struct TNSwiftyCheckboxStyleOptions
.
Key | Explanation |
---|---|
CollectionViewWidthOfCell | The width of the checkbox cell. Default: 150 |
CollectionViewBackgroundColor | The background color of the collection view. Default: White |
FontOfNameLabel | The font of the name label. Default: System 12pt |
FontColorOfNameLabel | The font color of the name label. Default: #333333 |
PreferredWidthOfNameLabel | The preferred width for the name label. Default: 100 |
CheckboxOuterColor | The outer color for the built-in checkbox types. Default: #333333 |
CheckboxInnerColor | The outer color for the built-in checkbox types. Default: White |
CheckboxPadding | The padding between the inner and outer views of the build-in checkbox types. Default: 5 |
CheckboxUncheckedImageName | The image name for the unchecked image (defined in your image assets catalog), if you are using the TNSwiftyImageCheckboxView style. Default: unchecked-image |
CheckboxCheckedImageName | The image name for the checked image (defined in your image assets catalog), if you are using the TNSwiftyImageCheckboxView style. Default: checked-image |
For example:
func styleDictionaryForCheckboxView() -> [String : AnyObject] {
return [
TNSwiftyCheckboxStyleOptions.CheckboxOuterColor : UIColor.redColor(),
]
}
uncheckedModels
: returns an array with all the TNSwiftyCheckboxModel
objects that are currently in an unchecked state
checkedModels
: returns an array with all the TNSwiftyCheckboxModel
objects that are currently in an checked state
The TNSwiftyCheckboxGroup class has some convenience methods to ask information about the current state of your group.
areAllCheckboxesChecked
: Returns a bool if all checkboxes are checkedareAllCheckboxesUnchecked
: Returns a bool if all checkboxes are uncheckedIt is also possible to create your own checkbox cells and register them with the TNSwiftyCheckboxViewController. These are the steps you have to take.
Create a new class and subclass UICollectionViewCell
and check the field Also create XIB file. For this example I will name the class TriangleCollectionViewCell.
Open up your TriangleCollectionViewCell.swift file
Add the import statement at the top of your file
import TNSwiftyCheckboxGroup
Change the super class from UICollectionViewCell
to TNSwiftyCheckboxView
Before we continue, you can now create your custom checkbox view in Interface Builder.
Drag a UIView object from the Object library to your XIB file
Drag a UILabel object from the Object library to your XIB file
Give them constraints
Right click on the UIView you’ve created in step 1 and drag a referencing outlet to your Triangle Collection View Controller and choose checkboxContentView
Right click on the UILabel you’ve created in step 2 and drag a referencing outlet to your Triangle Collection View Controller and choose nameLabel
Select the top-level view (Triangle Collection View Cell) and go to the Attribute inspector to add a Reuse Identifier. Just name it the same way as your class file (in this case TriangleCollectionViewCell)
Now we just have to register our custom checkbox class with the TNSwiftyCheckboxGroupViewController. You do this by setting the type
property to .Custom
and register your own class by using the method registerCustomViewWithClassName(:)
.
In your own view controller, add the following code.
let vc = segue.destinationViewController as! TNSwiftyCheckboxViewController
vc.type = .Custom
vc.registerCustomViewWithClassName("TriangleCollectionViewCell")
vc.checkboxModels = checkboxModels
If you build and run you wil see your custom cells appear. But there isn’t any logic yet in your own class. There are a few methods you can override to add more awesomeness to your cell.
setup()
: in this method you can add extra views in code or add animations. Don’t forget to call super.setup at the end of this method. This will automatically setup the nameLabel
. Ofcourse if you want to do this on your own, don’t call super.setup()
:-)
checkCheckbox( checkValue:withAnimation: )
: This method gets called when a cell is (un)checked and is a good place to provide your own (un)checking animations.
To run the example project, clone the repo, and run pod install
from the Example directory first.
TNSwiftyCheckboxGroup is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "TNSwiftyCheckboxGroup"
Frederik Jacques, [email protected]
TNSwiftyCheckboxGroup is available under the MIT license. See the LICENSE file for more info.