在iOS上扩展谷歌登录按钮w / constraints

Question

I am trying to add google login to my iOS application. The app will go to my nodejs server (using passport to hit google to login). Long story short I do not need to use the Google iOS sdk for login as I am not going from my to directly to google.

But I do need a correctly styled google signin button. I found the branding guidelines here: https://developers.google.com/+/branding-guidelines?hl=en

And they have a download for the iOS icons and a sketch file. The problem I am running into how do I use that button image and have it scale correctly based on constraints? IE if I set the image as the background and size the button to be whatever size I want in my view the G+ will also stretch.

But if I don't set as a background I cannot make the button the correct width.

Is there a way to make the button whatever width I want without stretching the G+ logo?

Next up would be how to get Roboto Text in there as well...

Answer 1

Try Image Slicing . Below is the steps:

1. Select the image you add in the asset catalog.
2. Choose Horizontel in Slicing section of the Attributes Inspecter.
3. Input 35 for Left field, input 5 for Right field. Below is what the slicing looks like:

4. Set the image as a button background in Storyboard or nib.

Now resize the button, the logo will not be streched.