Percentage based layouts using (mostly) Xcode IB and Autolayout

The Xcode lnterface Builder (IB) doesn't provide a clear way to handle a percentage based layout - for example, a screen where one view takes up 25% of the width of the screen, and the other view gets the rest.

---------------------------------------------------
|                    |                                              |
|                    |                                              |
|                    |                                              |
|        A         |                       B                     |
|                    |                                              |
|                    |                                              |
|                    |                                              |
---------------------------------------------------

Here's one way to use IB for all but a few lines of code.  (based on ideas from this stackoverflow post.)

For "view B", using Xcode IB, I put constraints on the top, right, bottom, and left
For "view A", using Xcode IB, I put constraints on the top, left, bottom, and then set the width to a fixed size.  I edited the width constraint of "view A", and checked the "placeholder remove at build time" checkbox.

then, in the view controller's viewDidLoad, I added these two lines:


    NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:viewA
                           attribute:NSLayoutAttributeWidth
                           relatedBy:NSLayoutRelationEqual
                            toItem:viewA.superview
                            attribute:NSLayoutAttributeWidth
                            multiplier:.25
                            constant:(CGFloat)0];
   

    [viewA.superview addConstraint:c];


This just makes viewA 25% of the size of it's superview.  Since viewB is tied to viewA's width, it also adjusts properly without having to specify extra constraints for it.

iOS 7.1 issues

x. Noticed that the tab bars don't work quite the same way.  I have an .xib that I use for both iPad and iPhone layouts.  With 7.1, the tab bar now appears to be larger on the iPad (56 pixels) but the .xib doesn't auto adjust the 'y' for the former size (which was 49 pixels).  What this does is make the tab bar looked clipped at the bottom on the iPad. 

The fix requires using autolayout to set up the tab bar.  Then it works for 7.1 and prior versions.   An alternative fix is checking the tab bar's y value in the view controller's viewWillLayoutSubviews method to make sure it is equal to viewController.view.frame.size.height - tabBar.frame.size.height;

x. In previous versions, setting the corner radius and border on a layer would implicitly mask that layer to the corner arcs.  This is no longer the case in 7.1.  Now, if you set the background color of a UIView, and then set the corner radius and a border, the border will show the corner arcs, but the background color will extend to the square corners.


x. Not sure if this is a 7.1 only, issue but noted that an application that used to work okay is now getting a weird autolayout error on the iPad when dismissing a modal view.  There's tons of unhelpful error diagnostics and it ends with:
 
Cannot find an outgoing row head for incoming head UILabel:0x1462c580.Width{id: 414}, which should never happen.'

I saw a few mentions of this error on the web but no real help.  I was able to avoid the error by changing the constraints on one of the ViewControllers' UILabels.  Originally the UILabel was constrained to top right left with a fixed height.  It works if set to top width height centered x.     I doubt that this is the "real" solution, but I wasn't able to find anything else that seemed to be the issue.   (Ugh. There's three hours of my life I'll never get back).

Update: Ran into this error again and burned another six or so hours.  It seems related to percentage based views in autolayouts but I haven't been able to narrow it down much further than that.

PERL Matching non-ASCII characters in a converted RTF

I have a data file that was converted from an RTF to a TXT.    When I started trying to parse it using PERL, my regular expressions weren't able to split up lines that looked like they had whitespace delimiters - It would just ignore the whitespace.

After my initial confusion, I figured that the whitespace must be something other than an ASCII space character, tab, etc.   By some experimentation, I noticed that there were several bytes being represented in that "whitespace".

To try and figure out what the bytes/characters were, I created a little PERL code segment that looked like:

while ($filecontents =~ /([^\d\w\s\t\.:;&\,\-\(\)]+)/){
    $f = $1;
    $d = $1;
   
    $f  =~ s/(.)/sprintf("%x ",ord($1))/eg;
    print "f is $f\n";
    $filecontents =~ s/$d/zzz/g;

}

Basically, the code goes thru the file, finds oddball characters and prints them out.  When I ran it, it produced the following:

   f is e2 80 83
   f is e2 80 a8
   f is e2 81 84
   f is c2 b0 
 
Note that each of those looks like a multi-byte character, but what are they?

Well, I do love the internet.  I cut and pasted e2 80 a8  into Google and found that it was an "em space", aka Unicode character \u2003.

Once I was able to get the Unicode character, I could just replace all of the em spaces with a regular space, and the rest of my program worked as designed.  Same idea with the other special characters.  Two of those characters were not whitespace, but were non-ASCII characters as well (fraction slash and degree symbol).

Note that, at least in my case, I had to match using the hex versus the unicode character. In other words

    $filecontents =~ s/\xe2\x80\xa8/ /g;

