Xcode外掛FlyCoding

SSBun發表於2017-12-13
XCode

image

FlyCoding是一個Xcode外掛，使用蘋果提供的外掛機制編寫，可以執行在最新的Xcode上， 它提供了類似於HTML中 Emmet 的功能。你可以通過特殊語法來快速的生成你想要的Swfit程式碼，特別是在大量的編寫介面UI時， 重複的編寫UI控制元件和約束是一件非常繁瑣和機械的勞動， 但是這又是你不可避免的。 而FlyCoding則可以幫助你快速的幫你生成檢視程式碼、屬性、SnapKit約束，目前FlyCoding剛剛釋出了第一個版本，更多的功能還在構建當中，接下來我們先在看一下目前的三個功能：

img

img

img

生成Snapkit的約束程式碼

使用Swift來編寫UI的時候，AutoLayout肯定是必不可少的。而直接使用蘋果的AutoLayout約束語句太過於麻煩，所以我們肯定會使用一些佈局框架來實現AutoLayout， 在Swift當中，SnapKit的使用量最高，它和OC中的Masonry有著幾乎一樣的語法，這也使得使用過Masonry的從OC轉向Swift的開發者能很快的適應SnapKit的語法。

說完了SnapKit，我們來看一下FlyCoding是如何生成約束程式碼的, 我們假設有兩個view(iconView 和 titleLabel)被新增在一個view(superView)上 先來看幾個例子:

  • #snpm(iconView, l=titleLabel.r+10, y=titleLabel)
//生成程式碼如下:
iconView.snp.makeConstraints {
    $0.left.equalTo(titleLabel.snp.right).offset(10)
    $0.centerY.equalTo(titleLabel)
}
複製程式碼

在這裡#snpm就是一個標籤，它代表建立一個snapKit約束，而小括號內的就是約束的引數，iconView是指誰接受約束，l=titleLabel.r+10 就是指iconView的左側等於IconView的右側再偏移10個點的位置。而y=titleLabel就是指iconView的中心y軸和titleLabel的中心y軸相等。

  • #snpm(iconView, r=titleLabel.l-20, wh=20)

類似的wh=20就是iconView的寬高等於20，你可以任意的組合要約束的部位，比如如果兩個view的位置想同，你可以寫ltbr=titleLabel, l=left、r=right、t=top、b=bottom。 當然直接寫e=titleLabel就是edges的意思。

  • #snpm(iconView, t=titleLabel.b+superView.height-20, w=titLabel*0.5)
iconView.snp.makeConstraints {
    $0.top.equalTo(titleLabel.snp.bottom).offset(superView.height-20)
    $0.width.equalTo(titLabel).multipliedBy(0.5)
}
複製程式碼

再FlyCoding中，t=titleLabel.b+superView.height-20中的第一個+號擁有最低的執行等級， 哪怕此處由+成了*它也不會參與到後面的計算當中，或者你可以說它有特殊的作用。 w=titleLabel*0.5就是說iconView的寬只有titleLabel的一半，這裡寫起來十分的簡單。你也可以說是w=titleLabel/2,效果也是一樣的。

  • #snpm(iconView, l = superView, r <= superView~l, r <= titleLabel.l - 20~h)
iconView.snp.makeConstraints {
    $0.left.equalTo(superView)
    $0.right.lessThanOrEqualTo(superView).priority(.low)
    $0.right.lessThanOrEqualTo(titleLabel.snp.left).offset(-20).priority(.high)
}
複製程式碼

這裡的<=當然就是小於等於的意思啦， 在例子中你可以明顯的看出它的用途，而~放在約束的最後用來設定約束的等級。你可以使用數值來表示，也可以通過幾個預設的值如(r,h,m,l)來設定相應的約束等級。

  • #snpm(iconView, t=titleLabel.b-20, w=titLabel*0.5) + snpm(titleLabe, wh = 100)
iconView.snp.makeConstraints {
    $0.top.equalTo(titleLabel.snp.bottom).offset(-20)
    $0.width.equalTo(titLabel).multipliedBy(0.5)
}

