A widget dancing on a needle with shackles on its legs

Since iOS 10, when Apple made a major revision to widgets, many people have developed their own widgets. There are also many tutorials online that tell you how to quickly develop a widget. This article will not repeat those simple things like creating extensions and adding certificates. We need to take a deeper look at what a widget should look like.

Do you really understand the size of the widget?

First, the widget has two states

 typedef NS_ENUM(NSInteger, NCWidgetDisplayMode) {
    NCWidgetDisplayModeCompact, // Fixed height
    NCWidgetDisplayModeExpanded, // Variable height
 }

Most online tutorials will tell you that if you want to change the height of a widget, you should do this in the following method:

 - (void)widgetActiveDisplayModeDidChange:(NCWidgetDisplayMode)activeDisplayMode withMaximumSize:(CGSize)maxSize {
    if (activeDisplayMode == NCWidgetDisplayModeCompact) {
        self.preferredContentSize = CGSizeMake(maxSize.width, 110);
 } else {
        self.preferredContentSize = CGSizeMake(maxSize.width, 300);
 }
 }

This means that even if the folded state is 110, the expanded state is 300. Because if you write 120 in the folded state, the height is still 110, and this height will not change. In the expanded state, of course, a value smaller than maxSize.height must be taken. So what is the value of maxSize?

However, I want to tell you that the height is not a fixed value at all! And it can be considered irregular!!!

Because the ultimate rule of the maxSize limit of the entire widget is to change according to the system font size.

Whether in the folded state or the expanded state. In other words, it is wrong to directly write 110. Because under the default system font, the folded height is indeed 110. But once the system font is changed to the smallest, the height of the widget in the folded state is only 95, and when the system font is the largest, the height of the widget in the folded state is 140. The system font size has 7 levels. In other words, the folded height is related to the font size, but not linearly.

It can be verified that the folding height is 95-100-105-110-120-135-140, and it cannot be modified.

The folded height is fine. The unfolded height is also a non-linearly related height (and this is when the folded height is uniform).

The following discussion on expansion heights fixes the system font size as the default size and controls the variables (the final size result, in theory, multiplied by 7 is the total possible height).

First of all, there are differences in the models. Of course, the smaller the phone screen, the smaller the expanded height will be. This is actually acceptable. At worst, we can develop according to the smallest screen. However, I want to tell you that the widget's maximum height will still change!

This is our most common widget entry, which is the Today page when you swipe left on the screen.

However, there is actually another entrance, which is to swipe left on the pull-down notification page.

When these two entrances come in, the maximum height of the widget in the expanded state will be much smaller than the former!

It is easy to verify by looking at the maxSize breakpoint. In the default font size of iPhone7, the maxSize.height of the first entry is 616, while in the other case, this value becomes 528.

At this point, I really want to ask Apple, what on earth is this trying to do?

There is actually a third entry point, which is the 3D touch app icon, which also has a widget, but that one is only in the folded state.

That is to say, at present, there are 7 sizes in the folded state, and each screen size has 7*2 sizes in the unfolded state. That is to say, if the three mainstream screen sizes of 4 inches, 4.7 inches, and 5.5 inches are to be adapted, the unfolded state will have 7*2*3=42 sizes.

Seeing this, you can say, it doesn't matter, I'll just take the minimum height of 4-inch devices. This depends on whether your designer can agree.

Do you think it’s over? Let alone the iPad, let’s not consider that. If it can hold an iPhone, it can certainly hold an iPad as well.

But you really can't imagine that the 5.5-inch Plus model in landscape mode is also different sizes. In the Plus horizontal mode, the maximum height of the first entrance is only 352, and the maximum height of the second entrance is only 264...

What does this mean? In the *** font case, the folded state has a height of 140, and the unfolded state is less than twice the folded height.

If you are interested in widget size adaptation and have a solution, please contact me and I will reward you handsomely.

Do you feel blinded?

If you add a lot of widgets, you will find that just swiping up and down in the list can be blinding.

The update mechanism of the widget itself is to execute the viewDidLoad method first and then the viewWillAppear method after entering the widget.

However, after testing, every time a widget slides up or down and slides out of the screen, and then swipes the widget back, the above refresh mechanism will be used.

Due to the above characteristics, the update code should be written in the viewWillAppear method. For apps with particularly strong timeliness, such as weather apps, the best way is to add an NSTimer to the method for scheduled refresh, and cancel the NSTimer invalidate scheduled update in the viewWillDisAppear method.

Alternatively, you can implement caching yourself, which can also be optimized. If the requested data is consistent with the current data content, then do not refresh the list.

