UIButton 自定义子布局 实现图文排版

最新推荐文章于 2024-03-01 09:02:33 发布
最新推荐文章于 2024-03-01 09:02:33 发布
阅读量868 收藏
点赞数
分类专栏： Swift 文章标签： UIButton  图文排版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvchenqiang_/article/details/80434829
版权

效果图

这里写图片描述

代码示例

//
//  LYUContentLayoutBtn.swift
//  LYUMVVMKit
//
//  Created by LYU on 2018/5/24.
//  Copyright © 2018年 LYU. All rights reserved.
//

import UIKit

enum LYUButtonLayoutStyle {
    case ImageLeft  /// 图片居左 文字配合间距 整体垂直方向居中
    case ImageRight /// 图片居右 文字配合间距 整体垂直方向居中
    case ImageTop   /// 图片居上  文字配合间距 整体水平方向居中
    case ImageBottom /// 图片居下 文字配合间距 整体水平方向居中
}

class LYUContentLayoutBtn: UIButton {
   private(set) fileprivate var imgSize:CGSize = CGSize.zero;
   private(set) fileprivate var style:LYUButtonLayoutStyle = .ImageTop;
   private(set) fileprivate var space:CGFloat = 0.0;


    /// layout btn subviews
    ///
    /// - Parameters:
    ///   - style: layout style
    ///   - imgSize: img size
    ///   - space: space
    func layoutContent(style:LYUButtonLayoutStyle, imgSize:CGSize, space:CGFloat){
        self.style = style;
        self.imgSize = imgSize;
        self.space = space;
        /// 强制当前loop刷新UI
        setNeedsLayout();
        layoutIfNeeded();
    }


    override func layoutSubviews() {
        super.layoutSubviews();
        let size = self.bounds.size;
        switch self.style {
        case .ImageTop:
            self.imageView?.frame = CGRect(x: (size.width - self.imgSize.width)/2.0, y: 0, width: self.imgSize.width, height: self.imgSize.height);
            let hegiht = self.currentTitle!.textHeight(font: self.titleLabel!.font, width: size.width);

            self.titleLabel?.frame = CGRect(x: 0, y: self.imgSize.height + space, width: size.width, height: min(hegiht, size.height - self.imgSize.height - self.space));
        case .ImageBottom:
             self.imageView?.frame = CGRect(x: (size.width - self.imgSize.width)/2.0, y: size.height - self.imgSize.height, width: self.imgSize.width, height: self.imgSize.height);
            var hegiht = self.currentTitle!.textHeight(font: self.titleLabel!.font, width: size.width);
             hegiht = min(hegiht, size.height - self.imgSize.height - self.space);
             self.titleLabel?.frame = CGRect(x: 0, y: size.height - hegiht - self.space - self.imgSize.height, width: size.width, height: hegiht);
        case .ImageLeft:
            self.imageView?.frame = CGRect(x: 0, y: (size.height - self.imgSize.height)/2.0, width: self.imgSize.width, height: self.imgSize.height);
          var hegiht = self.currentTitle!.textHeight(font: self.titleLabel!.font, width: size.width);
            hegiht = min(hegiht, size.height)
            self.titleLabel?.frame = CGRect(x: self.imgSize.width + self.space, y: (size.height - hegiht)/2.0, width: (size.width - self.imgSize.width - self.space), height: hegiht);
        case .ImageRight:
            self.imageView?.frame = CGRect(x: size.width - self.imgSize.width, y: (size.height - self.imgSize.height)/2.0, width: self.imgSize.width, height: self.imgSize.height);

            var hegiht = self.currentTitle!.textHeight(font: self.titleLabel!.font, width: size.width);
            hegiht = min(hegiht, size.height)
            self.titleLabel?.frame = CGRect(x: 0, y: (size.height - hegiht)/2.0, width: size.width - self.space - self.imgSize.width, height: hegiht);
        }
    }

}

调用示例


import UIKit

class ViewController: UIViewController {

    var imageLeftBtn:LYUContentLayoutBtn = {
        let btn = LYUContentLayoutBtn();
        btn.setImage(#imageLiteral(resourceName: "read_share.png"), for: .normal);
        btn.setTitle("分享", for: .normal);
        btn.setTitleColor(UIColor.init(hexString: "787878"), for: .normal);
        btn.titleLabel?.textAlignment = .left;
        btn.titleLabel?.font = FONT(28);
        btn.layoutContent(style:LYUButtonLayoutStyle.ImageLeft, imgSize: CGSize(width: FIT_WIDTH(102), height: FIT_WIDTH(102)), space: FIT_WIDTH(18));
        btn.backgroundColor = UIColor.cyan;
        return btn;
    }()


    var imageRightBtn:LYUContentLayoutBtn = {
        let btn = LYUContentLayoutBtn();
        btn.setImage(#imageLiteral(resourceName: "read_share.png"), for: .normal);
        btn.setTitle("分享", for: .normal);
        btn.setTitleColor(UIColor.init(hexString: "787878"), for: .normal);
        btn.titleLabel?.textAlignment = .left;
        btn.titleLabel?.font = FONT(28);
        btn.layoutContent(style:LYUButtonLayoutStyle.ImageRight, imgSize: CGSize(width: FIT_WIDTH(102), height: FIT_WIDTH(102)), space: FIT_WIDTH(18));
        btn.backgroundColor = UIColor.cyan;
        return btn;
    }()




    var imageTopBtn:LYUContentLayoutBtn = {
        let btn = LYUContentLayoutBtn();
        btn.setImage(#imageLiteral(resourceName: "read_share.png"), for: .normal);
        btn.setTitle("分享", for: .normal);
        btn.setTitleColor(UIColor.init(hexString: "787878"), for: .normal);
        btn.titleLabel?.textAlignment = .center;
        btn.titleLabel?.font = FONT(28);
        btn.layoutContent(style:LYUButtonLayoutStyle.ImageTop, imgSize: CGSize(width: FIT_WIDTH(102), height: FIT_WIDTH(102)), space: FIT_WIDTH(18));
        btn.backgroundColor = UIColor.cyan;
        return btn;
    }()


    var imageBottomBtn:LYUContentLayoutBtn = {
        let btn = LYUContentLayoutBtn();
        btn.setImage(#imageLiteral(resourceName: "read_share.png"), for: .normal);
        btn.setTitle("分享", for: .normal);
        btn.setTitleColor(UIColor.init(hexString: "787878"), for: .normal);
        btn.titleLabel?.textAlignment = .center;
        btn.titleLabel?.font = FONT(28);
        btn.layoutContent(style:LYUButtonLayoutStyle.ImageBottom, imgSize: CGSize(width: FIT_WIDTH(102), height: FIT_WIDTH(102)), space: FIT_WIDTH(18));
        btn.backgroundColor = UIColor.cyan;
        return btn;
    }()


    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(self.imageLeftBtn);
        self.view.addSubview(self.imageRightBtn)
        self.view.addSubview(self.imageTopBtn)
        self.view.addSubview(self.imageBottomBtn)

        self.imageLeftBtn.snp.makeConstraints { (make) in
            make.leftMargin.equalTo(FIT_WIDTH(20));
            make.topMargin.equalTo((FIT_WIDTH(100)));
            make.width.equalTo(FIT_WIDTH(180));
            make.height.equalTo(FIT_WIDTH(102));
        }


        self.imageRightBtn.snp.makeConstraints { (make) in

            make.leftMargin.equalTo(FIT_WIDTH(20));
            make.topMargin.equalTo((FIT_WIDTH(250)));
            make.width.equalTo(FIT_WIDTH(180));
            make.height.equalTo(FIT_WIDTH(102));
        }




        self.imageTopBtn.snp.makeConstraints { (make) in
            make.leftMargin.equalTo(FIT_WIDTH(300));
            make.topMargin.equalTo((FIT_WIDTH(100)));
            make.width.equalTo(FIT_WIDTH(102));
            make.height.equalTo(FIT_WIDTH(180));
        }


        self.imageBottomBtn.snp.makeConstraints { (make) in

            make.leftMargin.equalTo(FIT_WIDTH(300));
            make.topMargin.equalTo((FIT_WIDTH(500)));
            make.width.equalTo(FIT_WIDTH(102));
            make.height.equalTo(FIT_WIDTH(180));
        }

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

/// 修正


import UIKit

enum LYUButtonLayoutStyle {
    case none
    case ImageLeftContentStart        /// 图片居左 文字居右 整体水平居左
    case ImageLeftContentCenter      /// 图片居左 文字配合间距 整体水平居中
    case ImageRightContentStart       /// 图片居右 文字配合间距 整体水平居右
    case ImageRightContentCenter    /// 图片局右 文字配合间距 整体水平居中
    case ImageTopContentCenter         /// 图片居上  文字配合间距 整体垂直方向居中
    case ImageBottomContentCenter   /// 图片居下 文字配合间距 整体垂直方向居中
}

class LYUContentLayoutBtn: UIButton {
   private(set) fileprivate var imgSize:CGSize = CGSize.zero;
   private(set) fileprivate var style:LYUButtonLayoutStyle = .none;
   private(set) fileprivate var space:CGFloat = 0.0;

    /// layout btn subviews
    ///
    /// - Parameters:
    ///   - style: layout style
    ///   - imgSize: img size
    ///   - space: space
    func layoutContent(style:LYUButtonLayoutStyle, imgSize:CGSize, space:CGFloat){
        self.style = style;
        self.imgSize = imgSize;
        self.space = space;
        /// 强制当前loop刷新UI
        setNeedsLayout();
        layoutIfNeeded();
    }


    override func layoutSubviews() {
        super.layoutSubviews();
        let size = self.bounds.size;
        switch self.style {
        case .none:

            break;
        case .ImageLeftContentStart:
            self.imageView?.frame = CGRect(x: 0, y: (size.height - self.imgSize.height)/2.0, width: self.imgSize.width, height: self.imgSize.height)
            let labRect = self.titleLabel!.textRect(forBounds: CGRect(x: self.imgSize.width + self.space, y: 0, width: size.width - self.imgSize.width - self.space, height: size.height), limitedToNumberOfLines: self.titleLabel!.numberOfLines)
            self.titleLabel?.frame = CGRect(x: self.imgSize.width+self.space, y: (size.height - labRect.size.height)/2.0, width: size.width - self.imgSize.width - self.space, height: labRect.size.height)

            break;
        case .ImageLeftContentCenter:
            self.imageView?.frame = CGRect(x: 0, y: size.width/2.0 - self.imgSize.width - self.space/2.0, width: self.imgSize.width, height: self.imgSize.height);

            let labRect = self.titleLabel!.textRect(forBounds: CGRect(x: self.imgSize.width + self.space, y: 0, width: size.width - self.imgSize.width - self.space/2.0, height: size.height), limitedToNumberOfLines: self.titleLabel!.numberOfLines)

            self.titleLabel?.frame = CGRect(x: size.width/2.0 + self.space/2.0, y: (size.height - labRect.size.height)/2.0, width: size.width - self.imgSize.width - self.space/2.0, height: labRect.size.height)

            break;
        case .ImageRightContentStart:
            self.imageView?.frame = CGRect(x: size.width - self.imgSize.width, y: (size.height - self.imgSize.height)/2.0, width: self.imgSize.width, height: self.imgSize.height)

             let labRect = self.titleLabel!.textRect(forBounds: CGRect(x: 0, y: 0, width: size.width - self.imgSize.width - self.space, height: size.height), limitedToNumberOfLines: self.titleLabel!.numberOfLines)

            self.titleLabel?.frame = CGRect(x: 0, y: (size.height - labRect.size.height)/2.0, width: size.width - self.imgSize.width - self.space, height: labRect.size.height);

            break;
        case .ImageRightContentCenter:
              self.imageView?.frame = CGRect(x: size.width/2.0+self.space/2.0, y: (size.height - self.imgSize.height)/2.0, width: self.imgSize.width, height: self.imgSize.height)

             let labRect = self.titleLabel!.textRect(forBounds: CGRect(x: 0, y: 0, width: size.width - self.imgSize.width - self.space, height: size.height), limitedToNumberOfLines: self.titleLabel!.numberOfLines)

              self.titleLabel?.frame = CGRect(x: 0, y: (size.height - labRect.size.height)/2.0, width: size.width - self.imgSize.width - self.space, height: labRect.size.height);

            break;

        case .ImageTopContentCenter:
             self.imageView?.frame = CGRect(x: size.width/2.0 - self.imgSize.width/2.0, y: size.height/2.0 - self.space/2.0 - self.imgSize.height, width: self.imgSize.width, height: self.imgSize.height)
               let labRect = self.titleLabel!.textRect(forBounds: CGRect(x: 0, y: size.height/2.0+self.space/2.0, width: size.width , height: size.height/2.0 - self.space/2.0), limitedToNumberOfLines: self.titleLabel!.numberOfLines)
             self.titleLabel?.frame = CGRect(x: 0, y: size.height/2.0+self.space/2.0, width: size.width, height: labRect.size.height)
            break;
        case .ImageBottomContentCenter:
             self.imageView?.frame = CGRect(x: (size.width - self.imgSize.width)/2.0, y: size.height/2.0+self.space/2.0, width: self.imgSize.width, height: self.imgSize.height)

              let labRect = self.titleLabel!.textRect(forBounds: CGRect(x: 0, y:0, width: size.width , height: size.height/2.0 - self.space/2.0), limitedToNumberOfLines: self.titleLabel!.numberOfLines)

             self.titleLabel?.frame = CGRect(x: 0, y: size.height/2.0 - self.space/2.0 - labRect.size.height, width: size.width, height: labRect.size.height);
            break;
        }

    }

}
Micah_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UIButton 的图文混排
11-05
UIButton 的图文混排，就一个API 还可以在xib里面实现
css svg 按钮,svg特效按钮
weixin_28745821的博客
08-03 496
* {margin:0;padding:0}html,css {width:100%;height:100%;padding: 20px}.position {margin-left:auto;margin-right:auto;text-align:center;margin-top:15%}#workarea {position:absolute;width:100%;height:100%;...
SVG 和 CSS3 实现一个超酷爱心 Like 按钮
xuhss_com的博客
04-16 764
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 在现代网页中，我们经常可以在一些文章、视频和图片页面上找到”Like”按钮，并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮，如果你想让它们具有特别的
网页设计方案中的按钮样式设计技巧
最新发布
light86的专栏
03-01 336
网页设计方案中的按钮样式设计技巧
SVG 按钮小动画：点击切换面包导航和关闭
九天翔龙的技术博客
01-27 1424
今日看到个按钮切换小动画甚有意思，做了一个类似的，效果如图所示： 写的比较简单，像这种细节动画相信在将来会越来越多的。记录下来，作为一个知识点参考。 主要用到的知识是：SVG 的 path 路径动画的控制。 之前我写了一篇文章来讨论 SVG 的路径的描边动画 《妙用SVG，给自己暗恋的人表白吧~》。今天这篇继续来讨论 SVG 路径path的动画。 第一步：先做好HTML 和CSS 。写...
自定义UIButton
deyoudui5871的博客
10-18 99
今天讲解两种方式自定义UIButton(文字在左边，图片在右边) 1、创建一个类继承自UIButton，从写UIButton的- (CGRect)titleRectForContentRect:(CGRect)contentRect和- (CGRect)imageRectForContentRect:(CGRect)contentRect方法： - (CGRect)imageRe...
CSS SVG开关按钮切换网页白天和夜晚
ICode联盟
08-10 407
CSS+SVG实现的切换开关，点击按钮可以切换网页白天和夜晚效果，没有使用任何JavaScript代码。演示例子比较大，可以缩小点。
UIButton实现无限轮播
04-06
作者LXfeiYu，源码LXCarouselImages，LXCarouselImages三个UIButton实现无限轮播。
详解iOS自定义UITabBar与布局
01-05
例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现，最中间那个【+】发布微博并不是用来切换tab的，而是在当前的页面上覆盖一个编辑发布页面，发布完成或者取消发布之后又回到之前的页面，并没有进行...
UIAlignedButton:UIButton实现更加灵活
05-24
UIAlignedButton 一个UIButton实现更加灵活:)
iOS自定义UIButton点击动画特效
01-06
借鉴相关资料，整理了一个很有意思的button动画效果，iOS自定义UIButton点击动画特效 先看一下效果图： 下面贴上代码： ViewController： #import @interface ViewController : UIViewController @end #import ...
HTML5的SVG动画圆点索引按钮焦点图切换特效.zip
07-11
<div class="controls"> <!-- circular line --> <div id="circular-line"> <svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <circle id="circular-line-path" stroke-width="4" cx="19" cy="19" r="17"></circle> </g> </svg> </div> <!-- straight line --> <div class="straight-line"></div> <div class="dot active"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> HTML5 SVG动画圆点索引按钮焦点图切换特效，这是一款轮播图分页导航的例子，在每个分页圆点上都有一个SVG圆形线条，当用户点击其它圆点时，圆形线条以平滑过渡的方式运动到下一个位置。
ios-一句代码设置UIButton的image和title的左右上下布局以及image和title的间距.zip
07-11
一句代码设置UIButton的image和title的左右上下布局以及image和title的间距，git地址：https://github.com/Coder-ZJ/ZJCustomButton
HTML5 SVG创意开关切换按钮
08-23
对于开关切换按钮，我们在之前的文章中已经分享不少了，比如CSS3创意开关切换按钮就非常不错。今天我们再来分享一款基于SVG和HTML5的开关切换按钮，鼠标点击按钮后即可来回切换按钮的状态，滑动的动画效果非常不错。
ios-布局UIButton中TitleLabel和ImageView位置.zip
07-11
UIButton中，默认title在右，image在左。然而很多情况下需要不同的布局，比如左右调换，上下布局。这边利用UIEdgeTitle和UIEdgeImage很好的解决了这种场景
svg开关按钮
qq_45010409的博客
08-01 835
svg写开关按钮
CSS SVG按钮悬停放电动画(风暴按钮)
m0_49569569的博客
02-15 182
【代码】css svg按钮悬停放电动画(风暴按钮)
10个创意的SVG Button 点击特效
clschen的专栏
05-24 3697
今天为大家展示来自 codrops 分享的10组创意的 Button 点击特效，这个 Button 按钮特效主要以扭曲为主，当用户点击按钮后，按钮会产品不同扭曲样式，看起来很特别，动画实现方式主要是使用 SVG 来实现，下面来看看 DEMO 展示 。 黏效果 1 黏效果 2 黏效果 3 扭曲/波动效果 1 扭曲/波动效果 2 扭曲
根据内容自适应UIButton的大小
热门推荐
KLTec.
10-22 2万+
最近要做从后台拿到数据然后创建按钮的事情 但是问题是数据的内容不一定，因此按钮的
swift中，4个UIButton如何实现单选
06-17
在Swift中实现4个UIButton的单选，可以使用一个变量来记录当前选中的按钮，然后在每个按钮的点击事件中判断当前选中的按钮是否为自身，如果是则不作任何操作，否则将当前选中的按钮状态取消，再将自身状态设置为选中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值