美文网首页
iOS 使用XIB高度自定制Button

iOS 使用XIB高度自定制Button

作者: 本帅不良 | 来源:发表于2018-07-24 16:18 被阅读308次

    记得以前Button,Label上面可以加子视图,但是目前不可以了。也不是完全不可以,代码可以强行加上去,但显示上可能会出现问题,XIB则根本不行!所以,如果你需要做一个能够接收事件的控件,路子变窄了。你可以使用UIView,上面加image、label;然后给UIView搞一个事件,或者直接用button,但你可能对button的使用并不太熟练,毕竟一个小小的button可以设置他的背景色、背景图片、图片、标题、圆角等等。而对于这些属性的赋值只能算得上Button的使用的初级阶段,本文需要介绍的是:如何调整Button上文字、图片的位置,已达到高度自定制的效果!
    本文借鉴了以下博客:https://blog.csdn.net/idoshi201109/article/details/45936077
    在开始之前,强烈推荐各位,打开自己的Xcode,拖一个button到视图中,给button一个title、一个image,然后将这个button拉大,如图

    截图来自Xcode9.4.1
    刚设置button的image时,会发现title不见了!不要慌,看右边属性,只是button的颜色被改成白色了。。所以看不见。

    接下来,我们来看看然后调整button中title、image的位置,请看右侧button的属性栏,如下图


    截图来自Xcode9.4.1

    没错,红笔圈出来的就是重点了!它的作用就是调整button的title和image的位置。至于咋用,我就不说了,你可以随便点一点,点着点着就知道了,

    但考这一个属性是没办法做到高度自定制button的,我们可能还需要微调title、image的位置,要做到这一点,就必须依靠下面这个属性了 截图来自Xcode9.4.1
    这个属性很好理解,Content Insets 、Title Insets 、 Image Insets分别是设置button、title、image的内偏移量的,需要调整什么属性,就修改什么属性
    这两个属性设置好,基本上就能满足日常需求。 需要说明的是这个属性 截图来自Xcode9.4.1
    它可能会修改Button图片的颜色。无论多么五彩缤纷的图片,都会被他改成统一的纯色,好坑爹的!怎么解决呢: 截图来自Xcode9.4.1
    你需要把button的type改成custom。
    如此,大功告成。

    续XIB下如何使用UIButton

    下面主要讲下如何在XIB中设置Button的不同状态!

    我们知道button是有点击效果的,及按下之后会有明显的变化。而实现这一效果主要就是依赖button的四种状态的切换: button状态.png
    如图,我们看到,button有Default、Highlighted、Selected、Disabled四种状态;

    Default:默认状态,即normal
    Highlighted:高亮状态,即手指按下时的状态
    Selected:选中状态,相对Selected状态,可以理解Default为未选择状态
    Disabled:不可用状态,isUserInteractionEnabled为false时的状态
    如上图,我们通过切换,可以设置不同状态下Button的样式,最常用的就是Default和Selected状态。

    需要注意的是,我们需要将button设置成Custom类型的,默认是System类型的。顾名思义,系统类型就是有个特定的样式,我们选择Custom定制类型 button样式.png 如果我们需要查看不同状态下button的样式,是不是需要运行代码,操作一通呢?其实有更简单的方法 修改button状态.png
    如上图,在state栏,我们可以通过打钩控制当前button的状态,这样就能轻轻松松的看到button各个状态下的样式了,是不是很好用。值得一提的是,这个设置本身除了查看button的状态外,还能起到设置button初始状态的作用!比如说:目前有并排的两个button,如图: button示例.png

    我需要设置左边的button为选中状态,右边的button为未选中状态,只需要在state属性中勾选左边button为selected,右边的button不勾选即可。

    相关文章

      网友评论

          本文标题:iOS 使用XIB高度自定制Button

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