2012-11-22 29 views
64

enter image description hereDodaj obraz do UITextField w Xcode?

Muszę wdrożyć koncepcję dropdown w Xcode.

W tym celu używam UIPickerview.

Ten pickerView ładuje się, gdy zostanie wywołane pole tekstowe (w textFieldDidBeginEditing:).

Pytanie:

Czy istnieje sposób, że mogę dodać zdjęcie do TextField?

Obraz jest jak znak strzałki, dzięki któremu użytkownik może zrozumieć, że dropdown pojawia się po stuknięciu textfield. Jak mogę to zrobić?

+0

Możesz dodać przycisk strzałki (z Twojego obrazu) obok pola tekstowego, aby otworzyć pickerview. –

+0

Czy mogę programowo dodać coś do widoku obrazu do pola tekstowego? – Honey

+1

Jeśli nie chcesz, aby użytkownik edytował pole tekstowe, zamiast pola tekstowego możesz mieć przycisk. –

Odpowiedz

144

UITextField ma właściwość rightView, jeśli masz obraz jak to- enter image description here Następnie można łatwo ustawić obiekt ImageView na prawy widok:

UITextField *myTextField = [[UITextField alloc] init]; 

myTextField.rightViewMode = UITextFieldViewModeAlways; 
myTextField.rightView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"downArrow.png"]];
+0

@arizah plz sprawdź zaktualizowany anwser. –

+0

dla granicy plz przejść z tego bloga http://www.icodeblog.com/2010/01/04/uitextfield-a-complete-api-overview/ –

+7

Jeśli dodaję obraz po lewej stronie na textField. Jak możemy zarządzać odstępami między obrazem a tekstem. –

2

UITextField ma następującą właściwość:

@property(nonatomic, retain) UIImage *background 

przykład:

UITextField *myTextField = [[UITextField alloc] init]; 
myTextField.background = [UIImage imageNamed:@"myImage.png"]; 
+0

ya, ale jak powinienem połączyć ten uiimage z textfield? – Honey

+0

patrz poprawiona odpowiedź –

3

hej kolego chcesz rozwijanej Widok następnie zobaczyć ten widok niestandardowy rozwijaną ..

  1. http://code.google.com/p/dropdowndemo/downloads/list
  2. http://ameyashetti.wordpress.com/2010/09/26/drop-down-demo/

i do tego wymogu użyć tego kodu

UITextField *txtstate =[[UITextField alloc]init]; [txtstate setFrame:CGRectMake(10, 30,170, 30)]; 
txtstate.delegate=self; 

[email protected]"Fruits"; 

txtstate.borderStyle = UITextBorderStyleLine; 

txtstate.background = [UIImage imageNamed:@"dropdownbtn.png"]; 

[txtstate setAutocorrectionType:UITextAutocorrectionTypeNo]; 
[self.view addSubview:txtstate]; 

i ustawić textfield styl obramowania żaden ..

+0

txtstate = [[UITextField alloc] init]; [txtstate setFrame: CGRectMake (10, 30,170, 30)]; txtstate.delegate = self; txtstate.text = @ "Owoce"; txtstate.borderStyle = UITextBorderStyleNone; txtstate.background = [UIImage imageNamed: @ "Arrow-Down-black-32.png"]; [txtstate setAutocorrectionType: UITextAutocorrectionTypeNo]; [self.view addSubview: txtstate]; Podobało mi się to, ale potrzebuję również granic. Jak mogę to zrobić? – Honey

+0

którego używasz mate ?? oznacza, że ​​używasz tego niestandardowego menu rozwijanego? –

+0

@arizah zobacz moją zredagowaną odpowiedź, po prostu musisz ustawić granicę z koleżanką ... –

30

Możesz umieścić UIImageView na po lewej stronie twojego UITextField.

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(96, 40, 130, 20)]; 
[textField setLeftViewMode:UITextFieldViewModeAlways]; 
textField.leftView= [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"searchIccon.png"]]; 
+1

Dziękuję Erhan, IMO Twoje rozwiązanie jest najlepsze i najkrótsze !!!Bardzo mi to pomogło :) –

+0

Wasze powitanie Davit :). Naprawdę doceniam, słyszę od ciebie dobry dźwięk :) –

35

w Swift:

textField.leftViewMode = UITextFieldViewMode.Always 
textField.leftView = UIImageView(image: UIImage(named: "imageName")) 
+0

eleganckie rozwiązanie!, Ale mam też problem z ustawieniem obrazu tła dla mojego uitexfield (nie lewy widok, ale całe tło), możesz mi powiedzieć jak ?, w szybkim tempie. – Bhimbim

+0

, aby ustawić poprawne marginesy/padding na obrazie, najpierw utwórz widok o większym rozmiarze niż obraz. I utwórz widok obrazu, wyśrodkuj go w UIView, dodaj UIImageView do UIView. Teraz ostatnim krokiem jest ustawienie tego UIView jako .leftView. – kishorer747

5

Aby dodać odpowiednie marginesy/Podkładki pomiędzy obrazem i tekstowym, spróbuj tego kodu poniżej. Rozwijanie odpowiedzi @ King-Wizard.

Tutaj wysokość mojego pola tekstowego wynosi 44 Sprawdź załączony obraz w celach informacyjnych.

Swift Wersja:

emailTF.leftViewMode = .Always 
let emailImgContainer = UIView(frame: CGRectMake(emailTF.frame.origin.x, emailTF.frame.origin.y, 40.0, 30.0)) 
let emailImView = UIImageView(frame: CGRectMake(0, 0, 25.0, 25.0)) 
emailImView.image = UIImage(named: "image1") 
emailImView.center = emailImgContainer.center 
emailImgContainer.addSubview(emailImView) 
emailTF.leftView = emailImgContainer 

enter image description here

1

Krok 1: Dodaj klasę do projektu i dodać go do swojej klasy textFiled w inspektora tożsamości

class MyCustomTextField: UITextField { 

    @IBInspectable var inset: CGFloat = 0 

    @IBInspectable var leftImage: String = String(){ 
     didSet{ 
      leftViewMode = UITextFieldViewMode.Always 
      leftView = UIImageView(image: UIImage(named: leftImage)) 
     } 
    } 

    override func textRectForBounds(bounds: CGRect) -> CGRect { 
     return CGRectInset(bounds, inset, inset) 
    } 

    override func editingRectForBounds(bounds: CGRect) -> CGRect { 
     return textRectForBounds(bounds) 
    } 

    override func leftViewRectForBounds(bounds: CGRect) -> CGRect { 
     return CGRectInset(CGRectMake(0, 2, 40, 40), 10, 10) //Change frame according to your needs 
    } 
} 

Krok 2: Umożliwia ustawienie wstawek tekstu i lewego obrazu z kreatora interfejsu.

enter image description here

Krok 3: Zapraszamy.

+0

Możesz zrobić leftImage typu UIImage, który dostarczy ci miłego bezpośredniego wprowadzania obrazu. –

8

Swift 3,0

txtField.rightViewMode = .always 
txtField.rightView = UIImageView(image: UIImage(named: "selectdrop")) 

TextField With DropDown Icon