【问题标题】:How to put text on left and right side of UIButton如何在 UIButton 的左侧和右侧放置文本
【发布时间】:2018-08-04 08:25:59
【问题描述】:

我是 iOS 开发的新手,最近遇到了一个问题,我无法在按钮的两侧设置文本。我还希望在按钮中添加多行文本(如下所示)。我已经看了很多答案,但没有一个能满足我的要求。

任何建议或帮助将不胜感激,谢谢!

【问题讨论】:

  • 显示你尝试过的代码
  • 您是否受限于使用单个按钮?您可以在其上使用视图和覆盖按钮,并且图像看起来像 UITableViewCell,您可以使用 didSelect 委托方法。
  • @iOSDeveloper,是的,我正在使用情节提要约束,但这不是 UITableviewCell。它是视图中的按钮。不过谢谢你的建议
  • 您显示的内容看起来像是一个自定义 UI 组件,其中至少有 3 个文本标签和一个用于左侧红色边缘的附加视图。 UIKit 本身没有任何东西可以做同样的事情,你必须自己动手。
  • @Gereon,谢谢,我认为您对 3 个文本标签和附加视图的想法可能会对我有所帮助。

标签: ios objective-c iphone xcode uibutton


【解决方案1】:

我不会使用 UIButton,而是使用带有 Xib 的标签的 UIView。可以在此处找到相关教程:link

然后你可以给你的 UIView 添加一个目标,这样当点击它时会调用一些方法(就像 UIButton 一样):

