The bounds of a button don't work with text

[AndrewSB]

I'm trying to get Shimmer on a programmatically added button. It's a QBFlatButton, userStateButton = [[QBFlatButton alloc] initWithFrame:CGRectMake((cellView.frame.size.width - (80 + 20)), (self.screenHeight/(cellCount * 4)), 80, ((self.screenHeight + (cellCount * cellCount))/(cellCount * 2)))];

When I turn Shimmer on, the entire bounds that I've set for the button start shimmering (no surprise there, thats what I set the bounds as) so it looks like theres a rectangle around the logout button
FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:userStateButton.bounds];

How would I get just the text of the button to shimmer? I've already tried making the frame of the shimmeringView the frame of the titleLabel (which it turns out is {{0, 0}, {0, 0}}

Any way to do this without adding it to the storyboard like issue #8

[grp]

UIButton manages its titleLabel, so you can't move it into another view hierarchy (like setting it as the shimmeringView). Instead, I'd suggest making a custom title label:

FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:...];

UILabel *titleLabel = [[UILabel alloc] initWithFrame:...];
shimmeringView.contentView = titleLabel;

[button addSubview:shimmeringView];

That way, your code controls the the title label directly and can shimmer just that part of it. Let me know if that helps!

[AndrewSB]

my UIButton is called userStateButton.
I tried this:

    FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:userStateButton.titleLabel.frame];

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:userStateButton.titleLabel.frame];
    shimmeringView.contentView = titleLabel;

    [userStateButton addSubview:shimmeringView];

It didn't change anything. Maybe I misunderstood you?

[grp]

I'm suggesting that you don't use the button's title at all — instead, you create your own shimmering title label and add it to the button.

Your code there looks good, but you'll want to configure the titleLabel you create so it has some text to show and uses the styling you want. Otherwise, you're just adding an empty UILabel to the button.

[seviu]

Actually I believe there might be a bug in FBShimmeringLayer. If you go to layoutSublayers of the class FBShimmeringLayer, you will see the following lines of code :

CGRect r = self.bounds;
_contentLayer.anchorPoint = CGPointMake(0.5, 0.5);
_contentLayer.bounds = r;
_contentLayer.position = CGPointMake(CGRectGetMidX(r), CGRectGetMidY(r));

That propagates the bounds of the FBShimmerLayer to the _contentLayer, which makes the label artificially bigger than what it should be,

This is a screenshot with the original code, in which the label layer expands its bounds to match the ones from the FBShimmeringView (incorrectly aligned)

And this is with the mentioned lines of code removed (properly aligned)

The white square is a border of the label and the blue layer is a border of the shimmering view.

[grp]

That behavior is as expected: the content layer will fill the entire shimmering layer. If you want to position the content differently, I'd suggest adjusting how you position the shimmeringn layer to take up the same area that you want the content in.

[seviu]

The problem here is that with UILabel, when you have multiple lines, filling the entire shimmering layer means that the text will always be in the center, and there will be no possible way to align it anymore.
What would recommend to do for this case without having to modify FBShimmeringLayer?

[grp]

If you adjust the label size to match the size of the text inside, you can position it vertically wherever is appropriate. The sizeToFit method might be useful for that.

[seviu]

That was one of the first things we tried, but it did not seem to work. We will try again to see if there is anything we did wrong. Thanks!

On a side note: you guys are releasing awesome projects in github. Excellent work!