titleLabe.snp.makeConstraints {
    $0.width.height.equalTo(100)
}
複製程式碼

如果你在一個約束寫完以後想要直接寫下一個直接在中間連一個+號即可，後面的snpm不用在跟#,#號是用來區分功能的. 所有同模組的功能都能在中間加上+號來連線

更多的用法，大家可以去嘗試，下面是它的所有可用項：

除了#snpm以外，還可以使用#snprm、#snp，來分別remake和update約束

  • 屬性 *
    • l -> left
    • t -> top
    • b -> bottom
    • r -> right
    • w -> width
    • h -> height
    • x -> centerX
    • y -> centerY
    • c -> center
    • s -> size
    • e -> edges
  • 約束等級
    • r -> .required
    • h -> .high
    • m -> .medium
    • l -> .low
  • 比較引數
    • >= -> greaterThanOrEqualTo
    • <= -> lessThanOrEqualTo
    • = -> equalTo
  • 運算子
    • - -> offset(-value)
    • + -> offset(value)
    • * -> multipliedBy(value)
    • / -> dividedBy(value)

生成屬性程式碼

如果你已經看過了SnapKit的用法，那這裡就容易的多了，話不多說，我們舉個?

  • pl.UIView{}*2 + .l.String{""}
  private let <#name#> = UIView()
  private let <#name#> = UIView()
  private let <#name#> = ""
複製程式碼

不需要任何的字首，pl分別是private和let,其實都是第一個字母. UIView表示你要建立的Class, {}就是你要初始化的意思，預設的初始化是在類名後面加上一對小括號, 當然你也可以在{}中寫上你想要的預設值，*2就是要把這個屬性重複兩遍，對於碼介面的時候，一個介面上顯示多個UILabel是很正常的事，這裡再也不用複製貼上了。後面就很容易理解了,{""}的意思就是建立String的預設值

FlyCoding 會在你使用了預設值的時候，把你的類名給省略掉，如果你並沒有設定預設值，就會是這個樣子

  • @pl.String
@objc private let <#name#>: String
複製程式碼

用起來十分的簡單，下面是你能使用的屬性

"l": "let",
"v": "var",
"p": "private",
"P": "public",
"o": "open",
"f": "fileprivate",
"pl": "private let",
"pv": "private var",
"Pl": "public let",
"Pv": "public var",
"ol": "open let",
"ov": "open var",
"fl": "fileprivate let",
"fv": "fileprivate var",
"lv": "lazy var",

"@": "@objc",
"u": "unowned",
"w": "weak",
"c": "class"
複製程式碼

生成view程式碼

這部分使用Xcode的程式碼塊也可以實現，但是寫程式碼的時候，打出了對應的短語後還要看一眼和等待Xcode反應實在是令人著急。我們為的就是快！！！ 通過**#make()**命令我們可以快速的新增建立一個View的程式碼，又是一波?

  • #make(UILabel) + make(UILabel) + make(UITableView) + make(UICollectionView)
let <#name#> = UILabel()
<#name#>.font = <#font#>
<#name#>.textColor = <#color#>
<#name#>.text = <#text#>
<#name#>.backgroundColor = <#color#>
<#superView#>.addSubview(<#name#>)

let <#name#> = UILabel()
<#name#>.font = <#font#>
<#name#>.textColor = <#color#>
<#name#>.text = <#text#>
<#name#>.backgroundColor = <#color#>
<#superView#>.addSubview(<#name#>)

let <#name#> = UITableView(frame: <#frame#>, style: <#style#>)
<#name#>.backgroundColor = <#color#>
<#name#>.delegate = <#delegate#>
<#name#>.dataSource = <#dataSource#>
<#name#>.separatorStyle = <#style#>
<#name#>.register(<#class#>, forCellReuseIdentifier: <#identifier#>)
<#superView#>.addSubview(<#name#>)

