programing

UIT 텍스트 보기를 반올림된 직사각형 텍스트 필드처럼 스타일을 지정하는 방법은 무엇입니까?

skycolor 2023. 7. 1. 08:15
반응형

UIT 텍스트 보기를 반올림된 직사각형 텍스트 필드처럼 스타일을 지정하는 방법은 무엇입니까?

저는 댓글 작성자로 텍스트 뷰를 사용하고 있습니다.

inspector( 검사기할 수 수 .UITextField.

그래서 질문은 다음과 같습니다.스타일은 어떻게 해야 하나요?UITextView좋아해를UITextField둥근 직사각형으로?

당신이 선택해야 하는 암묵적인 스타일은 없습니다. 그것은 다음을 사용하여 약간의 코드를 작성하는 것을 포함합니다.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];

스위프트 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 버전

@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으로 변경하여 .

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

저는 진짜 거래를 원했고, 그래서 저는 덧붙입니다.UIImageView의개서로의 으로서.UITextView은 의기테일다니치합의 합니다.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];

사용하는 이미지는 다음과 같습니다.

enter image description here enter image description here

한 가지 해결책은 UITextView 아래에 UITextField를 추가하고,UITextView 및 작용을 합니다.UITextField합니다.UITextField .

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

텍스트 필드와 동일한 모양을 갖게 됩니다.

그리고 이 제안한 것처럼, 당신은 이 코드 조각을 안에 넣어야 합니다.[UIViewController viewDidLayoutSubviews]iOS 5.0 버전

최상의 효과를 얻으려면 사용자 지정(신축 가능) 배경 이미지를 사용해야 합니다.이것은 또한 방법입니다.UITextField의 둥근 테두리가 그려집니다.

프로그래밍 없이도 할 수 있는 한 가지 방법은 텍스트 필드 배경을 투명하게 만든 다음 그 뒤에 둥근 수정 버튼을 놓는 것입니다.하고, " " " " 를 선택 합니다.Disable adjusts image확인란을 선택합니다.

여러분은 DCKit이라는 제 도서관을 확인해 보는 것이 좋을 것입니다.

보기 필드 보기를 만들 수 있습니다.UIViewInterface Builder직접:

DCKit: bordered UITextView

또한 유효성 검사가 있는 텍스트 필드, 테두리가 있는 컨트롤, 점선 테두리, 원 및 헤어라인 뷰 등과 같은 많은 유용한 기능이 있습니다.

이미 이에 대한 많은 답변이 있다는 것을 알고 있지만, (적어도 Swift에서는) 그 중 어떤 것도 충분하지 않았습니다.저는 UITextField와 동일한 경계를 제공하는 솔루션을 원했습니다(현재와 비슷하게 생긴 것이 아니라 항상 똑같이 생긴 것입니다).UITextField를 사용하여 배경에 대한 UITextView를 백업해야 했지만 매번 별도로 생성할 필요는 없었습니다.

아래 솔루션은 경계에 대한 자체 UITextField를 제공하는 UITextView입니다.이것은 제 전체 솔루션의 축소판이며(이와 유사한 방식으로 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);
    }        
}

프로그래밍 없이도 할 수 있는 한 가지 방법은 텍스트 필드 배경을 투명하게 만든 다음 그 뒤에 둥근 수정 버튼을 놓는 것입니다.버튼 설정을 변경하여 비활성화하고 Disable adjusted image 확인란의 선택을 취소해야 합니다.

Quartzcore 코드를 사용해 보니 오래된 3G에서 지연이 발생했습니다(테스트에 사용합니다).큰 문제는 아니지만 다양한 iOS와 하드웨어에 대해 가능한 한 포괄적이고 싶다면 위의 Andrew_L의 답변을 추천합니다. - 또는 직접 이미지를 만들고 그에 따라 지원하십시오.

다음과 같은 훌륭한 배경 이미지가 있습니다.UITextView아이폰의 메시지 앱에서 문자 메시지를 보내는 데 사용됩니다.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;

컨트롤러 코드를 깨끗하게 유지하려면 아래와 같이 UITextView를 하위 클래스로 분류하고 Interface Builder에서 클래스 이름을 변경할 수 있습니다.

원형 텍스트 보기.h

#import <UIKit/UIKit.h>
@interface RoundTextView : UITextView
@end

라운드 텍스트 뷰

#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.

이것은 오래된 질문이고, 저도 이 질문에 대한 답을 검색받았습니다.루비에르의 대답은 100% 정확했고 나중에 롭이 코드를 추가했습니다.그것은 훌륭하지만, 는 다른 질문 답변에서 제3자를 발견했는데, 이것은 저에게 매우 도움이 될 것 같습니다.나는 단지 비슷한 모습을 찾기 위해 검색된 것이 아닙니다.UITextField위에UITextView저는 또한 다중 회선 지원을 위해 검색되었습니다.ChatInputSample이 둘 다 충족했습니다.그래서 저는 이 제3자가 다른 사람들에게 도움이 될 수 있다고 생각합니다.또한 티무르 덕분에, 그는 이 오픈 소스를 여기서 언급했습니다.

iOS7에서 다음은 UI 텍스트 필드 경계와 완벽하게 일치합니다(적어도 제 눈에는).

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

언급URL : https://stackoverflow.com/questions/1824463/how-to-style-uitextview-to-like-rounded-rect-text-field

반응형