ios - swift 3:创建 Material 设计芯片

嘿，

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

我获得最大成功的尝试是从“ Button”创建一个子类（Button是UIButton的子类，该UIButton是从他的MaterialDesign-Framework中为cosmicmind创建的，它是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)
    }
}

在这里我想


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

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

将UIImage的尺寸缩小一些（至20点）
更改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不太了解

最佳答案

简单/不可删除的芯片

这里什么都没有改变。
看问题。

接触芯片/图标芯片

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中在viewWillAppear（）中调用的创建函数r
为什么我的可删除芯片具有额外功能？ -因为我让AutoLayout做他的工作，然后我可以通过rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)获得其标签的必要“字符串宽度”