I'm assuming this is because the Unicode would be a UTF-16 character but I'm dealing with a UTF-8 encoding?   For next time, I should see if I can export the RTF to a UTF-16 text file.  Maybe it would be easier :)

UIWebView, URL history, and redirects

Sometimes it seems the simplest things turn out to be much more complicated than they should be.

In several of our apps, we include help files written in HTML which are loaded locally from the bundle into a UIWebView.  Sometimes those help files contain links to web pages.

The problem is that UIWebView doesn't treat locally loaded webpages as part of the history stack.  Thus if the user clicks a link and visits a web page, there is no simple way for the app to return to the original locally loaded HTML file because [webview canGoBack] returns NO.  Grr.

My first attempt to deal with the issue was to just reload the local file if [webview canGoBack] was NO.  However, if the same locally loaded HTML file contains two web pages, and the user visits each, after the attempt to return from the 2nd webpage,  [webview canGoBack] will return YES and [webview goBack] will display the first webpage, because the first webpage was never removed from the UIWebView's history, and there's apparently no way (that I was able to find) to get rid of it.  Grrr.

The next step was to try and maintain my own count of visited URL's and back out of them as the user clicked the back button.   I implemented this by adding to the count in the UIWebView delegate method shouldStartWithRequest when the navigationType was UIWebViewNavigationTypeLinkClicked and removed them with each click of the back button.  Great!  Except that redirects also load with a navigationType of UIWebViewNavigationTypeLinkClicked so the user would have to click "back" several times for no clear reason because the link count was incremented for each redirect.  Grrrr.

I was able to finally make it work with some insight from this tutorial.  The key I learned was that  the webViewDidFinishLoad delegate method is not called until the redirects have been resolved. (But it may call the method several times as it loads the contents of the page).

Below are the key elements of the code:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
   
    // we use the linkClicked boolean because with redirects, this method is still called multiple times and we only want
    // to increment once.
    if (linkClicked == NO && navigationType == UIWebViewNavigationTypeLinkClicked){
        linkClicked = YES;

        if (linkStack == 0){
            scrollOffset = webView.scrollView.contentOffset;
        }
        linkStack++;
    }
   
    return YES;
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    if (linkStack == 0 && scrollOffset.y > 0){
        // reset the scroll if we are coming back to a page after a clicked link.
        [wv.scrollView setContentOffset:scrollOffset];
        scrollOffset = CGPointMake(0, 0);
    }
   
    NSURLRequest* request = [webView request];
    if ([[request mainDocumentURL] isEqual:lastMainDoc])
        return;
   
    linkClicked = NO;
    [self setLastMainDoc:[request mainDocumentURL]];
   
    NSLog(@"finished loading %@", [[request mainDocumentURL] absoluteString]);
   
}

-(void)doBack:(id)sender
{
   
    if (linkStack > 0){
        if (linkStack == 1 || [wv canGoBack] == NO){
            [self loadFile];

        } else {
            linkStack--;
            [wv goBack];
        }
        return;
       
    }
}


- (void)loadFile
{
    // load local HTML file
    //....
}


I'm sure there are a few other ways to address this problem, but this is what worked for me....

Using -webkit-tap-highlight-color

In earlier versions of mobile safari  if you used -webkit-tap-highlight-color on a link, you'd also have to specify the active color.  That would give you a nice contrast.  However, since about iOS 5 that no longer works - both the foreground and background are set to the highlight color.

To be able to see the text now, it seems that you need a transparent color.  This works:

-webkit-tap-highlight-color:rgba(26,26,26,.5);

Wrapping text around an image AND stopping the wrap.

I like being able to use HTML to wrap text around images.  It looks professional and it's a simple way to inject some cool in an HTML page.

However, sometimes the image is bigger than the text, and at that point you may want to start a new paragraph that is beyond the image.  I was never able to find out how until today:  Just needs

<BR CLEAR="left"> 


See? Down here now! Note that "left" can be other values (e.g., "right","all") to configure appropriately.

Using Google TTS (text to speech)

I was doing some investigation on Text-To-Speech (TTS) for iOS and found a little snippet of code that could be added to any app for some quick TTS.

The catch is that it's limited to just 100 characters and you never know when Google might pull the plug on it, but still, it's pretty cool.


#import <AVFoundation/AVFoundation.h>

...

    NSString *linkTTS = [NSString stringWithFormat:@"http://translate.google.com/translate_tts?tl=en&q=%@",@"this+is+really+quite+cool"];
   
    NSData *dataTTS = [NSData dataWithContentsOfURL:[NSURL URLWithString:linkTTS]];
   
    AVAudioPlayer *_googlePlayer = [[AVAudioPlayer alloc] initWithData:dataTTS error:nil];
    [_googlePlayer play];