Design pattern: Decorator Pattern

Tram Ho

Design pattern – Decorator pattern

To continue with the series of learning and understanding Design Pattern in IOS programming, today I will present the insights I have learned and researched on Decorator pattern – This is a structural pattern of structural group and has many applications. in not only in IOS but also in other programming languages ​​as well.

This article is still the same as the previous ones I still follow the 3-part layout:

  • Overview of Decorater pattern
  • Using
  • Decorater pattern application in iOS programming

Overview of Decorater pattern

As mentioned above, the Decorator pattern is a pattern in the structural pattern group. Decorator was born to allow users to add new features to an existing object without changing its class structure.

Features of Decorator:

  • Flexible addition of new properties to an object.
  • The original Object does not change or knows anything about the added stuff.
  • There is no need to build a huge class with everything inside because the root object will be wrapper in component objects.
  • The objects are independent and can be combined with each other so it is suitable for continuous expansion system.

It can be said that this pattern is quite close to inheritance but the implementation will be at the object level instead of the class. The extension by decorator is flexible expansion instead of extending in the static direction as inherited.

  • Expanding in a flexible way : we will provide a mechanism that allows us to change an existing object but not affect other objects in the same class.
  • Expand in static direction : that is, when we expand the method, we will apply the change to all objects of this class.

If a class marked as final, it cannot be inherited from that class. To expand, we must use Decorator

Decorator components are described in the following UML schema.

in which:

  • The common Component : Protocol (interface) will be implemented by objects that need additional functionality at runtime.
  • ConcreteComponent : Defines an object that needs additional functions during runtime.
  • Decorator : A class that maintains a reference of the component object and simultaneously installs the components of the Component.
  • ConcreteDecorator : An implementation of Decorator, which installs additional components at the beginning of the component objects.


Let’s go into an example called ShapeDecorator to better understand how to implement and operate this pattern. This example simply creates an original object that is the shape and then proceeds to use decorators to decorate and customize the object.

To embark on an example, we must first create a singleView playground and test it, we get the following.

According to the components of Decorator, we will create Shape as a component . A shape is a protocol that has a common function to be implemented, specifically draw () and returns a CAShapeLayer .

Next we proceed to create to the ConcreteComponent namely Circle and Rectangle .

Circle will need two more properties to define that arcCenter and radius and Rectangle will need to define the input Frame. Then implement the draw () function of each shape.

So the finished ConcreteComponent and ConcreteComponent . The next step is to define Decorator and ConcreateDecorator .

Decorator we define as ShapeDecorator is a protocol that implements Component and contains a reference to Component.

To decorate or customize the original Object we need to create ConcreteDecorator. Specifically here is

  • AddBorderDecorator to add borders
  • AddShadowDecorator to add shadows
  • AddConnerRadiusDecorator to add connerRadius.

These ConcreteDecorator implement ShapeDecorator also have the methods and properties necessary for each specific type as follows:

So we have finished the Decorator components. Now run and see the result. When creating PlayGround with pre-written class MyViewController . In the loadView () function, we initialize the objects and run:

In the above code I have created 2 objects that are circles and rectangles then proceed to add borders and shadows to the rectangle. The circle only adds shadow. After running we get:

Through this example you will understand Decorator and how to use it in ios programming. It is quite simple, isn’t it?

Next I will go into the application in practice, how much Decorator is applied.

Decorater pattern application in iOS programming

In iOS programming, I found Decorator is pretty much specific application as follows:

In Cocoa, there are settings with some fairly common objects that every ios developer knows that is

  • NSAttributedString : is a decorator of NSString with attributes such as font, color or underline …
  • NSScrollView : Instead of re-implementing all scrolling capabilities in all objects, Cocoa provides scrolling by decorating the objects with an NSClipView object and then alternatively decorating them with an NSScrollView object. NsClipView hides the parts of the view that it decorate.
  • UIDatePicker : in fact a UIpickerView decorator, we can from UipickerView add different properties to create a completely new type of Uidatepicker.

In addition, Category , Delegation in Objective-C and Extention , Delegation in Swift are all instances of Decorator but do not encapsulate an instance of the expanded class.

Share the news now

Source : Viblo