美文网首页swift
swift---实现button的文字图片上下或者左右排列

swift---实现button的文字图片上下或者左右排列

作者: flyrr | 来源:发表于2016-11-09 14:50 被阅读380次

    先上一张效果图


    Simulator Screen Shot 2016年11月9日 下午2.45.47.png

    外面一句话调用,无需继承

    leftBtn.imagePosition(at: .left, space: 10)
    rightBtn.imagePosition(at: .right, space: 10)
    topButton.imagePosition(at: .top, space: 10)
    bottomBtn.imagePosition(at: .bottom, space: 10)
    

    先定义一个枚举,然后给UIButton写个extension

    /**
     UIButton图像文字同时存在时---图像相对于文字的位置
     
     - top:    图像在上
     - left:   图像在左
     - right:  图像在右
     - bottom: 图像在下
     */
    enum ZGJButtonImageEdgeInsetsStyle {
        case top, left, right, bottom
    }
    

    下面直接上代码---注释写在代码里面

    extension UIButton {
        func imagePosition(at style: ZGJButtonImageEdgeInsetsStyle, space: CGFloat) {
            guard let imageV = imageView else { return }
            guard let titleL = titleLabel else { return }
            //获取图像的宽和高
            let imageWidth = imageV.frame.size.width
            let imageHeight = imageV.frame.size.height
            //获取文字的宽和高
            let labelWidth  = titleL.intrinsicContentSize().width
            let labelHeight = titleL.intrinsicContentSize().height
            
            var imageEdgeInsets = UIEdgeInsetsZero
            var labelEdgeInsets = UIEdgeInsetsZero
            //UIButton同时有图像和文字的正常状态---左图像右文字,间距为0
            switch style {
            case .left:
                //正常状态--只不过加了个间距
                imageEdgeInsets = UIEdgeInsets(top: 0, left: -space * 0.5, bottom: 0, right: space * 0.5)
                labelEdgeInsets = UIEdgeInsets(top: 0, left: space * 0.5, bottom: 0, right: -space * 0.5)
            case .right:
                //切换位置--左文字右图像
                //图像:UIEdgeInsets的left是相对于UIButton的左边移动了labelWidth + space * 0.5,right相对于label的左边移动了-labelWidth - space * 0.5
                imageEdgeInsets = UIEdgeInsets(top: 0, left: labelWidth + space * 0.5, bottom: 0, right: -labelWidth - space * 0.5)
                labelEdgeInsets = UIEdgeInsets(top: 0, left: -imageWidth - space * 0.5, bottom: 0, right: imageWidth + space * 0.5)
            case .top:
                //切换位置--上图像下文字
                /**图像的中心位置向右移动了labelWidth * 0.5,向上移动了-imageHeight * 0.5 - space * 0.5
                 *文字的中心位置向左移动了imageWidth * 0.5,向下移动了labelHeight*0.5+space*0.5
                */
                imageEdgeInsets = UIEdgeInsets(top: -imageHeight * 0.5 - space * 0.5, left: labelWidth * 0.5, bottom: imageHeight * 0.5 + space * 0.5, right: -labelWidth * 0.5)
                labelEdgeInsets = UIEdgeInsets(top: labelHeight * 0.5 + space * 0.5, left: -imageWidth * 0.5, bottom: -labelHeight * 0.5 - space * 0.5, right: imageWidth * 0.5)
            case .bottom:
                //切换位置--下图像上文字
                /**图像的中心位置向右移动了labelWidth * 0.5,向下移动了imageHeight * 0.5 + space * 0.5
                 *文字的中心位置向左移动了imageWidth * 0.5,向上移动了labelHeight*0.5+space*0.5
                 */
                imageEdgeInsets = UIEdgeInsets(top: imageHeight * 0.5 + space * 0.5, left: labelWidth * 0.5, bottom: -imageHeight * 0.5 - space * 0.5, right: -labelWidth * 0.5)
                labelEdgeInsets = UIEdgeInsets(top: -labelHeight * 0.5 - space * 0.5, left: -imageWidth * 0.5, bottom: labelHeight * 0.5 + space * 0.5, right: imageWidth * 0.5)
            }
            self.titleEdgeInsets = labelEdgeInsets
            self.imageEdgeInsets = imageEdgeInsets
        }
    }
    

    相关文章

      网友评论

        本文标题:swift---实现button的文字图片上下或者左右排列

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