let flowLayout = UICollectionViewFlowLayout()
flowLayout.scrollDirection = <#direction#>
flowLayout.minimumInteritemSpacing = <#spacing#>
let <#name#> = UICollectionView(frame: <#frame#>, collectionViewLayout: flowLayout)
<#name#>.showsVerticalScrollIndicator = <#show#>
<#name#>.showsHorizontalScrollIndicator = <#show#>
<#name#>.dataSource = self
<#name#>.delegate = self
<#name#>.backgroundColor = <#color#>
<#name#>.register(<#class#>, forCellWithReuseIdentifier: <#id#>)
<#superView#>.addSubview(<#name#>)
複製程式碼

當然了，這裡你同樣可是使用*來建立多個檢視，目前支援的種類不是很多，常見的夠用，以後會繼續的新增

這是目前支援的建立型別

  • UIView
  • UILabel
  • UIButton
  • UIImageView
  • UITableView
  • UICollectionView

然後，目前的主要功能就說完了，剛開始使用的時候可能不習慣，但是用慣了以後，真不想在一行一行的去敲鍵盤了，對於碼農來說，懶就是生產力。

現在你可以跳轉到FlyCoding去下載此外掛，你可以直接下載作者的壓縮包 開啟後，直接執行程式，然後關閉程式就ok了，最好設定一個你喜歡的快捷鍵，這樣才能體會飛一般的速度。

如果有什麼問題的話，大家可以在github上提交issue，有想要的特性也可以提交issue。

[圖片上傳失敗...(image-a8f742-1510135880746)]

FlyCoding是一個Xcode外掛，使用蘋果提供的外掛機制編寫，可以執行在最新的Xcode上， 它提供了類似於HTML中 Emmet 的功能。你可以通過特殊語法來快速的生成你想要的Swfit程式碼，特別是在大量的編寫介面UI時， 重複的編寫UI控制元件和約束是一件非常繁瑣和機械的勞動， 但是這又是你不可避免的。 而FlyCoding則可以幫助你快速的幫你生成檢視程式碼、屬性、SnapKit約束，目前FlyCoding剛剛釋出了第一個版本，更多的功能還在構建當中，接下來我們先在看一下目前的三個功能：

生成Snapkit的約束程式碼

使用Swift來編寫UI的時候，AutoLayout肯定是必不可少的。而直接使用蘋果的AutoLayout約束語句太過於麻煩，所以我們肯定會使用一些佈局框架來實現AutoLayout， 在Swift當中，SnapKit的使用量最高，它和OC中的Masonry有著幾乎一樣的語法，這也使得使用過Masonry的從OC轉向Swift的開發者能很快的適應SnapKit的語法。

說完了SnapKit，我們來看一下FlyCoding是如何生成約束程式碼的, 我們假設有兩個view(iconView 和 titleLabel)被新增在一個view(superView)上 先來看幾個例子:

  • #snpm(iconView, l=titleLabel.r+10, y=titleLabel)
//生成程式碼如下:
iconView.snp.makeConstraints {
    $0.left.equalTo(titleLabel.snp.right).offset(10)
    $0.centerY.equalTo(titleLabel)
}
複製程式碼

在這裡#snpm就是一個標籤，它代表建立一個snapKit約束，而小括號內的就是約束的引數，iconView是指誰接受約束，l=titleLabel.r+10 就是指iconView的左側等於IconView的右側再偏移10個點的位置。而y=titleLabel就是指iconView的中心y軸和titleLabel的中心y軸相等。

  • #snpm(iconView, r=titleLabel.l-20, wh=20)

類似的wh=20就是iconView的寬高等於20，你可以任意的組合要約束的部位，比如如果兩個view的位置想同，你可以寫ltbr=titleLabel, l=left、r=right、t=top、b=bottom。 當然直接寫e=titleLabel就是edges的意思。

  • #snpm(iconView, t=titleLabel.b+superView.height-20, w=titLabel*0.5)
