iOS如何将UIButton中的图片与文字上下对齐详解

前言

相信每位iOS开发者都知道在UIButton中可以设置图片和文字,也经常见到同时设置有图片和下方提示文字的按钮,但是当我自己去对图片按钮添加提示文字的时候,却发现这并不是想象中的那么简单。怎么不简单呢?下面来一起看看详细的介绍吧。

设置图片和文字

如示例代码:

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按钮", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()

self.view.addSubview(button)
}

我们可以通过UIButton的setTitle和setImage方法分别为按钮设置图片和文字信息,但是会发现设置完成以后我们的图片和文字并没有重合排列,也没有上下排列,而是一个左右排列的样子。


设置图片和文字

说到这里,肯定会有人想到设置图片和文字的frame来进行处理,而且我们也确实可以通过UIButton的对象获取到对应的imageView和titleLabel,但是如果经过测试的话,你就会发现这是一个trike的方法,而且是不生效的。

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按钮", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()
button.titleLabel?.frame = CGRectMake(20, 0, 30, 30)
button.imageView?.frame = CGRectMake(0, 0, 20, 20)

self.view.addSubview(button)
}

修改为这样以后,运行程序,会发现对应的视图没有任何变化。


添加frame设置

UIEdgeInsets

查看UIButton的属性,我们会找到titleEdgeInsets和imageEdgeInsets两个属性。修改这两个属性,可以实现我们想要的效果。

titleEdgeInsets和imageEdgeInsets都是UIEdgeInsets的对象,我们先说一下UIEdgeInsets的几个属性的具体效果。

我们知道,UIEdgeInsets有top,left,bottom,right几个属性,但是通过测试,就会发现设置了top以后自己的y坐标并没有增加响应的距离,而是增加了1/2,那么它们到底应该如何计算呢?

当设置了top以后,其实就是相当于view的上边缘向下移动了相应的距离。用在title中,如果titleLabel的frame(50, 50, 24, 24);那么Button的上下边缘应该分别是0和124,因为正常情况下titleLabel必然处于Button的中间位置。当设置了titleEdgeInsets的top为10以后,相当于button的上下坐标为10,124,则titleLabel的坐标就变成了(50, 55, 24, 24),也就是上下边缘变为了55和79, 向下移动了5个点。

经过计算可以得出,如果要将文字移动到图片的下方,需要设置titleEdgeInsets和imageEdgeInsets,且分别设置为
若titleLabel为 w1,h1, imageView为w2,h2, 上下间距为space

titleEdgeInsets = (h2 + space, - w2, 0, 0)
imageEdgeInsets = (-h1 - space, w1)

如上述例子若改为:

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按钮", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()

var imageSize:CGSize = button.imageView!.frame.size
var titleSize:CGSize = button.titleLabel!.frame.size
button.titleEdgeInsets = UIEdgeInsets(top: 0, left:-imageSize.width, bottom: -imageSize.height - 5, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: -titleSize.height - 5, left: 0, bottom: 0, right: -titleSize.width)
self.view.addSubview(button)
}

则可实现我们要求的效果:


设置insets

注意:如果设置了button的frame,而且button的宽度不足以同时显示图片和文字的大小的话,titleLabel的size将会获取错误。所以如果需要设置frame,建议先将button的宽度设置为frame.size.width * 2, 等titleEdgeInsets和imageEdgeInsets全部设置完成以后再重新设置frame。

总结

以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-10-17

详解iOS中UIButton的三大UIEdgeInsets属性用法

UIEdgeInsets是什么 UIEdgeInsets是什么?我们点进去看一下: typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; UIEdgeInsets是个结构体类型.里面有四个参数,分别是:

IOS开发UIButton(左边图片右边文字效果)

