I am using a text view as a comment composer.
In the properties inspector I can't find anything like a border style property so that I can make use a rounded rect, something like UITextField.
So, the question is: How can I style a UITextView like a UITextField with a rounded rect?
There is no implicit style that you have to choose, it involves writing a bit of code using the QuartzCore framework:
//first, you
#import <QuartzCore/QuartzCore.h>
//.....
//Here I add a UITextView in code, it will work if it's added in IB too
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];
//To make the border look very close to a UITextField
[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];
//The rounded corner part, where you specify your view's corner radius:
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;
It only works on OS 3.0 and above, but I guess now it's the de facto platform anyway.
this code worked well for me:
[yourTextView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[yourTextView.layer setBorderColor: [[UIColor grayColor] CGColor]];
[yourTextView.layer setBorderWidth: 1.0];
[yourTextView.layer setCornerRadius:8.0f];
[yourTextView.layer setMasksToBounds:YES];
Swift 3 Version
After setting up the text view in interface builder.
#IBOutlet weak var textView: UITextView!
override func viewDidLoad() {
super.viewDidLoad()
textView.layer.cornerRadius = 5
textView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
textView.layer.borderWidth = 0.5
textView.clipsToBounds = true
}
Swift 2.2 Version
#IBOutlet weak var textView: UITextView!
override func viewDidLoad() {
super.viewDidLoad()
textView.layer.cornerRadius = 5
textView.layer.borderColor = UIColor.grayColor().colorWithAlphaComponent(0.5).CGColor
textView.layer.borderWidth = 0.5
textView.clipsToBounds = true
}
Edit: You have to import
#import <QuartzCore/QuartzCore.h>
for using corner radius.
Try this it will work for sure
UITextView* txtView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 300, 100)];
txtView.layer.cornerRadius = 5.0;
txtView.clipsToBounds = YES;
As
Rob figured it out setting the if you want the border color to be similar as UITextField then you need to change the border width to 2.0 and color to gray by adding the following line
[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];
I wanted the real deal, so I add UIImageView as a subview of the UITextView. This matches the native border on a UITextField, including the gradient from top to bottom:
textView.backgroundColor = [UIColor clearColor];
UIImageView *borderView = [[UIImageView alloc] initWithFrame: CGRectMake(0, 0, textView.frame.size.width, textView.frame.size.height)];
borderView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
UIImage *textFieldImage = [[UIImage imageNamed:#"TextField.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 8, 15, 8)];
borderView.image = textFieldImage;
[textField addSubview: borderView];
[textField sendSubviewToBack: borderView];
These are the images I use:
One solution is to add a UITextField below the UITextView, make the UITextView background transparent and disable any user interaction on the UITextField. Then in code change the UITextField frame with something like that
self.textField.frame = CGRectInset(self.textView.frame, 0, -2);
You will have exactly the same look as a text field.
And as suggested by Jon, you should put this piece of code inside [UIViewController viewDidLayoutSubviews] on iOS 5.0+.
For the best effect you have to use a custom (stretchable) background image. This is also how the UITextField's rounded border is drawn.
One way I found to do it without programming is to make the textfield background transparent, then place a Round Rect Button behind it. Make sure to change the button settings to disable it and uncheck the Disable adjusts image checkbox.
You may want to check out my library called DCKit.
You'd be able to make a rounded corner text view (as well as text field/button/plain UIView) from the Interface Builder directly:
It also has many other useful features, such as text fields with validation, controls with borders, dashed borders, circle and hairline views etc.
I know there are already a lot of answers to this one, but I didn't really find any of them sufficient (at least in Swift). I wanted a solution that provided the same exact border as a UITextField (not an approximated one that looks sort of like it looks right now, but one that looks exactly like it and will always look exactly like it). I needed to use a UITextField to back the UITextView for the background, but didn't want to have to create that separately every time.
The solution below is a UITextView that supplies it's own UITextField for the border. This is a trimmed down version of my full solution (which adds "placeholder" support to the UITextView in a similar way) and was posted here: https://stackoverflow.com/a/36561236/1227119
// This class implements a UITextView that has a UITextField behind it, where the
// UITextField provides the border.
//
class TextView : UITextView, UITextViewDelegate
{
var textField = TextField();
required init?(coder: NSCoder)
{
fatalError("This class doesn't support NSCoding.")
}
override init(frame: CGRect, textContainer: NSTextContainer?)
{
super.init(frame: frame, textContainer: textContainer);
self.delegate = self;
// Create a background TextField with clear (invisible) text and disabled
self.textField.borderStyle = UITextBorderStyle.RoundedRect;
self.textField.textColor = UIColor.clearColor();
self.textField.userInteractionEnabled = false;
self.addSubview(textField);
self.sendSubviewToBack(textField);
}
convenience init()
{
self.init(frame: CGRectZero, textContainer: nil)
}
override func layoutSubviews()
{
super.layoutSubviews()
// Do not scroll the background textView
self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
}
// UITextViewDelegate - Note: If you replace delegate, your delegate must call this
func scrollViewDidScroll(scrollView: UIScrollView)
{
// Do not scroll the background textView
self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
}
}
One way I found to do it without programming is to make the textfield background transparent, then place a Round Rect Button behind it. Make sure to change the button settings to disable it and uncheck the Disable adjusts image checkbox.
Tried the Quartzcore code and found it caused lag on my old 3G (I use for testing). Not a big issue but if you want to be as inclusive as possible for different ios and hardware I recommend Andrew_L's answer above - or make your own images and apply accordingly.
There is a great background image that is identical to the UITextView used for sending text messages in iPhone's Messages app. You'll need Adobe Illustrator to get & modify it.
iphone ui vector elements
#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad{
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;
[textView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[textView.layer setBorderColor: [[UIColor grayColor] CGColor]];
[textView.layer setBorderWidth: 1.0];
[textView.layer setCornerRadius:8.0f];
[textView.layer setMasksToBounds:YES];
[self.view addSubView:textview];
}
You can create a Text Field that doesn't accept any events on top of a Text View like this:
CGRect frameRect = descriptionTextField.frame;
frameRect.size.height = 50;
descriptionTextField.frame = frameRect;
descriptionTextView.frame = frameRect;
descriptionTextField.backgroundColor = [UIColor clearColor];
descriptionTextField.enabled = NO;
descriptionTextView.layer.cornerRadius = 5;
descriptionTextView.clipsToBounds = YES;
If you want to keep your controller code clean, you can subclass UITextView like below, and change the class name in the Interface Builder.
RoundTextView.h
#import <UIKit/UIKit.h>
#interface RoundTextView : UITextView
#end
RoundTextView.m
#import "RoundTextView.h"
#import <QuartzCore/QuartzCore.h>
#implementation RoundTextView
-(id) initWithCoder:(NSCoder *)aDecoder {
if (self = [super initWithCoder:aDecoder]) {
[self.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.333] CGColor]];
[self.layer setBorderWidth:1.0];
self.layer.cornerRadius = 5;
self.clipsToBounds = YES;
}
return self;
}
#end
Here is my solution:
- (void)viewDidLoad {
[super viewDidLoad];
self.textView.text = self.messagePlaceholderText;
self.textView.layer.backgroundColor = [[UIColor whiteColor] CGColor];
self.textView.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.3] CGColor];
self.textView.layer.borderWidth = 0.5;
self.textView.layer.cornerRadius = 5.5f;
self.textView.layer.masksToBounds = YES;
self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
}
- (void)textViewDidBeginEditing:(UITextView *)textView {
if (textView == self.tvMessage) {
// Delete placeholder text
if ([self.textView.text isEqualToString:self.messagePlaceholderText]) {
self.textView.text = #"";
self.textView.textColor = [UIColor blackColor];
}
}
}
- (void)textViewDidEndEditing:(UITextView *)textView {
if (textView == self.tvMessage) {
// Write placeholder text
if (self.textView.text.length == 0) {
self.textView.text = self.messagePlaceholderText;
self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
}
}
}
I don't think that it is possible. but you can do UITableView(grouped) with 1 section and 1 empty cell and use it as a container for your UITextView.
This is an old question, and I was also searched for this questions answer. luvieeres' answer is 100% correct and later Rob added some code. That is excellent, but I found a third party in another questions answer which seems very helpful to me. I was not only searched for similar look of UITextField over UITextView, I was also searched for multiline support. ChatInputSample satisfied both. Thats why I think this third party might be helpful to others. Also thanks to Timur, he mentioned this open source in here.
In iOS7 the following matches UITextField border perfectly (to my eye at least):
textField.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor];
textField.layer.borderWidth = 0.5;
textField.layer.cornerRadius = 5;
textField.clipsToBounds = YES;
There is no need to import anything special.
Thanks to #uvieere and #hanumanDev whose answers go me almost there :)
How about just:
UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(20, 20, 280, 32)];
textField.borderStyle = UITextBorderStyleRoundedRect;
[self addSubview:textField];
Related
I am using following code for adding border for UIButton,it works fine,But the border appears outside UIButton area.How to add border inside UIbutton area.Please help me..
[[button1 layer] setBorderWidth:7.0];
[[button1 layer] setBorderColor:[UIColor redColor].CGColor];
There is no direct way of adding an inner border for a UIView. However, you can add a subview to it. Something like this: (Implement the below method in your .m file).
-(void)setInnerBorderFor:(UIView *)aView withFloatVal:(CGFloat)aFloatVal
{
UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, aView.frame.size.width, aView.frame.size.height)];
borderView.backgroundColor = [UIColor clearColor];
borderView.layer.borderWidth = aFloatVal;
borderView.layer.borderColor = [UIColor blackColor].CGColor;
[aView addSubview:borderView];
}
And then, you can call :
[self setInnerBorderFor:button1 withFloatVal:7.0f];
I always use your same method to draw borders.
If you want to draw borders inside you could use a background image.
[button1 setBackgroundImage:[UIImage imageNamed:#"button1_bckg.png"]
forState:UIControlStateNormal];
I have a view for which i want set a border for the whole view. Can anyone tell me how to do that?
First u need to add QuartzCore.framework for your project
that is projects->target->build Phaese->link binary with libraries->hear add the QuartzCore.framework
then in the .m or in .h file where ur view is crating import <import <QuartzCore/QuartzCore.h>
then u are able to access the layer properties then use the any of the answer posted below
for your view there is layer property borderWidth you can set it like
view.borderWidth = 2.5f; //any value
and there are lot other layer properties associated with the view u can also use them
you edited the question well use below code to achieve your requirement
lets try this separate project it is the simple way to achieve your goal
do all settings above wat i mentioned and
just copy and past it in viewDidLoad method and run
- (void)viewDidLoad
{
// Do any additional setup after loading the view, typically from a nib.
[super viewDidLoad];
//i am guessing heare, suppose your view is somthing like this
UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(30, 40, 100, 100)];
myView.layer.borderWidth = 2.5f;
myView.layer.borderColor = [UIColor blackColor].CGColor;
myView.backgroundColor = [UIColor whiteColor];//hear u got the view with black border
//now you need to add that label at the top left
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(myView.frame.origin.x + 5, myView.frame.origin.y, 25, 4)];//place the label in the specified position suppose if u use the
label.text = #"Label text";
label.font = [UIFont systemFontOfSize:3.0f];//set the font to your requirement
label.textAlignment = NSTextAlignmentCenter;
label.backgroundColor = [UIColor whiteColor];
//remember the order is important
[self.view addSubview:myView];//first add the view with boreder
[self.view addSubview:label];//then add the this label on top of border
}
hope this helps u .. :)
In Xib take a UIView and label connect them with their IBOutlets and place label on UiView where you want to show label.
and add QuartzCore framework in project.
In your .h file
#Property(nonatomic,strong)IBOutlet UIView *myView;
#Property(nonatomic,strong)IBOutlet UILabel *myLbl;
In Your .m file
myView.layer.borderWidth=3.0f;
myView.layer.borderColor = [[UIColor greenColor] CGColor];
myView.layer.backgroundColor=[UIColor whiteColor].CGColor;
myView.layer.cornerRadius=0.0f;
myLbl.text = #"ReEvaluate";
myLbl.backgroundColor = [UIColor whiteColor];
In your .h file
#Property(nonatomic,strong)UIView *myView;
In your .m file
import <QuartzCore/QuartzCore.h>
##synthesize myView;
self.myView.layer.borderWidth=2.0f;
self.myView.layer.borderColor = [UIColor Black].CGColor;
self.myView.layer.backgroundColor=[UIColor redColor].CGColor;
self.myView.layer.cornerRadius=20.0f;
Try this one , You have to add #import <QuartzCore/QuartzCore.h>
self.Yourview.layer.borderWidth=1.0;
self.Yourview.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.Yourview.layer.backgroundColor=[UIColor whiteColor].CGColor;
self.Yourview.layer.cornerRadius=30.5; // if you want corner radius then do this otherwise comment it
EDIT:
AS per your Requirement :
UITextField with below Steps:
Step (1):
Take Xib or storyboard UITextField.
Step (2):
it More proper set the property on textfield:
Step (3):
Make sure it disable ,like below:
may it will help.
Happy coding..:)
You can set the border properties on the CALayer by accessing the layer property of the button.
First, add Quartz
#import <QuartzCore/QuartzCore.h>
Set properties:
[[myView layer] setBorderWidth:2.0f];
[[myView layer] setBorderColor:[UIColor greenColor].CGColor];
myView.layer.cornerRadius=20.0f;
See:
http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/cl/CALayer
The CALayer in the link above allows you to set other properties like corner radius, maskToBounds etc...
You can use the layer of view for displaying border around your view.
myView.layer.borderwidth = 1.0;
myView.layer.borderColor = [[Uicolor blackcolor].CGColor];
I've tried using the following code but with no luck. Anybody know how to do this in iOS 6? I do not want to create a custom cell.
self.tableView.layer.cornerRadius = 5.0f;
[self.tableView setClipsToBounds:YES];
Edit:
It appears that what's actually happening is that this code is creating a corner radius for the entire view, not each individual UITableViewSection. Does this make sense?
I have also tried [cell.layer setCornerRadius:3.0]; but also with no luck. The corners of my UITableView are still exactly the same.
You can change de backgroundView of the TableViewCell, create a subclass of UIView and change the layer class:
#interface BackgroundView : UIView
#end
#implementation BackgroundView
+ (Class)layerClass
{
return [CAShapeLayer class];
}
#end
later in cellForRowAtIndexPath you do something like this:
static NSString *CellIdentifier = #"CustomCell";
CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
CGRect frame = cell.backgroundView.frame;
cell.backgroundView = [[BackgroundView alloc] initWithFrame:frame];
CGFloat corner = 20.0f;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:cell.backgroundView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(corner, corner)];
CAShapeLayer *shapeLayer = (CAShapeLayer *)cell.backgroundView.layer;
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = cell.textLabel.backgroundColor.CGColor;
shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;
shapeLayer.lineWidth = 1.0f;
return cell;
Results this:
You can modify the corners you want or create another path.
I hope it helps.
who said [_tblView.layer setCornerRadius:10.0]; is not working in grouped style tableView.
Write this code and you will set setCornerRadius also works in grouped tableView.
[_tblView setBackgroundView:nil];
[_tblView setBackgroundColor:[UIColor greenColor]];
[_tblView.layer setCornerRadius:10.0];
[_tblView.layer setCornerRadius:10.0]; will not create corner radius for particular section of tableView this is for setting corner radius of whole tableView.
instead of setting the corner radius of the cell, set the radius for the cell.contentview as follows:
cell.contentView.layer.cornerRadius = 10.0f;
cell.contentView.layer.borderColor = [UIColor blackColor].CGColor;
cell.contentView.layer.borderWidth = 3.0f;
put the above code while initializing the cell.
Add this to your .h file
#import <QuartzCore/QuartzCore.h>
And use below in your code,
tblView.layer.cornerRadius=5.0f;
add quartzcore framework to your project
import QuartzCore/QuartzCore.h to your .h file
self.tableView.layer.cornerRadius = 5.0f;
I think you are missing this line of code :
[self.tableView.layer setMasksToBounds:YES];
First you Need to use the QuartzCode Framework Import that Framework ANd Declare .h File Which class you wanted to set the Layer Effect.
And Add that Method
myTableView.layer.cornerRadius=5;
[myTableView setClipsToBounds:YES];
and if you want to set corner radious to cell also tried this code
UITableViewCell.layer is kind of class CALayer and CALayer class have a property called cornerRadius. so you set the cell's corner radius as fallows:
[cell.layer setCornerRadius:3.0];
Try this code.
You can do by this. Its working for me
UILabel *delLbl = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 300, 44)];
delLbl.font = [UIFont fontWithName:#"Arial-BoldMT" size:18];
delLbl.layer.cornerRadius = 10.0f;
delLbl.layer.borderWidth = 1.0f;
delLbl.layer.borderColor = [UIColor grayColor].CGColor;
delLbl.text = #"Cell Text";
delLbl.textAlignment = NSTextAlignmentCenter;
[cell.contentView addSubview:delLbl];
cell.backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
Return Cell;
I think PrettyKit is what you're looking for. Fully customisable and fast. https://github.com/vicpenap/PrettyKit give it a go. Should do the job properly.
Try this:-
tableView.layer.cornerRadius=5.0f;
I created a generator which creates for example a textfield.
-(UITextField *)generateTextField
{
UITextField *textfield = [[UITextField alloc]initWithFrame:CGRectMake(100, 150, 100, 40)];
textfield.layer.borderColor = [[UIColor colorWithRed:171.0/255.0 green:171.0/255.0 blue:171.0/255.0 alpha:1.0] CGColor];
return textfield;
}
Now, i am calling this function at another class with an UIView. But it doesn't show me my textfield on the screen:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
SubtaskGenerator *scg = [[SubtaskGenerator alloc]init];
UITextField * textfield = [scg generateTextField];
[self.view addSubview:textfield];
}
Do I have to do it on another way?
it is actually there, but you can't see it.
Default UITextField border width is 0.0, so you will not see it or the text field it frames.
Just add this line to generateTextField function:
textfield.layer.borderWidth = 2.0;
I am using UITextView on a scroll view ...and I want it to auto expand when I write something in it ...... but I am unable to do it ...
textViewBusiness = [[UITextView alloc] initWithFrame:CGRectMake(25,332,268,60)];
textViewBusiness.text=strMyBusiness;
textViewBusiness.editable=NO;
textViewBusiness.font = [UIFont fontWithName:#"Arial" size: 17.0];
textViewBusiness.layer.borderWidth = 2.0f;
textViewBusiness.layer.borderColor = [[UIColor grayColor] CGColor];
textViewBusiness.backgroundColor = [UIColor clearColor];
[textViewBusiness setTextColor:[UIColor blackColor]];
[self.scrollView addSubview: textViewBusiness];
CGRect frame = textViewBusiness.frame;
frame.size.height = textViewBusiness.contentSize.height;
textViewBusiness.frame = frame;
This code is not working for me ...
Thanks
Make sure the text field's delegate is set...
someTextField.delegate = self;
Then adjust the size of the textView in the appropriate text field delegate method.
- (void)textViewDidChange:(UITextView *)textView;
- (void) textViewDidEndEditing:(UITextView *)textView;
The code you've added above is correct. Just make sure it's in the correct place.
- (void)textViewDidChange:(UITextView *)textView
{
CGRect frame = textView.frame;
frame.size.height = textView.contentSize.height;
textView.frame = frame;
}
Dynamic expand UITextView
Your code won't work.
You need to divide your code into 2 fragments, then place them into proper places, then your code should work.
Fragment 1 (in my test, I place this fragment in viewDidLoad):
textViewBusiness = [[UITextView alloc] initWithFrame:CGRectMake(25,332,268,60)];
textViewBusiness.text=strMyBusiness;
textViewBusiness.editable=NO;
textViewBusiness.font = [UIFont fontWithName:#"Arial" size: 17.0];
textViewBusiness.layer.borderWidth = 2.0f;
textViewBusiness.layer.borderColor = [[UIColor grayColor] CGColor];
textViewBusiness.backgroundColor = [UIColor clearColor];
[textViewBusiness setTextColor:[UIColor blackColor]];
[self.scrollView addSubview: textViewBusiness];
Ensure that the above fragment run, and your text view is displayed in the screen, then run the second fragment. If your text view is not displayed in the screen, then the contentView is not initialized, and the height is undefined.
Fragment 2 (in my test, I place this fragment in viewDidAppear):
CGRect frame = textViewBusiness.frame;
frame.size.height = textViewBusiness.contentSize.height;
textViewBusiness.frame = frame;
Good luck!
HPGrowingTextView is a UITextView which grows/shrinks with the text and starts scrolling when the content reaches a certain number of lines. Similar to the one Apple uses in the SMS-app. See the link for a small (outdated) screencast.