IOS 개발 의 사용자 정의 버튼 으로 텍스트 이미지 위치 임 의 맞 춤 형 제작 실현

IOS 개발 의 사용자 정의 버튼 으로 텍스트 이미지 위치 임 의 맞 춤 형 제작 실현
이 글 을 본 친구 들 은'버튼 을 누가 사용자 정의 하지 않 습 니까?'라 고 무시 할 수도 있다."너 를 더 봐 야 겠 어?"단 추 는 우리 프로젝트 에서 가장 흔히 볼 수 있 는 컨트롤 중 하나 로 매일 사용 되 고 있 습 니 다.서로 다른 유형의 버튼 에 대해 우리 가 더욱 간편 한 방법 으로 수 요 를 실현 할 수 있 는 지 여 부 는 우리 가 해 야 할 일이 다.여기 서 저 는 두 가지 방법 을 제시 하 겠 습 니 다.평소에 사용자 정의 단 추 를 누 르 는 방법 을 비교 해 보 세 요.어떤 방법 이 더 간단 한 지 보 세 요.
"한 마디 더 하 세 요.지식 이 간단 하 다 고 생각 하지 마 세 요.자신 이 할 수 있다 고 생각 하고 공부 할 필요 가 없습니다."흔히 간단 한 것 에 큰 지혜 가 존재 한다.
단 추 는 응용 에서 가장 흔히 볼 수 있 는 가장 기본 적 인 컨트롤 입 니 다.단추 의 스타일 이 다양 합 니 다.시스템 의 기본 스타일 은 좌우 구조 이 고 그림 은 왼쪽 에 있 으 며 문 자 는 오른쪽 에 있 습 니 다.시스템 단 추 는 개발 의 수 요 를 전혀 만족 시 킬 수 없 기 때문에 우 리 는 원 하 는 스타일 을 스스로 맞 출 수 밖 에 없다.텍스트 와 그림 을 포함 하 는 단 추 는 다음 네 가지 스타일 이 있 습 니 다.
그림 은 위 에 있 고 문 자 는 아래 에 있다그림 은 왼쪽 에 있 고 문 자 는 오른쪽 에 있 습 니 다그림 은 아래 에 있 고 문 자 는 위 에 있다그림 은 오른쪽 에 있 고 문 자 는 왼쪽 에 있 습 니 다버튼 에서 그림 과 문자 의 안쪽 여백(UIEdgeInsets Make)을 설정 하여 그림 과 문자 의 위 치 를 바 꾸 어 우리 의 요 구 를 만족 시 킬 수 있다 는 것 을 잘 알 고 있 습 니 다.물론 그 방법 중 하나 일 뿐이다.또 하나의 방법 은 계승 을 사용 하여 UIButton 에서 계승 하 는 클래스 를 만 드 는 것 입 니 다.layoutSubviews 방법 을 다시 써 서 단추 내부 하위 컨트롤 의 위 치 를 바 꾸 어 우리 의 수 요 를 달성 하 는 것 입 니 다.말 이 많 지 않 으 니,조리 있 게 해라.
방법 1:분류 방식 으로 실현
UIButton 의 분 류 를 새로 만 듭 니 다.다음은 구체 적 인 설명 과 구현 입 니 다.

#import <UIKit/UIKit.h>
//       （        button）
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
  MKButtonEdgeInsetsStyleTop, // image  ，label  
  MKButtonEdgeInsetsStyleLeft, // image  ，label  
  MKButtonEdgeInsetsStyleBottom, // image  ，label  
  MKButtonEdgeInsetsStyleRight // image  ，label  
};

@interface UIButton (ImageTitleSpacing)

/**
 *   button titleLabel imageView     ，   
 *
 * @param style titleLabel imageView     
 * @param space titleLabel imageView   
 */
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
            imageTitleSpace:(CGFloat)space;

@end

실현 파일 을 다시 보 겠 습 니 다.

#import "UIButton+ImageTitleSpacing.h"

@implementation UIButton (ImageTitleSpacing)

- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
            imageTitleSpace:(CGFloat)space {
  /**
   *    ：titleEdgeInsets title         inset， tableView contentInset    ，
   *     title，           button ，image    ；
   *      image label，    image        button，      label ；title        button，      image 。
   */

  // 1.   imageView titleLabel  、 
  CGFloat imageWith = self.imageView.frame.size.width;
  CGFloat imageHeight = self.imageView.frame.size.height;

  CGFloat labelWidth = 0.0;
  CGFloat labelHeight = 0.0;
  if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
    //   iOS8 titleLabel size 0，        
    labelWidth = self.titleLabel.intrinsicContentSize.width;
    labelHeight = self.titleLabel.intrinsicContentSize.height;
  } else {
    labelWidth = self.titleLabel.frame.size.width;
    labelHeight = self.titleLabel.frame.size.height;
  }

  // 2.      imageEdgeInsets labelEdgeInsets
  UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
  UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;

  // 3.   style space  imageEdgeInsets labelEdgeInsets  
   /**
    MKButtonEdgeInsetsStyleTop, // image  ，label  
    MKButtonEdgeInsetsStyleLeft, // image  ，label  
    MKButtonEdgeInsetsStyleBottom, // image  ，label  
    MKButtonEdgeInsetsStyleRight // image  ，label  
   */
  switch (style) {
    case MKButtonEdgeInsetsStyleTop:
    {
      imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
      labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
    }
      break;
    case MKButtonEdgeInsetsStyleLeft:
    {
      imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
      labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
    }
      break;
    case MKButtonEdgeInsetsStyleBottom:
    {
      imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
      labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
    }
      break;
    case MKButtonEdgeInsetsStyleRight:
    {
      imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
      labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
    }
      break;
    default:
      break;
  }

  // 4.   
  self.titleEdgeInsets = labelEdgeInsets;
  self.imageEdgeInsets = imageEdgeInsets;
}

@end

사용 방법:위 에 있 는 코드 를 복사 하고 사용 할 클래스 에 직접 가 져 오 면 호출 방법 이 있 습 니 다.구체 적 으로 보 세 요.

//      
#import "UIButton+ImageTitleSpacing.h"
//             button，         、   frame ，         ：
[button layoutButtonWithEdgeInsetsStyle:       imageTitleSpace:             ];

이렇게 하면 매우 편리 하지 않 습 니까?
방법 2:상속 을 통 해
UIButton 에서 계승 할 클래스 를 새로 만 듭 니 다.layoutSubviews 방법 을 다시 쓰 고 그림 과 텍스트 의 위 치 를 설정 합 니 다.

#import "TSSquareButton.h"

@implementation TSSquareButton

- (instancetype)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
    //          
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:12.0];
    [self setBackgroundColor:[UIColor whiteColor]];
    [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  }
  return self;
}

//   layoutSubviews  ，            
- (void)layoutSubviews {
  [super layoutSubviews];

  self.imageView.TS_width = self.TS_width * 0.4;
  self.imageView.TS_height = self.imageView.TS_width;
  self.imageView.TS_y = self.TS_height * 0.25;
  self.imageView.TS_centerX = self.TS_width * 0.5;

  self.titleLabel.TS_width = self.TS_width;
  self.titleLabel.TS_y = self.imageView.TS_buttom ;
  self.titleLabel.TS_height = 25;
  self.titleLabel.TS_x = 0;
}

@end

두 가지 방식 으로 실행 결과
요약:
이로써 그림 을 설정 하 는 두 가지 방법 은 이미 끝났다.비교 해 보면:
첫 번 째 는 분 류 를 통 해 단 추 를 설정 하 는 것 이 매우 편리 합 니 다.코드 한 줄 이면 충분 합 니 다.UIEngeInsetsMake 를 계산 하지 않 아 도 됩 니 다.순 코드 생 성 버튼 에 적 용 됩 니 다.Xib 가 만 든 버튼 이 라면 사용 할 수 없습니다.
두 번 째 는 계승 을 통 해 layoutSubviews 를 다시 쓰 는 방식 으로 단 추 를 설정 하 는 것 이 좋 습 니 다.순 코드 생 성 단추 도 있 고 Xib 생 성 단추 도 있 습 니 다.그러나 이 방법 은 한계 가 있 습 니 다.같은 유형의 단추 에 만 적 용 됩 니 다.예 를 들 어 제 인터페이스 에 몇 가지 다른 유형의 버튼 이 있 습 니 다.이 럴 때 저 희 는 서로 다른 계승 UIButton 의 버튼 류 를 만 들 고 layoutSubviews 에서 서로 다른 위치 관 계 를 설정 해 야 합 니 다.이렇게 하면 상대 적 으로 복잡 하 다.
두 가지 방법 은 각각 장단 점 이 있 으 므 로 여러분 은 자신의 실제 상황 에 따라 선택 하여 사용 할 수 있 습 니 다.물론 단추 그림 과 문자 의 위 치 를 설정 하 는 것 은 이 두 가지 방법 뿐만 아니 라 더 좋 은 방법 도 우리 가 발견 할 때 까지 기다 리 고 있다.만약 당신 이 더 좋 은 건의 가 있다 면,나 에 게 연락 하 셔 도 됩 니 다.우 리 는 함께 공 부 를 토론 할 것 입 니 다.
 읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!