yourView.isUserInteractionEnabled = true
let tap = UITapGestureRecognizer(target: self, action: #selector(buttonTapped))
yourView.addGestureRecognizer(tap)

和方法:

@objc func buttonTapped() {
    // do what you need on tap here
}

希望对您有所帮助!如果您有任何问题,请发表评论。

附言。我不确定,但据我所知,您可能正在构建一个 UITableView。是吗?你能展示一下全屏的设计吗?如果你有很多这样的“按钮”,那么它就不是一个“按钮”而是一个表格视图。

【讨论】:

    【解决方案2】:

    要显示多行,请使用以下代码

    button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
    button.titleLabel.numberOfLines = 2; // or 0(Zero)
    

    您需要添加 UIView 并向该视图添加点击手势并设计该视图,如上图所示。

    手势

    //Create tap gustures for view
    UITapGestureRecognizer *viewTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onClickView:)];
    [self.yourViewName addGestureRecognizer: viewTap];
    
    - (void) onClickView:(UITapGestureRecognizer *)recognizer {
    //Write your code
    }
    

    这是一种方法。

    第二个是……

    为此使用 UITableViewCell 并设计该单元格。

    这是第二种方法。

    【讨论】:

      【解决方案3】:

      您绝对应该使用自定义 UIButton 类。原因是 UIButton 具有您想要的其他属性,例如被 iOS 识别为 button,符合 Accessibility 作为 button,显示在故事板作为按钮类,让您的同事看到它实际上是一个按钮,具有与按钮相同/相似的界面,等等。

      创建自定义按钮并不难。基本上,只需子类 UIButton 并实现 awakeFromNib 来设置内部结构和 layoutSubviews 来定位和调整所有内容。

      这里是如何做到这一点的大纲......

      1.创建一个 UIButton 子类 (.h)
      将自定义接口添加到 header 文件中。它可能看起来像这样。

      @interface MyButton : UIButton
      
      - (void)setServiceText:(NSString *)serviceText;
      - (void)setPriceText:(NSString *)priceText;
      - (void)setTimeText:(NSString *)timeText;
      
      @end
      

      2。添加控件以保持按钮的内部结构 (.m)
      三个标签和一个用作红色侧边栏的视图。从这里开始添加到 code 文件。

      @interface MyButton ()
      
      @property (strong, nonatomic) UILabel *serviceLabel;
      @property (strong, nonatomic) UILabel *priceLabel;
      @property (strong, nonatomic) UILabel *timeLabel;
      @property (strong, nonatomic) UIView *redSideBarView;
      
      @end
      

      3.添加接口对应的代码(.m)
      由于UILabel 在我们设置text 属性时会重新绘制自身,因此我们不需要做更多的事情来让它出现在按钮上。

      - (void)setServiceText:(NSString *)serviceText {
          _serviceLabel.text = serviceText;
      }
      
      - (void)setPriceText:(NSString *)priceText {
          _priceLabel.text = priceText;
      }
      
      - (void)setTimeText:(NSString *)timeText {
          _timeLabel.text = timeText;
      }
      

      4.实施 awakeFromNib (.m)
      当 Storyboard 实例化您的按钮时,将调用此方法,因此这里是创建标签和执行其他只需执行一次操作的好地方。

      - (void)awakeFromNib {
          [super awakeFromNib];
      
          _sideBarView = [[UIView alloc] initWithFrame:CGRectZero];
          _sideBarView.backgroundColor = [UIColor redColor];
          [self addSubview:_sideBarView];
      
          _serviceLabel = [[UILabel alloc] initWithFrame:CGRectZero];
          _serviceLabel.font = [UIFont systemFontOfSize:18.0];
          [self addSubview:_serviceLabel];
      
          _priceLabel = [[UILabel alloc] initWithFrame:CGRectZero];
          _priceLabel.textColor = [UIColor greenColor];
          _priceLabel.font = [UIFont systemFontOfSize:16.0];
          _priceLabel.textAlignment = NSTextAlignmentRight;
          [self addSubview:_priceLabel];
      
          _timeLabel = [[UILabel alloc] initWithFrame:CGRectZero];
          _timeLabel.font = [UIFont systemFontOfSize:14.0];
          [self addSubview:_timeLabel];
      
          self.clipsToBounds = YES;
      }
      

      5.添加代码以布局您的按钮 (.m)
      这是自定义按钮代码的最后一部分。请注意,layoutSubviews 通常会在控件生命周期内被多次调用,因此不要在此处添加子视图。使用它来定位和调整按钮内部的大小。 self.bounds.size 代表按钮的当前大小,因此这是所有其他元素的良好参考。

      - (void)layoutSubviews {
          // Layout sub-elements
          CGFloat buttonWidth = self.bounds.size.width;
          CGFloat buttonHeight = self.bounds.size.height;
      
          _serviceLabel.frame = CGRectMake(30.0, 2.0, buttonWidth * 0.7, buttonHeight * 0.5);
          _priceLabel.frame = CGRectMake(buttonWidth - 40, 5.0, 30.0, buttonHeight * 0.4);
          _timeLabel.frame = CGRectMake(30.0, buttonHeight * 0.5, buttonWidth * 0.7, buttonHeight * 0.4);
          _sideBarView.frame = CGRectMake(0.0, 0.0, 10.0, buttonHeight);
      
          self.layer.cornerRadius = 10.0;
      }
      

      6.使用它!
      要使用它,您可以在 Storyboard 中创建一个常规按钮,然后在 Identity Inspector 中选择您的新按钮类。像往常一样,将按钮绑定到 视图控制器类 中的变量。当然,该变量应该属于 your 按钮类。设计就是这样!

      @property (weak, nonatomic) IBOutlet MyButton *button;
      

      现在不要忘记设置属性。

      self.button.backgroundColor = [UIColor lightGrayColor];
      [self.button setServiceText:@"FULL SERVICE HAIRCUT"];
      [self.button setPriceText:@"$30"];
      [self.button setTimeText:@"30 minutes"];
      

      我在这里没有提到的几件事是渐变和阴影。渐变可能最好通过添加到按钮视图层的CAGradientLayer 来完成。阴影需要更多的编码,因为您将按钮剪裁为圆角。可能您需要在其间再添加一个 UIView 以包含您随后剪辑的所有内容,然后为按钮视图添加阴影。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-02-17
        • 1970-01-01
        • 1970-01-01
        • 2019-05-06
        • 1970-01-01
        相关资源
        最近更新 更多