swift 3：创建一个材料设计芯片
heyhey，
因为几天我试图创造“材料设计芯片”，但只取得了一半的成功。
我最成功的尝试是从“Button”创建子类（Button是UIButton的子类，在他的MaterialDesign-Framework for swift中由cosmicmind创建）。
对于那些不知道我的意思是“筹码”的人： 点击这里
我的例子：
简单/不可删除的芯片
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中调用的creation-function r，在viewWillAppear（）中
- 为什么我的删除芯片有一个额外的function？ – 因为我让AutoLayout完成他的工作，之后我可以使用
rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)来获得其标签所需的“字符串宽度”rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)