I'm making what should be a simple change to an app to add a UISearchBar component, but am getting some fairly strange layout quirks in the UI. It's perhaps easier to illustrate using pictures.
Here's what the component looks like when it doesn't have focus:
Note that the icon and the placeholder text are too far over, and the placeholder text is too far up. And here's what happens when I tap on the field:
The icon is now in the correct place, but the placeholder text is now too far to the left and overlapping with the icon. What gives?
When the field loses focus, it reverts to its original layout. Unless I type some text into it first, in which case it retains the second layout.
The code I'm using to set up the UISearchBar isn't doing anything special:
UIView* containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
containerView.backgroundColor = UI_COLOR_NAV_TITLEBAR;
searchField = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, containerView.frame.size.width - 40, 44)];
searchField.placeholder = #"search all items";
searchField.searchBarStyle = UISearchBarStyleMinimal;
searchField.showsBookmarkButton = NO;
searchField.showsCancelButton = NO;
searchField.showsScopeBar = NO;
searchField.showsSearchResultsButton = NO;
UITextField* textSearchField = [searchField valueForKey:#"_searchField"];
searchField.backgroundColor = [UIColor clearColor];
textSearchField.textColor = UI_COLOR_NAV_TEXT;
searchField.delegate = self;
[containerView addSubview:searchField];
//...
I want the UISearchBar to always appear as in the second example, except obviously without the text field overlapping with the icon. Is there a simple solution to this issue that I've overlooked?
Try following code for searchField..
[searchField setLeftViewMode:UITextFieldViewModeNever];
[searchField setRightViewMode:UITextFieldViewModeNever];
[searchField setBackground:[UIImage imageNamed:#"searchicon.png"]];
Last is to show icon at left side, use image for that.
Related
I want to keep UISearchBar's placeholder along with search icon left-aligned in all versions of iOS. then,how can I handle with it?
I attempt to append whitespace character to the UISearchBar's placeHolder, It seems to resolve the problem, But I want to know whether exist elegant method to handle this problem.
Use UItextField and customise the textfield as you desire rather then tricking UISerachbar with whitespaces.
txtSearchBar = [self putsearchIconOnLeft: txtSearchBar];
-(UITextField*)putsearchIconOnLeft:(UITextField*)setTextField
{
UITextField *txt = setTextField;
UIView *viewTmp = [[UIView alloc] initWithFrame:CGRectMake(5, 0, 10, 10)];
UIImageView *imgSearch = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 10, 10)];
imgSearch.image = [UIImage imageNamed:#"icon-search.png"];
[viewTmp addSubview:imgSearch];
txt.leftView = viewTmp;
txt.leftViewMode = UITextFieldViewModeAlways;
return txt;
}
Is it possible to set a UITextField's input range (not the number of characters)? You can check out my screenshot below.
I already tried implementing this: Ellipsis at the end of UITextView
It didn't work, or I'm just doing it wrong.
What I want is to limit the size of the user's input AND make it ellipsis. The text at the left side of UITextfields are merely UILabels set as subviews.
So again... I need help in setting the range of the text input, and if the input length or width overlaps my RED MARK in my screenshot, the rest of the input will be converted to POINTS OF ELLIPSIS. And then I'm pretty sure I can now proceed to my project (example: clicking the arrow button will make a small popup that will show the full text).
I forgot to add my codes in that UITextField:
self.billingAddressTextField = [[UITextField alloc] init];
_billingAddressTextField.frame = CGRectMake(0, 150, scrollView.frame.size.width, 50);
_billingAddressTextField.delegate = self;
_billingAddressTextField.borderStyle = UITextBorderStyleNone;
_billingAddressTextField.background = [UIImage imageNamed:#"textfieldLogIn.png"];
[_billingAddressTextField setTextColor:[UIColor colorWithRed:0.686 green:0.686 blue:0.686 alpha:1.0]];
_billingAddressTextField.backgroundColor = [UIColor clearColor];
_billingAddressTextField.autocapitalizationType = UITextAutocapitalizationTypeWords;
[_billingAddressTextField setFont:[_billingAddressTextField.font fontWithSize:16.0f]];
[_billingAddressTextField setTextAlignment:NSTextAlignmentRight];
[scrollView addSubview:_billingAddressTextField];
Ok solved, I just added a new Padding (UIView) at the left side of the UITextField (billingAddressTextField). So there are now two paddings (both side) in my UITextField.
UIView *paddingViewForArrowButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 35, 25)];
_billingAddressTextField.rightView = paddingViewForArrowButton;
_billingAddressTextField.rightViewMode = UITextFieldViewModeAlways;
UIView *paddingforBillingLeft = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 25)];
_billingAddressTextField.leftView = paddingforBillingLeft;
_billingAddressTextField.leftViewMode = UITextFieldViewModeAlways;
I've programmatically created two UITextFields in my iOS app, and set their text to the _minPrice and _minPrice variables, respectively.
The _minPrice and _maxPrice values appear correctly in the two fields, but tapping on them doesn't allow the user to edit them, they just remain those static values, backspacing doesn't work. Is there anything about my code thats preventing the text fields from being edited?
// Min Price
UITextField *tf = [[UITextField alloc] initWithFrame:CGRectMake(-25, -76, 70, 30)];
tf.textColor = [UIColor blackColor];
tf.font = [UIFont fontWithName:#"Helvetica-Neue" size:14];
tf.backgroundColor=[UIColor whiteColor];
tf.text= _minPrice;
tf.textAlignment = NSTextAlignmentCenter;
tf.layer.cornerRadius=8.0f;
tf.layer.masksToBounds=YES;
tf.layer.borderColor=[[UIColor lightGrayColor]CGColor];
tf.layer.borderWidth= 1.0f;
// Max Price
UITextField *tf1 = [[UITextField alloc] initWithFrame:CGRectMake(100, -76, 70, 30)];
tf1.textColor = [UIColor blackColor];
tf1.font = [UIFont fontWithName:#"Helvetica-Neue" size:14];
tf1.backgroundColor=[UIColor whiteColor];
tf1.text= _maxPrice;
tf1.textAlignment = NSTextAlignmentCenter;
tf1.layer.cornerRadius=8.0f;
tf1.layer.masksToBounds=YES;
tf1.layer.borderColor=[[UIColor lightGrayColor]CGColor];
tf1.layer.borderWidth= 1.0f;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 400, 400)];
[view addSubview:tf];
[view addSubview:tf1];
[self.view addSubview:view];
Your issue is clearly the frames you're setting...
Setting the color of the view you add the labels to to blue reveals your problem:
If you ensure that the labels are actually within the view you add them to (i.e. not negative), editing will be fine. All I did was change the negative x and y values in tf to positive, and they were editable:
UITextField *tf = [[UITextField alloc] initWithFrame:CGRectMake(25, 76, 70, 30)];
Try this! Maybe there is another view at the top of the textField
your_textfield.userInteractionEnabled = YES;
If this doesn't work
add another line
[self.view bringSubviewToFront: your_textfield];
Try to add delegate methods on your textfields. Like
- (void) textFieldDidEndEditing:(UITextField *)textField
{
// ADD BREAKPOINT HERE.
}
Check if it goes to that line of code. If not maybe there's a view on top of it. Or you can try to bring textfield to front like .
[self.view bringSubviewToFront:yourTextfield];
But this isn't a good example of how you fix the problem. Just to test if there is a view on top of it.
I have a UIToolbar that I have programatically created that has a UITextField and UIButton added to it as separate subviews. The code below shows the method which creates the UIToolbar and returns the UIView.
- (UIToolbar *)createToolbar
{
//set background of toolbar
UIImage *rawBackground = [UIImage imageNamed:#"toolbarBackground.png"];
UIImage *toolBarBackground = [rawBackground stretchableImageWithLeftCapWidth:13 topCapHeight:22];
createPostBar = [[UIToolbar alloc] init];
createPostBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 44);
[createPostBar setBackgroundImage:toolBarBackground forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
//add and syle all toolbar items
textView = [[HPGrowingTextView alloc] initWithFrame:CGRectMake(5, 6, 270, 40)];
textView.contentInset = UIEdgeInsetsMake(0, 5, 0, 5);
textView.minNumberOfLines = 1;
textView.maxNumberOfLines = 6;
textView.returnKeyType = UIReturnKeyDefault;
textView.font = [UIFont systemFontOfSize:15.0f];
textView.textColor = [UIColor blackColor];
textView.text = #"";
textView.delegate = self;
textView.internalTextView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 0, 0);
textView.backgroundColor = [UIColor whiteColor];
UIImage *postBtnBackground = [UIImage imageNamed:#"postButton.png"];
UIImage *rawEntryBackground = [UIImage imageNamed:#"postFieldBackground.png"];
UIImage *entryBackground = [rawEntryBackground stretchableImageWithLeftCapWidth:13 topCapHeight:22];
toolbarOverlay = [[UIImageView alloc] initWithImage:entryBackground];
toolbarOverlay.frame = CGRectMake(4, 0, 278, 44);
UIButton *postButton = [UIButton buttonWithType:UIButtonTypeCustom];
[postButton addTarget:self
action:#selector(btnEdit:)
forControlEvents:UIControlEventTouchDown];
[postButton setBackgroundImage:postBtnBackground forState:UIControlStateNormal];
postButton.frame = CGRectMake(280, 5, 35.0, 35.0);
[createPostBar addSubview:textView];
[createPostBar addSubview:toolbarOverlay];
[createPostBar addSubview:postButton];
createPostBar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
return createPostBar;
}
I then add the UIToolbar to a UITextField as its accessory view when the text field is clicked.
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
if (textField.tag <= 2)
{
textField.inputAccessoryView = [self createToolbar];
}
}
When the text field is clicked the keyboard pops up with the toolbar. Rate now the text field in the toolbar allows you to change the text of the text field that was clicked. Rate now when the text field is clicked the curser stays with in the clicked text field.
How can I make it so that the curser moves to the UITextField in the toolbar when the text field is clicked and no the original text field. Also, how do I disable editing of the text in the text field? I tried disabling user interactions but that made it so the text field was no longer clickable.
You probably shouldn't be using a text field to show your data, use a label instead (with a gesture recognizer).
To show your keyboard, don't use an accessory view, just add the toolbar as a subview and make the text field the first responder.
If you try to do it the way you describe it won't work because the accessory view will be removed when the original text field is no longer the first responder.
Finally, think about maybe using an alert view with a text field instead...
Is it possible to embed a CGRect into a navigation bar just like this screenshot: here
I've done this:
UIView *aView = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 10, 10)];
[self.view addSubview:aView];
UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(100, -15, 150, 10)];
Using a negative figure, it actually allows me to place the label in the same space as the nav bar, but it will be hidden behind it. Is there way for me to bring the label to the front (change the z-index?)? Or is there a way to embed a label in the nav bar?
I've tried using this code but it doesn't effect the label:
[self.view bringSubviewToFront:aView];
Answered thanks to EmptyStack:
Adding this code:
self.navigationItem.titleView = aView;
[aView addSubview:title];
Allows to embed the title (or more) in the navigation bar.
I guess you want this one.
self.navigationItem.titleView = aView;