Custom UIView with transparent background

In this post I will describe how to add custom UIView objects with transparent bacgground to your project.

In the Things Speak app I have a custom UIView where the different charts are presented. It is a really simple one, two subviews are being added with the charts to a standard UI element. The topmost subview is expected to have transparent bacground to not hide the other one, while the lower one has extra contents like chart guide lines, scales, etc. I nearly spent 3 hours to find what the problem is, based on the forums it seemed no one had the same problem before. Now, that I know what is the solution, it is pretty logic.

To demonstrate it, I created a small example. Full source code can be downloaded from here.

First, let’s see the custom view. It has a draw() function where a circle or a rectangle will be drawn. On a custom background color with custom drawing color.

Let’s create an instance of this view with a red circle on a white background.

The result will be the same as we expected:

Adding the second view with 50% transparency black background and a blue rectangle:

The result will be this:

Pretty good, but we would like to see the circle and the expected result would be a grey-ish background through a semi-transparent view. This black is definitely not what we want.

The key is to set the isOpaque parameter of the window. According to Apple if the opaque parameter is true, for the best user experience and for better performance anything covered by the view will be fully skipped from rendering, even if the background was set to transparent. Actually the set backround will be used instead of anything under it. If we set white transparent background, the result will be gray, but the circle is not visible.

So change back the background to black and set the isOpaque to false right before we are attaching the second view to the main view:

After the isOpaque has been set, the output is now ok:

Finally, to support rotation, add this function to your main view:

 

Things Speak 1.2 is waiting for review now

After a couple of days of struggling with the iPhone screen I finally managed to release a new build with many long awaited features. One of the app store review gave me the idea to extend the capabilities of the app with more chart types like column or filled lines. Now both of them are in the app.

Also timescale, average and sum is available now to reduce the visible measured points on a 10..1440 minutes base. So if you have a lot of data in the last 3 months, there is now an option to see the trends by selecting different functions.

Timescale values are the real measurements, while average and sum is the mathematical representations for the given period.

I have added a feature to update the last opened channel when the app resumes from the background (if it was not terminated by the iOS due to memory issues), but a new button was also added to have manual refreshing options.

Two new buttons were added to have a more precise input for start and end dates. If these are set, the app will collect data between the given dates.

I hope all of you will enjoy the new features.