Skip to content

Simulator Indicator Widget

Cristina Suciu edited this page Dec 23, 2020 · 2 revisions

Widget will display the current state of the simulator.

The simulator indicator has three states:

  • Active
  • Inactive
  • Disconnected

Usage

To add the widget to an existing view controller in code, use the convenience method:

- (void)installInViewController:(nullable UIViewController *)viewController

this adds the widget as a subview of the viewController passed as an argument. Then, add constraints to the widget using its widgetSizeHint property to determine width, height and aspect ratio constraints.

To create the widget from a storyboard, use the object library to drag a container view controller into the desired view controller like so:

Make sure to change the child view controller class name to DUXBetaSimulatorIndicatorWidget. From here you can create the constraints on the container view using widgetSizeHint property.

The ideal dimension ratio for this widget is 1:1.

Customizations

The simulator indicator widget supports customization of the icon image, icon background color and icon tint color for any of the three states, in order for the user interface to match the style of the user's application.

Swift Example

widget.setImage(UIImage(named: "simulator_active.png")!, for: DUXBetaSimulatorIndicatorStateActive)
widget.setTintColor(UIColor.green, for: DUXBetaSimulatorIndicatorStateActive)
widget.setImage(UIImage(named: "simulator_inactive.png")!, for: DUXBetaSimulatorIndicatorStateInactive)
widget.setTintColor(UIColor.white, for: DUXBetaSimulatorIndicatorStateInactive)
widget.setImage(UIImage(named: "simulator_disconnected.png")!, for: DUXBetaSimulatorIndicatorStateDisconnected)
widget.setTintColor(UIColor.gray, for: DUXBetaSimulatorIndicatorStateDisconnected)
widget.backgroundColor = UIColor.clear

Objective-C Example

[widget setImage:[UIImage imageNamed:@"simulator_active.png"] forState:DUXBetaSimulatorIndicatorStateActive];
[widget setTintColor:[UIColor greenColor] forState:DUXBetaSimulatorIndicatorStateActive];
[widget setImage:[UIImage imageNamed:@"simulator_inactive.png"] forState:DUXBetaSimulatorIndicatorStateInactive];
[widget setTintColor:[UIColor whiteColor] forState:DUXBetaSimulatorIndicatorStateInactive];
[widget setImage:[UIImage imageNamed:@"simulator_disconnected.png"] forState:DUXBetaSimulatorIndicatorStateDisconnected];
[widget setTintColor:[UIColor grayColor] forState:DUXBetaSimulatorIndicatorStateDisconnected];
[widget setBackgroundColor:[UIColor clearColor]];

Full list of properties

List of the customizable properties
  • @property (nonatomic, strong) UIColor *backgroundColor - The current background color of the icon.
  • (void)setImage:(UIImage *)image forState:(DUXBetaSimulatorIndicatorState)state - Set the icon image for a given state.
  • (UIImage *)getImageForState:(DUXBetaSimulatorIndicatorState)state - Get the icon image for a given state.
  • (void)setTintColor:(UIImage *)image forState:(DUXBetaSimulatorIndicatorState)state - Set the icon tint color for a given state.
  • (UIColor *)getTintColorForState:(DUXBetaSimulatorIndicatorState)state - Get the icon tint color for a given state.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget.

The Simulator Indicator widget provides two types of hooks

  1. DUXBetaSimulatorIndicatorWidgetModelState - Provides hooks in events received by the widget from the widget model.
  • + (instancetype)productConnected:(BOOL)isConnected - Event when product is connected or disconnected.
  • + (instancetype)simulatorStateUpdated:(BOOL)isActive - Event when simulator state is updated.
  1. DUXBetaSimulatorIndicatorWidgetUIState - Provides hooks in events related to user interaction with the widget.
  • + (instancetype)onWidgetTapped - Event sent when widget is tapped.
Clone this wiki locally