How would I go about creating a UITextField like the one in this image?
It appears to be slightly larger, specifically in height.
This can be done much better and simpler with a stretchable image:
UIImage *fieldBGImage = [[UIImage imageNamed:#"input.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:20];
[myUITextField setBackground:fieldBGImage];
Think of the background of the text field as split into three sections. A middle section which can be stretched and caps on the ends. Create an image which only needs to be long enough to contain one pixel of this repeating section (a very short text field), and then create a stretchable image from it using stretchableImageWithLeftCapWidth: topCapHeight. Pass the width of the left end cap into 'leftCapWidth.' You can make it stretch vertically as well, but if your background image is the same height as your text box it wont have an effect.
If you're familiar with 9-slice scaling in Flash or Illustrator it's exactly the same concept, except the middle sections are only one pixel wide/tall.
The advantage of this is you don't have to worry about multiple layered objects scaling together and you can resize your text fields any time and the background will stay in tact. It works on other elements too!
You probably want to use the background and borderStyle properties of UITextField. Setting borderStyle as UITextBorderStyleNone and create a custom background image to be stretched and used as the background property would be one approach.
I suggest taking a look at those properties in the UITextField class reference.
You can do this by:
yourTextField.borderStyle = UITextBorderStyleNone;
yourTextField.background = [UIImage imageNamed:#"email-input.png"];
And if you want to give margin to your text inside the textfield, you can do this by:
// Setting Text Field Margins to display the user entered text Properly
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];
yourTextField.leftView = paddingView;
yourTextField.leftViewMode = UITextFieldViewModeAlways;
You can also do this through Interface Builder.
just use the following line and it should work
textfield_name.background = [UIImage imageNamed : #"yourImage.png"];
here, "yourImage" is the background image you wanna set...
however, this will work only if your button isnt a roundrect button.So, you can change the type of the button in the Interface Builder or you can use
textfield_name.borderstyle = UITextBorderStyleNone or UITextBorderStyleBezel
and you r gud2go....!
Take an uiimageview set its image property to the image you want as uitextfield background. And on top of this uiimageview place an uitextfield with borderstyle none. This you can do directly in interface builder.
Related
I'm working via the IB and have a UILabel that's stretched almost to the end of the layout. I have it set with Lines=2, because the max amount of lines it should take is 2. However if it's only 1 line long, I would like it to have a vertical justification of top.
Label settings in IB:
Lines:2
Line breaks: Word wrap
In code, in the viewDidLoad method I set the text of the UILabel. However as part of the functionality at a point the text must change. This is my code:
[_main_lbl1 setText:[myUI MAIN_TITLE]]; //Always only 1 line
[_main_lblsub1 setText:[myUI SUB_TITLE]]; //May be 1 or 2 lines
[_main_lblsub1 sizeToFit]; //Causes vertical alignment (I believe)
Whenever I change the text and rerun sizeToFit, the text wrapping becomes totally messed up. Instead of reaching almost the end of the UILabel as set up in the IB, in some cases the text will wrap at little more than half the distance, in some cases it doesn't wrap at all.
Image of layout in IB:
Image of resulting label in simulator:
In the first label it seems to be working ok, the second label doesn't wrap at all.
Is there anything I have to do to keep the text wrapping when changing the UILabel text? Anything else I'm missing?
Note: Updated question to include more detail and pics.
Thanks
The issue is that you're using sizeToFit. Which stretches the label out to fit the text. If you need to change the size you can use:
CGSize maxSize = CGSizeMake(320, 9999); // 999 means it can be as tall as you like
CGSize textSize = [label.text sizeWithFont:label.font
constrainedToSize:maxSize];
label.size = textSize;
You shouldn't have to do anything special. It will automatically wrap the text to fit when you change it. Otherwise the text would run out of the text labels bounds (which is not what you want). Your problem is that sizeToFit permanently changes the frame of the label. It makes it as small as possible while still showing the text. You are having it resize its frame to the original text and then you are changing the text so it is no longer sized properly. You should reset the frame back to it's original, change the text, and finally call size to fit again.
In viewDidLoad:
self.originalFrame = self.mainLabelSub1.frame;
Then in viewWillAppear:
self.mainLabel1.frame = self.originalFrame;
self.mainLabel1.text = #"New Text";
Note:
A good way to see the borders of the text label to get an idea for the wrapping potential is to temporary set the background of the label to something like magentaColor that stands out.
I have a UITableView whose cells have dynamic height. What I want to do is basically having an image that works as container for each tableview row like in the following picture. Since the content for each row is different, the image should be resized in height to contain the text of the cell.
I am wondering what is the best practice to achieve it.
Thanks in advance
Have a background image view for the cell and set the frame size based on the content you have to place inside the cell. Then you can use the "stretchableImageWithLeftCapWidth:topCapHeight:" method to create the image that you want to set the cell background.
UIImage *backgroundImg = [[UIImage imageNamed:#"test.png"] stretchableImageWithLeftCapWidth:30 topCapHeight:20];
[cell.bgImageView setFrame:CGRectMake(a, b, c, d];
cell.bgImageView.image = backgroundImg;
Yo can use method sizeToFit for this image. else use the image type as center or scaleToFit.
I wanted to make a UITableView with text that is both right-aligned and indented as depicted in the image below:
Unfortunately, I can not do this by writing :-
cell.textLabel.textAlignment = UITextAlignmentRight;
cell.indentationLevel = 10; // or even -10
Can this be done using UITableView's properties? If not, the only way I could think of is using [myString drawInRect:withFont:]; but I would like to go through methods based on alignment and indentation before getting into that [I have already written code for that :-) ], so other work-arounds are welcome!
Additional info: The indentation varies with accelerometer values so I can not have hard-coded Label frame positions. I've uploaded sample code at github in which I've used only the alignment and indentation info so far, so continuing to use that would make this easier.
Subclass UITableViewCell and you can position the frame of the text label however you like. In the if statement where you dequeueReusableCellWithIdentifier: where a reusable cell doesn't exist, just modify the frame and then set the label to use the adjusted frame with setFrame. The autoresizing mask should remain the same.
You could always create your own custom cells and place a UITextLabel in the cell, and make the UITextLabel's alignment right aligned.
Also set the autoresizing mask of the UITextLabel to the right so the indentation distance stays the same no matter the orientation.
I have created a UITableViewCell using UITableViewCellStyleValue1, which the Apple docs define as:
A style for a cell with a label on the left side of the cell with left-aligned and black text; on the right side is a label that has smaller blue text and is right-aligned. The Settings application uses cells in this style.
I am trying to set the cell text to display some short text on the left, and some long text on the right, e.g.
URL http://www.mylongurl.com/subdirectory/etc
My problem is that the left UILabel gets truncated instead of the right one so it displays as:
U... http://www.mylongurl.com/subdirectory/etc
If I make the URL even longer then BOTH the labels get truncated, e.g.
U... http://www.mylongurl.com...subdirectory/etc
Is there any way to make the right UILabel truncate instead of the left one without using a custom UITableViewCell? I know how to create a custom UITableViewCell, but it seems like overkill?
I can set the UILineBreakMode to change where the text truncates within the UILabel, but I can't see a way to make the detailTextLabel adjust its width to let the textLabel display itself.
[[lCell textLabel] setText:#"URL"];
[[lCell detailTextLabel] setText:#"http://www.mylongurl.com/subdirectory/etc"];
[[lCell detailTextLabel] setLineBreakMode:UILineBreakModeMiddleTruncation];
You have a couple of options.
Probably the closest in spirit to what you seem to be asking for is to muck around with the label frames in your UITableViewDelegate's tableView:willDisplayCell:forRowAtIndexPath:. (Doing cell layout modifications in your UITableViewDataSource's tableView:cellForRowAtIndexPath: won't fly, since UITableViewCells do all their own internal layout work after tableView:cellForRowAtIndexPath:.) You can use NSString's -sizeWithFont: to help figure out the layout requirements for your textLabel.
You can also take different approaches, as you mentioned, such as subclassing UITableViewCell or setting cell.textLabel.adjustsFontSizeToFitWidth = YES.
The best solution would be to create a subclass of UITableView cell and set your customizations to the labels like you have here in init. You will probably want to override layoutSubviews and resize the labels if you want the left one to be wider.
- (void)layoutSubviews {
[super layoutSubviews];
self.textLabel.frame = CGRectMake(0.0, 0.0, 100.0, self.frame.size.height);
self.detailTextLabel.frame = CGRectMake(0.0, 0.0, 220.0, self.frame.size.height);
}
Obviously those are arbitrary values. You will want to play with different sizes to meet your needs.
In the clock app that comes with the iPhone there is a tab view for setting alarms. In that view each of the UITableViewCell instances have a drop shadow around them. Does anyone know how to achieve the same effect?
Also it looks like the tab bar at the very bottom has a drop shadow above it as well.
Ideas on how to achieve the same look would be greatly appreciated.
I was wondering how to do that and it just occurred to me to use the UITableView's footer view:
myTableView.tableFooterView = myCustomViewWithDropShadowImage;
I would guess that there is an extra cell which contains just a background image which is the transparent dropshadow. If it's not a cell (because that might create scrolling weirdness) it is probably an extra view positioned below the bottom cell of the UITableview which - again - simply contains an image of the drop shadow.
Like Thomas said, create a 100% width image (say, 320 x 40px on non-retina devices) and create 4 instances of UIImageView with it. The first, at the top of your main view. The second, at the bottom, and in addition do this:
UIImageView* bottomShadow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"BottmShadow.png"]]
bottomShadow.transform = CGAffineTransformMakeScale(1, -1);
(Flip it vertically)
Then, do the same with the other two, but place them as subviews of the Table View. One of them just outside the first row:
CGRect tableTopShadowFrame = tableTopShadow.frame;
tableTopShadowFrame.origin.y = -(tableTopShadowFrame.size.height);
[tableTopShadow setFrame:tableTopShadowFrame];
and the other just below the last row (you need to know the height of all the rows together. If your rows are all the same height, it is row height times number of rows).
Finally, you need to set the table's backgroundColor property to transparent
tableView.backgroundColor = [UIColor clearColor];
and possibly set some darkish gray for your main view's background color.