Weather Views

The AerisUI.framework component of our AerisWeather iOS Weather SDK provides a series of built-in weather views that allow you to quickly add weather content to your own project. These views are highly customizable based on a stylesheet so you can style fonts, colors and backgrounds any way you want.

The best way to familiarize yourself with the built-in weather views is to review the demo AerisCatalog project that comes with the SDK download. Some of these views are explained in more detail throughout our Examples pages.


Available Weather Views

For the full listing of built-in weather views currently available in the SDK, review the Weather Views reference matrix.

Styling Weather Views

The weather views are subclasses of AWFStyledView, which means you can assign a custom stylesheet to the view and even change it dynamically at runtime. Each stylesheet is a singleton instance of AWFCascadingStyle and provides read-only properties for styling various elements within styled views, such as background and font color.

The AerisWeather iOS SDK comes with two built-in stylesheets: a light style inspired by iOS 7 (AWFCascadingStyle), and the legacy style used in 1.0 of the SDK (AWFLegacyStyle). To create your own stylesheet, you must subclass AWFCascadingStyle and override the default values for each of the properties you wish to customize.

For instance, if you want to change the background color from the default of white to a light blue and the header background color to dark blue, you would override these properties in your subclass’s init method:

// subclass interface
@interface MyCustomStyle : AWFCascadingStyle


// subclass implementation
@implementation MyCustomStyle

- (instancetype)init {
	self = [super init];
	if (self) {
		self.backgroundColor = [UIColor colorWithRed:0.290 green:0.735 blue:0.947 alpha:1.000];
		self.headerBackgroundColor = [UIColor colorWithRed:0.039 green:0.313 blue:0.457 alpha:1.000];
	return self;


Then you can apply it to your weather views:

[self.weatherView applyStyle:[MyCustomStyle style]];

This will instantly update the background and font colors on the receiving weather view. You can also set a default style to be used globally across your application.

Setting a Default Style

Instead of assigning your custom style to each weather view instance within your project, you can set a default style that each weather view will use globally when created. You need to make sure you have created a custom subclass of `AWFCascadingStyle` with your style property values, and since this is a singleton object it’s only created once and can be referenced globally throughout your project. It’s recommended to assign the default style within your AppDelegate before any views have been loaded, typically after initializing AerisEngine with your access keys:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
	self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

	[AerisEngine engineWithKey:@"__CLIENT_ID__" secret:@"__CLIENT_SECRET__"];
	// set the global style to use for all Aeris weather views
	[AWFCascadingStyle setDefaultStyle:[MyCustomStyle style]];

	self.window.backgroundColor = [UIColor whiteColor];
	[self.window makeKeyAndVisible];

	return YES;

Styling Text

Along with customizing background and font colors, you can also modify the text appearance for various elements within weather views using text specifications, AWFTextStyleSpec.

Text style specs define how text should appear within a text label in weather views and are essentially the same style properties you find on `UILabel`, such as `backgroundColor`, `textColor` and shadowColor. In order to customize a label’s appearance within a weather view, you also need to override the default text style specs on your custom stylesheet instance by providing new text style specs for each property you want to change:

@implementation MyCustomStyle

- (instancetype)init {
	self = [super init];
	if (self) {
		// create the text style spec
		AWFTextStyleSpec *defaultTextStyle = [[AWFTextStyleSpec alloc] init];
		defaultTextStyle.font = [UIFont systemFontOfSize:12.0];
		defaultTextStyle.textColor = [UIColor colorWithWhite:0.1 alpha:1.000];

		// override the default text style for this stylesheet
		self.defaultTextStyle = defaultTextStyle;
	return self;


Text style specs can also be used outside of weather views and stylesheets throughout your application if you want to have a central location for managing the appearance of text labels. To apply a text style spec to a specific text label, just use the public method applyToLabel: available on each AWFTextStyleSpec instance. If you want to apply a text style but use a difference font size than what that spec dictates, you can use the method applyToLabel:withFontSize: to force a specific font size on the text label:

// create the text style spec
AWFTextStyleSpec *customTextSpec = [[AWFTextStyleSpec alloc] init];
customTextSpec.font = [UIFont systemFontOfSize:12.0];
customTextSpec.textColor = [UIColor colorWithWhite:0.1 alpha:1.000];

// apply text styles to label
[customTextSpec applyToLabel:self.myTextLabel];

// apply text styles to label with a different font size
[customTextSpec applyToLabel:self.myTextLabel withFontSize:30.0];

Using Weather Views Within a Collection View

For some views and weather data types, you may want to display multiple instances of a weather view in a collection, such as when displaying a multi-period forecast or a list of nearby observations. For certain weather views, specifically those related to forecasts and observations, there are UICollectionViewCell subclasses available that provide an instance of the corresponding weather view accessible by a public weatherView property you will need to use for setting the data on the view.

AWFForecastPeriod *period = self.forecast.periods[indexPath.row];
AWFCollectionViewForecastRowCell *forecastCell = (AWFCollectionViewForecastRowCell *)cell;
forecastCell.weatherView.hightempLabel.text = [NSString stringWithFormat:@"%.0f%@", period.maxTempF, AWFDegree];
forecastCell.weatherView.lowtempLabel.text = [NSString stringWithFormat:@"%.0f%@", period.minTempF, AWFDegree];

If there isn’t a UICollectionViewCell subclass supported within the SDK for the weather view you want to use in a collection, you can just create your own subclass that contains a single instance of that weather view to use.

Last modified: July 29, 2020