วิธีจัดรูปแบบ UITextview ให้ชอบฟิลด์ข้อความ Rounded Rect

ฉันใช้มุมมองข้อความเป็นผู้แต่งความคิดเห็น

ในตัวตรวจสอบคุณสมบัติฉันไม่พบสิ่งใดเช่นคุณสมบัติลักษณะเส้นขอบเพื่อให้ฉันสามารถใช้รูปสี่เหลี่ยมมุมฉากUITextFieldได้

ดังนั้นคำถามคือฉันจะจัดรูปแบบตัวอักษรUITextViewa UITextFieldพร้อมกับ rect rected ได้อย่างไร

ไม่มีสไตล์โดยปริยายที่คุณต้องเลือกมันเกี่ยวข้องกับการเขียนโค้ดเล็กน้อยโดยใช้QuartzCoreเฟรมเวิร์ก:

//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;

ใช้งานได้กับ OS 3.0 ขึ้นไป แต่ฉันเดาว่าตอนนี้มันเป็นแพลตฟอร์มจริงแล้ว

รหัสนี้ทำงานได้ดีสำหรับฉัน:

    [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

หลังจากตั้งค่ามุมมองข้อความในเครื่องมือสร้างอินเตอร์เฟส

@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
}

เวอร์ชั่น 2.2 ของ Swift

@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
}

แก้ไข: คุณต้องนำเข้า

#import <QuartzCore/QuartzCore.h>

สำหรับการใช้รัศมีมุม

ลองสิ่งนี้มันจะได้ผลแน่นอน

UITextView* txtView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 300, 100)];
txtView.layer.cornerRadius = 5.0;
txtView.clipsToBounds = YES;

ในขณะที่ Rob คิดว่ามันเป็นการตั้งค่าถ้าคุณต้องการให้สีขอบเหมือนกันUITextFieldดังนั้นคุณต้องเปลี่ยนความกว้างของเส้นขอบเป็น 2.0 และเปลี่ยนเป็นสีเทาโดยเพิ่มบรรทัดต่อไปนี้

[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; 
[textView.layer setBorderWidth:2.0];

ฉันต้องการจริงจัดการดังนั้นฉันเพิ่มUIImageViewเป็น subview UITextViewของที่ สิ่งนี้จะตรงกับเส้นขอบดั้งเดิมบน a UITextFieldรวมถึงการไล่ระดับสีจากบนลงล่าง:

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];

นี่คือภาพที่ฉันใช้:

ทางออกหนึ่งคือการเพิ่ม UITextField ด้านล่าง UITextViewกรุณาให้พื้นหลังโปร่งใสและปิดการโต้ตอบกับผู้ใช้ใดUITextView ๆ UITextFieldจากนั้นในรหัสเปลี่ยนUITextFieldเฟรมด้วยสิ่งที่ต้องการ

self.textField.frame = CGRectInset(self.textView.frame, 0, -2);

คุณจะมีลักษณะเช่นเดียวกับเขตข้อมูลข้อความ

และตามคำแนะนำของจอนคุณควรวางโค้ดนี้ไว้[UIViewController viewDidLayoutSubviews]ใน iOS 5.0+

เพื่อให้ได้เอฟเฟกต์ที่ดีที่สุดคุณจะต้องใช้ภาพพื้นหลังแบบกำหนดเอง (ยืดได้) นี่คือวิธีการUITextFieldวาดเส้นขอบที่โค้งมนของ

วิธีหนึ่งที่ฉันพบว่าทำโดยไม่ต้องเขียนโปรแกรมก็คือทำให้พื้นหลังของฟิลด์โปร่งใสแล้ววางปุ่ม Round Rect Button ไว้ด้านหลัง ตรวจสอบให้แน่ใจว่าได้เปลี่ยนการตั้งค่าปุ่มเพื่อปิดใช้งานและยกเลิกการDisable adjusts imageเลือกช่องทำเครื่องหมาย

คุณอาจต้องการที่จะตรวจสอบห้องสมุดของฉันเรียกว่าDCKit

คุณสามารถสร้างมุมมองข้อความมุมโค้งมน (เช่นเดียวกับช่องข้อความ / ปุ่ม / ธรรมดาUIView) จากInterface Builderโดยตรง:

นอกจากนี้ยังมีคุณสมบัติที่มีประโยชน์อื่น ๆ อีกมากมายเช่นช่องข้อความที่มีการตรวจสอบความถูกต้องการควบคุมด้วยเส้นขอบเส้นประเส้นประวงกลมและมุมมองแนวเส้นผม

