二ヶ月寝かせた動画の編集をやっと終えたcyanです。
もはや声変わりの域です。
やっとやりたかった企画ができました！
と言うことで、記念すべき第一回目はCardPartsを紹介しようと思います。
フレームワークの解説
CardParts: https://github.com/intuit/CardParts
今回作成したサンプル: https://github.com/cyan-drop/CardPartsSample
Viewを複数枚のカードで作成することができます。
そして、そのカード自体もカードパーツによって構成されています。
つまりは、様々なパーツを組み合わせて一つのカードを作成、
さらにそのカードを並べてViewを作成
というイメージです。
カードパーツ
CardPartTextView(type: )
テキストパーツ。
インスタンス生成時にテキストのタイプを選択。
title, header, detail, nomal, smallの5種類から選択可能。
そしてインスタンス作成後に、テキストの中身や位置、色などを指定することができます。
CardPartImageView(image: )
イメージパーツ。
インスタンス生成時にイメージをセット。
サイズや位置を変更可能。
CardPartButtonView()
ボタンパーツ。
ボタンカラーやテキスト、アクションを指定するメソッドが用意されている。
CardPartTitleView(type: )
タイトルパーツ。
タイトルの他に、ボタンやメニューをつけることも可能
CardPartStackView()
スタックパーツ。
カードパーツを組み合わせて、一つのカードパーツにする。
生成されたスタックパーツはカードパーツとして使用可能。
.addArrangedSubview(カードパーツ)
でスタックパーツにカードパーツを加える。
CardPartPagedView(withPages: , andHeight: )
ページパーツ。
第一引数にページを、第二引数にページの高さを設定。
第一引数のページは配列で渡す。
プロトコル
ShadowCardTrait
シャドウを設定。
shadowOffset(), shadowColor(), shadowRadius(), shadowOpacity()メソッドがある
RoundedCardTrait
角丸設定。
cornerRadius()でカードの角を取ることが可能。
GradientCardTrait
グラデーションを設定。
gradientColors()で色を、gradientAngle()で角度を設定。
カードの生成
setupCardParts([cardPart1, cardPart2])
カードパーツからカードを生成。
配列に一枚のカードにしたいカードパーツを入れる。。
loadCards(cards: )
複数のカードを合わせてViewを生成。
引数に配列にしたカードを渡す。
使用方法
対応しているのはCocoaPodsのみです。
プロジェクトのディレクトリに移動して
pod init
podfileにCardPartsを追加して
pod ‘CardParts’
最後にインストールです。
pod install
詳しくはこちら: 【Swift】CocoaPods導入手順
あとがき
大事なことなので繰り返します。
なんで二ヶ月前に撮った動画を私は編集しているんだろう
Viewをカードで構成する、と言うのは考えたことがありませんでした。
このカードを各ビューで繰り返し使えることを考えると、
containerViewをもっと簡単に作れるようにしたものなのかなと。
確かに作るのはサクサク進んだので、勢い優先のアプリなら使って問題ないと思います。
強いて言うなら、テキストのタイプが確定されるとサイズが固定されてしまうところが微妙でした。
文字が理想より大きくならなかったりするのは辛いですからね。
私も簡易版用に触った程度なので、もっと色んなメリット、デメリットはあると思います。
グラデーションの楽しさは間違い無いです。
次もオープンソース探ししていこうと考えています。
12月で二年経つのでなんか面白いこともしたいですね。。
次回もまた見てください！
