そのUI, まずはCocoa Controlsで探してみよう
iOS Advent Calendar 9日目担当のntakuです。
もし、iOS開発する上で一番大変なことはなんですか？と聞かれれば間違いなくUIの開発！と答えます。同じ価値や機能を提供するにしても、使っていて気持ちが良いUIであるかどうかでアプリの評価は大きく変わってくると思います。
何がベストなのか、はやはり実際にプロトタイプを作ってみないと分からないわけですが、あのアプリのUIをちょっと真似してみようと思ったり、このアプリと同じように作ってくださいと言われるとそれだけで数日かかってしまうこともざらにあります。
そんなことを繰り返していると中々アプリが完成しないわけなのですが、その期間を少しでも短縮するために、私が開発する際に活用しているのがCocoa Controlsというサイトです。
Cocoa Controls
Cocoa ControlsはiOSやMax OS X開発者が開発したUIコンポーネントが大量に登録されているありがたいサイトです。現在、iOS用のコンポーネントが330弱、Mac OS X用が50弱登録されています。
実際のソースはGithubなどにアップされているため、いわゆるリンク集のようなものなのですが、あのUIってどうやって実装しているのかなあと思っていたものが見つかったりして見ているだけでも楽しめます。
今回は330弱あるiOS用コンポーネントの中から厳選していくつかご紹介します。
○○風なUI
まずはiPad版のtwitter。
複数ありますがどれも期待通りに動作します。
"StackScrollView project is a demo app for creating view like twitter app for ipad, created by the mobile development team at raw engineering. It supports: Orientation (both Landscape & Portrait), Swipe Gestures, Bouncing Effect."
評価: 4/5 (12人)
"Open source implementation of Twitter/iPad stacked ui - done right."
評価: 5/5 (5人)
"CLCascade is a library to create twitter-like UI in iPad apps created by CreativeLabs.pl TEAM."
評価: 4/5 (13人)
次はfacebook。
v4.0から導入されたメニューUIです。
"A simple attempt to create a slide-out menu similar to the Facebook and GMail iOS apps."
評価: 4/5 (3人)
"An iOS objective-c library template for mimic the sidebar layout of the new Facebook app."
評価: 4/5 (14人)
"Menu controller found in Facebook and Path 2.0"
評価: 4/5 (5人)
Flipboard風。
"Magazine Style View/Layout like Flipboard."
評価: 4/5 (11人)
カレンダー
"This project aims to provide an open-source implementation of the month view in Apple's mobile calendar app (MobileCal). When the user taps a day on the calendar, any associated data for that day will be displayed in a table view directly below the calendar."
評価: 4/5 (9人)
"MADayView is a daily view for displaying events."
評価: 5/5 (1人)
メール
最近はやりのグループチャットでも同様のUIが採用されていますね。
この辺を使えばすぐに試せます。
"An open-source version of iPhone's native Messages app."
評価: 5/5 (6人)
"An UITextView which grows/shrinks with the text and starts scrolling when the content reaches a certain number of lines. Similar to the one Apple uses in the SMS-app. See blog-post for a small (outdated) screencast."
評価: 4/5 (9人)
SSMessagesViewController for iOS
"iOS Messages.app style table view controller."
評価: 4/5 (8人)
"An iOS token field based on the behaviour and functionality provided by Mail.app's email recipient field."
評価: 5/5 (4人)
パスコードロック
実装が面倒なパスコードロック。
Best Albumでお世話になりました。
"JSLockScreen is an iOS UI component that replicates iOS's lock screen functionality. It aims to be as close to the original lock screen UI as possible and be easy to use in almost any situation where a lock screen may be required. It is a view controller with delegate based call backs. Implement the delegate methods, create an instance of the lock screen controller and tell it to show in a particular window and the rest is handled for you."
評価: 4/5 (5人)
"This project gives you a drop-in PIN code entry screen that looks like the entry screen seen in Settings.app."
評価: 4/5 (5人)
"ABPadLockScreen aims to provide a simple UI class that provided keypad unlocking functionality for iPad projects. I have tried to make it look as close to a native iPad control as possible (which is tricky when keypads are not provided as a standard iPad control). All you need to do is implement the delegate and datasource methods, create an instance of the class and then display the view how you see fit (either manually or via a modal view) A demo project is provided for your convenience. "
評価: 4/5 (15人)
レビュー誘導
よく見かけるレビュー誘導です。
みんなどうしているのかと思っていたのですが、こういうライブラリを使ってそうです。
"A handy class that prompts users of your iPhone or Mac App Store app to rate your application after using it for a while. Similar to Appirater, but with a simpler, cleaner interface and automatic support for iOS fast application switching."
評価: 5/5 (2人)
"Appirater is a class that you can drop into any iPhone app that will help remind your users to review your app on the App Store."
評価: 4/5 (8人)
写真系
複数写真選択は以外と実装が面倒です。
Best Albumでもこの辺をベースに実装しています。
ELCImagePickerController for iOS
"A clone of the UIImagePickerController using the Assets Library Framework allowing for multiple asset selection."
評価:4/5 (2人)
"PhotoAppLink is an open source library allowing your iOS photo app to launch other participating photo apps while passing along the current image. This will allow users to easily process an image using a combination of multiple photo apps without having to save intermediate images to the camera roll, quitting one app, launching the next, loading up the intermediate image.... Instead the user simply selects a "Send to app" option which presents all compatible apps in a nice interface. The selected app is then launched and the current image is passed along so that the user can keep editing it in that app immediately. This provides a more fluid user interface to the user and encourages the use of compatible apps."
評価: 4/5 (2人)
テキスト処理
テキストの一部の書体を変更するのは結構面倒だと思いますが、この辺りを利用すればさくっとできそうです。
"A rich text view for iOS with basic HTML rendering."
評価: 4/5 (6人)
"Uses AutoHyperlinks code from Adium http://code.google.com/p/maccode/wiki/AutoHyperlinks Project includes an example of how to use the core text view. It's pretty simple - create the view with a 0 height frame, set the attributes, set its text, and then ask it for it's size so that the height is just correct. It will calculate based on the constraining width, and any padding that you set. There is also a Twitter specific subclass that enables @usernames and #hashtags to be linkified. Settable Attributes: textAlignment textColor linkColor highlightedLinkColor fontName fontSize paddingTop paddingLeft backgroundImage bgImageTopStretchCap bgImageLeftStretchCap"
評価: 5/5 (5人)
その他
Pull Refreshもよく見かけます。
ただどうすればリストを更新できるのか分からないという問い合わせが多いので、意外と使い方が分からない人も多いみたいです。
EGOTableViewPullRefresh for iOS
"A similar control to the pull down to refresh control created by atebits in Tweetie 2. "
評価: 5/5 (5人)
"An extension of iOS UIScrollView that allows scrolling of multiple pages, like mobile Safari tab viewer."
評価: 5/5 (6人)
以上、個人的に使ってみたもの、利用検討してみたものをピックアップしてみました。
こういったサンプルを把握しておくと、こういうUIできる？と聞かれたときにできますよ！と即答できるのもよいですね。
みなさんもぜひCocoa Controlsを探索してみてください。
