Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fit titleIconView to page width #212

Closed
fulldecent opened this issue Oct 4, 2017 · 11 comments
Closed

Fit titleIconView to page width #212

fulldecent opened this issue Oct 4, 2017 · 11 comments

Comments

@fulldecent
Copy link

I was expecting the image to take up the available space. This is the code we used:

        let page1 = EAIntroPage()
        page1.title = NSLocalizedString("A party game", comment: "Intro screen 1 title")
        page1.desc = NSLocalizedString("For 3 to 12 players", comment: "Intro screen 1 detail")
        page1.titleIconView = UIImageView(image: UIImage(named: "help1"))

This is what we got

screen shot 2017-10-03 at 10 44 50 pm

Currently best practice is this implementation: https://github.com/kolyvan/kxintro

@ealeksandrov
Copy link
Owner

Have you tried using bgImage instead of titleIconView?
Also I have no idea what is happening on your attached screen and how do you want it to look.

@fulldecent
Copy link
Author

I have tried bgImage too and got the same effect.

I was hoping for it to shrink to fit on the screen like in this screenshot.

screenshot01

@ealeksandrov
Copy link
Owner

What happens if you drop your image in example project?
I don't understand yet where is titleIcon on your screenshot.

@fulldecent
Copy link
Author

Sorry. In my screenshot, the intro screen is the two blue guys. Here is what I have so far with KXIntroView (https://github.com/kolyvan/kxintro).

screen shot 2017-10-05 at 12 57 31 pm

I am seeking to approximate this experience using EAIntroView.

@ealeksandrov
Copy link
Owner

ealeksandrov commented Oct 6, 2017

Ok, now I see.
Can you share this image with me, so I can test it?

@fulldecent
Copy link
Author

You bet. Thanks for your help!

help1

@ealeksandrov
Copy link
Owner

simulator screen shot - iphone 8 - 2017-10-06 at 19 01 34

Here is how you can do it now:

EAIntroPage *page1 = [EAIntroPage page];
page1.title = @"Testing image";
page1.desc = sampleDescription1;
page1.bgImage = [UIImage imageNamed:@"bg1"];

UIImage *testImage = [UIImage imageNamed:@"image"];
UIImageView *testImageView = [[UIImageView alloc] initWithImage:testImage];
float imageRatio = testImage.size.width / testImage.size.height;
float widthToFit = self.view.bounds.size.width;
[testImageView setFrame:CGRectMake(0, 0, widthToFit, widthToFit / imageRatio)];
page1.titleIconView = testImageView;

In EAIntroView we're preserving original image size 1:1. Code above will resize titleIconView to fit screen.
I will think more about updating page layout to handle this automatically.

@ealeksandrov ealeksandrov changed the title Image is not sized correctly Fit titleIconView to page width Oct 6, 2017
@fulldecent
Copy link
Author

Very nice, thank you!

In portrait orientation this will work. I'll need to figure it out when rotating or switching to other devices.

@ealeksandrov
Copy link
Owner

I'll look into it on weekend and give you update.

@ealeksandrov
Copy link
Owner

ealeksandrov commented Oct 19, 2017

Added autolayout constraints to fit titleIconView inside page frame - a090a15

With your image it produces same screenshot as workaround above. Also works in landscape.
It lays out titleIconView - title - description vertically. PageControl and SkipButton may overlap - but they can be on any position on a page (for example, on top), so I don't manage them in this equation.

To add padding between description and screen bottom and fit pageControl there - you can add empty newlines at the end of page description.

Released in 2.11.0.

@fulldecent
Copy link
Author

Thank you, this works great now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants