Stop UIButton resizing on background image change - ios

I have built a storyboard with a label, 6 UIButtons in a 3 x 2 grid and another single button below the grid. I've put these into stack views and set up constraints which all seems to work.
I've set the background image of each button which is initially just a grey background (will be more of an icon later) and when a user clicks on the button I change the background image to be a green tick.
However, when it renders, the button increases in size so my 3 x 2 grid looks shoddy.
How can I stop the button resizing when I programmatically change the background (using setBackgroundImage function)?

Try giving some fixed width or height, cause in a stack view it always take what it needs. Or you could make sure buttons are equal between them. Click and drag a button to another with alt key and set it to equal width.

Related

How to place any view below any other view which is getting it's position from code

I've created 4 subviews of white color & a yellow one as you can see in reference image I've shared below.
And I've programmatically changed the position of Tabbar from bottom to top just below to navigation bar as you can see in below image (When it is running in the simulator).
Now since I've constraints for that yellow view in image as follow
It is appearing just below to navigation bar but I want it to be displayed just below the Tabbar.
Since Tabbar is getting its position programmatically & other views (including yellow view) are getting their positions from the storyboard.
And since storyboard UIelements are get settled before any other UIelement which are coming from the program or at least get their position from programmatically.
What could be the best way to achieve what I want.
Please refer my storyboard as well to get more understanding. (Refer Below image)
I also want to fit all 5 subviews in the space between tabbar & bottom of the screen. I want to calculate 1/5th of that space & assign this height to each subview. I'd later reduce few pixels to separate them.
Why not add the height of the tab bar to the yellow view's top position? That way, you'd set the constraint something like:
Fajar.top = top + 44
If the tab bar is always visible, then that should work. But of course, if the tab bar only appears at times, you'd probably have to change that constraint programmatically depending on the change ...

Center UIButton with image next to it

I'm trying to create a UIButton where the facebook icon is a part of the centering, however i can't seem to figure out how to make it part of the centering process. So far i've just created a UIButton with the text. I could just create a image next to it, however then it will not be part of the centering.
You can easily set image and title both for your button for different control state like normal,selected or highlighted etc.
So, set your image and title to your button from storyboard or programmatically there is no need to take separate imageview for image.
You can set edge insets for title and image both from interface builder or programmatically. you can manage top or bottom edge insets for title and image of button to manage it's vertical appearance!
check screen shot below,
Update : (as asked in comment)
For example,
this is the setup for my back button with image!
Provide button title and image for normal state. Then just change the left inset for image as per image

In Swift, how to customize the more menu on a tab bar?

I'm trying to change the back ground and size of the cells but on the more menu but am not sure how to do so. Here is what it looks like now:
I want to add a ui image as a backgrounds as well as add a ui image as a background to each cell so it will look like this:
I saw an old post about this on Stack Overflow but it was 7 years old. Does anyone know how to change the more menu in Swift?
In storyboard
1) add a uiImageView to the ViewControll or TableViewControll that you are using. set Constraint UImageView to SuperView as equal width,equal length,central horizontally and central vertically.
set outlet to access.
2) set tableview background to clear colour in attribute property
3)in tableview cell add a UIImageView and set the same equal width, length ,central horizontal and central vertical to contentView.
cell.background colour should be clear .
based on tab you should change the background image in tableview cell imageView in cellforIndexMethod.
you can change the background image of mainBackground in viewDidLoad or viewDidAppear based on the tab

Simple Horizontal Button Bar for iOS

I have a requirement for a very simple Button Bar.
It should take up the width of the screen.
It should allow at least 3
buttons.
The buttons should be of equal width and together take up
the whole width of the bar.
Each button should be tappable, but not
have a selected state.
The bar will be overlaid on a MapView and positioned directly above a TabBar.
Tapping a button will launch a Modal ViewController.
I thought about using a UITabBar and not allowing its tabs to become selected, but the HIG is pretty clear that this is not correct usage and UIToolBar doesn't allow the button widths to be set.
This seems like a very simple requirement but I can't see an obvious solution. Is there something I'm missing? Can anyone suggest a solution?
What's wrong with just creating a simple view that draws an appropriate gradient, and then adding three buttons of the appropriate size?
If you're feeling ambitious, or if this is something that you're likely to use more than once, you could even have the view create the three buttons. Call it ThreeButtonBar or something. Give it a constant height and adjust the width to match that of its superview so that you can use it in portrait or landscape orientation.

UIButton with background image highlighted state wrong

I'm trying to use the standard highlighting logic for a UIButton but set the background image for the Normal state. When do this programmatically everything works fine, but when my button is set in Interface Builder I get the following results:
Has anyone run in this where the standard highlighting is changing the way the background image looks? Just to be clear I want the color change, just not the squared off corners on the left.
Figured it out. Apparently if my button size is smaller than the background image it scales appropriately for Normal State, but the highlighted state causes this strangeness. Good to know since I'm attempting to use a single image and just scale it for all of my various buttons.
In this case my IB button was set as 77pt wide, but my image is 97pt wide. It finally looks correct with my IB button set at 90pt wide or larger.

Resources