iOS-自定义 UIButton-文字在左、图片在右(一)

1. 系统默认 Button 添加图片文字样式(见下图):

Button默认状态图片文字位置.png

2. 现在想实现如下效果(见下图):

自定义Button图片在右边 文字在左边的效果.png

3. 实现代码

  1. 自定义 HQCustomButton 继承自 UIButton,重写layoutSubviews方法(见如下代码): #import "HQCustomButton.h" @implementation HQCustomButton - (void)layoutSubviews { [super layoutSubviews]; /** 修改 title 的 frame */ // 1.获取 titleLabel 的 frame CGRect titleLabelFrame = self.titleLabel.frame; // 2.修改 titleLabel 的 frame titleLabelFrame.origin.x = 0; // 3.重新赋值 self.titleLabel.frame = titleLabelFrame; /** 修改 imageView 的 frame */ // 1.获取 imageView 的 frame CGRect imageViewFrame = self.imageView.frame; // 2.修改 imageView 的 frame imageViewFrame.origin.x = titleLabelFrame.size.width; // 3.重新赋值 self.imageView.frame = imageViewFrame; } @end
  2. 在创建 Button 的地方用自定义 HQCustomButton 创建即可(见如下代码): HQCustomButton *button01 = [[HQCustomButton alloc] init]; button01.titleLabel.font = [UIFont systemFontOfSize:14]; [button01 setTitle:@"科室" forState:UIControlStateNormal]; UIImage *imageBtn01 = [UIImage imageNamed:@"YellowDownArrow"]; [button01 setImage:imageBtn01 forState:UIControlStateNormal]; [view addSubview:button01]; [button01 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.equalTo(view); make.left.equalTo(view).offset(kScreenWidth / 8); }];

4. 实现效果(见下图):

实现效果.png

特别提示:

在重写 HQCustomButton(自定义 Button)的layoutSubviews时候一定要先调用[super layoutSubviews];方法,不然按钮会显示不出来(见下图):

一定要先调用[super layoutSubviews].png

不掉用[super layoutSubviews]会出现的问题.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

FLAnimatedImage -ios gif图片加载框架介绍

简介 FLAnimatedImage 是 Flipboard 团队开发的在它们 App 中渲染 GIF 图片使用的库。 后来 Flipboard 将 FLAni...

9649
来自专栏知道一点点

eharts入门篇一

从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。

1504
来自专栏儿童编程

儿童编程Scratch之“画笔”基础功能学习总结

Scratch中“画笔”功能能够让使用者模拟画笔在舞台上创作,合理运用能够给作品带来极大的趣味性。

3992
来自专栏Android Note

Android – Drawable 详解

4015
来自专栏非著名程序员

代码实验室--带你一步步理解使用 ConstraintLayout

? 说明 这次 IO 给开发者带来了很多惊喜, ConstraintLayout 是其中较为实用的之一. Google 第一时间发布了官方的代码实验室指导教程...

2396
来自专栏前端说吧

CSS3-border-radius的兼容写法大全

4166
来自专栏青玉伏案

视错觉升级版:多个视错觉效果实现

之前发表过一篇关于视错觉的文章:《视错觉:从一个看似简单的自定义控件说起》,虽然不是用iOS开发中的Mask来实现的,但是原理和Mask原理是一样的,相当于手动...

20810
来自专栏王大锤

swift textView内容显示不全

  意见反馈页面有一行提示文字,包含客服QQ,要求qq可点击。为了实现点击功能,这里的文本没有使用UILabel,而是采用了UITextView,使用textV...

1432
来自专栏程序员宝库

如何用 vue 制作一个探探滑动组件

前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组...

74213
来自专栏coding...

Objective-C 使用核心动画CAAnimation实现动画先来看看效果吧Demo地址

https://github.com/gongxiaokai/CAAnimationDemo

933

扫码关注云+社区

领取腾讯云代金券