it-swarm.com.de

UITextField Nur oberer und unterer Rand

Ich habe derzeit eine reguläre Grenze. Ich möchte nur einen oberen und unteren Rand haben .

Wie mache ich das?

Ich verwende die Eigenschaft UITextFieldvon layerund habe folgenden Code:

    self.layer.borderColor = [[UIColor colorWithRed:160/255.0f green:160/255.0f blue:160/255.0f alpha:1.0f] CGColor];
    self.layer.borderWidth = 4.0f;

Ich habe es irgendwie zum Laufen gebracht, indem ich mein UITextField extra lang mache , damit der Benutzer die linken und rechten Ränder nicht sieht, aber ich habe mich nur gefragt, ob es eine bessere, weniger hackige Art gibt, dies zu tun?

Ich habe die Dokumente überprüft , und das Ändern von UITextFieldname__s borderStylehat diese Option nicht.

Von,

Ein iOS First Timer

26
GangstaGraham

Ein Ansatz, den ich für gut befunden habe, ist das Verwenden von Schichten. Hier ist ein Ausschnitt:

CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0.0f, self.frame.size.height - 1, self.frame.size.width, 1.0f);
bottomBorder.backgroundColor = [UIColor blackColor].CGColor;
[myTextField.layer addSublayer:bottomBorder];

Hoffe das hilft jemandem.

75
user3075378

@ user3075378 ist ein tolles und einfaches Beispiel in Swift

var bottomBorder = CALayer()
bottomBorder.frame = CGRectMake(0.0, textField.frame.size.height - 1, textField.frame.size.width, 1.0);
bottomBorder.backgroundColor = UIColor.blackColor().CGColor
textField.layer.addSublayer(bottomBorder)
39
Sebyddd

@Sebyddd, warum dort aufhören? (;

BEARBEITEN: Es gibt ein Problem mit dem Zeichnen von Linien, bevor das automatische Layout den richtigen Rahmen für die Ansicht festlegt. Ich habe meine Antwort mit einem Fix bearbeitet: Es geht im Wesentlichen darum, drawLines() in layoutSubviews() aufzurufen:

class FramedTextField: UITextField {

    @IBInspectable var linesWidth: CGFloat = 1.0 { didSet{ drawLines() } }

    @IBInspectable var linesColor: UIColor = UIColor.blackColor() { didSet{ drawLines() } }

    @IBInspectable var leftLine: Bool = false { didSet{ drawLines() } }
    @IBInspectable var rightLine: Bool = false { didSet{ drawLines() } }
    @IBInspectable var bottomLine: Bool = false { didSet{ drawLines() } }
    @IBInspectable var topLine: Bool = false { didSet{ drawLines() } }



    func drawLines() {

        if bottomLine {
            add(CGRectMake(0.0, frame.size.height - linesWidth, frame.size.width, linesWidth))
        }

        if topLine {
            add(CGRectMake(0.0, 0.0, frame.size.width, linesWidth))
        }

        if rightLine {
            add(CGRectMake(frame.size.width - linesWidth, 0.0, linesWidth, frame.size.height))
        }

        if leftLine {
            add(CGRectMake(0.0, 0.0, linesWidth, frame.size.height))
        }

    }

    typealias Line = CGRect
    private func add(line: Line) {
        let border = CALayer()
        border.frame = line
        border.backgroundColor = linesColor.CGColor
        layer.addSublayer(border)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        drawLines()
    }

}
22
Aviel Gross

sie können ein Bild mit oberem und unterem Rand erstellen und es in den Hintergrund Ihres UITextField setzen:

yourTextField.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourBorderedImageName"]];
9
KDeogharkar

Sie können auch Ansichten oben und unten hinzufügen, um sie als Rahmen zu verwenden.

// Top border
UIView *topBorder = [[UIView alloc]
    initWithFrame:CGRectMake(0,
                             0,
                             textfield.frame.size.width,
                             4.0f)];
topBorder.backgroundColor = [UIColor colorWithRed:160/255.0f
                                            green:160/255.0f
                                             blue:160/255.0f
                                            alpha:1.0f];
[textfield addSubview:topBorder];

// Bottom border
UIView *bottomBorder = [[UIView alloc]
    initWithFrame:CGRectMake(0,
                             textfield.frame.Origin.y +
                                 textfield.frame.size.height - 4.0f,
                             textfield.frame.size.width,
                             4.0f)];
bottomBorder.backgroundColor = [UIColor colorWithRed:160/255.0f
                                               green:160/255.0f
                                                blue:160/255.0f
                                               alpha:1.0f];
[textfield addSubview:bottomBorder];
5
Sarah Nguyen

Sie können Layer verwenden, um jeder UIView-Unterklasse Linien/Formen hinzuzufügen. Dieser Code zeichnet zwei Zeilen am oberen und unteren Rand eines Textfelds. Sie können es einer Unterklasse eines Steuerelements hinzufügen oder direkt in einem übergeordneten View/View-Controller aufrufen. 

CGRect layerFrame = CGRectMake(0, 0, _usernameField.frame.size.width, _usernameField.frame.size.height);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 0);
CGPathAddLineToPoint(path, NULL, layerFrame.size.width, 0); // top line
CGPathMoveToPoint(path, NULL, 0, layerFrame.size.height);
CGPathAddLineToPoint(path, NULL, layerFrame.size.width, layerFrame.size.height); // bottom line
CAShapeLayer * line = [CAShapeLayer layer];
line.path = path;
line.lineWidth = 2;
line.frame = layerFrame;
line.strokeColor = [UIColor blackColor].CGColor;
[_usernameField.layer addSublayer:line];
4
Eli Burke

