swift 3：创建一个材料设计芯片 [英] swift 3: create a material-design-chip

问题描述

heyhey，

因为几天我尝试创建Material-Design-Chip，但只取得了一半的成功。

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

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

The attempt with the most success I had, is to make a subclass from "Button" (Button is a subclass from UIButton created from cosmicmind in his MaterialDesign-Framework for swift).

对于那些不知道我的意思是筹码的人：点击此处

For the people who doesn't know I mean with "chips": 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)

联系方式 - 芯片/图标芯片

The contact-chip / icon-chip

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点）

1. resize the UIImageView to the height of the chip (which is 32 points)

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

将UIImage调整得更小（至20分）

resize the UIImage little bit smaller (to 20 points)

更改UIImage的tintColor

to change the tintColor of the UIImage

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

可删除芯片

The deletable chip

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返回不正确的宽度（可能是自动布局但我不确定）

here I tried to switch the positions of the label and with imageEdgeInsets and titleEdgeInsets, but self.frame.size.width returns a incorrect width (maybe couse of AutoLayout but i'm not sure)

希望有人可以帮助我！

ps。我是swift / xcode的小新手

ps. I'm little newbe at swift/xcode

推荐答案

简单/不可删除芯片

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

The simple / non-deletable chip

here nothing changed. look at the question.

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

可删除芯片

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

和创建 - 剪切：

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（）中


• 为什么我的删除芯片有一个额外的功能？ - 因为我让AutoLayout完成他的工作，之后我可以通过let rightLableSize = self.titleLabel？.sizeThatFits（（self.titleLabel？.frame.size）得到其标签所需的字符串宽度 ）！）



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

这篇关于swift 3：创建一个材料设计芯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！