Swift之自定义Button

简介: Swift之自定义Button

Swift之自定义Button


第一步:

95f7a262911960b2ccc40382f8046c1c.png

Snip20180319_7.png


第二步:

42daea35f0b66b72e57a06f1c0d9ffc4.png

Snip20180319_8.png

第三步:写代码咯

import UIKit
class CustomBtn: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setTitleColor(UIColor.red, for: UIControlState.normal)
        setImage(UIImage(named:"qrcode_tabbar_icon_qrcode_highlighted"), for: UIControlState.normal)
        setImage(UIImage(named:"qrcode_tabbar_icon_qrcode_highlighted"), for: UIControlState.highlighted)
        titleLabel?.textAlignment = NSTextAlignment.center
        sizeToFit()
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        imageView?.LYW_width = LYW_width * 0.6
        imageView?.LYW_height  = (imageView?.LYW_width)!
        imageView?.LYW_Y = LYW_height*0.1
        imageView?.LYW_centerX = LYW_width * 0.5
        titleLabel?.LYW_width = LYW_width
        titleLabel?.LYW_Y = (imageView?.LYW_bottomY)!
        titleLabel?.LYW_X = 0
        titleLabel?.LYW_height = LYW_height - (titleLabel?.LYW_Y)!
    }
}

使用:


49188842908e449fb730724fc4ef3ed2.png

Snip20180319_10.png

效果:图片在上,文字在下(可以根据自己的需求设置图片和文字的位置,默认是图片在右边,文字左边)

6790473718d7a856a611766fb3b572ef.png

Snip20180319_9.png

这个依赖我给UIView写的分类

代码留给你https://gitee.com/lanyingwei/codes/ebx5hj6q3d1vsop7zrmlt98

扩展:另外一种写发不需要依赖我写的那个分类

只需要按照上面的步骤,到第三步的时候代码不一样而已

import UIKit
class LYWVerticalBtn: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        seutpUI()
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        if imageView == nil {
            return
        }
        imageView?.frame = CGRect(x: self.frame.width*0.5 - imageView!.frame.width*0.5, y: 0, width: imageView!.frame.width, height: imageView!.frame.height)
        titleLabel?.frame = CGRect(x: 0, y: imageView!.frame.size.height, width: frame.width, height: frame.height - imageView!.frame.height)
    }
}
// 你可以在这里设置一些需要的属性
extension LYWVerticalBtn{
    fileprivate func seutpUI() {
        titleLabel?.textAlignment = .center
    }
}

使用方法

let button = LYWVerticalBtn()
        button.backgroundColor = UIColor.green
        button.setTitle("点赞", for: .normal)
        button.setTitleColor(UIColor.black, for: .normal)
        button.setImage(UIImage.init(named: "publish-review"), for: .normal)
        button.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
        view.addSubview(button)

效果图

be1249df9d20ba156faf198bc788a199.png

Snip20180326_2.png

建议自己扩展写九宫格


d5f90f71e74c82c8d283a63744e479b0.png

Snip20180326_3.png

偷偷把九宫格代码留给你哈哈哈

extension ViewController{
    func setupButton() {
        let images = ["publish-video","publish-picture","publish-text","publish-audio","publish-review","publish-offline"]
        let titles = ["发视频","发图片","发段子","发声音","审帖","离线下载"]
        // 每行放多少个
        let maxCols:CGFloat = 3
        // 间隔
        let buttonMargn:CGFloat = 15
        // 按钮宽
        let buttonW:CGFloat = (UIScreen.main.bounds.width - (maxCols + 1)*buttonMargn)/3
        // 按钮高
        let buttonH = buttonW + 30
        let buttonSpace:CGFloat = (UIScreen.main.bounds.width - buttonW * maxCols - buttonMargn * 2)/(maxCols - 1)
        let startY:CGFloat = UIScreen.main.bounds.height / 2 - buttonW
        for i in 0..<images.count {
            let button = LYWVerticalBtn()
            button.setTitle(titles[i], for: .normal)
            button.setTitleColor(UIColor.black, for: .normal)
            button.setImage(UIImage.init(named: images[i]), for: .normal)
            let row = i / Int(maxCols)
            let col = CGFloat(i).truncatingRemainder(dividingBy: maxCols)
            let x = buttonMargn + col * (buttonSpace + buttonW)
            let y = startY + CGFloat(row) * (buttonH + buttonMargn)
            let w = buttonW
            let h = buttonH
            button.frame = CGRect(x: x, y: y, width: w, height: h)
            view.addSubview(button)
        }
    }
}

https://gitee.com/lanyingwei/codes/gnzjsry2x7eo9k5lati3467

哈哈哈  我又来了 在layoutSubviews

//文字在左  图片在右
        titleLabel?.frame.origin.x = 0
        imageView?.frame.origin.x = titleLabel!.frame.size.width
        //图片在上  文字在下
        imageView?.frame = CGRect(x: self.frame.width*0.5 - imageView!.frame.width*0.5, y: 0, width: imageView!.frame.width, height: imageView!.frame.height)
        titleLabel?.frame = CGRect(x: 0, y: imageView!.frame.size.height, width: frame.width, height: frame.height - imageView!.frame.height)


相关文章
|
1月前
|
Swift 图形学 iOS开发
【Swift开发专栏】Swift中的自定义视图与绘制
【4月更文挑战第30天】本文探讨了Swift中自定义视图的创建与绘制,分为基础知识、绘制步骤和性能优化三部分。开发者通过继承`UIView`,重写`draw(_:)`方法并利用Core Graphics进行2D绘图。提高性能的技巧包括避免重复绘制、使用轻量级视图、优化图形上下文使用、启用图层背板及避免阻塞主线程。自定义视图让iOS和macOS界面更独特高效,进阶可探索Core Animation和Metal等技术。
|
Swift
Swift -banner滚动图自定义
Swift -banner滚动图自定义
201 0
Swift -banner滚动图自定义
|
Swift
Swift - 自定义tabbar的封装
Swift - 自定义tabbar的封装
306 0
Swift - 自定义tabbar的封装
|
Swift
swift微博第9天(自定义微博首页的菜单)
swift微博第9天(自定义微博首页的菜单)
159 0
swift微博第9天(自定义微博首页的菜单)
|
Swift iOS开发
UISlider自定义滑动条高度(swift)
UISlider滑动条的高度系统默认给我们设定了,没有办法进行改变。可是,我们的设计又是需要改变这个高度的,怎么办呢?这个时候,我们可以写一个UISlider的子类,重写四个方法就能实现了。
3510 0
|
Swift
Swift5.1—自定义运算符
Swift5.1—自定义运算符
121 0
|
Swift
swift微博第17天(UITableViewCell的自定义)
swift微博第17天(UITableViewCell的自定义)
222 0
|
Swift
swift微博第8天(自定义标题按钮)
swift微博第8天(自定义标题按钮)
83 0
SwiftUI直通车系列(5)—— 自定义绘制(二)
SwiftUI直通车系列(5)—— 自定义绘制
138 0
SwiftUI直通车系列(5)—— 自定义绘制(二)