The widgets of many apps such as Zhihu and Get will flash as long as they use the viewDidLoad method, because each time the widget loads the requested data, it will be replaced.

As for why it refreshes as soon as you are out of sight and come back, I guess it is because of memory problems.

The memory requirements of widgets are outrageous. Once there is a gif in your widget, it basically cannot be displayed at all, and it will show that it cannot be loaded after a while. Not only that, repeatedly scrolling the widget page back and forth to refresh it will also cause the memory usage to increase. I am not sure if this is an Apple bug, but in my own tests, I try to make the memory usage of a single widget less than 15M, so the chance of being killed is very small.

Therefore, when I was developing, I only took the last frame of the gif image, and tried not to actively refresh the UI to keep the widget memory at a low level.

And because the extension cannot actually directly use the frameworks in the main target, I also wrote some basic functional components.

The first is of course the cache system, and image cache is particularly critical, because the characteristics of widgets will be refreshed repeatedly, and if there is no cache system, it will be a huge waste. The first is image cache:

 #import "QDTEImageCache.h"  
 #import <CommonCrypto/CommonDigest.h> 
 
 @implementation QDTEImageCache 
 
 + (instancetype)shareImageCache {
 static dispatch_once_t once;
 static id instance;
 dispatch_once(&once, ^{
        instance = [self new];
 });
 return instance;
 } 
 
 - (BOOL)isExistCacheForKey:(NSString *) key {
 key = [self cachedFileNameForKey: key ];
    NSString *filePath = [[self getCachePath] stringByAppendingPathComponent: key ];
 return [[NSFileManager defaultManager] fileExistsAtPath:filePath];
 } 
 
 - (NSData *)getImageDataForKey:(NSString *) key { 
     
    if ([self isExistCacheForKey: key ]) {
 return [NSData dataWithContentsOfFile:[[self getCachePath] stringByAppendingPathComponent:[self cachedFileNameForKey: key ]]];
 }
 return nil;
 } 
 
 - (void)saveToCacheWithData:(NSData *)data forKey:(NSString *) key {
 key = [self cachedFileNameForKey: key ];
    NSString *filePath = [[self getCachePath] stringByAppendingPathComponent: key ]; 
     
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        [data writeToFile:filePath atomically:YES];
 }); 
     
 } 
 
 - (NSString *)getCachePath {
    NSFileManager *fileMgr = [NSFileManager defaultManager];
    NSString *containerPath = [[fileMgr containerURLForSecurityApplicationGroupIdentifier:@ "group.com.XXXXXXX" ] path]; 
     
    NSString *path = [containerPath stringByAppendingString:@ "/Caches/" ];
    if (![fileMgr fileExistsAtPath:path]) {
        BOOL res = [fileMgr createDirectoryAtPath:path
                      withIntermediateDirectories:YES
                                       attributes:nil
                                            error:nil];
 if (!res) {
 return nil;
 }
 } 
     
 return path;
 } 
 
 - (NSString *)cachedFileNameForKey:(NSString *) key {
    const char *str = [ key UTF8String];
 if (str == NULL ) {
 str = "" ;
 }
    unsigned char r[CC_MD5_DIGEST_LENGTH];
    CC_MD5(str, (CC_LONG)strlen(str), r);
    NSString *filename = [NSString stringWithFormat:@ "%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%@" ,
                          r[0], r[1], r[2], r[3], r[4], r[5], r[6], r[7], r[8], r[9], r[10],
                          r[11], r[12], r[13], r[14], r[15], [[ key pathExtension] isEqualToString:@ "" ] ? @ "" : [NSString stringWithFormat:@ ".%@" , [ key pathExtension]]]; 
     
 return filename;
 }
 @ end  

A very basic image cache, which works with the file management class to manage the response returned by the interface:

The controller sends a request and caches and compares the response data when it receives it.

 - (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
    [self.jsonData appendData:data];
    NSDictionary *dic = [[NSJSONSerialization JSONObjectWithData:self.jsonData options:NSJSONReadingMutableContainers error:nil] copy]; 
     
 if (dic == nil) return ; 
     
 self.jsonData = nil; 
     
    NSDictionary *metaDic = [dic valueForKey:@ "meta" ]; 
     
    if ([[metaDic valueForKey:@ "status" ] integerValue] == 200) { 
         
        NSArray *papers = [[dic valueForKey:@ "response" ] valueForKey:@ "papers" ];
        NSDictionary *paperDic = [papers firstObject]; 
         
        [_fileMgr saveToCacheWithRawDic:paperDic]; 
         
        QDTELabModel *labModle = [self modelFromRawDic:paperDic]; 
         
        if (labModle.article_id.longValue == self.labModel.article_id.longValue) return ; 
         
        self.labModel = labModle;
        dispatch_async(dispatch_get_main_queue(), ^{
 for (UIView *subView in self. view .subviews) {
                [subView removeFromSuperview];
 }
            [self refreshContentView];
 });
 }
 }

