swift 3：创建材料设计芯片

Question

嘿嘿，

几天以来，我尝试创建“材料设计芯片”，但只成功了一半。

我最成功的尝试是从“Button”创建一个子类（Button 是 UIButton 的一个子类，由 cosmicmind 在他的 MaterialDesign-Framework for swift 中创建）。

对于不知道我指的是“筹码”的人：click here

我的例子：

简单/不可删除的芯片

import UIKit
import Material

class ChipButton: Button {
    override func prepare() {
        super.prepare()

        cornerRadiusPreset      = .cornerRadius5
        backgroundColor         = UIColor.lightGray
        titleColor              = Color.darkText.primary
        pulseAnimation          = .none
        contentEdgeInsets       = EdgeInsets(top: 0, left: 12, bottom: 0, right: 12)
        isUserInteractionEnabled = false
        titleLabel?.font        = RobotoFont.regular
        isOpaque                = true
    }
}

并创建此按钮：

let button = ChipButton()
    button.title = "default chip"

    view.layout(button).height(32).center(offsetY: -150)

接触芯片/图标芯片

import UIKit
import Material

class ChipIconButton: ChipButton {
    /*override func prepare() {
        super.prepare()

        contentEdgeInsets       = EdgeInsets(top: 0, left: 16, bottom: 0, right: 12)
    }*/

    public convenience init(image: UIImage?, title: String?){
        self.init()
        prepare(with: image, title: title)
    }

    private func prepare(with image: UIImage?, title: String?) {
        self.image = image
        self.title = title

        self.imageView?.backgroundColor = UIColor.darkGray // this works
        self.imageView?.cornerRadiusPreset = .cornerRadius4 // this works
        self.imageView?.tintColor  = Color.black // this doesn't work

        self.imageEdgeInsets    = EdgeInsets(top: 0, left: -8, bottom: 0, right: 12)
        self.titleEdgeInsets    = EdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        self.contentEdgeInsets  = EdgeInsets(top: 0, left: 8, bottom: 0, right: 12)
    }
}

我想来

1. 将 UIImageView 调整为芯片的高度（即 32 点）

   I tried with self.imageView?.frame = CGRect(x: 50, y: 50, width: 32, height: 32) but nothing changed
   

2. 将 UIImage 调整为小一点（到 20 磅）

3. 改变 UIImage 的 tintColor

   I tryed with self.imageView?.tintColor = Color.black but nothing changed
   

可删除的芯片

import UIKit
import Material

class ChipDeleteableButton: ChipButton {

    override func prepare() {
        super.prepare()

        self.image = #imageLiteral(resourceName: "ic_close_white_24px")
        self.title = title

        //self.frame = CGRect(x: 50, y: 50, width: 32, height: 32)
        self.imageView?.backgroundColor = UIColor.darkGray
        self.imageView?.cornerRadiusPreset = .cornerRadius4
        self.imageView?.tintColor  = Color.black

        self.imageEdgeInsets    = EdgeInsets(top: 0, left: self.frame.size.width, bottom: 0, right: 0)
        self.titleEdgeInsets    = EdgeInsets(top: 0, left: 0, bottom: 0, right: self.frame.size.width)
        self.contentEdgeInsets  = EdgeInsets(top: 0, left: 8, bottom: 0, right: 12)
    }
}

在这里我尝试使用 imageEdgeInsets 和 titleEdgeInsets 切换标签的位置，但 self.frame.size.width 返回的宽度不正确（可能是 AutoLayout 的原因，但我不确定）

帮助

希望有人可以帮助我！

ps。我是 swift/xcode 的新手

Answer 1

简单/不可删除的芯片

这里没有任何改变。 看问题。

接触芯片/图标芯片

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)
    }
}

和创作片段：

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)
}

可删除的芯片

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")
    }
}

和创作片段：

open func prepareChipDeleteableButton () {
    let button = ChipDeleteableButton()
    button.title    = "deleteable chip"
    button.swapLabelWithImage()

    view.layout(button).height(32).center(offsetY: 150)
}

更多信息：

• 在我的 ViewController 中调用的创建函数 r，在 viewWillAppear() 中
• 为什么我的可删除芯片有一个额外的功能？ - 因为我让 AutoLayout 完成他的工作，然后我可以使用 let rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!) 获得其标签的必要“字符串宽度”