Programing

이미지와 텍스트 모두 가능한 UIButton?

crosscheck 2020. 11. 17. 07:50
반응형

이미지와 텍스트 모두 가능한 UIButton?


너비가 200이고 높이가 270 인 버튼이 있습니다. 같은 버튼에 텍스트와 이미지를 넣고 싶습니다. 해당 텍스트의 배경 이미지가 아닙니다. 대신 같은 버튼에 높이 120과 높이 150의 이미지를 표시하고 싶습니다. 어떻게하나요?


이 코드를 사용할 수 있습니다.

.h file code
IBOutlet UIButton *testBtn;

.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

필요에 따라 버튼의 좌표와 크기를 조정하십시오. 이것은 안 내용 샘플 코드입니다.

추신 : nib 파일에서 UIButton 가져 오기> 사용자 정의 버튼으로 만들기> IBOutlet을 nib 파일의 사용자 정의 버튼에 연결하십시오.


아래 코드는 UIButton 클래스의 setImageEdgeInsets 및 setTitleEdgeInsets 속성을 사용하여 버튼에 이미지와 텍스트를 배치하는 방법을 보여줍니다.

UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
    [butt setFrame:CGRectMake(0, 0, 100, 100)];
    [butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
    [butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
    [butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
    [butt setTitle:@"hello" forState:UIControlStateNormal];
    [butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.view addSubview:butt];

하위보기의 개념을 사용하십시오. UIButton(200x270), UILabel(200x120) 및 UIImageView(200x150)의 세 가지 컨트롤을 사용합니다 . 에 이미지를 할당하고에 UIImageView대한 텍스트를 설정합니다 UILabel. 의 (x, y) 위치를 기반으로 레이블 및 이미지보기 컨트롤을 배치합니다 UIButton.

결국 다음과 같은 것이 있어야합니다.

다음과 같은 경우 :

UIButton *button;
UILabel *label;
UIImageView *imageView;

[button addSubView:imageView];
[button addSubView:label];

[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

예, 둘 다 맞을만큼 작 으면 같은 버튼에 이미지와 제목을 표시 할 수 있습니다. 어려운 부분은 배치를 처리해야 할 때 발생합니다.

contentVerticalAlignmentcontentHorizontalAlignment속성 UIButton(에서 상 속됨 UIControl)을 사용할 수 있습니다.

titleEdgeInsetsimageEdgeInsets속성을 사용 하여 정렬 속성을 기반으로하는 배치에서 제목과 이미지를 이동할 수도 있습니다 .

당신은 매우 정확한 또는 사용자 정의 위치를 원하는 경우에, 나는 무시 제안 titleRectForContentRect:imageRectForContentRect:의 방법을 UIButton. 이를 통해 제목과 이미지의 프레임을 정의 할 수 있으며 버튼을 배치해야 할 때마다 호출됩니다. self.titleLabel내부 를 참조하려는 경우 한 가지 경고 가 먼저 정의되어 titleRectForContentRect:있는지 확인하십시오 self.currentTitle. 잘못된 액세스 오류가 발생했습니다. titleLabel을 처음 초기화 할 때 메서드가 호출되었을 수 있습니다.


Swift 3에서

let button = UIButton()

//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will push the label off the button

//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right

//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want

//add button to your view - like in viewDidLoad or your own custom view setup
addSubview(button)

스토리 보드를 사용하는 경우 인터페이스 빌더의 버튼 참조에 표시 / 연결되도록 프로그래밍 방식으로 앵커를 설정하는 것을 잊지 마세요.


If you want to have more control over the layout, create a subclass of UIControl and arrange the views you want (UILabel, UIImageView) in a xib file. Then you can use Autolayout regularly without having to sort out UIEdgeInsets.


Using button subviews worked for me in Swift 4.

  • Create your button
  • Set an image for button
  • Create a label for the text
  • Add the label as a subview of your button
  • Constrain the label within the button

           let imageAndTextButton : UIButton = {
                let button = UIButton(frame: .zero)
                button.tintColor = .clear
                button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal)
                button.imageView?.contentMode = .scaleToFill
                button.translatesAutoresizingMaskIntoConstraints = false
                return button
            }()
            let textForButtonLabel = UILabel(frame: .zero)
            textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false
            textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes)
            textForButtonLabel.textAlignment = .center
            textForButtonLabel.backgroundColor = .clear
            imageAndTextButton.addSubview(textForButtonLabel)
            imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0))
            imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0))
    

Try this it's work for me ,

We have to set value of UIEdgeInsets base on our button size and requirement .

[self.testButton setTitle: @"myTitle" forState: UIControlStateNormal];
UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f];

//UIEdgeInsets insets = {top, left, bottom, right};

[self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)];
[self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)];
[self.testButton setImage:iconImage forState:UIControlStateNormal];
[self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.testButton];

Hope This will help for some one .

참고URL : https://stackoverflow.com/questions/4344847/uibutton-with-both-image-and-text-possible

반응형