File management class is used to store

 #import "QDTEFileManager.h"   
 
 @implementation QDTEFileManager
 + (instancetype)shareManager {
 static dispatch_once_t once;
 static id instance;
 dispatch_once(&once, ^{
        instance = [self new];
 });
 return instance;
 } 
 
 - (NSDictionary *)getUserinfo {
    NSFileManager *fileMgr = [NSFileManager defaultManager];
    NSString *containerPath = [[fileMgr containerURLForSecurityApplicationGroupIdentifier:@ "group.com.XXXXXX" ] path]; 
     
    NSString *filePath = [containerPath stringByAppendingPathComponent:@ "QDUserinfo.json" ];
    if ([fileMgr fileExistsAtPath:filePath]) {
 NSError *error;
 return [[NSJSONSerialization JSONObjectWithData:[NSData dataWithContentsOfFile:filePath] options:NSJSONReadingMutableContainers error:&error] copy];
 }
 return nil;
 } 
 
 - (NSDictionary *)getRawDicFromCache {
    NSFileManager *fileMgr = [NSFileManager defaultManager];
    NSString *containerPath = [[fileMgr containerURLForSecurityApplicationGroupIdentifier:@ "group.com.XXXXXX" ] path];
    NSString *path = [containerPath stringByAppendingString:@ "/Caches/" ];
    NSString *filePath = [path stringByAppendingPathComponent:@ "QDLabCache.json" ]; 
     
    if ([fileMgr fileExistsAtPath:filePath]) {
 NSError *error;
        NSDictionary *rawDic = [[NSJSONSerialization JSONObjectWithData:[NSData dataWithContentsOfFile:filePath] options:NSJSONReadingMutableContainers error:&error] copy];
 return rawDic;
 }
 return nil;
 } 
 
 - (void)saveToCacheWithRawDic:(NSDictionary *)rawDic {
    NSFileManager *fileMgr = [NSFileManager defaultManager];
    NSString *containerPath = [[fileMgr containerURLForSecurityApplicationGroupIdentifier:@ "group.com.XXXXXX" ] path]; 
     
    NSString *path = [containerPath stringByAppendingString:@ "/Caches/" ];
    BOOL res = [fileMgr createDirectoryAtPath:path
                  withIntermediateDirectories:YES
                                   attributes:nil
                                        error:nil];
 if (!res) {
 return ;
 }
    NSString *filePath = [path stringByAppendingPathComponent:@ "QDLabCache.json" ]; 
     
    if ([NSJSONSerialization isValidJSONObject:rawDic])
 {
 NSError *error;
        NSData *jsonData = [NSJSONSerialization dataWithJSONObject:rawDic
                                                           options:NSJSONWritingPrettyPrinted
                                                             error:&error]; 
         
        dispatch_async(dispatch_get_global_queue(0, 0), ^{
            [jsonData writeToFile:filePath atomically:YES];
 });
 }
 } 
 
 - (NSString *)getServerIP
 {
 if ([self getDEBUG]) {
        NSFileManager *fileMgr = [NSFileManager defaultManager];
        NSString *containerPath = [[fileMgr containerURLForSecurityApplicationGroupIdentifier:@ "group.com.XXXXXX" ] path]; 
         
        NSString *filePath = [containerPath stringByAppendingPathComponent:@ "QDServerIP.json" ]; 
         
        if ([fileMgr fileExistsAtPath:filePath]) {
 NSError *error;
            NSArray *serverIPArr = [[NSJSONSerialization JSONObjectWithData:[NSData dataWithContentsOfFile:filePath] options:NSJSONReadingMutableContainers error:&error] copy];
 return serverIPArr.firstObject;
 }
 }
 return @ "http://app3.qdaily.com" ;
 } 
 
 - (BOOL)getDEBUG {
 #ifdef DEBUG
 return YES;
 #elif BETA
 return YES;
 # else  
 return   NO ;
 #endif
 }
 @ end  

***This is the file structure of one of my widgets.

Although the widget is small, I still tried to make it as complex as possible when I was developing it. After all, this kind of thing, once developed, will almost never be touched again. After all... dancing on the tip of a needle with shackles is too tiring 😂.