Swift 3: Mit AutoLayout reinigen (Ich verwende hier PureLayout, aber Sie können es auch mit der üblichen NSLayoutConstraint tun:

func makeUnderline(for textField: UITextField) {
    let borderLine = UIView()
    borderLine.backgroundColor = UIColor.black
    borderLine.autoSetDimension(.height, toSize: 1)
    textField.addSubview(borderLine)
    borderLine.autoPinEdgesToSuperviewEdges(with: UIEdgeInsets.zero, excludingEdge: .top)
}
2
kurtanamo

Ich schlage vor, Sie setzen eine Ansicht auf die linke Seite des Textfelds und eine Ansicht auf die rechte Seite des Textfelds, um den linken/rechten Rand abzudecken.

UIView *v1 = [[UIView all] initWithFrame:CGRectMake(textfield.frame.Origin.x - 5, textfield.frame.Origin.y, 10, textifield.frame.size.height)];
UIView *v2 = [[UIView all] initWithFrame:CGRectMake(textfield.frame.Origin.x + textfield.frame.size.with - 5, textfield.frame.Origin.y, 10, textifield.frame.size.height)];
1
Doon

Hoffen Sie, dass dies hilft, fügen Sie dies in eine Textfeld-Überschreibungsklasse ein

UIView *view = [[UIView alloc] init];
        view.translatesAutoresizingMaskIntoConstraints = NO;
        view.layer.borderWidth = 1;
        view.backgroundColor = [UIColor blackColor];
        [self addSubview:view];

        [self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0]];
        [self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];
        [self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:1.0]];
        [self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:1.0]];
1
Travis Delly

Vielen Dank an user3075378. Meine Antwort basiert auf seiner. rechte und linke kleine Linien hinzufügen.

- (void)styleSearchTextField {
    CALayer *bottomBorder = [CALayer layer], *leftBorder = [CALayer layer], *rightBorder = [CALayer layer];

    CGFloat thickness = 1.0f;
    CGFloat side_height = 6.0f;

    bottomBorder.frame = CGRectMake(0.0f, searchTextField.frame.size.height - 1, searchTextField.frame.size.width, thickness);

    leftBorder.frame = CGRectMake(0.0f, searchTextField.frame.size.height - side_height, thickness, searchTextField.frame.size.height - 1);

    rightBorder.frame = CGRectMake(searchTextField.frame.size.width - 1, searchTextField.frame.size.height - side_height, thickness, searchTextField.frame.size.height - 1);

    bottomBorder.backgroundColor = [self.stylingDetails themeGrayColor].CGColor;
    leftBorder.backgroundColor = [self.stylingDetails themeGrayColor].CGColor;
    rightBorder.backgroundColor = [self.stylingDetails themeGrayColor].CGColor;

    [searchTextField.layer addSublayer:bottomBorder];
    [searchTextField.layer addSublayer:leftBorder];
    [searchTextField.layer addSublayer:rightBorder];
}
0
hasan