Practical Instruments - Part 7: Energy | Ray Wenderlich

🎓 Courses & Articles
1

Learn what kinds of things can affect your app's energy usage as well as some strategies for tracking down and fixing problems.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/4065-practical-instruments/lessons/7
2

Hey @luke_parham
Where do I find the challenge that you mentioned at last in the video for core Animations?

3

Please check out the challenge pdf file from the download materials folder for this video when you get a chance. Thank you! :]

4

Thank you @shogunkaramazov

5

@luke_parham After learning all this videos, I have some questions, As we all know, code like below will cause off-screen rendered.

imageView.layer.cornerRadius = CGRectGetHeight(imageView.bounds)/2.0
imageView.layer.masksToBounds = true

so

  1. what is the best practice of circular view or image ? and if there is no best practice, could you give me some strategies and when to use them.
  2. what is off-screen rendered and why using masksToBounds will cause off-screen rendered, could you explain all of these ? I really don’t understand what happened under the ground
6

@luke_parham Can you please help with this when you get a chance? Thank you - much appreciated! :]

7

Hey @ys_xs, did you get a chance to do the challenge for the Core Animation video yet? That should explain a few options for fixing offscreen rendering, specifically when it comes to circular images.

In general: offscreen rendering happens when the system needs to create a bitmap in memory before rendering something to the screen. In my understanding, this can happen when you ask UIKit to do something but don’t give it enough information.

For example: if you try to add shadows to a UIView, you can do so by setting shadow properties on the layer like shadowColor and shadowRadius, but if you don’t set shadowPath then the shadow will be created using offscreen rendering. In this case, the GPU needs to draw the text so the CPU can figure out what the shape of the shadow should be. If you give it a shape by providing a UIBezierPath then it won’t need to do the offscreen rendering.

Same for drawing circles in iOS. If you use a bezier path then you can avoid offscreen rendering. There are a few strategies that offer pros and cons such as blending or no blending and varying degrees of difficulty.

For Shadows
Text: Use NSShadow and an NSAttributedString
UIView: Define shadowPath with UIBezierPath
UIView with Round Corners + Shadow: Use two views, one for the image and one for the shadow
Also, if you want another resource that explains shadows in some detail, here’s a really good video from Todd Kerpelman: How Google does shadows on iOS (Route 85) - YouTube

For Round Corners
I would say go check out that challenge for an example of three ways to have rounded corners.

8

Hey @ys_xs I went ahead and condensed things into a blog post today. Let me know if it helps!

9

@luke_parham Thank you very much, your explain is awesome !

I don’t see any Core Animation video right now, and I take a glance at that, I can’t find any topic about offscreen rendering, Could you give me more detail like which lesson should i learn or start?

And I also have a question about core animation instruments, I find a tool call ‘color Misaligned images’,

i write a code snippets like below and run it on iPhone 8

    UILabel *view1 = [[UILabel alloc] initWithFrame:CGRectMake(20, 100, 300, 40)];
    view1.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:view1];
    
    UILabel *view2= [[UILabel alloc] initWithFrame:CGRectMake(20, 150, 300.10000002, 40)];
    view2.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:view2];
    
    UILabel *view3 = [[UILabel alloc] initWithFrame:CGRectMake(20, 200, 300, 40.333333333)];
    view3.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:view3];
    
    UILabel *view4= [[UILabel alloc] initWithFrame:CGRectMake(20, 250, 300, 40.1000000001)];
    view4.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:view4];

when i turn on ‘color Misaligned images’ feature, some label are overlaid in magenta, so my question is

  1. I really don’t understand is why this feature called ‘Misaligned images’ rather than 'Misaligned view’, because all view in this snippets is UILabel, not UIImageView, but If I change all view to UIView in the snippets, no magenta color will appear, It’s strange, Could you explain this for me ? I think this question will have some relationship with iOS rendering knowledge, Could you give me a explain and also give me some reference to learn.
  2. because of height , view3 can produce a misaligned effect, but view2 can’t produce a misaligned by width , why? I really don’t understand
  3. As we all know, in 2x device, 1 point means 2 * 2 pixel, and 3x device, 1 point means 3 * 3 pixel, but If i want to draw a line in minimum height, 1 pixel, in 2x device, Screen will render the line when I use a value larger than 0.25 point, and do nothing when i use a value smaller than 0.25 point. It’s easy to find 0.25 point means 0.5 pixel, so I really don’t understand why I can render something in 0.5 pixel rather than 1 pixel, could you explain it for me ?
10

@luke_parham Awesome, I will see your blog right now!

11

I can’t see the "debug options " in instruments animations :disappointed_relieved:

12

@luke_parham Can you please help with this when you get a chance? Thank you - much appreciated! :]

13

@vicktormanuel Yeah it depends on the instrument but a lot of them have changed since last year. If you’re looking at the Core Animation Instrument and trying to find debug options then you can now find them in Xcode under Debug > View Debugging > Rendering

1 Like