I'm using a UIProgressView in my application, which is working great right now. But I want to make it larger (height-wise) and color it a different color.
I'm looking to use PDColoredProgressView for the color, and alter the -(void)drawRect:(CGRect)rect method to change the height, however I can't decide where I would actually alter the height. Any suggestions on what to change?
So it turns out you can resize it like any other view.
[coloredProgressView setFrame:CGRectMake(0, 0, 300, 25)];
Setting the frame side didn't seem to work for me. Setting the transform to a CGAffineTransformMakeScale() can scale it up - not sure if that causes any other problems though.
To change the height of progressView try below code: ( works with Swift 5 )
progressView.transform = CGAffineTransform(scaleX: 1, y: 4) // y present the wanted height
and 1 present the current width, so if you change it to 3 then it will mean current width x 2
Related
I want to increase the height of progress view in iOS 6 and below i am doing this using appearence method
UIImage *progressImage = [[UIImage imageNamed:#"sliderbk-progress.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 5)];
[[UIProgressView appearance] setProgressImage:progressImage];
but now in iOS7 this code is not working i even try given below code but no use. Any help will be helpfull. Thanks
[[UIProgressView appearance] setFrame:CGRectMake(20, 100, 280, 100)];
If I am understanding the question correctly it sounds like you want to increase the height of the progress view in iOS7, and the code you used previously in iOS6 is no longer working.
I had to solve a similar problem recently and I did this by adding a constraint to the progress view in Interface Builder and setting the height explicitly through the constraint. This solution will require the use of Auto-Layout, so be sure that you have that turned on.
Shown: the "Height" attribute on the Size Inspector is visibly greyed out for a Progress View and cannot be changed - however I've defined a constraint on the Progress View itself and set the constraint's height to 50 points, which is actually reflected in IB.
From what I've seen iOS6 Progress Bars have a static height value, so if you also want to support iOS6 then another approach will be necessary for that.
Whereas others have reported that a CGAffineTransform() works as well:
[self.progressView setTransform:CGAffineTransformMakeScale(1.0, 3.0)];
Already answered here
How to increase height of UIProgressView
#implementation UIProgressView (customView)
- (CGSize)sizeThatFits:(CGSize)size
{
CGSize newSize = CGSizeMake(self.frame.size.width,9);
return newSize;
}
#end
Here's the Swift version of user3189408 and Rushabh's great solutions for newer developers and swift enthusiasts like me. Tested for iOS 7+/Swift 2.0.
progressView.transform = CGAffineTransformMakeScale(1.0, 5.0)
Swift 3.x
progressView.transform = CGAffineTransform(scaleX: 1.0, y: 5.0)
You can note that frame cannot be set by appearance accessor. You have to set it on each progress view separately.
Usually, the height is set depending on progress bar style.
- (id)initWithProgressViewStyle:(UIProgressViewStyle)style; // sets the view height according to the style
If you're using Autolayout, then the solution is simple: create a height constraint as explained by one of the answers here.
However, chances are you're here because you're creating the progress bar in code.
In this case, solving this through the transform method is not ideal if the view has round corners, since CGAffineTransform will mess with how the corner radius is drawn.
I would subclass the UIProgressView as follows:
class ProgressBarThick: UIProgressView {
var height : CGFloat = 12
var width: CGFloat = 0.0
override func sizeThatFits(_ size: CGSize) -> CGSize {
return CGSize(width: width,
height: height)
}
}
Set the height and width before drawing the view.
OK folks,
I've searched all over and cannot seem to find a solution to my issue.
I am trying to use a sizeable image for a button background to get a custom look for a UIButton and to reduce the overall size of the app and because it seems like the right thing to do.
However, when I try to set the image on the button the button gets all weird looking and the corners do not match the standard corner radius of a regular UIButton.
I have tried creating several different sizes of images but nothing I do seems to work.
I know the caps are supposed to be even and I have that plus the 1 pixel middle to stretch.
My UIButton is 44 high. If I create an image that is 44 pixels high and 21 pixels wide and has the same rounded corner radius as the default button (it likes an aspirin caplet) and set my background image like this:
UIImage *btnImage = [UIImage imageNamed:#"buttontest1.png"];
UIImage *newImg = [btnImage stretchableImageWithLeftCapWidth:10 topCapHeight:0];
the corners just don't match and look weirdly widely stretched AND the button grows in height!
I know the stretchableImagewithLeftCapWidth is deprecated but the usage of resizableCapWithInsets makes even less sense to me and when I try to do that the button image just seems to repeat over and over.
Can anyone figure out what I'm doing wrong? Is there anyplace that explains this crap simply? I just cannot seem to get it.
Thanks!
-TJ
EDIT - adding images after using the resizableImageCapWithInserts to show results. They can't be typical as I see examples all over that supposedly work but the examples never work for me. I just figured out how to add images here so maybe this helps some.
Here is the PNG file 21px wide by 39px tall
This is the result of using the following code to set the background image:
[self.button1 setBackgroundImage:[[UIImage imageNamed:#"buttontest4.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)] forState:UIControlStateNormal];
As I understand it this should copy the left 10 pixels and right 10 pixels of my 21 pixel wide image as is and stretch the middle 1 pixel across, which it appears to do but it is also making my button get larger vertically and I'm getting this weird repeat. It should be the same size as the BTN next to it.
Here is my Xcode layout:
No matter what image I use I see similar results.
I'm obviously not groking something here.
I appreciate the answers so far. It's becoming slightly less foggy.
TJ
EDIT2: showing samples using the cap insets method with image 21px by 44px.
All 4 buttons are 44px high when designed in storyboard.
As you can see the orange buttons are both larger than the white buttons for scale comparison.
The top button is button1, bottom is button2.
I found a way to get it closer by using the optional resizingMode parameter of UIImageResizingModeStretch.
However, notice the buttons are larger than what they should be.
Here is the code for setting the button images.
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.button1 setBackgroundImage:[[UIImage imageNamed:#"buttontest1a.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)] forState:UIControlStateNormal];
[self.button2 setBackgroundImage:[[UIImage imageNamed:#"buttontest1a.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10) resizingMode:UIImageResizingModeStretch] forState:UIControlStateNormal];
}
Doing the top image with (10,10,10,10) gets me an image that does not repeat the top part of the image like previously. I know the top image is not using the optional resize parameter as this is a test to see what each gets me.
Now, to complicate things even more. If I set my top button size to 43, that is one pixel smaller than my image and make a call with the optional resize parameter I get nearly perfect results except my button is not the right size.
What the heck is going on here?
I appreciate everyone who is trying to pound some knowledge through my thick skull.
TJ
UIEdgeInsets is a little difficult to wrap your head around, but it is the more modern usage. I will explain the way it works. Basically, using four offsets, you are dividing your image into 9 slices. If you want to see an image of what this potentially looks like, have a look at the "Scaleable area" section of this page (Note, it is for Android, but the concept is the same. Android was just doing it first). You will notice four lines going through the image. These will correspond to your four insets. So your nine sections, from left-to-right and top-to-bottom will be:
X: 0 -> Left Inset, Y: 0 -> Top Inset
X: Left Inset -> (Width - Right Inset), Y: 0 -> Top Inset
X: (Width - Right Inset) -> Width, Y: 0 -> Top Inset
X: 0 -> Left Inset, Y: Top Inset -> (Height - Bottom Inset)
X: Left Inset -> (Width - Right Inset), Y: Top Inset -> (Height - Bottom Inset)
X: (Width - Right Inset) -> Width, Y: Top Inset -> (Height - Bottom Inset)
X: 0 -> Left Inset, Y: (Height - Bottom Inset) -> Height
Left Inset -> (Width - Right Inset), Y: (Height - Bottom Inset) -> Height
X: (Width - Right Inset) -> Width, Y: (Height - Bottom Inset) -> Height
Sections 1, 3, 7, and 9 are set and will not stretch.
Sections 2 and 8 will stretch horizontally only
Sections 4 and 6 will stretch vertically only
Section 5 will stretch in both directions.
New in iOS 6, you can select a mode. You can either stretch the stretchable tiles, or repeat them to get the effect that you want (colors, etc should stretch while textures should repeat).
Try UIEdgeInsets
[button setBackgroundImage:[[UIImage imageNamed:#"buttontest1.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)] forState:UIControlStateNormal];
The 2016 way is to do what we are told in WWDC2016 video 213 around this point: https://developer.apple.com/videos/play/wwdc2016-213/?time=1084
We can stretch assets. Sorry for just a link this time; I'll provide more details later. The instructions in the video is a minute or two at most. In short, we use the Asset Slicer tool of Xcode to define what parts of an image should not get stretched when an image is used as background of a UIButton. The UIButton can expand to any size without distorting roundd edges etc.
I am unable to set label and image position programmatically. I am trying to set is as,
navBarSocial.frame = CGRectMake(navBarSocial.frame.origin.x, navBarSocial.frame.origin.y, webView1.frame.size.width, navBarSocial.frame.size.height);
status.frame = CGRectMake(100, 50, status.frame.size.width, status.frame.size.height);
loadingImage.frame = CGRectMake(100, 50, loadingImage.frame.size.width, loadingImage.frame.size.height);
navBarSocial increase its witdth properly but label (status) and loadingImage remains at same position. I also set autosizing properties deactivated on xib but no success.
Not sure of your question. You speak of position, which makes sense they are staying in the same position as you have statically set them to x = 100 and y = 50. In terms of size, it seems you are setting the size to the current size of the item. In other words you are passing the current size in as the size you want to set the element you are trying to resize to.
loadingImage.frame = CGRectMake(100, 50, loadingImage.frame.size.width, loadingImage.frame.size.height);
loadingImage sets it's width to its width and its height to its height. What do you expect to change? You probably need to change the width and the height to something different that it already has..
Setting geometry should be done in viewWillAppear: and viewDidAppear methods. Also check your outlet connections.
Btw use only properties, not ivars.
I am using a UITextField. I want to increase its height but I have not found any property to do this. How can I achieve this?
You can not change the height of the rounded rect border style.
To set the height, just choose any border style other than rounded border in Xcode:
I finally found the fix for this!
As we have found, IB doesn't allow us to change the height of the rounded corner border style. So change it to any of the other styles and set the desired height. In the code change the border style back.
textField.borderStyle = UITextBorderStyleRoundedRect;
CGRect frameRect = textField.frame;
frameRect.size.height = 100; // <-- Specify the height you want here.
textField.frame = frameRect;
If you are using Auto Layout then you can do it on the Story board.
Add a height constraint to the text field, then change the height constraint constant to any desired value. Steps are shown below:
Step 1: Create a height constraint for the text field
Step 2: Select Height Constraint
Step 3: Change Height Constraint's constant value
1.) Change the border Style in the InterfaceBuilder.
2.) After that you're able to change the size.
3.) Create an IBOutlet to your TextField and enter the following code to your viewDidLoad() to change the BorderStyle back.
textField.borderStyle = UITextBorderStyleRoundedRect;
Swift 3:
textField.borderStyle = UITextBorderStyle.roundedRect
Choose the border style as not rounded
Set your height
in your viewWillAppear set the corners as round
yourUITextField.borderStyle = UITextBorderStyleRoundedRect;
Enjoy your round and tall UITextField
Follow these two simple steps and get increase height of your UItextField.
Step 1: right click on XIB file and open it as in "Source Code".
Step 2: Find the same UITextfield source and set the frame as you want.
You can use these steps to change frame of any apple controls.
An update for iOS 6 : using auto-layout, even though you still can't set the UITextField's height from the Size Inspector in the Interface Builder (as of Xcode 4.5 DP4 at least), it is now possible to set a Height constraint on it, which you can edit from the Interface Builder.
Also, if you're setting the frame's height by code, auto-layout may reset it depending on the other constraints your view may have.
I know this an old question but I just wanted to add if you would like to easily change the height of a UITextField from inside IB then simply change that UITextfield's border type to anything other than the default rounded corner type. Then you can stretch or change height attributes easily from inside the editor.
swift3
#IBDesignable
class BigTextField: UITextField {
override func didMoveToWindow() {
super.didMoveToWindow()
if window != nil {
borderStyle = .roundedRect
}
}
}
Interface Builder
Replace UITextField with BigTextField.
Change the Border Style
to none.
My pathetic contribution to this dumb problem. In IB set the style to none so you can set the height, then in IB set the class to be a subclass of UITextField that forces the style to be rounded rect.
#interface JLTForcedRoundedRectTextField : UITextField
#end
#implementation JLTForcedRoundedRectTextField
- (void)awakeFromNib
{
self.borderStyle = UITextBorderStyleRoundedRect;
}
#end
It kept me from having to hack the XIB file or writing style code into my view controller.
A UITextField's height is not adjustable in Attributes Inspector only
when it has the default rounded corners border style, but adding a
height constraint (plus any other constraints which are required to
satisfy the autolayout system - often by simply using Add Missing
Constraints) to it and adjusting the constraint will adjust the
textfield's height. If you don't want constraints, the constraints can
be removed (Clear Constraints) and the textfield will remain at the
adjusted height.
Works like a charm.
In Swift 3 use:
yourTextField.frame.size.height = 30
try this
UITextField *field = [[UITextField alloc] initWithFrame:CGRectMake(20, 80, 280, 120)];
UITextField *txt = [[UITextField alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
[txt setText:#"Ananth"];
[self.view addSubview:txt];
Last two arguments are width and height, You can set as you wish...
You can use frame property of textfield to change frame
Like-Textfield.frame=CGRECTMake(x axis,y axis,width,height)
This is quite simple.
yourtextfield.frame = CGRectMake (yourXAxis, yourYAxis, yourWidth, yourHeight);
Declare your textfield as a gloabal property & change its frame where ever you want to do it in your code.
Happy Coding!
If you're creating a lot of UITextFields it can be quicker to subclass UITextViews and override the setFrame method with
-(void)setFrame:(CGRect)frame{
[self setBorderStyle:UITextBorderStyleRoundedRect];
[super setFrame:frame];
[self setBorderStyle:UITextBorderStyleNone];
}
This way you can just call
[customTextField setFrame:<rect>];
I was having the same issue. tried some of the solutions here but rather than doing all this mumbo-jumbo. I found just setting height constraint is enough.
when I draw a UIView in landscape mode of ipad , it gives wrong width and wrong height,i have mentioned as follows
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation==UIInterfaceOrientationLandscapeRight);
}
rightView.view.frame = CGRectMake(598, 700, 60, 171);
but width is very high,height is very low…any help please?
When in landscape mode, as the frame is in the coordinates system of its parent view and the parent view has a CGAffineTransform applied (to apply the interface orientation), with and height are inverted.
See this other question that also deals with related issues
YOu may set frame like. it will give you a require result.
CGRectMake(self.view.size.width-426 ,self.view.size.height-100 , self.view.size.width-366, self.view.size.height-497);
just write below line
rightView.view.frame = CGRectMake(598, 700, 171, 60);