iOS心得7 按钮的图片和文字自定义位置

ゝ一纸荒年。 2022-08-09 13:55 176阅读 0赞

今天给大家看一下按钮的自定义效果

通常我们的需要效果如果有图有字的话，我们基本上都是使用uibutton这个控件。但是系统自带的效果是左图右字。如果你需要上图下字或者上字下图这种效果就需要自己去写。可能有的猿友没有做过这个。今天给大家一个实例。

Demo地址：https://github.com/sunyunfei/-Demo.git

首先我在故事板视图底部创建两个按钮，这一步操作就不说了，Demo里面很详细。

我自定义了两个按钮的类，让两个按钮分别继承他们。

第一个按钮我想要的效果是上图下字，这一步主要是通过两个方法实现的：

\- (CGRect)titleRectForContentRect:(CGRect)contentRect；

\- (CGRect)imageRectForContentRect:(CGRect)contentRect；

一个是设置字的大小位置，一个是设置图的大小位置。

\- (CGRect)titleRectForContentRect:(CGRect)contentRect

\{

CGFloat x = (contentRect.size.width \-(contentRect.size.height \-30))/2;

CGFloat y = -30;

return CGRectMake(x,y,contentRect.size.width,contentRect.size.height);

\}

\- (CGRect)imageRectForContentRect:(CGRect)contentRect

\{

CGFloat x = (contentRect.size.width \-(contentRect.size.height \-30))/2;

CGFloat y = 30;

return CGRectMake(x,y,contentRect.size.height \-30,contentRect.size.height \-30);

\}

这是我写的简单的效果。当然你也可以在构造方法中写对图字一些舒心盖的设置：

\- (id)initWithFrame:(CGRect)frame

\{

self = \[super initWithFrame:frame\];

if (self) \{

//在构造的时候有作用

self.imageView.contentMode = UIViewContentModeScaleAspectFit;

self.imageView.layer.cornerRadius = 15;

self.imageView.layer.masksToBounds = YES;

self.titleLabel.textAlignment = NSTextAlignmentCenter;

\}

returnself;

\}

但是在我这个Demo里面是没有起作用，应该是我的按钮是画的没有经过构造函数造成的，有心的猿友可以试一下自己代码创建一个。

最后结果图：

≈![Center][]

[Center]: /images/20220731/37c56dba9c5648618d91e305e5f62fa3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts添加图片，文字和图片更换位置

一、添加图片 1. 找到 legend》data 2. 处理数据添加 icon:‘image://./img/报警.png’ 将 ‘题1’

客官°小女子只卖身不卖艺/ 2023年01月11日 08:52/ 0 赞/ 232 阅读

相关自定义iOS7导航栏背景,标题和返回按钮文字颜色

在iOS7下，默认导航栏背景，颜色是这样的，接下来我们就进行自定义，如果你仅仅是更改一下背景和颜色，代码会很简单，不需要很复杂的自定义View来替代leftBarItem !

叁歲伎倆/ 2022年09月21日 04:52/ 0 赞/ 252 阅读

相关 iOS开发-ios7 UIAlertView自定义

之前一个项目适配ios7之后，发现原先的UIAlertView无法正常显示。后来发现ios7里面原生态的UIAlertView不支持自定义了。然后就去github上找了

- 日理万妓/ 2022年09月20日 12:45/ 0 赞/ 193 阅读

相关 iOS开发-自定义后台显示图片(iOS7-Background Fetch的应用)

之前在用电池医生的时候, 发现它有这样一个功能:当应用进入后台的时候, 会显示另外一张图片覆盖App Switcher显示的界面。效果如下: ![Center][]变成-

- 日理万妓/ 2022年08月27日 05:37/ 0 赞/ 229 阅读

相关自定义Android带图片的按钮

自定义Android带图片的按钮前言现在移动设备的按钮设计讲究大图标小文字，希望用户只要一看到图标便能知道这个按钮是干嘛的，但又要有必要的文字提示，最常见的就数

素颜马尾好姑娘i/ 2022年08月11日 00:59/ 0 赞/ 200 阅读

相关 iOS心得7 按钮的图片和文字自定义位置

今天给大家看一下按钮的自定义效果通常我们的需要效果如果有图有字的话，我们基本上都是使用uibutton这个控件。但是系统自带的效果是左图右字。如果你需要上图下字或者上字下图

ゝ一纸荒年。/ 2022年08月09日 13:55/ 0 赞/ 177 阅读

相关 iOS 使用自定义按钮删除对应cell

很多app设计的时候因为各种原因，导致tableView不能通过右滑cell的菜单来删除相应的cell。这种情况下删除按钮通常放在对应的自定义cell上，如下图：

ゞ浴缸里的玫瑰/ 2022年05月30日 05:35/ 0 赞/ 235 阅读

相关 Android实现自定义图片+文字控件

1、新建image\_text\_button.xml文件 <merge xmlns:android="http://schemas.android.com/apk/

ゞ浴缸里的玫瑰/ 2021年12月04日 07:47/ 0 赞/ 510 阅读

相关 iOS 设置自定义间距的文字下划线

网上看到很多用NSAttributedString的NSUnderlineStyleAttributeName来设置的，方法很简便，网上也很多，就不发了。效果如下： ![

朴灿烈づ我的快乐病毒、/ 2021年11月05日 14:48/ 0 赞/ 690 阅读

相关 WPF 自定义图片按钮

[WPF 自定义图片按钮][WPF] 原文: [WPF 自定义图片按钮][WPF 1] 此文档仅仅是一个BaseCode，已做后续查阅 XAML代码： ![Contra

迷南。/ 2021年11月05日 11:26/ 0 赞/ 545 阅读