iconView.snp.makeConstraints {
    $0.top.equalTo(titleLabel.snp.bottom).offset(superView.height-20)
    $0.width.equalTo(titLabel).multipliedBy(0.5)
}
複製程式碼

再FlyCoding中，t=titleLabel.b+superView.height-20中的第一個+號擁有最低的執行等級， 哪怕此處由+成了*它也不會參與到後面的計算當中，或者你可以說它有特殊的作用。 w=titleLabel*0.5就是說iconView的寬只有titleLabel的一半，這裡寫起來十分的簡單。你也可以說是w=titleLabel/2,效果也是一樣的。

  • #snpm(iconView, l = superView, r <= superView~l, r <= titleLabel.l - 20~h)
iconView.snp.makeConstraints {
    $0.left.equalTo(superView)
    $0.right.lessThanOrEqualTo(superView).priority(.low)
    $0.right.lessThanOrEqualTo(titleLabel.snp.left).offset(-20).priority(.high)
}
複製程式碼

這裡的<=當然就是小於等於的意思啦， 在例子中你可以明顯的看出它的用途，而~放在約束的最後用來設定約束的等級。你可以使用數值來表示，也可以通過幾個預設的值如(r,h,m,l)來設定相應的約束等級。

  • #snpm(iconView, t=titleLabel.b-20, w=titLabel*0.5) + snpm(titleLabe, wh = 100)
iconView.snp.makeConstraints {
    $0.top.equalTo(titleLabel.snp.bottom).offset(-20)
    $0.width.equalTo(titLabel).multipliedBy(0.5)
}

titleLabe.snp.makeConstraints {
    $0.width.height.equalTo(100)
}
複製程式碼

如果你在一個約束寫完以後想要直接寫下一個直接在中間連一個+號即可，後面的snpm不用在跟#,#號是用來區分功能的. 所有同模組的功能都能在中間加上+號來連線

更多的用法，大家可以去嘗試，下面是它的所有可用項：

除了#snpm以外，還可以使用#snprm、#snp，來分別remake和update約束

  • 屬性 *
    • l -> left
    • t -> top
    • b -> bottom
    • r -> right
    • w -> width
    • h -> height
    • x -> centerX
    • y -> centerY
    • c -> center
    • s -> size
    • e -> edges
  • 約束等級
    • r -> .required
    • h -> .high
    • m -> .medium
    • l -> .low
  • 比較引數
    • >= -> greaterThanOrEqualTo
    • <= -> lessThanOrEqualTo
    • = -> equalTo
  • 運算子
    • - -> offset(-value)
    • + -> offset(value)
    • * -> multipliedBy(value)
    • / -> dividedBy(value)

生成屬性程式碼

如果你已經看過了SnapKit的用法，那這裡就容易的多了，話不多說，我們舉個?

  • pl.UIView{}*2 + .l.String{""}
  private let <#name#> = UIView()
  private let <#name#> = UIView()
  private let <#name#> = ""
複製程式碼

不需要任何的字首，pl分別是private和let,其實都是第一個字母. UIView表示你要建立的Class, {}就是你要初始化的意思，預設的初始化是在類名後面加上一對小括號, 當然你也可以在{}中寫上你想要的預設值，*2就是要把這個屬性重複兩遍，對於碼介面的時候，一個介面上顯示多個UILabel是很正常的事，這裡再也不用複製貼上了。後面就很容易理解了,{""}的意思就是建立String的預設值

FlyCoding 會在你使用了預設值的時候，把你的類名給省略掉，如果你並沒有設定預設值，就會是這個樣子

  • @pl.String
@objc private let <#name#>: String
複製程式碼

用起來十分的簡單，下面是你能使用的屬性

"l": "let",
"v": "var",
"p": "private",
"P": "public",
"o": "open",
"f": "fileprivate",
"pl": "private let",
"pv": "private var",
"Pl": "public let",
"Pv": "public var",
"ol": "open let",
"ov": "open var",
"fl": "fileprivate let",
"fv": "fileprivate var",
"lv": "lazy var",

