Add Custom Tools
If your customization needs go beyond styling menu items and replacing icons, you define custom tool controls by overwriting the tool controllers. In this example, we are adding a custom control for an annotation tool which extends the brush tool to offer several pre-defined pens of different color, size and hardness to allow quick selection of an optimal pen for annotation.
Create custom menu item#
We first create a custom menu item to be displayed alongside other tool icons in the toolbar.
To that end we create a
UIImage from an icon in our bundle and pass it to a
ToolMenuItem constructor along with the tool title and the tool controller class for our custom tool.
When we configure the editor we have to be sure to include this custom menu item to the array of menu items that is assigned to the
menuItems configuration option.
Implementing the custom annotation tool#
Define menu items for the annotation tool#
Before we dive into implementing the custom annotation controller, we need to set up the menu items to be displayed inside the tool.
Since each menu item corresponds to a pen of a specific color. size and hardness the
AnnotationMenuItem needs to store that data as instance variables.
isEqual allows operations on collection of menu items such as diffing.
Finally, we define
AnnotationListSectionController as section controller responsible for rendering the menu of the custom tool.
Set up the menu item section controller#
AnnotationListSectionController subclasses the
MenuListSectionController. The method
cellForItem defines what is to be displayed for a given menu items.
In our example, we create an image with the background color of the annotation pen and the title as label.
UIImage is extended in our example to generate an image of a given color, size and border radius.
didUpdate updates the current annotation menu item when one is selected.
Define the annotation tool controller#
Now we can finally turn to our custom annotation controller which extends the
BrushToolController. The method
viewDidLoad is called when the tool screen loads and is used to set up the tool.
In our example, we add the annotation menu items we want to make available to the
menuViewController's (see below) menu items and initialize the slider values of the
configureToolbarItem allows us to control the appearance of our tools toolbar item such as label text and font.
menuViewController method allows us to define what happens when a menu item is selected.
Since the last
AnnotationMenuItem we added in the
CustomToolController should allow the user to define their own annotation pen freely, we delegate to the
BrushToolController if the menu item's
In all other cases, we retrieve the pen properties from the menu item and assign them to the respective