zoukankan      html  css  js  c++  java
  • 布局包含Image和Title的UIButton

    UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是能试出来的,但是如果改变了图片大小或文字长度,又要再来一遍。 作为程序猿,我们不应该放弃任何一个偷懒的机会。

    • 默认情况下,是图片在左,文字在右,垂直居中显示,如下图:
    button.titleEdgeInsets = UIEdgeInsetsZero;
    button.imageEdgeInsets = UIEdgeInsetsZero;
    

    1

    • 设置如下布局后,图片和文字都居中显示。
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, 0);
    // button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width);
    // 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
    button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width);
    

    2

    • 如果想图片在上,文字在下,水平居中显示,则按下面设置即可:
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height, 0);
    // button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height, 0, 0, -button.titleLabel.frame.size.width);
    // 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
    button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width);
    

    3

    如果觉得图片和文字离的太近了,稍微分开一点:

    CGFloat offset = 40.0f;
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height-offset/2, 0);
    // button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height-offset/2, 0, 0, -button.titleLabel.frame.size.width);
    // 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
    button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height-offset/2, 0, 0, -button.titleLabel.intrinsicContentSize.width);
    

    4

    • 文字左对齐,图片右对齐
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width - button.frame.size.width + button.titleLabel.intrinsicContentSize.width, 0, 0);
        button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width - button.frame.size.width + button.imageView.frame.size.width);
    

    5

     
  • 相关阅读:
    深入了解Element Form表单动态验证问题 转载
    使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象
    vue 中 使用 element-ui 发送请求前 校验全部表单,报警告: [Element Warn][Form]model is required for validate to work!
    vue element InfiniteScroll 无限滚动 入坑记录
    nginx实现跨域访问并支持(GET, POST,PUT,DELETE, OPTIONS)
    正则表达式记录
    element ui图片上传方法
    laravel 跨域解决方案
    vagrant的box哪里下?镜像在哪儿找?教你在vagrant官网下载各种最新.box资源
    Saas系统架构的思考,多租户Saas架构设计分析
  • 原文地址:https://www.cnblogs.com/zhangliukou/p/6189529.html
Copyright © 2011-2022 走看看