在使用UIButton的时候,需要实现UIButton左边图片,图片后面紧跟文字效果比较麻烦,简单实现方法具体代码如下: (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = RGB(235, 235, 240); UIButton *oneButton = [[UIButton alloc] initWithFrame:CGRectMake(0, kHeaderHeight + 8, kScreenWidth,

iOS设置UIButton文字显示位置和字体大小、颜色的方法

前言 大家都知道UIButton按钮是IOS开发中最常用的控件,作为IOS基础学习教程知识 ,初学者需要了解其基本定义和常用设置,以便在开发在熟练运用. 一.iOS设置UIButton的字体大小 btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlStateNormal]; //设置按钮上的自体的大小 //[btn setFont: [UIFont system

C#及WPF获取本机所有字体和颜色的方法

本文实例讲述了C#及WPF获取本机所有字体和颜色的方法.分享给大家供大家参考.具体如下: WPF 获取所有的字体: System.Drawing.Text.InstalledFontCollection font = new System.Drawing.Text.InstalledFontCollection(); System.Drawing.FontFamily[] array= font.Families; foreach (var v in array) { MessageBox.Sh

iOS中Label实现显示不同颜色与字体的方法

前言 iOS中Label是我们经常遇到的一个控件,我们大家应该都会简单的使用它,像下面这个代码,就能简单的创建一个label // 1.创建 CGRectrect =CGRectMake(100,100,100,100); UILabel* label = [[UILabelalloc]initWithFrame:rect]; 引言 然而我们在开发中,经常会遇到一行字,但是显示不同颜色和字体的情况,话不多说,直接上代码. 1.显示不同颜色,有两种方式 (1)通过 range 来设置 NSMuta

Android Dialog 设置字体大小的具体方法

先看下面图片: 这是我在做登录页面的时候,调用系统的ProgressDialog 进行等待,可是看起来很不协调,左边的等待图片过大,右边文字过小,看起来老别扭,虽然功能上不存在什么问题,但是我有强迫症,看不顺的就像弄掉.可是找了好久,没发现 ProgressDialog  有一个方法是可以设置字体的. 于是我又来CSDN查找解决方案,可是找了好久,翻了好几页都没看到想要的结果,心冷了,找到的都说ProgressDialog 可以自定义一个View,在layout定义一个布局,然后设置到Progr

iOS实现应用内切换语言及字体大小(模仿微信)

前言 最近公司需要切换多语言和字体大小功能,上网查看比较少的实用方案.于是我经过几天尝试和思考完成了第一版的应用内多语言版本切换的功能Demo.下面分享给大家,需要的朋友可以参考学习,下面话不多说了,来一起看看详细的介绍吧. 方案思路: 一.如何只在一个配置文件中,实现多语言的配置. 二.每个文本控件如何显示对应语言. 三.如果通过开关来控制界面中的每个文本控件,同时切换对应的语言和字体样式. 首先: 解决第一个配置问题:我是用plist文件(JSON文件也可以).通过一个key 对应一组语言数

易语言设置拖动滚动条的位置是否允许拖动跟踪的方法

允许拖动跟踪属性 所属对象:纵向滚动条   操作系统支持:Windows,数据类型:逻辑型: 本属性设定当用户拖动滚动条的位置盒的过程中是否产生位置改变事件. 语法:  对象.允许拖动跟踪 =  逻辑型 应用对象:纵向滚动条 例程 说明: 纵向滚动条的允许拖动跟踪为假时,当拖动滚动条的鼠标放开以后才触发"位置被改变"事件. 纵向滚动条的允许拖动跟踪为真时,当滚动条的位置发生改变就触发"位置被改变"事件,与鼠标放不放开无关. 运行结果: 总结 以上就是这篇文章的全部内

python IDLE 背景以及字体大小的修改方法

为了保护眼睛,决定把白色背景换掉: 1 首先,在已经下载好的python文件目录下,找到config-highlight.def文件,我的是在H:\python\python3**\Lib\idlelib**文件夹下. 2.打开文件后,你会看到一些默认的颜色配置,比如经典的颜色配置就是白色背景,一般这个文件中会有两种配置可供选择: [IDLE Classic]和 [IDLE New],表现在IDLE界面上就是在python shell下,选择options-configure IDLE--hig

IOS 开发之自定义按钮实现文字图片位置随意定制

IOS 开发之自定义按钮实现文字图片位置随意定制 可能有些看到这篇文章的朋友会觉得很不屑:"按钮谁不会自定义?还需要看你的?" 也确实,按钮是我们项目中最常见的控件之一,天天在使用.对于不同类型的按钮,我们是否有更加简便的方法来实现需求是我们需要做的.这里我提出自己的两种方法,您可以对你自己平时自定义按钮的方法做一下对比,看看哪种方法更加简单. 多说一句,千万不要觉得知识简单,觉得自己会了,没必要学习.'往往简单的东西存在大智慧'(这个比给满分),知识都是慢慢积累出来的. 按钮是应用中

Android编程开发之TextView文字显示和修改方法(附TextView属性介绍)

本文实例讲述了Android编程开发之TextView文字显示和修改方法.分享给大家供大家参考,具体如下: 一. 新建一个Activity 和 Layout 首先在layout文件夹中新建一个activity_main.xml,在新建工程的时候一般默认会新建此xml文件,修改其代码如下: activity_main.xml 代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x

ExtJs默认的字体大小改变的几种方法(自己整理)

以下列出网上收集的几种方法,希望对大家有用. 1. 只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了. 但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px换成15px. 改完之后按钮出现毛边,在样式文件中加 复制代码 代码如下: .ext-ie .x-btn-text-icon .x-btn-center .x-btn-text { padding:3px 0px 0px 0px; } 毛边就不