I want to make my login interface a little bit more fancy. So I wanted to build somethin like this:
Thats what i Have to far:
self.usernameTextField.layer.borderWidth = 1.0f;
self.usernameTextField.layer.borderColor = [[UIColor colorWithRed:171.0/255.0 green:171.0/255.0 blue:171.0/255.0 alpha:1.0] CGColor];
self.usernameTextField.layer.cornerRadius = 5;
self.usernameTextField.clipsToBounds = YES;
self.passwordTextField.layer.borderWidth = 2.0f;
self.passwordTextField.layer.borderColor = [[UIColor colorWithRed:171.0/255.0 green:171.0/255.0 blue:171.0/255.0 alpha:1.0] CGColor];
self.passwordTextField.layer.cornerRadius = 5;
self.passwordTextField.clipsToBounds = YES;
How can I connect them? There is still a gap between the two UITextFields..
Put plain image background like your interface and put two text fields on that image and set boarder style like below.
[yourTextField setBorderStyle:UITextBorderStyleNone];
The example you show is almost certainly using a table view. If you want to mimic it created a grouped table view with 2 static rows and add your text fields to each row. Make sure the text fields border style is set to none (it should be the default in IB), then set your placeholder text and color. If you want the icons, that is probably just a small UIImageView to the left of the text field.
You can set your UITextField border style to none.
[self.textField setBorderStyle:UITextBorderStyleNone];
and then use custom background images, to get the desired look.
Create your both TextField custom type. Dont set any border style.. Fix the image in ImageView and then place the two text field frame for the text in imageview.
Related
i have over 20 buttons in my XCode project, and i want to add border to every of them. is it possible to like select all the UIButtons in the storyboard and then perform codes on them?
// For example
buttons.borderColor = [[UIColor darkGrayColor] CGColor];
buttons.cornerRadius = 8;
buttons.borderWidth = 1;
You could use the UIAppearance protocol.
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAppearance_Protocol/index.html
I need to set a bottom shadow to a button. I have the shadow but somehow I cannot change the shadow color. What am I doing wrong? Here is the code:
[self.buttonsBar.layer setShadowColor:[UIColor colorWithRed:227.0f/255 green:233.0f/255 blue:239.0f/255 alpha:1.0f].CGColor];
[self.buttonsBar.layer setShadowOpacity:1];
[self.buttonsBar.layer setShadowRadius:1];
[self.buttonsBar.layer setShadowOffset:CGSizeMake(0, 1)];
Make sure your self.buttonsBar.clipsToBounds = NO;
also make sure your self.buttonsBar.layer.masksToBounds = NO;
first try large radius and offset to make sure you see them then reduce the numbers, sometimes it is not easy to see the shadow depending on the background colors ...
I'm creating an app and I'm styling some controls like text fields and buttons with layers (for example changing the border color and thickness), or simply by changing the background color of the control from the Interface Builder.
On iOS 7 it's all working good, but when I run the application on iOS 6 (simulator) I see old style controls plus borders of the layer.
The two versions were running both with the iOS 6.1 SDK.
Here is the screen of what is happening: (I can't post images for the reputation on SO)
EDIT:
The code for the textfields i use is this:
UITextField* textField = (UITextField*) aView;
textField.layer.cornerRadius = 0.0;
textField.layer.borderColor = [[UIColor lightGrayColor] CGColor];
textField.layer.backgroundColor = [[UIColor whiteColor] CGColor];
And for the "Login" button i simply changed the background color in the IB.
In order to remove the border of the textFields, set the borderStyle to none:
textField.borderStyle = UITextBorderStyleNone;
As for the Login button, don't forget to set the button's type to Custom in IB.
Tell me if that works.
It looks like this whenever off:
While I'd prefer more of a grey background. Do I really have to use a UIImageView?
Here is how I changed the fill color of my iOS7 UISwitch.
First you need to import QuartzCore.
#import <QuartzCore/QuartzCore.h>
Then set the background color and round the UISwitch's corners.
UISwitch *mySwitch = [[UISwitch alloc] initWithFrame:CGRectMake(0.0, 0.0, 51.0, 31.0)];
mySwitch.backgroundColor = [UIColor redColor];
mySwitch.layer.cornerRadius = 16.0; // you must import QuartzCore to do this.
[self addSubview:mySwitch];
This will give you a UISwitch with a custom off (background) color.
Hope this helps someone:)
You can set the setOnTintColor property of your UISwitch to the color you desire.
You can also set this for the switch in Interface Builder. Just set the background colour of the UISwitch to whatever colour you want (white, in the example below), then set a User Defined Runtime Attribute of layer.cornerRadius = 16:
There's no API support for changing the off fill color of a UISwitch.
Adjusting the tintColor will only affect the outline, and adjusting the backgroundColor will affect the whole frame, including the parts outside the rounded bounds.
You either have to place a properly shaped opaque UIView behind it or - easier - use a custom open source implementation, such as MBSwitch, which allows you to set the off fill color.
You can also use an image as background, using the [UIColor colorWithPatternImage];
mySwitch.onTintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"toggle-bg-on"]];
mySwitch.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"toggle-bg-off"]];
Adding to Barry Wyckoff solution : set tint color also
UISwitch *mySwitch = [[UISwitch alloc] initWithFrame:CGRectMake(0.0, 0.0, 51.0, 31.0)];
mySwitch.backgroundColor = [UIColor redColor];
mySwitch.layer.cornerRadius = 16.0; // you must import QuartzCore to do this.
mySwitch.tintColor = [UIColor redColor];
[self addSubview:mySwitch];
I have seen some answers that show how to change the placeHolder text color for UITextField by overriding the drawPlaceholderInRect: method such as this one:
iPhone UITextField - Change placeholder text color
but that does not maintain the existing attributes such as alignment, font, etc...what is a better way to solve this?
From iOS 6,
Without any subclassing, one can accomplish this with a couple lines of code like so:
UIColor *color = [UIColor blackColor];
textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:placeholderText attributes:#{NSForegroundColorAttributeName: color}];
There are multiple ways to achieve this.
Using Interface Builder or Storyboard
Select the Textfield for which you want to change placeholder color
go to the Identity inspector menu on Top right of Xcode
Add the key value pair this way
Key path = _placeholderLabel.textColor
Click the Type and chose Color attribute .
Then select the color in value.
Set The placeholder color using code :
Process 1:
[textField setValue:[UIColor blueColor] forKeyPath:#"_placeholderLabel.textColor"];
Process 2 :
Override drawPlaceholderInRect:(CGRect)rect method
- (void) drawPlaceholderInRect:(CGRect)rect {
[[UIColor blueColor] setFill];
[[self placeholder] drawInRect:rect withFont:[UIFont systemFontOfSize:14]];
}
There is indeed a much better way to handle this now. This will work for iOS 6 and 7.
(Note this example, I created the code in AwakeFromNib since it won't be changing colors once set. But if you don't use XIB, you will have to change the location where you put this code, such as in drawPlaceholderInRect,)
In this example, we create a subclass of UITextField, override awakeFromNib and then set the placeHolder text color to red:
- (void)awakeFromNib
{
if ([self.attributedPlaceholder length])
{
// Extract attributes
NSDictionary * attributes = (NSMutableDictionary *)[ (NSAttributedString *)self.attributedPlaceholder attributesAtIndex:0 effectiveRange:NULL];
NSMutableDictionary * newAttributes = [[NSMutableDictionary alloc] initWithDictionary:attributes];
[newAttributes setObject:[UIColor redColor] forKey:NSForegroundColorAttributeName];
// Set new text with extracted attributes
self.attributedPlaceholder = [[NSAttributedString alloc] initWithString:[self.attributedPlaceholder string] attributes:newAttributes];
}
}
The nice thing about this approach is that it maintains the current UITextField properties for the placeHolder string and so will allow you to work in IB for most of what you set. In addition, its much more efficient than doing everytime you need to draw. It also allows you to change any other property you want on the placeHolder text while maintaining the rest of the properties.
As mentioned above, if don't use XIBs, then you will need to call this at some other time. If you do put this code in the drawPlaceholderInRect: method, then make sure you call [super drawPlaceholderInRect:] at the end of it.
The safe way to customize UITextField’s placeholder is subclassing the UITextField and overriding placeholderRectForBounds:, Apple won’t bother you on this one. However, if you want to take the risk, you can try this way:
[self.MyTextField setValue:[UIColor darkGrayColor] forKeyPath:#"_placeholderLabel.textColor"];
Source.