美文网首页
iOS 图片文字水平居中按钮

iOS 图片文字水平居中按钮

作者: Evens_Book | 来源:发表于2018-01-02 10:53 被阅读74次

XOCenterImageTitleButton

平常会遇到很多次要把按钮图片放上面,文字放下面,然后文字和图片水平居中的情况,于是抽时间写了这个类。 

要求

iOS 8.0+

Swift 4.0+

安装

CocoaPods

在 Podfile中加入:

pod 'XOCenterImageTitleButton'

手动

把XOCenterImageTitleButton.swift拖入工程。

使用方法

・用代码

这个类完全继承自UIButton,用法与UIButton完全一样,你可以用btn.imageView以及btn.titleLabel进行各种属性的设置。

let btn=XOCenterImageTitleButton.init(frame: CGRect.init(x:170,y:200,width:100,height:100))

self.view.addSubview(btn)btn.setImage(UIImage.init(named:"icon"),for: .normal)

btn.setTitle("title",for: .normal)

・用 Storyboard 或者 XIB

在StoryBoard或者XIB中放入一个UIButton,把Class设置为 XOCenterImageTitleButton。

自定义(主要是设置图片与文字的位置,大小)

如果按钮的title文字不是很长,不用弄成多行,图片大小也是标准的,是不用写下面的代码的,因为图片默认是按钮的2/3高度,文字是按钮的1/3高度,宽度都与按钮同宽,按钮设置好title,image就已经是居中的按钮了,顶多设置一下titleLabel与imageView的间距,这个值是可以为负值的。

・用代码

btn.imageViewTopSpaceToButton=10//默认是0

btn.imageViewWidth=50//默认与按钮同宽

btn.imageViewHeight=50//默认是按钮高度的2/3

btn.titleLabelTopSpaceToImageView=10//默认是0

btn.titleLabelWidth=100//默认与按钮同宽

btn.titleLabelHeight=20//默认是按钮高度的1/3

btn.backgroundColorForHighlightedState=.blue//设置按钮按下时按钮的背景色

btn.imageViewAlphaForHighlightedState=0.5//设置按钮按下时图片的透明度

・用 Storyboard 或者 XIB

在面板里,可以设置这6个属性,实现对imageView titleLabel的位置和大小的控制,但无论怎么设置,imageView和titleLabel都是水平居中的。 

github地址:点我跳转

相关文章

  • iOS 图片文字水平居中按钮

    XOCenterImageTitleButton 平常会遇到很多次要把按钮图片放上面,文字放下面,然后文字和图片水...

  • CSS居中大全(带截图)

    文字水平居中 图片水平垂直居中 图片与文字水平垂直居中 代码同上 DIV相对于页面垂直居中并且响应式 视口绝对垂直...

  • iOS 按钮图片文字上下居中

    按钮图片文字上下居中处理

  • 关于水平垂直居中的问题

    文字水平居中 文字水平垂直居中 设置padding高度自动撑开 flex 子元素在父元素中水平垂直居中 方法一 ...

  • 图片和文字水平居中

    文字和 图片放在同一水平线上的时候,文字总和图片的底部平齐,即图片比文字靠上,通过设置css属性可以使得图片和文字...

  • UITextField的占位文字水平居中

    UITextField的提示文字水平居中:

  • 1. react-native 样式

    textAlign:'center', 文字水平居中 textAlignVertical:'center', ...

  • 2019-04-21

    大段文字水平垂直居中 代码如下: 预览链接

  • css居中

    一:水平居中 1,行内元素居中行内元素居中是只针对行内元素的,比如文本(text)、图片(img)、按钮等行内元素...

  • 一些常用样式

    1.文字居中 p标签文字水平居中设置 text-align: centerp标签文字垂直居中设置line-heig...

网友评论

      本文标题:iOS 图片文字水平居中按钮

      本文链接:https://www.haomeiwen.com/subject/dwdfnxtx.html