I was wondering if there is any way to prevent an UILabel from cutting off with '...'? I have a CGRect which is 55 in width and 20 in height and I would like it to simply cut off after 55 (or clip the contents off) without indicating with '...' that there is more.
UILabel *btnTitle = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 55, 20)];
btnTitle.text = labelMe;
btnTitle.textColor = [UIColor whiteColor];
btnTitle.backgroundColor = [UIColor clearColor];
btnTitle.transform = CGAffineTransformMakeRotation( ( 90 * M_PI ) / 180 );
I achieved what I wanted (i.e. the clipping) by putting the UILabel (with increased width, i.e. 100 x 20) into an UIView (55 x 20) and set clipsToBounds to YES with the result that I couldn't click my buttons anymore - because I was using the label to label a button. The UIView containing the label was hiding my buttons...
Is there a way around this without using an UIView to clip the contents of my UILabel?
Try this out:
label.lineBreakMode = NSLineBreakByClipping;
For more information, refer UILabel Class Reference
Hope this helps
Use UILineBreakModeClip or one of the other options. Set it with the UILabel lineBreakMode property.
You can tell your view that contains your label to ignore touches and send them to the next available responder to do this just add this method to your view.m file
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
return NO;
}
Swift4 version of Ole Begemann/eddyce's answer:
label.linebreakMode = NSLineBreakMode.byClipping
Swift 5 version of Ole Begemann's answer:
label.lineBreakMode = .byClipping
Related
I'm trying to rotate a label on my view 90 degrees. I've tried the two following ways to do it and the label just disappears from the screen. I triple checked that the properties are properly attached. Any thoughts?
attempt one:
// rotating labels 90 degrees
self.labelCloseScroll.transform = CGAffineTransformMakeRotation (3.14/2);
attempt two:
CGAffineTransform rotate = CGAffineTransformMakeRotation(3.14/2);
rotate = CGAffineTransformScale(rotate, 1, 1);
[self.labelCloseScroll setTransform:rotate];
I am not 100% sure if it works or not but why are you not using M_PI_2. It's just simple thought that you are assuming Value of Pi to be 3.14 but the exact value is 3.14159...
I did it like this and it worked fine :
UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 50, 70)];
lbl.text = #"New";
lbl.backgroundColor = [UIColor clearColor];
lbl.textColor = [UIColor whiteColor];
lbl.highlightedTextColor = [UIColor blackColor];
lbl.font = [UIFont systemFontOfSize:12];
lbl.transform = CGAffineTransformMakeRotation(M_PI_2);
[self.view addSubview:lbl];
You can also check Answers from these Questions :
How to Render a rotated UIlabel
Rotating UILabel at its center
Hope it will be helpful for you.
It may simply be that the view's bounds have become too small for the text. When the text can't be fully displayed in label view in iOS, it simply disappears, rather than remaining on show. Perhaps it's a deliberate Apple policy to prevent apps shipping with clipped text and forcing the dev to fix ;)
It sounds very much as though this is what is happening. You have said the text gets smaller as you rotate it, which indicates you have the shrink text to fit property set on the label view. This will shrink the text as the constraining view reduces in size. But the text will only shrink so much before it disappears.
If the label view itself would seem to be big enough, also be sure to check the bounds of each parent view the label is contained in, up through the view hierarchy.
I want to make my label as shown in the image
I know I can get this effect by putting image view on it.
but is there any other method to do ?
How can I put line on label ?
Try this,
UILabel *blabel = [[UILabel alloc] initWithFrame:CGRectMake(XX, 6, 271, 26)];
blabel.text = #"Hellooooooo";
blabel.textAlignment = UITextAlignmentCenter;
blabel.backgroundColor = [UIColor clearColor];
blabel.textColor = [UIColor blackColor];
blabel.font = [UIFont systemFontOfSize:14];
[scrollDemo addSubview:blabel];
//underline code
CGSize expectedLabelSize = [#"Hellooooooo" sizeWithFont:blabel.font constrainedToSize:blabel.frame.size lineBreakMode:UILineBreakModeWordWrap];
UIView *viewUnderline=[[UIView alloc] init];
viewUnderline.frame=CGRectMake((blabel.frame.size.width - expectedLabelSize.width)/2, expectedLabelSize.height + (blabel.frame.size.height - expectedLabelSize.height)/2, expectedLabelSize.width, 1);
viewUnderline.backgroundColor=[UIColor blackColor];
[scrollDemo addSubview:viewUnderline];
[viewUnderline release];
The line above will appear below the text. You just need to change Y for UIView and it'll do wonders :)
put another label with "_" over it
transparent background.
you can create UIView with line's height and width and give background color to it. Put UIView over your UILabel .
For one of my projects I've created an UILabel subclass, which supports multiline text, underline, strikeout, underline/strikeout line offset, different text alignment and different font sizes.
Please see provided link for more info and usage example.
https://github.com/GuntisTreulands/UnderLineLabel
Place a UIImageView with line image on your label so when you run application it will fit.
I have a list of items I'd like to show in a UITableViewCell. Right now, I'm simply using a cell.textLabel with commas separating each value, but I'd like to do something a little more dynamic.
How would I achieve something like this?
Would it be an array of UILabels with borders and radius on those borders?
Thanks for your ideas.
Here's a possible quick and easy way to do this. It's based on the code that you can get here.
Note that you have to add the QuartzCore framework to your project and include in the file where you write this code!
Every UIView is backed by a CALayer. You can get at the UIView's CALayer with the .layer property. Since a UILabel is a UIView, you can get its backing layer this way. Once you have the backing layer, you can set its backgroundColor, cornerRadius, borderColor, and borderWidth properties. That should let you create the rounded effect.
To get the centered effect, try setting the UILabel's textAlignment to UITextAlignmentCenter. Then, you could try setting the UILabel's frame based on sizeThatFits, or maybe based on calling sizeWithFont on the string you're putting into the label.
Here's some quick, totally untested code to get you started.
Assume that somewhere you've initialized a UIFont as follows (put in whatever size you want for the font).
labelFont = [UIFont systemFontOfSize:14];
Then, for each label, set it up as follows.I'm assuming you've pulled the text out of an array and put into a variable called "text". X_PADDING and Y_PADDING are how much spacing you want around the label's text. xLoc and yLoc are variables you're using to keep track of the x and y position you want to put the labels at. You'll probably increase xLoc based on textSize + X_PADDING + LABEL_SPACING or something (where you define LABEL_SPACING):
CGSize textSize = [text sizeWithFont:labelFont];
CGRect frame = CGRectMake( xLoc, yLoc,
textSize.width + X_PADDING,
textSize.height + Y_PADDING);
UILabel *label = [[UILabel alloc] initWithFrame:frame];
label.text = text;
label.textAlignment = UITextAlignmentCenter;
CALayer *layer = label.layer;
layer.masksToBounds = YES;
layer.cornerRadius = 7.0; // or whatever works for you
layer.borderWidth = 1.0;
layer.borderColor = [[UIColor redColor].CGColor;
layer.backgroundColor = [UIColor blueColor].CGColor;
// Add the layer into its superview
[yourSuperview addSubview:label];
I hope this helps get you started.
I have observed that UIPicker always remains in black color,
Is there any way to change the color of UIPicker & it's Selection Indicator?
Thanks for helping me.
I assume all you want to change is the color of the border of the picker, not of the region in the center with which the user interacts. In this case, do the following:
Create 4 "cover" UIViews and add them directly to the UIPicker, as in:
[picker addSubview: coverView];
Position these views over the top, bottom, left and right sides of the picker border. (You will need to experiment with sizes.) Set the backgroundColor of the coverViews to the color you want, and adjust the alpha to get the gradient shading from the picker. Again, this may take a bit of experimentation.
The alternative would be to create one big coverView that covers the entire picker, and override the - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event method so that your cover view did not intercept the touches meant for the picker.
You can create your own custom pickers, check the UICatalog sample project at apples site, they show how to make a custom picker, it might help you https://developer.apple.com/iphone/library/samplecode/UICatalog/
Create a single overlay image as Amagrammer suggested but instead of adding it to your view as an image, add it as a button. Then disable the interaction on the button and the picker will receive the touch events without the need to intercept or override anything.
You can do this by adding 5 ImageView also. First one is of size "Selection Indicator" and put it exactly over "Selection Indicator". Now change that imageView's alpha to 0.2 or whatever you want and also add image/color as per your choice. Now, you will see your custom "Selection Indicator". Also, same thing you can do for borders. Add each imageView to four sides of pickerview and make it's size equal to border size. Now fill the images/color you want in that ImageView.
This is the best solution I have found
http://www.inexika.com/blog/Customizing-UIPickerView-UIDatePicker
You'll need to create a new UIView with a UIImageView inside it and then set that as the Accessory for the cell. So you'll need to create a image just like the default accessory but in the color you want.
UIView* accessoryView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 24, 50)];
UIImageView* accessoryViewImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"NEWIMAGE.png"]];
accessoryViewImage.center = CGPointMake(12, 25);
[accessoryView addSubview:accessoryViewImage];
[cell setAccessoryView:accessoryView];
[accessoryViewImage release];
[accessoryView release];
for changing text color here's the solution
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {
CGRect imageFrame = CGRectMake(0.0, 0.0, 15, 15);
UIImageView *label = [[[UIImageView alloc] initWithFrame:imageFrame] **autorelease**];
if (row == 0)
{
label.backgroundColor = [UIColor redColor];
}
if (row == 1)
{
label.backgroundColor = [UIColor blueColor];
}
if (row == 2)
{
label.backgroundColor = [UIColor blackColor];
}
return label;
}
What is the best way to get round corners on an entire UITableView as seen in Stocks and Spotlight? The grouped style doesn't solve the problem because the round corners scroll away with the cell. I'm trying to clip the view so the corners are always round regardless of scroll position.
I saw another discussion about doing this to a UIImage that suggested masking it with another image. I'm not sure if this would work because I need taps to pass through to the table. This isn't isn't ideal for me because I want the background pattern to show through through the corners.
It's an old question but perhaps you still want to know how to do this.
I reproduced a tableView like in Stocks/Spotlight. The trick is
view.layer.cornerRadius = 10;
For this to work you need to include the QuartzCore into the class that you call that property:
#import <QuartzCore/QuartzCore.h>
I heard that this only works since OS 3.0. But since my application is using core data it wasn't a problem because it was already for OS 3.0 and hight.
I created a custom UIView with a subview with cornerRadius 10 and with
view.backgroundColor = [UIColor clearColor];
Then you have to place an UITableView grouped style in that subview. You need to set the backgroundColor to clearColor and the separatorColor to clearColor. Then you have to position the tableview inside the rounded corner view, this is done by setting the frame size and origin. My loadView class of my custom UIView looks like this:
self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];
CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];
CGRect frame;
frame.origin.x = 10;
frame.origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;
scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;
[self.view addSubview:scherm];
CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];
frame.origin.y = -10;
frame.origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;
table.tableView.frame = frame;
[scherm addSubview:table.tableView];
I hope you understand my english, maybe I will write a short blog post about this technique with a sample project, will post the link here when I'm ready.
An easier way to do this is to simply import the QuartzCore framework to your project. #import <QuartzCore/QuartzCore.h> to your tableViewController and just set
myTableView.layer.cornerRadius=5;
This will give you rounded corners without having to add your tableview to a superView or clipping it.
Instead of hacking through the code, here's an easy to mimic the grouped style. This works if all you want is one section.
In Interface Builder:
Set UITableView style to Plain and make the frame with some padding on the left and right, perhaps with x = 10 and width = 300.
Then set the corner radius and color yourself:
#import <QuartzCore/QuartzCore.h>
self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;
self.tableView.layer.borderWidth = 1;
self.tableView.layer.cornerRadius = 4;
Have you tried the "grouped" table view style?
self.tableView.style = UITableViewStyleGrouped;
For further reference, see the Table View Programming Guide. The "About Table Views" chapter has some nice screenshots describing the different styles.
Well, there is alot of approach to solve this problem.
However, in my case, all doesn't work correctly. My table sometimes is smaller than table size.
I will share the way I did. I belive is alot easer and faster than some options above.
Make the first and last item rounded.
Create CAShapeLayer for top(left|right) and bottom(left|right).
shapeTop = [CAShapeLayer layer];
shapeTop.path = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
shapeBottom = [CAShapeLayer layer];
shapeBottom.path = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
The table need to be backgroud clearColor;
The cells has to be a colored background;
Set the layer.mask of it
UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundView.backgroundColor = [UIColor whiteColor];
cell.backgroundView = backgroundView;
Don't forget #import <QuartzCore/QuartzCore.h>
I recently came across this problem and solved it a different way. Thought I'd share the results with everyone.
I created a rectangular UIView with a clear, rounded-corner interior, and then laid that on top of the UITableView. You can find the full description at my programming blog.
It works exactly the way I want.
Below code for Swift version :
let redColor = UIColor.redColor()
self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
self.tableView.layer.borderWidth = 1;
self.tableView.layer.cornerRadius = 4;
Make sure that you have import QuartzCore in import section.
Here is swift extension:
extension UITableView {
public var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = true
}
}
}
Used by this way
tableView.cornerRadius = 7.5
UITableViewStyleInsetGrouped
A table view where the grouped sections are inset with rounded corners.
example code:
self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];
looks like:
Settings looking table view sections