Consolidation Day IX
Starting this at 18.00 on May 15th…
… in the key points I just discovered that all what I learnt in the Core Graphics tutorials is … old … but I wonder, how does a new student learn what is to use now and what should not be used anymore?
Thankfully Paul is updating things at a speed that the light has not yet reached but … I feel a bit lost in my research…
Today’s challenge is to create a meme generation app and it should do the following things:
- Prompt the user to import a photo from their photo library
- Show an alert with a text field asking them to insert a line of text for the top of the meme
- Show a second alert for the bottom of the meme
- Render the image plus both pieces of text into one finished
UIImageusing Core Graphics. - Let them share that result using
UIActivityViewController.
So, let’s get started.
Building the UI
I have no idea why I struggled with constraints but somehow the bottom constraint of the third button didn’t want to accept a greater than or equal constant so that it would adapt itself to other UIs but … boff… in the end I managed to just add an UIImageView, three UIButtons one above the other and then create one outlet and three actions with the assistant editor.
I’m not tremendously satisfied and I cannot even say that I am still learning because I am at day 97, I should be a bit more comfortable with this but, in the end, I know that it is all in the hours. At this point I have made something like 200hrs, not much more, and I feel that for the complexity of these things I should become comfortable at about double that level of investment.
Importing a picture
First I added a row in the Info.plist file to take into account the “Privacy – Photo Library Additions Usage Description”. I know this is not needed for the image picker controller but if I will add, at the end, a save option, this will be already done.
Second, I filled in the importPicture action method. After all this path I feel strange to use the @IBAction because I would feel more natural to add all the interface in code and then the selector method but this felt quicker and as I am already getting crazy in this period I would rather save every second possible. In any case, after this path is over, I have already planned to pass through all the projects once more and review everything as definitely it is not yet stuck in my brain. I also want to create a snippets library so that I do not have to reinvent the wheel every time!
Inside this method I declared a new UIImagePickerController(), set its .allowsEditing to true, its .delegate to self and presented it. Then I wrote asked for the didFinishPickingMediaWithInfo method. Again, I have no idea how declaring a function in a class automatically also calls it. There is no override, but it seems to work! Inside it I checked that there was an UIImage in the info dictionary at the .editedImage key, then dismissed the picker and set the imageView.image = image.
Building and running all this seems to work.
Show an alert with a text field asking them to insert a line of text for the top of the meme and another one for the bottom of the meme
I added two properties at the top of the class, both optional strings, called topText and bottomText. I then created an alert controller with a text field and a submit action that will set the value of the property to be the value of the text inside the text field.
I am already starting to see the shortcomings of this strategy because I would like to render the text on the image as soon as the submit button is pressed … I need to experiment a bit on this.
Render the image plus both pieces of text into one finished UIImage using Core Graphics.
20.37…
The trick here is: how can I render a single piece of UIImage if the source material comes from three different methods?
By now the text is not showing so it is possible that I should use two labels but it is not clear to me if the text should go over the image or above and below it. I just feel such an idiot right now … I do not really want to look at some other people’s code …
It seems I am miles away from the correct path.
22.01 … slowly descending into madness … I do not see any way out from here. I have three methods and no one can be used for what I need. I cannot create a renderer in viewDidLoad as that is not what is needed and or… because I cannot set a size for it that is sensible with the image…
22.45… wrote a render method when I discovered that the size of the image view needs to be extracted from its f****** frame… I know, at this point I should have known but… I did not remember, ok?
Inside this I performed the usual rendering preparation and, for first thing, I drew the image in a CGRect(x: 0, y: 0, width: imageView.frame.width, height: imageView.frame.height). I then set some paragraph style and the attributes then, through the help of some constants that will help me fine-tune the text frames positions I set two checks (conditional bindings) to see if the topText and bottomText properties would have some content and, if so, draw the attributed string at a sensible position.
At the end the usual imageView.image = image call. The most important part, though, is to call this render method at the end of the setTopText, setBottomText and the imagePickerController method.
22.50
Trying this thing out some things seem not to work as they should … First, the Content Mode for the image view is set to Aspect Fit but then when I build and import I get a totally stretched out image … Then, when I press the Set Top Text button and then the submit button, the text is not set until I tap on another button… Let’s try to see why.
23.12
The text now is rendering properly. The methods needed to be called from inside the alert controllers’ actions and not outside. Quite basic mistakes… Anyway, still no progress in the content mode of the image…
23.28
No progress still … I saw a colleague’s project and his image has an aspect ratio of 1:1 but this doesn’t seem to be the issue at all… Why is this happening? In the chosenImage?.draw call I set the image to draw from the 0, 0 coordinates… then even if I put imageView.frame.size.width (and height for what matters) instead of what I wrote before, absolutely nothing changes…
23.50
Now that I see… the image picker controller has a selection in the middle of the screen which has a 1:1 aspect ratio… so maybe I should do that?
Yes, that was it… I then needed to rework many constraints so that the app would look acceptable. Still, it looks ugly to me, and also some other apps I have seen in the proposed solutions are not beautiful at all. Functional? Yes, sure but … It is so strange that in all these first 90 days of course there was no real lesson on Auto Layout, only one on what it basically does and that’s it. How to solve the piles of s*** it causes are all on us.
00.39
Managed to create layout constraints that work down to the iPhone SE. Unfortunately I could not make it for the 4S but … may I be forgiven?
So, now, after almost six hours, the app is working.
Am I happier than when I started? Absolutely not…
Most of the things that were crucial to this app needed to be deducted with a total branching in the void… again, not a funny experience.
When I teach my cello students how to learn things by heart I always say: “Do not even fool yourself into thinking that studying something by heart is equal to closing the book and just playing it! You will never get anything out of it, apart from feeding frustration and muscle tension! You need to practice with the score very well wide open in front of you and, suddenly, one day, you will forget that you need to look!”
Why am I saying this? Because I feel so many things missing from these tutorials and so many things that we need to do completely alone losing countless amount of time! Come on, just teach us things and say: « Now close the book and try to replicate the same exact thing on your own! ». The first time you will not manage, you will open the book and copy once more, then close the book and try again until you manage. This kind of try to hit your head against the wall for free is really against my conception of pedagogy.
But far from me to say that this is Paul’s way… he is probably the best out there! From the Ray Wenderlich tutorials you get a maybe deeper explanation of the basics but then, after the 3rd or 4th video, you are assumed to be all-knowing and they go as fast as possible without explaining absolutely anything about what they are doing and, most of all, why!
I think in the future I will have to create my own teaching content for this as well as I am constantly unhappy with any teaching material I find … My problem? Most probably, but still I cannot let it be like it is!
Thank you for keeping up with me until now, you can find the finished project here.
Good night, world!
If you like what I’m doing here please consider liking this article and sharing it with some of your peers. If you are feeling like being really awesome, please consider making a small donation to support my studies and my writing (please appreciate that I am not using advertisement on my articles).
If you are interested in my music engraving and my publications don’t forget visit my Facebook page and the pages where I publish my scores (Gumroad, SheetMusicPlus, ScoreExchange and on Apple Books).
You can also support me by buying Paul Hudson’s books from this Affiliate Link.
Anyways, thank you so much for reading!
Till the next one!
Music Preparation Services 