"@": "@objc",
"u": "unowned",
"w": "weak",
"c": "class"
複製程式碼

生成view程式碼

這部分使用Xcode的程式碼塊也可以實現，但是寫程式碼的時候，打出了對應的短語後還要看一眼和等待Xcode反應實在是令人著急。我們為的就是快！！！ 通過**#make()**命令我們可以快速的新增建立一個View的程式碼，又是一波?

  • #make(UILabel) + make(UILabel) + make(UITableView) + make(UICollectionView)
let <#name#> = UILabel()
<#name#>.font = <#font#>
<#name#>.textColor = <#color#>
<#name#>.text = <#text#>
<#name#>.backgroundColor = <#color#>
<#superView#>.addSubview(<#name#>)

let <#name#> = UILabel()
<#name#>.font = <#font#>
<#name#>.textColor = <#color#>
<#name#>.text = <#text#>
<#name#>.backgroundColor = <#color#>
<#superView#>.addSubview(<#name#>)

let <#name#> = UITableView(frame: <#frame#>, style: <#style#>)
<#name#>.backgroundColor = <#color#>
<#name#>.delegate = <#delegate#>
<#name#>.dataSource = <#dataSource#>
<#name#>.separatorStyle = <#style#>
<#name#>.register(<#class#>, forCellReuseIdentifier: <#identifier#>)
<#superView#>.addSubview(<#name#>)

let flowLayout = UICollectionViewFlowLayout()
flowLayout.scrollDirection = <#direction#>
flowLayout.minimumInteritemSpacing = <#spacing#>
let <#name#> = UICollectionView(frame: <#frame#>, collectionViewLayout: flowLayout)
<#name#>.showsVerticalScrollIndicator = <#show#>
<#name#>.showsHorizontalScrollIndicator = <#show#>
<#name#>.dataSource = self
<#name#>.delegate = self
<#name#>.backgroundColor = <#color#>
<#name#>.register(<#class#>, forCellWithReuseIdentifier: <#id#>)
<#superView#>.addSubview(<#name#>)
複製程式碼

當然了，這裡你同樣可是使用*來建立多個檢視，目前支援的種類不是很多，常見的夠用，以後會繼續的新增

這是目前支援的建立型別

  • UIView
  • UILabel
  • UIButton
  • UIImageView
  • UITableView
  • UICollectionView

1.1

新增方法建立功能

  • #func(p.getAge:>)
private func getAge(<#param#>) -> <#return#> {
    <#code#>
}
複製程式碼

通過 #func呼叫，只有一個引數，getAge是方法名， p就是方法許可權， 中間使用.隔開，與我們使用屬性時相同, 引數中的:和>分別代表是否有引數和返回值。同樣可以使用*來進行復制，或是使用+來繼續新增

當然也可以寫入多個:來生成多個引數，大於一個>所產生的返回是一個元組，元組在Swfit中可以被用來返回多個結果

新增UIView動畫建立功能(相比較系統的自動提示並沒有什麼太大的區別，就是懶得選)

  • #anim(df)
UIView.animate(withDuration: <#T##TimeInterval#>) {
    <#code#>
}
複製程式碼

通過 #anim呼叫，只有一個引數用來表示是什麼動動畫

  • df 普通的動畫
  • dc 帶完成回撥的普通動畫
  • dd 普通延時動畫
  • ds 彈簧動畫
  • dk 關鍵幀動畫

然後，目前的主要功能就說完了，剛開始使用的時候可能不習慣，但是用慣了以後，真不想在一行一行的去敲鍵盤了，對於碼農來說，懶就是生產力。

現在你可以跳轉到FlyCoding去下載此外掛，你可以直接下載作者的壓縮包 開啟後，直接執行程式，然後關閉程式就ok了，最好設定一個你喜歡的快捷鍵，這樣才能體會飛一般的速度。

如果有什麼問題的話，大家可以在github上提交issue，有想要的特性也可以提交issue。

相關文章