ฉันรู้ว่ามีคำตอบมากมายอยู่แล้วสำหรับเรื่องนี้ แต่ฉันไม่พบพวกเขาเพียงพอ (อย่างน้อยก็ใน Swift) ฉันต้องการโซลูชันที่ให้เส้นขอบที่แน่นอนเหมือนกับ UITextField (ไม่ใช่อันใกล้เคียงที่ดูเหมือนตอนนี้ แต่ตอนที่ดูเหมือนว่ามันจะเหมือนกันเสมอ) ฉันต้องใช้ UITextField เพื่อสำรอง UITextView สำหรับพื้นหลัง แต่ไม่ต้องการสร้างแยกต่างหากทุกครั้ง

วิธีการแก้ปัญหาด้านล่างคือ UITextView ที่เป็นของ UITextField สำหรับชายแดน นี่เป็นเวอร์ชันเต็มของโซลูชันของฉัน (ซึ่งเพิ่มการสนับสนุน "ตัวยึด" ลงใน UITextView ในลักษณะที่คล้ายกัน) และถูกโพสต์ที่นี่: 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);
    }        
}

วิธีหนึ่งที่ฉันพบว่าทำโดยไม่ต้องเขียนโปรแกรมก็คือทำให้พื้นหลังของฟิลด์โปร่งใสแล้ววางปุ่มรูปสี่เหลี่ยมผืนผ้ารอบด้านหลัง ตรวจสอบให้แน่ใจว่าได้เปลี่ยนการตั้งค่าปุ่มเพื่อปิดใช้งานและยกเลิกการเลือกช่องทำเครื่องหมายปิดใช้งานปรับภาพ

ลองใช้รหัส Quartzcore และพบว่าทำให้เกิดความล่าช้ากับ 3G เก่าของฉัน (ฉันใช้สำหรับการทดสอบ) ไม่ใช่ปัญหาใหญ่ แต่ถ้าคุณต้องการรวมให้มากที่สุดเท่าที่เป็นไปได้สำหรับ iOS และฮาร์ดแวร์ที่แตกต่างกันฉันขอแนะนำคำตอบของ Andrew_L ข้างต้น - หรือสร้างภาพของคุณเองและนำไปใช้ตามนั้น

มีภาพพื้นหลังที่ยอดเยี่ยมซึ่งเหมือนกับภาพที่UITextViewใช้ในการส่งข้อความในแอพ Messages ของ iPhone คุณจะต้องมี Adobe Illustrator เพื่อรับและแก้ไข องค์ประกอบเวกเตอร์ iphone ui

#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];
}

คุณสามารถสร้างฟิลด์ข้อความที่ไม่ยอมรับกิจกรรมใด ๆ ที่อยู่ด้านบนของมุมมองข้อความเช่นนี้:

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;

หากคุณต้องการรักษารหัสคอนโทรลเลอร์ให้สะอาดคุณสามารถ subclass UITextView เหมือนด้านล่างและเปลี่ยนชื่อคลาสใน 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

นี่คือทางออกของฉัน:

- (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];
        }
    }
}

ฉันไม่คิดว่ามันเป็นไปได้ แต่คุณสามารถทำUITableView(จัดกลุ่ม) 1 ส่วน 1 UITextViewและเซลล์ที่ว่างเปล่าและใช้เป็นภาชนะสำหรับคุณ

นี่เป็นคำถามเก่าและฉันก็ค้นหาคำตอบของคำถามนี้ด้วย คำตอบของ luvieeres ถูกต้อง 100% และในภายหลัง Rob เพิ่มรหัสบางส่วน เป็นสิ่งที่ยอดเยี่ยม แต่ฉันพบบุคคลที่สามในอีกคำถามที่ตอบซึ่งดูเหมือนจะเป็นประโยชน์กับฉัน ผมก็ไม่ได้เป็นเพียงการสืบค้นสำหรับรูปลักษณ์ของที่คล้ายกันUITextFieldมากกว่าUITextViewผมก็ยังค้นหาสำหรับการสนับสนุนหลาย ChatInputSampleพอใจทั้งคู่ นั่นเป็นเหตุผลที่ฉันคิดว่าบุคคลที่สามนี้อาจเป็นประโยชน์กับผู้อื่น นอกจากนี้ยังต้องขอบคุณ Timur เขากล่าวถึงที่มาเปิดในที่นี่

ใน iOS7 ต่อไปนี้ตรงกับขอบ UITextField อย่างสมบูรณ์แบบ (กับตาของฉันอย่างน้อย)

textField.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor];
textField.layer.borderWidth = 0.5;
textField.layer.cornerRadius = 5;
textField.clipsToBounds = YES;

ไม่จำเป็นต้องนำเข้าอะไรเป็นพิเศษ

ขอบคุณ @uvieere และ @hanumanDev ที่มีคำตอบให้ฉันเกือบจะถึงที่นั่น :)

เพียงแค่:

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(20, 20, 280, 32)];
textField.borderStyle = UITextBorderStyleRoundedRect;
[self addSubview:textField];