ここ数年アニメーションは進化し、今ではスマホのUIにアニメーションが欠かせないものになりました。単に操作が楽しく快適になるだけでなく、アクションした後に繋がる実用的なアニメーションを数多くまとめたswiftのライブラリを紹介します。
![スマホのUIに快適で、実用的な数多くのアニメーションを実装できるswiftのライブラリ -Hero](https://cdn-ak-scissors.b.st-hatena.com/image/square/012c82af26988a007dd0ef13283e35c5cf188170/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017010901.png)
1. はじめに iOSアプリを開発するにあたって機能の実装と同じくらいに頭を悩ませる部分でもありながら、楽しい?部分でもあるのがUI設計だと思います。しかしながら、CocoaPodsでインストールできるライブラリの中でもUIやアニメーションに関わるものは多数あり、用途によっても組み合わせも色々です。 私自身はiOSアプリを開発する際には、実はできるだけライブラリに頼らないで作れないか?を考えるタイプではありますが、公開されているライブラリのGithubのREADMEをチェックしたり、実際の挙動を確認するために下記のサイト等をチェックしています。 iOS Cookies UIに関するライブラリに限らずとも、ライブラリを使う際には最新のバージョンへSwiftへの対応がなされているかをチェックしておいて下さい。(今回は元々Objective-Cで作られていますが、Bridging-Headerで
動的に生成されるViewに対して、marginなどを指定したいとき Autolayoutをコードで書く必要があります。 ただ、普通に書くと.. addConstraint(NSLayoutConstraint( item: button1, attribute: .Right, relatedBy: .Equal, toItem: button2, attribute: .Left, multiplier: 1.0, constant: -12.0 )) たかだか左右のmarginを書くだけでもこれだけのコード量を書かねば ならず、直感的ではないです。 何かCSSのように、簡単に書ける方法がないか探したところ 2パターンの書き方がありました。 [パターン1]Cartographyを使う Cartography というライブラリを使うと、 Swiftのクロージャを使って簡単にレイアウトが組め
[Swift] 簡単に、かっこいいアニメーションアラートが表示できる、SCLAlertViewについて 1 はじめに SCLAlertViewは、Swiftで書かれた、アニメーションアラートビューで、UIAlertControllerの代わりに使用することができます。 SCLAlertViewは、MITライセンスで公開されており、CocoaPodで簡単にインストールが可能です。 pod 'SCLAlertView' (※Swiftのライブラリなので、use_frameworks!の行を有効にする必要があります。) 参考:CocoaPodsによる、外部ライブラリの利用と作成 なお、2016年3月現在、最新は、0.5.1です。 ライブラリの導入後は、下記のインポートで利用可能になります。 import SCLAlertView 2 使用方法 (1) 最初のサンプル もっとも、簡単な利用方法は次
UICollectionViewControllerとUIPageViewControllerでSmartNewsっぽいあのUIをお手軽に実現するiOSUIKitSwift イントロダクション 国内のメディア系サービスでは割とスタンダードとなっているあのUI。もはや何番煎じかわかりませんが、frame計算とかをしない軽量な実装を試してみます。 ニュース系アプリで利用されているUIの実装を調べることがあったのでまとめてみた - MonockLaBlog あのUIに関する記事やよく見かけるライブラリでは、メニュー要素・コンテンツ要素のframeをずらしながらUIScrollViewへ順に貼り付けていくやり方が多い印象を持っていますが、ここでは違う方法を取ろうと思います。 サードパーティのライブラリに依存することなく、かつViewのリソース管理やframe計算を出来るだけ抑えるため、今回はUIC
はじめに UIViewのサブクラスに透過性を与えたり透過性のある背景色を設定した際に、影の描画の挙動が変わります。 透過性の有るUIView系のコンテンツに影の描画をさせたい場合に、この記事が参考になればなと思います。 今回は以下2点について述べていきたいと思います UIViewの透過性と影の描画について 透過性のあるUIViewのサブクラスに影を設定する方法 コードはSwift,Objective-Cどちらも記述してあるので、参考にしてください 透過性と影の描画の関係について UIView系のコンテンツに透過性もしくは透過性のある色を与えた場合に、影の描画に違いが見られます。 まず、UIButtonボタンを例に見ていきましょう let shadowButton = UIButton(frame: CGRectMake(0, 0, 300, 50)) shadowButton.setTit
多言語対応。fastlane の snapshot で iOS アプリのスクリーンショットを自動的に作成する。 swiftで。XcodeiOSSwiftfastlane iOS アプリのデリバリを自動的に行う、fastlane というフレームワークがあります。 AppStore への自動デプロイなど、超便利な機能がたくさんありますが、そのツール群の中に snapshot という、 iOS シミュレータを用いて、スナップショットを自動生成してくれるイカすツールでがあります。 その使い方を紹介します。 本記事の内容としては、公式リポジトリの README に書いてある内容そのままなので、そちらを見た方が確実ではあります。 https://github.com/fastlane/snapshot 動画撮りました: https://youtu.be/yBtb_jre1-I (※ただの動作させてる動
LINE のようなメッセージアプリのように下から新しい順に並べたいと思ったのでやり方を調べてみました。 UITableView をそのまま表示する まず UITableView にそのまま表示をしてみました。上から順に新しいものが並んでいます。 UITableView を反転する これに trasnform プロパティを使って上下反転させます。 override func viewDidLoad() { super.viewDidLoad() ... tableView.transform = CGAffineTransformMake(1, 0, 0, -1, 0, 0) ... } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
MisterFusionを使ったコード 上記のレイアウトをMisterFusionを使って再現すると、以下のようなコードになります。まずは使いたいクラスの中で、import MisterFusionをしてください。 let redView = UIView() redView.backgroundColor = .redColor() self.view.addLayoutSubview(redView, andConstraints: redView.Top |+| 10, redView.Right |-| 10, redView.Left |+| 10 ) let yellowView = UIView() yellowView.backgroundColor = .yellowColor() self.view.addLayoutSubview(yellowView, andCon
はじめに deselectRowAtIndexPath(indexPath: NSIndexPath, animated: Bool) UITableView上にあるセルの選択状態を解除するときに使うメソッドですが、 呼び場所を替えるだけでUXを大幅に改善することが出来ます。 経緯 アプリによってはセル押下後に画面遷移するにもかかわらず、 押下直後にdeselectRowAtIndexPathを呼ぶような挙動になっていたりします。 これは悪いことではないですが、画面遷移から戻ってきた時に セルの選択状態を解除してあげたほうがどのセルを押したのか ユーザーに視覚的に伝えることが出来るのでUX的に良いと思ったからです。 例 セル押下直後に解除 この方法だとどのセルを押したのかをユーザーは思い出さなければいけません。 遷移から戻ってきた時に解除 こちらはどのセルを押したのか視覚からはっきりと分か
海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 XcodeにはInterface Builderと呼ばれる、リッチなGUIを持ったデザインツールが付属しており、これを用いて画面のレイアウトを構成することが主流となっています。弊社ブログでも、iOS開発でstoryboardとxibをうまく使い分けるプラクティス等の記事で、GUIベースのレイアウトについて触れています。しかし、現在私が担当しているプロジェクトでは、Interface Builderを用いずに、レイアウトの大半をコードで記述しています。 今回は、コードベースのレイアウトを実装していく中で得た知見を、以下の3つの部分に分けて共有したいと思います。 Interface Builderを用いたレイアウトとコードベースの
以前書いたAutoLayoutでアニメーションを設定する方法のSwift版です。 アニメーションで動かしたいものの例 例として、mainViewの上に乗った、movableViewを下に動かすことを考えます。 movableViewの制約は、superViewであるmainViewに対して、以下のような制約を持っているとします。 Top Space, Trailing Space, Leading Spaceの各種の制約の値は0になっています。高さは適当です。 やってみる 基本的な考え方は、既に付いているautoLayoutの制約を外し、別の制約を付ける、ということです。今回の場合、"Top Space to SuperView = 0" の制約を外し、Top Space to mainView = 30 といった制約をつけます。 まず外す対象の制約をoutletでソースに結び付けておきま
protocol InstantiateFromNibable { typealias Instance static func instantiateFromNib() -> Instance } SlideShareの swift-style-guideから着想を得た。すごくシンプルなんだけど使い勝手は良いと思ってます。 Xibファイルなのか、Storyboardのinitialなのか、StoryboardにあるViewControllerなのか、幾つかのパターンでビューをインスタンス化したいケースがあると思いますが、この方法だとそのインターフェイスを統一できます。 久しぶりに使うビューでもとりあえず、<クラス名>.insta..など打つとすぐに使えるかどうかがわかります。 具体的に下記のように追加します。 Xibファイルの場合 LoadingFooterViewにはこのように書く。
About the content This talk was delivered live in June 2015 at AltConf. The video was recorded, produced, and transcribed by Realm, and is published here with the permission of the conference organizers. Everyone knows how to create simple animations, but what if you want to create awesomely fantastically beautiful animations? Marin Todorov, a team member of raywenderlich.com, shows what you can a
※ すべてのコードを載せると量が多くなってしまうので、ポイントを絞って説明します。 ※ すべて見たい方はGitHubを参照してください。 ポイントを簡潔にまとめると以下のようになります。 遷移の始まりと終わりの円のCGPathを取得する 遷移先のUIViewControllerのview.layer.maskにCAShapeLayerを代入する 取得したCGPathを使ってアニメーションを実行する 画面遷移のアニメーションの実装には、UIViewControllerAnimatedTransitioningを使っています。 遷移の始まりと終わりの円のCGPathを取得する // 画面全体を覆う円の半径 let radius = { () -> CGFloat in // centerはタップしたCGPoint let x = max(self.center.x, containerView
殿堂入り Realm Core Dataなんて最後に使ったのはいつだろうか。。。 Alamofire SwiftyJSON 通信ライブラリAlamofireのブロック構文に、JSONをより扱いやすくするSwiftyJSONをぶっこむ。 最近SwiftyJSONの仕様が変わってイマイチになったが、Swiftバージョン2.0でguard構文が追加されるので、guardで宣言するときに使いやすくなるかも。 SDWebImage みんな知ってる画像キャッシュライブラリ。 UI paper switch スイッチのON/OFFで色をアニメーション付きで変更する。 SCLAlertView フラットなアラート LTMorphingLabel 文字をモーフィング(アニメーション)させる MMPopLabel ポップラベル。Slackの立ちあげ時とかに出てくるアプリケーションのチュートリアルとかに使う。(
Spring ★431 手軽にアニメションが行えるライブラリです。SrotyBoardからアニメションの設定を行えるのがいいですね。 インストール Xcodeに手動でドロップします。 サンプルコード アニメションのコードはとってもシンプルです。 26種類のアニメションパターンを設定できます。 shake pop morph squeeze wobble swing flipX flipY fall squeezeLeft squeezeRight squeezeDown squeezeUp slideLeft slideRight slideDown slideUp fadeIn fadeOut fadeInLeft fadeInRight fadeInDown fadeInUp zoomIn zoomOut flash デモ デモアプリでアニメションの動きを確認できます。 design+
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く