iOS - UIButton

简介: 前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIButton : UIControl @available(iOS 2.0, *) public class UIButton : UIControl, NSCoding1、UIB...

前言

    NS_CLASS_AVAILABLE_IOS(2_0) @interface UIButton : UIControl <NSCoding>
    @available(iOS 2.0, *)       public class UIButton : UIControl, NSCoding

1、UIButton 的创建

  • Objective-C

        // 实例化 button 对象
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    
        // 将 button 添加到 window
        [self.view addSubview:button];
  • Swift

        // 实例化 button 对象
        let button:UIButton = UIButton(type: .Custom)
    
        // 将 button 添加到 window  
        self.view.addSubview(button)

2、UIButton 的设置

  • Objective-C

        // 设置 button 类型
        /*
            UIButtonTypeCustom = 0,         // 定制按钮,不带图标(常加载图片),默认文字颜色为白色,无触摸时的高亮效果
            UIButtonTypeSystem              // 不带图标,默认文字颜色为蓝色,有触摸时的高亮效果
            UIButtonTypeDetailDisclosure,   // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            UIButtonTypeInfoLight,          // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            UIButtonTypeInfoDark,           // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            UIButtonTypeContactAdd,         // “+” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            UIButtonTypeRoundedRect = UIButtonTypeSystem,
    
            [[UIButton alloc] init] 方式创建的 button 为 UIButtonTypeCustom 类型。
            StoryBoard 创建的 button 默认为 UIButtonTypeSystem 类型。
        */
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    
        // 设置 frame
        button.frame = CGRectMake(10, 100, 110, 50);
    
        // 设置内边距大小
        /*
            设置的内边距范围内不会显示内容
        */
    
            // 内容内边距(标题文字和图片)
            button.contentEdgeInsets = UIEdgeInsetsMake(20, 20, 10, 10);
    
            // 标题文字内边距
            button.titleEdgeInsets = UIEdgeInsetsMake(40, 20, 10, 10);
    
            // 图片内边距
            button.imageEdgeInsets = UIEdgeInsetsMake(20, 10, 10, 10);
    
        // 背景颜色
        /*
            默认为透明色(clearColor)
        */
        button.backgroundColor = [UIColor grayColor];
    
        // 设置按钮的文字
        /*
            UIControlStateNormal       = 0,           // 未选中状态,常规状态
            UIControlStateHighlighted  = 1 << 0,      // 高亮状态,点击状态
            UIControlStateDisabled     = 1 << 1,      // 禁用状态
            UIControlStateSelected     = 1 << 2,      // flag usable by app (see below),选中状态
            UIControlStateFocused NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 3,    
                                                      // Applicable only when the screen supports focus
            UIControlStateApplication  = 0x00FF0000,  // additional flags available for application use
            UIControlStateReserved     = 0xFF000000   // flags reserved for internal framework use
        */
        [button setTitle:@"普通状态" forState:UIControlStateNormal];
    
        // 设置文字颜色
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    
        // 设置文字阴影颜色
        [button setTitleShadowColor:[UIColor yellowColor] forState:UIControlStateNormal];
    
        // 修改文字字体
        button.titleLabel.font = [UIFont systemFontOfSize:30];               // 普通
        button.titleLabel.font = [UIFont boldSystemFontOfSize:30];           // 加粗
        button.titleLabel.font = [UIFont italicSystemFontOfSize:30];         // 斜体(对中文无效)
        button.titleLabel.font = [UIFont fontWithName:@"Zapfino" size:15];   // 设置为指定字体类型的文字
    
        // 修改文字水平对齐方式
        /*
            UIControlContentHorizontalAlignmentCenter = 0,    // 居中
            UIControlContentHorizontalAlignmentLeft   = 1,    // 左对齐
            UIControlContentHorizontalAlignmentRight  = 2,    // 右对齐
            UIControlContentHorizontalAlignmentFill   = 3,    // 分散对齐
        */
        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    
        // 修改文字垂直对齐方式
        /*
            UIControlContentVerticalAlignmentCenter  = 0,     // 居中
            UIControlContentVerticalAlignmentTop     = 1,     // 上对齐
            UIControlContentVerticalAlignmentBottom  = 2,     // 下对齐
            UIControlContentVerticalAlignmentFill    = 3,     // 分散对齐
        */
        button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    
        // 设置内部的小图片
        /*
            图片将会以原始比例显示,button 上的图片和文字可以同时添加
        */
        [button setImage:[UIImage imageNamed:@"hehe.png"] forState:UIControlStateNormal];
    
        // 设置背景图片
        /*
            图片将会填充整个背景
            为了保证高亮状态下的图片正常显示,必须设置按钮的 type 为 custom
        */
        [button setBackgroundImage:[UIImage imageNamed:@"pic1.png"] forState:UIControlStateNormal];
    
        // 设置图片不变暗
        /*
            在未设置触摸状态图片时,触摸状态或禁用状态下图片会变暗
        */
    
            // 触摸状态时图标不变暗
            button.adjustsImageWhenHighlighted = NO;
    
            // 禁用状态时图标不变暗
            button.adjustsImageWhenDisabled = YES;
    
        // 设置 button 的激活与失效状态
        /*
            YES 激活状态,默认状态,NO 失效状态(不可点击)
        */
        button.enabled = YES;
    
        // 设置 butotn 的隐藏与显示状态
        /*
            YES 隐藏状态,NO 显示状态,默认状态
        */
        button.hidden = YES;
    
        // 设置 butotn 的选中状态
        /*
            YES 选中,NO 未选中
        */
        button.selected = YES;
    
        // 获取 butotn 当前的选中状态
        BOOL selected = button.selected;
    
        // readonly 只读属性
    
            NSString *title = button.currentTitle;                                 // 获取按钮当前的标题
            NSAttributedString *attributedTitle = button.currentAttributedTitle;   // 获取按钮当前的标题属性
            UIColor *titleColor = button.currentTitleColor;                        // 获取按钮当前的标题颜色
            UIColor *shadowColor = button.currentTitleShadowColor;                 // 获取按钮当前的标题阴影颜色
            UIImage *currentImage = button.currentImage;                           // 获取按钮当前的图片
            UIImage *backgroundImage = button.currentBackgroundImage;              // 获取按钮当前的背景图片
            NSString *title1 = [button titleForState:UIControlStateNormal];        // 获取按钮指定状态的文字
    
            // 获取按钮指定状态的标题属性
            NSAttributedString *attributedTitle1 = [button attributedTitleForState:UIControlStateNormal];
    
            // 获取按钮指定状态的标题颜色
            UIColor *titleColor1 = [button titleColorForState:UIControlStateNormal];
    
            // 获取按钮指定状态的标题阴影颜色
            UIColor *shadowColor1 = [button titleShadowColorForState:UIControlStateNormal];
    
            // 获取按钮指定状态的图片
            UIImage *currentImage1 = [button imageForState:UIControlStateNormal];
    
            // 获取按钮指定状态的背景图片
            UIImage *backgroundImage1 = [button backgroundImageForState:UIControlStateNormal];
    
        // 设置 button 点击触发事件
        /*
            UIControlEventTouchDown           = 1 <<  0,  // on all touch downs
            UIControlEventTouchDownRepeat     = 1 <<  1,  // on multiple touchdowns (tap count > 1)
            UIControlEventTouchDragInside     = 1 <<  2,
            UIControlEventTouchDragOutside    = 1 <<  3,
            UIControlEventTouchDragEnter      = 1 <<  4,
            UIControlEventTouchDragExit       = 1 <<  5,
            UIControlEventTouchUpInside       = 1 <<  6,
            UIControlEventTouchUpOutside      = 1 <<  7,
            UIControlEventTouchCancel         = 1 <<  8,
    
            UIControlEventValueChanged        = 1 << 12,  // sliders, etc.
            UIControlEventPrimaryActionTriggered NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 13,
                                              // semantic action: for buttons, etc.
    
            UIControlEventEditingDidBegin     = 1 << 16,  // UITextField
            UIControlEventEditingChanged      = 1 << 17,
            UIControlEventEditingDidEnd       = 1 << 18,
            UIControlEventEditingDidEndOnExit = 1 << 19,  // 'return key' ending editing
    
            UIControlEventAllTouchEvents      = 0x00000FFF,  // for touch events
            UIControlEventAllEditingEvents    = 0x000F0000,  // for UITextField
            UIControlEventApplicationReserved = 0x0F000000,  // range available for application use
            UIControlEventSystemReserved      = 0xF0000000,  // range reserved for internal framework use
            UIControlEventAllEvents           = 0xFFFFFFFF
        */
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
  • Swift

        // 设置 button 类型
        /*
            case Custom             // 定制按钮,不带图标(常加载图片),默认文字颜色为白色,无触摸时的高亮效果
            case System             // 不带图标,默认文字颜色为蓝色,有触摸时的高亮效果
    
            case DetailDisclosure   // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            case InfoLight          // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            case InfoDark           // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
            case ContactAdd         // “+” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    
            UIButton() 方式创建的 button 为 Custom 类型。
            StoryBoard 创建的 button 默认为 System 类型。
        */
        let button:UIButton = UIButton(type: .Custom)
    
        // 设置 frame
        button.frame = CGRectMake(10, 100, 110, 50)
    
        // 设置内边距大小
        /*
            设置的内边距范围内不会显示内容
        */
    
            // 内容内边距(标题文字和图片)
            button.contentEdgeInsets = UIEdgeInsetsMake(20, 20, 10, 10)
    
            // 标题文字内边距
            button.titleEdgeInsets = UIEdgeInsetsMake(40, 20, 10, 10)
    
            // 图片内边距
            button.imageEdgeInsets = UIEdgeInsetsMake(20, 10, 10, 10)
    
        // 背景颜色
        /*
            默认为透明色(clearColor)
        */
        button.backgroundColor = UIColor.grayColor()
    
        // 设置按钮的文字
        /*
            Normal         // 普通状态,未选中状态
            Highlighted    // used when UIControl isHighlighted is set,高亮状态,点击状态
            Disabled       // 禁用状态
            Selected       // flag usable by app (see below),选中状态
    
            @available(iOS 9.0, *)
            Focused        // Applicable only when the screen supports focus
            Application    // additional flags available for application use
            Reserved       // flags reserved for internal framework use
        */
        button.setTitle("普通状态", forState: .Normal)
    
        // 设置文字颜色
        button.setTitleColor(UIColor.blackColor(), forState: .Normal)
    
        // 设置文字阴影颜色
        button.setTitleShadowColor(UIColor.yellowColor(), forState: .Normal)
    
        // 修改文字字体
        button.titleLabel?.font = UIFont.systemFontOfSize(30)           // 普通
        button.titleLabel?.font = UIFont.boldSystemFontOfSize(30)       // 加粗
        button.titleLabel?.font = UIFont.italicSystemFontOfSize(30)     // 斜体(对中文无效)
        button.titleLabel?.font = UIFont(name: "Zapfino", size: 15)     // 设置为指定字体类型的文字
    
        // 修改文字水平对齐方式
        /*
            case Center      // 居中
            case Left        // 左对齐
            case Right       // 右对齐
            case Fill        // 分散对齐
        */
        button.contentHorizontalAlignment = .Center
    
        // 修改文字垂直对齐方式
        /*
            case Center      // 居中
            case Top         // 上对齐
            case Bottom      // 下对齐
            case Fill        // 分散对齐
        */
        button.contentVerticalAlignment = .Center
    
        // 设置内部的小图片
        /*
            图片将会以原始比例显示,button 上的图片和文字可以同时添加
        */
        button.setImage(UIImage(named: "hehe.png"), forState: .Normal)
    
        // 设置背景图片
        /*
            图片将会填充整个背景
            为了保证高亮状态下的图片正常显示,必须设置按钮的 type 为 custom
        */
        button.setBackgroundImage(UIImage(named: "pic1.png"), forState: .Normal)
    
        // 设置图片不变暗
        /*
            在未设置触摸状态图片时,触摸状态或禁用状态下图片会变暗
        */
    
            // 触摸状态时图标不变暗
            button.adjustsImageWhenHighlighted = false
    
            // 禁用状态时图标不变暗
            button.adjustsImageWhenDisabled = false
    
        // 设置 button 的激活与失效状态
        /*
            true 激活状态,默认状态,false 失效状态(不可点击)
        */
        button.enabled = true
    
        // 设置 butotn 的隐藏与显示状态
        /*
            true 隐藏状态,false 显示状态,默认状态
        */
        button.hidden = true
    
        // 设置 butotn 的选中状态
        /*
            true 选中,false 未选中
        */
        button.selected = true
    
        // 获取 butotn 当前的选中状态
        let selected:Bool = button.selected
    
        // readonly 只读属性
    
            let title:String? = button.currentTitle                                   // 获取按钮当前的标题
            let attributedTitle:NSAttributedString? = button.currentAttributedTitle   // 获取按钮当前的标题属性
            let titleColor:UIColor = button.currentTitleColor                         // 获取按钮当前的标题颜色
            let shadowColor:UIColor? = button.currentTitleShadowColor                 // 获取按钮当前的标题阴影颜色
            let currentImage:UIImage? = button.currentImage                           // 获取按钮当前的图片
            let backgroundImage:UIImage? = button.currentBackgroundImage              // 获取按钮当前的背景图片
    
            // 获取按钮指定状态的文字
            let title1:String? = button.titleForState(.Normal)
    
            // 获取按钮指定状态的标题属性
            let attributedTitle1:NSAttributedString? = button.attributedTitleForState(.Normal)
    
            // 获取按钮指定状态的标题颜色
            let titleColor1:UIColor? = button.titleColorForState(.Normal)
    
            // 获取按钮指定状态的标题阴影颜色
            let shadowColor1:UIColor? = button.titleShadowColorForState(.Normal)
    
            // 获取按钮指定状态的图片
            let currentImage1:UIImage? = button.imageForState(.Normal)
    
            // 获取按钮指定状态的背景图片
            let backgroundImage1:UIImage? = button.backgroundImageForState(.Normal)
    
        // 设置 button 点击触发事件
        /*
            TouchDown                  // on all touch downs
            TouchDownRepeat            // on multiple touchdowns (tap count > 1)
            TouchDragInside
            TouchDragOutside
            TouchDragEnter
            TouchDragExit
            TouchUpInside
            TouchUpOutside
            TouchCancel
    
            ValueChanged              // sliders, etc.
    
            @available(iOS 9.0, *)
            PrimaryActionTriggered    // semantic action: for buttons, etc.
    
            EditingDidBegin           // UITextField
            EditingChanged         
            EditingDidEnd          
            EditingDidEndOnExit       // 'return key' ending editing
    
            AllTouchEvents            // for touch events
            AllEditingEvents          // for UITextField
            ApplicationReserved       // range available for application use
            SystemReserved            // range reserved for internal framework use
            AllEvents             
        */
        button.addTarget(self, action: #selector(UiButton.buttonClick(_:)), forControlEvents: .TouchUpInside)

3、Storyboard 中设置

  • 在 Storyboard 场景中设置

    • Button 设置

      Button1

      Type 按钮类型
      State Config 按钮状态
      Title 按钮文字
      Font 按钮文字字体
      Text Color 按钮文字颜色
      Shadow Color 按钮文字阴影颜色
      Image 按钮图片
      Background 按钮背景图片
      Shadow Offset 按钮阴影偏移量
      -- Reverses On Highlight
      Drawing
      -- Shows Touch On Highlight
      -- Highlighted Adjusts Image 高亮状态图片不变暗
      -- Disabled Adjusts Image 禁用状态图片不变暗
      Line Break 断行方式
      Edge 边距类型设置
      Inset 内边距大小设置
    • Control 设置

      Button2

      Alignment 文字对齐方式
      Content
      -- Selected 选中
      -- Enable 可用
      -- Highlighted 高亮

4、UIButton、UIImageView、UILabel 的选择

  • 特点:

    • UIButton:
      • 既能显示文字,又能显示图片(能显示 2 张图片,背景图片和内容图片)。
      • 长按高亮的时候可以切换图片\文字。
      • 直接通过 addTarget... 方法监听点击。
    • UIImageView:
      • 能显示图片,不能直接通过 addTarget... 方法监听点击。
    • UILabel:
      • 能显示文字,不能直接通过 addTarget... 方法监听点击。
  • 选择:

    • 仅仅是显示数据,不需要点击
      • 建议选择 UIImageView、UILabel。
    • 不仅显示数据,还需要监听点击
      • 建议选择 UIButton。
        • 其实 UIImageView、UILabel 也可以通过手势识别器来监听。
    • 长按控件后,会改变显示的内容
      • 选择 UIButton
        • 因为 UIButton 有 highlighted 这种状态。
    • 同时显示 2 张图片:背景图片、内容图片
      • 选择 UIButton。

5、UIButton 子控件

  • 1、不要直接拿出按钮内部的子控件,来修改文字、图片属性,按钮内部的子控件设置是有状态的。

    • 直接拿出设置时无法显示

          self.imageView.image = [UIImage imageNamed:@"shop.icon"];
          self.titleLabel.text = shop.name;
    • 带状态设置时才能正常显示

          self setImage:[UIImage imageNamed:shop.icon] forState:UIControlStateNormal];
          [self setTitle:shop.name forState:UIControlStateNormal];
  • 2、子控件 frame 设置

        self.imageView.frame = CGRectMake(0, 0, buttonW, imageH);
        self.titleLabel.frame = CGRectMake(0, imageH, buttonW, buttonH - imageH);
        // 设置按钮中 title 的尺寸
        - (CGRect)titleRectForContentRect:(CGRect)contentRect {
            return CGRectMake(0, 30, 70, 30);
        }
        // 设置按钮中 imageView 的尺寸
        - (CGRect)imageRectForContentRect:(CGRect)contentRect {
    
            // 计算 imageView 控件尺寸,contentRect 为按钮的尺寸
            CGFloat W = 40;
            CGFloat H = 46;
            CGFloat X = (contentRect.size.width - W) * 0.5;
            CGFloat Y = 20;
    
            return CGRectMake(X, Y, W, H);
        }
  • 3、子控件 接收点击事件的区域 设置

        // 设置按钮接收点击事件的区域
        - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
            CGFloat btnW = self.bounds.size.width;
            CGFloat btnH = self.bounds.size.height;
    
            // 计算不接收点击事件的区域
            CGFloat X = 0;
            CGFloat Y = btnH / 2;
            CGFloat W = btnW;
            CGFloat H = Y;
            CGRect rect = CGRectMake(X, Y, W, H);
    
            if (CGRectContainsPoint(rect, point)) {
                return nil;
            } else {
                return [super hitTest:point withEvent:event];
            }
        }
目录
相关文章
|
API iOS开发 Perl
iOS UIButton图文混排快捷显示
iOS UIButton图文混排快捷显示
iOS UIButton图文混排快捷显示
|
API iOS开发 Perl
iOS UIButton倒计时、指示器、粒子效果
iOS UIButton倒计时、指示器、粒子效果
iOS UIButton倒计时、指示器、粒子效果
|
iOS开发
iOS 之 自定义按钮UIButton
iOS 之 自定义按钮UIButton
322 0
iOS 之 自定义按钮UIButton
|
API iOS开发 Perl
ios UIButton点击快捷回调
ios UIButton点击快捷回调
|
iOS开发
iOS UIButton解读
iOS UIButton解读
183 0
|
iOS开发
iOS UIButton(按钮)
UIButton属性 1.UIButton状态: UIControlStateNormal // 正常状态 UIControlStateHighlighted // 高亮状态 UIControlStateDisabled ...
1026 0