swift 3: create a material-design-chip

后端 未结 1 329
执念已碎
执念已碎 2021-01-16 20:24

heyhey,

since a few days I attempt to create the \"Material-Design-Chip\", but only with half success.

The attempt with the most success I had, is to make a

相关标签:
1条回答
  • 2021-01-16 20:46

    The simple / non-deletable chip

    here nothing changed. look at the question.

    The contact-chip / icon-chip

    import UIKit
    import Material
    
    class ChipIconButton: ChipButton {
        public convenience init(image: UIImage?, title: String?){
            self.init()
            prepare(with: image, title: title)
        }
    
        private func prepare(with image: UIImage?, title: String?) {
            //self.imageView?.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
            let myThumb = image?.resize(toWidth: 20)?.resize(toHeight: 20)
            let shapeView = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
            shapeView.backgroundColor = UIColor.darkGray
            shapeView.cornerRadiusPreset = .cornerRadius5
            shapeView.zPosition = (self.imageView?.zPosition)! - 1
    
            self.addSubview(shapeView)
    
    
            self.image = myThumb?.withRenderingMode(.alwaysTemplate)
            self.title = title
            self.imageView?.tintColor  = self.backgroundColor
            self.imageEdgeInsets    = EdgeInsets(top: 0, left: -28, bottom: 0, right: 0)
            self.titleEdgeInsets    = EdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            self.contentEdgeInsets  = EdgeInsets(top: 0, left: 20, bottom: 0, right: 12)
        }
    }
    

    and the creation-snipped:

    open func prepareChipIconButton () {
        let icon: UIImage? = #imageLiteral(resourceName: "ic_close_white_24px")
        let button = ChipIconButton(image: icon, title: "icon chip")
        view.layout(button).height(32).center(offsetY: 0)
    }
    

    The deletable chip

    import UIKit
    import Material
    
    class ChipDeleteableButton: ChipButton {
    
        override func prepare() {
            super.prepare()
    
            let img = #imageLiteral(resourceName: "ic_close_white_24px").resize(toHeight:18)?.resize(toWidth: 18)
            let myThumb = img?.withRenderingMode(.alwaysTemplate)
    
            self.image = myThumb
            self.title = title
    
            self.imageView?.tintColor  = self.backgroundColor
            self.isUserInteractionEnabled = true
    
            self.addTarget(self, action: #selector(clickAction), for: .touchUpInside)
            self.imageView?.isUserInteractionEnabled = false
        }
    
        open func swapLabelWithImage() {
            let rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)
    
            self.imageEdgeInsets    = EdgeInsets(top: 0, left: (rightLableSize?.width)! - 4, bottom: 0, right: 0)
            self.titleEdgeInsets    = EdgeInsets(top: 0, left: -54, bottom: 0, right: 0)
            self.contentEdgeInsets  = EdgeInsets(top: 0, left: 20, bottom: 0, right: 4)
    
            let shapeView = UIView(frame: CGRect(x: self.imageEdgeInsets.left + 19, y: 6, width: 20, height: 20))
            shapeView.backgroundColor = UIColor.darkGray
            shapeView.cornerRadius = shapeView.frame.size.width/2
            shapeView.zPosition = (self.imageView?.zPosition)! - 1
            shapeView.isUserInteractionEnabled = false
    
    
            self.addSubview(shapeView)
        }
    
        internal func clickAction(sender: ChipDeleteableButton) {
            print("do something")
        }
    }
    

    and the creation-snipped:

    open func prepareChipDeleteableButton () {
        let button = ChipDeleteableButton()
        button.title    = "deleteable chip"
        button.swapLabelWithImage()
    
        view.layout(button).height(32).center(offsetY: 150)
    }
    

    more info:

    • the creation-function r called in my ViewController, in viewWillAppear()
    • why i have a extra-function for my deletable-chip? - because i let AutoLayout do his job and after that i can get the necessary "String-width" of its label with let rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)
    0 讨论(0)
提交回复
热议问题